from mean to the mern stack
TRANSCRIPT
![Page 1: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/1.jpg)
MEAN to MERNWeWork 7 Feb 2017
![Page 2: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/2.jpg)
Troy Miles• Troy Miles aka the RocknCoder
• Over 37 years of programming experience
• Speaker and author
• bit.ly/rc-jquerybook
• @therockncoder
• Now a lynda.com Author!
![Page 3: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/3.jpg)
Build Mobile Apps!
• Develop mobile apps with Ionic and AngularJS
• Learn the Ionic CLI
• Fetch data via ajax
• Deploy your app to Android & iOS
• bit.ly/ionicvideo
![Page 4: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/4.jpg)
![Page 5: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/5.jpg)
![Page 6: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/6.jpg)
![Page 7: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/7.jpg)
![Page 8: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/8.jpg)
Tonight’s Agenda• The MEAN Stack
• Heroku
• MongoDB
• NodeJS + Express
• Angular 2
• The MERN Stack
• MERN.io
• MERN CLI
• Redux + React Router
• Electrode
• Summary
![Page 9: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/9.jpg)
Get Git
• Get is a mandatory tool for using all open source tools
• lots of free tutorials on how to use it
• https://www.codeschool.com/learn/git
• https://git-scm.com/
![Page 10: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/10.jpg)
The MEAN Stack
• MEAN is a free and open-source JavaScript software stack for building dynamic web sites and web applications.
• Term coined by Valeri Karpov
![Page 11: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/11.jpg)
MongoDB
• MongoDB is an open-source, document database designed for ease of development and scaling.
• v3.2
• Initial release - 2009
• https://www.mongodb.org/
![Page 12: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/12.jpg)
Express
• Fast, unopinionated, minimalist web framework for Node.js
• v4.14
• http://expressjs.com/
![Page 13: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/13.jpg)
Angular
• HTML enhanced for web apps!
• v2.2.3
• https://angular.io/
![Page 14: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/14.jpg)
NodeJS
• Node.js® is a platform built on Chrome's V8 JavaScript runtime for easily building fast, scalable network applications.
• v7.2.0
• https://nodejs.org/
![Page 15: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/15.jpg)
Benefits of the MEAN Stack
• Isomorphic JavaScript
• Open Source / Community Driven
• Performance
• Low Cost
![Page 16: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/16.jpg)
Isomorphic JavaScript• One language all the way thru
• Client/Server JavaScript
• JSON as the data transport format
• BSON as the data storage format
• JavaScript to control Mongo DB
![Page 17: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/17.jpg)
Why is JavaScript Beautiful?
• It is a Functional Language - Closer to Lisp and Scheme than Java or C
• First Class Functions
• Dynamic Objects
• Loose Typing
• and more...
![Page 18: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/18.jpg)
ECMAScript VersionsVersion Date
ES1 June 1997
ES2 June 1998
ES3 December 1999
ES4 DOA 2006
ES5 December 2009
ES6/ES2015 June 2015
ES2016 2016
![Page 19: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/19.jpg)
How to use ES6 today?
• Use only the latest browsers
• Use a transpiler: Babel, Traceur, Closure, TypeScript
• Use Node.js
• https://kangax.github.io/compat-table/es6/
![Page 20: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/20.jpg)
Heroku
![Page 21: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/21.jpg)
Installation• Create a free heroku account at:
• https://www.heroku.com
• Download + install heroku toolbelt at:
• https://toolbelt.heroku.com/
• (the account is free, no credit card necessary)
![Page 22: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/22.jpg)
Deploy to Heroku• heroku login
• heroku create <app-name>
• (must be unique)
• git push heroku master
• heroku open
![Page 23: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/23.jpg)
MongoDB
![Page 24: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/24.jpg)
Top DB Engines1. Oracle
2. MySQL
3. MS SQL Server
4. MongoDB
5. PostgreSQL
6. DB2
7. MS Access
8. Cassandra
9. Redis
10.SQLite
![Page 25: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/25.jpg)
Who Uses It?• Craigslist
• eBay
• Foursquare
• SourceForge
• Viacom
• Expedia
• Medtronic
• eHarmony
• CERN
• and more
![Page 26: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/26.jpg)
When to Use Mongo?• Document Database
• High Performance
• High Availability
• Easy Scalability
• Geospatial Data
![Page 27: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/27.jpg)
What is a Document?• An ordered set of keys and values
• Like JavaScript objects
• No duplicate keys allowed
• Type and case sensitive
• Field order is not important nor guaranteed
![Page 28: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/28.jpg)
Node.js
![Page 29: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/29.jpg)
Node v7• Merged with the io.js project, which was at 3.x
• New version of Chrome V8
• Supports ES6
• Faster
• node -v
![Page 30: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/30.jpg)
Node Package Manager
• Or npm for short
• version: npm -v
• upgrade npm: npm install npm -g
• (officially, npm doesn’t stand for anything, anymore)
![Page 31: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/31.jpg)
package.json• required properties (error if missing)
• name & version
• optional properties (warning if missing)
• description, repository, & license
• other properties
• scripts, dependencies, config, etc.
![Page 32: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/32.jpg)
Use Environment Vars
• process.env object holds all environment vars
• Reading: var connect = process.env.connect;
• Writing: process.env.mode = ‘test’;
• NEVER PUT SECRET STUFF IN SOURCE CODE!
![Page 33: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/33.jpg)
Express
![Page 34: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/34.jpg)
Installation
• npm install express-generator -g
• npm install express —save
![Page 35: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/35.jpg)
Angular
![Page 36: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/36.jpg)
Angular 2 main concepts• Component
• Data binding
• Service
• Directive
• Dependency injection
• Module
![Page 37: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/37.jpg)
Metadata
• Metadata is extra information which gives angular more info
• @Component tells angular the class is a component
• @Directive tells angular the class is a directive
![Page 38: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/38.jpg)
Component• A class with component metadata
• Responsible for a piece of the screen referred to as view.
• Template is a form HTML that tells angular how to render the component.
• Metadata tells Angular how to process a class
![Page 39: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/39.jpg)
Componentimport {Component, OnInit} from 'angular2/core'import {QuizService} from './quiz-service'@Component({ selector: 'quiz', templateUrl: './templates/quiz.html', providers: [QuizService]}) export class QuizComponent implements OnInit { quizList: IQuizList[]; constructor(private _quizService:QuizService) { } ngOnInit() { this.getQuiz(); } getQuiz() { this.quizList = this._quizService.getQuizzes(); } }
![Page 40: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/40.jpg)
Template/View
• Is a way to describe a view using HTML
• Templates can be included with the component
• Or as a URL link to an HTML file
• Best practice is to use an HTML file
![Page 41: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/41.jpg)
Data Binding
C/D Attribute Binding type
—> {{ value }} one-way
—> [property] = “value” property
<— (event) = “handler” event
<—> [(ng-model)] = “property” two-way
![Page 42: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/42.jpg)
Service
• “Substitutable objects that are wired together using dependency injection (DI)”
• Used to share code across an app
• Lazily instantiated
• Angular has no “Service” defined type
![Page 43: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/43.jpg)
Directive• A class with directive metadata
• Two kinds: attribute & structural
• Attribute directives alter the look or behavior of an existing element
• Structural directives alter the layout by adding, removing, and replacing elements in the DOM
• A component is a directive with a view
![Page 44: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/44.jpg)
Directiveimport {Directive, ElementRef, Renderer, Input, OnInit} from 'angular2/core'; @Directive({ selector: '[sizer]'}) export class Sizer implements OnInit { @Input() sizer:string; element:ELementRef; renderer:Renderer; constructor(element:ElementRef, renderer:Renderer) { this.element = element; this.renderer = renderer; } ngOnInit() { this.renderer.setElementStyle(this.element.nativeElement, 'fontSize', this.sizer + '%'); } }
![Page 45: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/45.jpg)
Component + Directiveimport {Directive, Component, ElementRef, Renderer} from ‘@angular/core'; import {Sizer} from './sizer'@Component({ selector: 'my-app', providers: [], template: ` <div> <p [sizer]="200">Butter{{name}}</p> </div> `, directives: [Sizer]}) export class App { constructor() { this.name = 'Monkey' } }
![Page 46: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/46.jpg)
Dependency Injection• A way to supply a new instance of a class with the
fully-formed dependencies it needs
• Most dependencies are services
• Angular know which services a components by looking at the types of its constructor parameters
• Services are injected by an Injector which uses a Provider to create the service
![Page 47: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/47.jpg)
Module
• Modules are optional but a best practice
• export tells TypeScript that the resource is a module available for other modules
• import tells TypeScript the resource in a module
• Angular ships a collection library modules
![Page 48: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/48.jpg)
Webpack
![Page 49: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/49.jpg)
Webpack?
• Module bundler
• Replaces System.JS
• Works with JS, CSS, and HTML
• Minifies, concatenates, and bundles
![Page 50: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/50.jpg)
The MERN Stack
• Keep Mongo, Express, and Node
• Replace Angular with React
• HashNode create mern-cli to scaffold a mern app
• http://mern.io/
![Page 51: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/51.jpg)
MERN CLI• A scaffolding tool to minimize setup time
• npm install -g mern-cli
• mern init <app_name>
• cd <app_name>
• npm install
• npm start
![Page 52: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/52.jpg)
mern commandsCommand Purpose
mern init <name> initialize a MERN app
mern list List MERN variants
mern search <term> Search for a variant
mern info <term> View details of a variant
merng generates a component
![Page 53: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/53.jpg)
npm commandsCommand Purpose
npm run start start dev servernpm run bs bundles, starts prodnpm run test starts test runnernpm run watch:test starts test runner in watchnpm run coverage generates coverage reportnpm run lint runs linter
![Page 54: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/54.jpg)
generator commandsCommand Purpose
dumb-s <name> dumb comp in shared
dumb-m <name> dump comp in module
functional-s <name> functional comp in shared
functional-m <name> functional comp in module
module <name> create a module
![Page 55: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/55.jpg)
React
• A JavaScript library for building UIs
• Created by Facebook & Instagram
• Initial release March 2013
• Highly recommend reading their license
![Page 56: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/56.jpg)
React
• Virtual DOM
• One-way data flow
• JSX - JavaScript eXtension allows in HTML generation
• Component-based
![Page 57: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/57.jpg)
Flux
• A pattern for managing data flow in your app
• One way data flow
• 4 main parts: Dispatcher, Store, Action, & View
![Page 58: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/58.jpg)
The 4 main parts
• Dispatcher: receives actions & dispatches them to stores
• Store: holds the data of an app
• Action: define app’s internal API
• View: displays the data from stores
![Page 59: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/59.jpg)
![Page 60: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/60.jpg)
Redux• A predictable state container for JS apps
• Works well with React Native
• An alternative to & inspired by Flux
• Single store for the entire app
• Makes it easier to hot-load your app
![Page 61: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/61.jpg)
React Router
• A complete routing library for React
• Keeps UI in sync with URL
![Page 62: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/62.jpg)
Links• https://www.mongodb.org/
• http://expressjs.com/
• https://angular.io/
• https://nodejs.org/
• http://mongoosejs.com/
• https://www.heroku.com/
![Page 63: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/63.jpg)
Links• https://facebook.github.io/react/
• https://facebook.github.io/flux/docs/overview.html
• https://github.com/reactjs/react-redux
• https://github.com/ReactTraining/react-router
• http://mern.io/
• http://www.electrode.io/
![Page 64: From MEAN to the MERN Stack](https://reader031.vdocument.in/reader031/viewer/2022021506/58a2953e1a28ab36508b63a5/html5/thumbnails/64.jpg)
Summary• React is easier to learn than Angular
• When you add in parts like Redux, Flux and React Router, React is more complex than angular
• In the end choose what is best for you and your team
• Don’t give in to dogma