MEAN Stack Warm-up

MEAN Stack Warmup
PeopleSpace 29 Nov 2016

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!

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

Affordable JavaScript Weekend
Workshops @PeopleSpace
• MEAN Stack / Jan 28 + 29 
Create Full Stack Web Apps in JavaScript
• Intro to React / Feb 18 + 19 
Deep dive into the Super Popular Library for Build
UIs
• Angular 2 / Mar 11 + 12  
A Deep Dive into the Latest Version of the Popular
Front End Framework by Google

20% off 24 Hours Only
code: ROCKNCODER20
Expires 11/30/2016
meanstackweekend.eventbrite.com

Tonight’s Agenda
• What is the MEAN Stack?
• Heroku
• MongoDB
• NodeJS + Express
• Angular 2
• Some code

What is 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

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

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

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

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/

Git + GitHub
• Free and open source distributed version control
system
• v2.8
• https://git-scm.com/
• https://github.com/

Beneﬁts of the MEAN Stack
• Isomorphic JavaScript
• Open Source / Community Driven
• Performance
• Low Cost

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

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

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

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/

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)

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

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

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

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

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

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

Node Package Manager
• Or npm for short
• version: npm -v
• upgrade npm: npm install npm -g

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

Using Environment Vars
• process.env object holds environment vars
• Reading: var dbConnect =
process.env.dbConnect;
• Writing: process.env.mode = ‘test’;

Installation
• npm install express-generator -g
• express <app name>
• cd <app name>
• npm install
• npm start

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

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

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

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(); 
} 
}

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 ﬁle
• Best practice is to use an HTML ﬁle

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

Service
• “Substitutable objects that are wired together using
dependency injection (DI)”
• Used to share code across an app
• Lazily instantiated
• Angular has no “Service” deﬁned type

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

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 + '%'); 
} 
}

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' 
} 
}

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

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

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

Summary
• The MEAN Stack build web apps and APIs
• It is composed of four main components
• Allows development in JavaScript throughout

MEAN Stack Warm-up

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to MEAN Stack Warm-up (20)

More from Troy Miles (20)

Recently uploaded (20)

MEAN Stack Warm-up