MEAN Weekend Saturday

MEAN WeekendLocalism, Long Beach CA Saturday, 8 August 2015

Troy MilesTroy Miles aka the RocknCoder

Over 35 years of programming experience

Wrote a few games for Interplay in the 80's and 90’s

Speaker and writer on all things web & mobile

[email protected]

@therockncoder

Upcoming Talks

8/13 - JavaScript & jQuery LA - Ionic Framework

9/27 - Angular Summit - Boston - Ionic Framework

10/8 - Online Lunch & Learn - Angular 2.0

http://bit.ly/rockncoder

Saturday’s Agenda

Install Node/NPM

Install MongoDB

Install Express (via npm)

Install Bootstrap (via npm)

Create our first node app

Create our first express app

Add mongo/mongoose

deploy to Heroku

Sunday’s Agenda

Quick summary of Saturday

Add Angular to our web

Add REST API

Add authentication

Deploy finished webapp to Heroku

What is the MEAN Stack?

MongoDB

Agility, scalability, performance. Pick three.

v3.0.5

https://www.mongodb.org/

Express

Fast, unopinionated, minimalist web framework for Node.js

v4.13.3

http://expressjs.com/

Angular

HTML enhanced for web apps!

v1.4.3

https://angularjs.org/

Node.js

Node.js® is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications.

v0.12.7

https://nodejs.org/

Angular 2.0

Angular is a development platform for building mobile and desktop web applications

v2.0.0-ALPHA

https://angular.io/

Benefits of MEAN Stack

One language from front to back

Can build entire webapp yourself

If on a team, members can move around easily

JavaScript Refresh

Why JavaScript is Hard?

Most Engineers Don’t Bother to Learn It

It is Changed not Embraced

The Page Load Has Protected You

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

Keywords

JavaScript has Surprisingly Few Keywords (only 26 to be exact)

break, case, catch, continue, debugger, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while, with

Keywords Not Used

class, enum, export, extends, import, super, implements, interface, let, package, private, protected, public, static, yield

Keywords Not UsedCan’t be used as variables or parameters

But can be used Properties or Keys

Legal Uses: a.importa["import"]a = { import: "test" }

Illegal Use:function import() {}

parseInt

parseInt Has Built-in Support for Octal

It Can Cause Subtle Bugs

Always Use the Optional 2nd Parameter, Base

typeof

Returns a string that identifies a type

Unfortunately it is broken in subtle ways

For-In

Lots of C# and Java Mistake This For-Each

Doesn’t work the same

Order isn’t guaranteed

Slow

0.1 + 0.2 !== 0.3

JavaScript has No Separate Types for Integer and Floating Point

Uses IEEE 754

Not Very Accurate

Coercion

Attempts to Force Two Variables to Be the Same Type

Unfortunately the Results are Illogical

Always Use === and !==

Never Use == or !=

Hoisting

JavaScript is Function Scoped

Variable have Two Creation Steps, Declaration & Assignment

Variables always Declared at the beginning of a Function

Objects literals

var empty = {};var full = { “first-name”: “Alan”, “last-name”: “Turing” };

Arrays & ObjectsArrays Are Not True Arrays

Sort of Special Kind of Object Literal

Both Can Mix Types

Not The Same Though

Arrays Inherit From Array.prototype

Objects Inherit From Object.prototype

JavaScript Objects

JavaScript Objects are Always Dynamic

New Properties Can Always Be Assigned

There Is No Class In JavaScript

– Wikipedia

In computer science, a closure is a function or reference to a function together with a referencing

environment—a table storing a reference to each of the non-local variables (also called free variables) of

that function.

When an inner function has a longer lifetime than its outer function and retains access to the context in

which it was created.

Closure Cautions

Closures Have Access to the Variable, Not a Copy

Closures Can Lead to Memory Leaks

Beware of Unintended Side Effects

Closure Example

JavaScript Summary

Functions

Objects

Closures