Replace Angular with React. Make the move from the MEAN stack to the powerful MERN Stack! Come and learn about the MERN stack. No, that isn't a typo. The MERN stack is Mongo, Express, and Node, with React instead of Angular. While both React and Angular are remarkable JavaScript technologies, React comes with less baggage. There is no TypeScript, no annotations, no bossy framework telling you how to do everything.

1. MEAN to MERN
WeWork 7 Feb 2017

2. Troy Miles
• Troy Miles aka the RocknCoder
• Over 37 years of programming
experience
• Speaker and author
• bit.ly/rc-jquerybook
• rockncoder@gmail.com
• @therockncoder
• Now a lynda.com Author!

3. 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

8. Tonight’s Agenda
• The MEAN Stack
• Heroku
• MongoDB
• NodeJS + Express
• Angular 2
• The MERN Stack
• MERN.io
• MERN CLI
• Redux + React Router
• Electrode
• Summary

9. 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/

10. 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

11. MongoDB
• MongoDB is an open-source, document database
designed for ease of development and scaling.
• v3.2
• Initial release - 2009
• https://www.mongodb.org/

12. Express
• Fast, unopinionated, minimalist web framework for
Node.js
• v4.14
• http://expressjs.com/

13. Angular
• HTML enhanced for web apps!
• v2.2.3
• https://angular.io/

14. 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/

15. Benefits of the MEAN Stack
• Isomorphic JavaScript
• Open Source / Community Driven
• Performance
• Low Cost

16. 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

17. 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...

18. ECMAScript Versions
Version Date
ES1 June 1997
ES2 June 1998
ES3 December 1999
ES4 DOA 2006
ES5 December 2009
ES6/ES2015 June 2015
ES2016 2016

19. 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/

20. Heroku

21. 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)

22. Deploy to Heroku
• heroku login
• heroku create <app-name>
• (must be unique)
• git push heroku master
• heroku open

23. MongoDB

24. Top DB Engines
1. Oracle
2. MySQL
3. MS SQL Server
4. MongoDB
5. PostgreSQL
6. DB2
7. MS Access
8. Cassandra
9. Redis
10.SQLite

25. Who Uses It?
• Craigslist
• eBay
• Foursquare
• SourceForge
• Viacom
• Expedia
• LinkedIn
• Medtronic
• eHarmony
• CERN
• and more

26. When to Use Mongo?
• Document Database
• High Performance
• High Availability
• Easy Scalability
• Geospatial Data

27. 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

28. Node.js

29. Node v7
• Merged with the io.js project, which was at 3.x
• New version of Chrome V8
• Supports ES6
• Faster
• node -v

30. Node Package Manager
• Or npm for short
• version: npm -v
• upgrade npm: npm install npm -g
• (officially, npm doesn’t stand for anything, anymore)

31. package.json
• required properties (error if missing)
• name & version
• optional properties (warning if missing)
• description, repository, & license
• other properties
• scripts, dependencies, config, etc.

32. 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!

33. Express

34. Installation
• npm install express-generator -g
• npm install express —save

35. Angular

36. Angular 2 main concepts
• Component
• Data binding
• Service
• Directive
• Dependency injection
• Module

37. 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

38. 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

39. Component
import {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();
}
}

40. 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

41. Data Binding
C/D Attribute Binding type
—> {{ value }} one-way
—> [property] = “value” property
<— (event) = “handler” event
<—> [(ng-model)] = “property” two-way

42. 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

43. 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

44. Directive
import {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 + '%');
}
}

45. Component + Directive
import {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'
}
}

46. 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

47. 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

48. Webpack

49. Webpack?
• Module bundler
• Replaces System.JS
• Works with JS, CSS, and HTML
• Minifies, concatenates, and bundles

50. The MERN Stack
• Keep Mongo, Express, and Node
• Replace Angular with React
• HashNode create mern-cli to scaffold a mern app
• http://mern.io/

51. 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

52. mern commands
Command 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

53. npm commands
Command Purpose
npm run start start dev server
npm run bs bundles, starts prod
npm run test starts test runner
npm run watch:test starts test runner in watch
npm run coverage generates coverage report
npm run lint runs linter

54. generator commands
Command 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

55. React
• A JavaScript library for building UIs
• Created by Facebook & Instagram
• Initial release March 2013
• Highly recommend reading their license

56. React
• Virtual DOM
• One-way data flow
• JSX - JavaScript eXtension allows in HTML
generation
• Component-based

57. Flux
• A pattern for managing data flow in your app
• One way data flow
• 4 main parts: Dispatcher, Store, Action, & View

58. 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

60. 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

61. React Router
• A complete routing library for React
• Keeps UI in sync with URL

62. Links
• https://www.mongodb.org/
• http://expressjs.com/
• https://angular.io/
• https://nodejs.org/
• http://mongoosejs.com/
• https://www.heroku.com/

63. 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/

64. 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