building a startup stack with angularjs (nick van weerdenburg at rangle.io)

BUILDING A STARTUP STACK WITH ANGULARJS

Copyright 2013 rangle.io and Nick Van Weerdenburg

Saturday, 28 September, 13

BUILDING A STARTUP STACK WITH ANGULAR JS



BUILDING A STARTUP STACK WITH ANGULARJS HTML 5



BUILDING A STARTUP STACK WITH ANGULARJS



The MEAN Stack

Web dev framework for NodeJS

Superheroic frontend framework

Event-based concurrency environment


KEY POINT Build an app with a SPA framework and a JSON datastore, and PHP (or Rails) become a poor fit for most business

cases.

In 2005 50% of any web app was JavaScript

In 2013, 70%+ is JavaScript

Last Basecamp: 5K Ruby, 5K Coffeescript, plus HTML and CSS

Modern DBs like Couch and MongoDB speak JavaScript

/PHP|RAILS/ REALITY


SERVER-CENTRIC WEB APPLICATION

SQLDB

data services

authenticationintegrationpaymentgateways

client

templatingand

routing

http

query JavaScript

HTML

HTML

dynamic page elements

dataquery, format, layout



SQLDB

BROWSER-CENTRIC WEB APPLICATION

services

dataquery

http

query JavaScript

HTML


data services client

HTML

templatingand

routing




SQLDB


services

dataquery

templatingand

routing

http

query JavaScript

HTML



HTML

templatingand

routing




SQLDB


services

dataquery

templatingand

routing

http

query JavaScript

HTML



HTML




SQLDB


services

dataquery

templatingand

routing

http

query JavaScript

HTML






SQLDB


services

dataquery

templatingand

routing

http

query JavaScript

HTML


data services




SQLDB

noSQLDB


services

dataquery

templatingand

routing

http

query JavaScript

HTML


data services



SQLDB

noSQLDB


services

templatingand

routing

http

query JavaScript

HTML


data services



SQLDB

noSQLDB


services

templatingand

routing

http

query JavaScript

HTML


data services


dataquery


SQLDB

noSQLDB


services

templatingand

routing

http

query JavaScript

HTML


services


dataquery


SQLDB

noSQLDB


services

templatingand

routing

http

query JavaScript

HTML



dataquery


BROWSER-CENTRIC + SERVICES

noSQLDB

servicesdata

queryauthenticationintegrationpaymentgateways

templatingand

routing

http

query JavaScript

HTML


Thin-Server Computing


THE NEW STACK: NOT JUST BUZZ

All 3 tiers have changed!

Client -> Browser-Centric MV* JS

Server -> Thin-Server, REST, Event

Database -> Document, web-centric


http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-JavaScript-MVW-Framework.htm






THE SOLUTION?Seed projects are sprouting like weeds. They all suck.


INTRODUCING...


THE META-STACKBest-Practice, Canonical Stack Building From First

Principles


MEAN Process Stack

Web dev framework for NodeJS

Superheroic frontend framework

Event-based concurrency environment

Recipes, Not SeedsSaturday, 28 September, 13

CREATING YOUR DEFAULT PROJECT STACK

AngularJS + REST + API Server + MongoDBfor a project called tim


CHECKLIST

nodejistu account created

mongolab account created or mongodb installed locally

node, npm, yo, bower at the right versions

git installed


THE STARTING STACK

Node 0.10.5NPM

YeomanBowerYoGrunt

MongoGitSublime Text 2 and Webstorm


NPM PACKAGES

Update package.json:

mongoose

winston

run “npm install”

Future one-off packages:

npm install mongoose --save


cd tim && express -s -c less(ignore destination not empty)

STEP 1: EXPRESS

express --help

-s --sessions

-e --ejs (defaults to jade)

-j --jshtml (defaults to jade)

-c --css (less|stylus) (defaults to plain css)


npm install, node app

BASIC EXPRESS PROJECT

npm install

node app

“open http://localhost:3000” to view


http://localhots:3000




HTTP://LOCALHOST:3000 EXPRESS IS RUNNING


http://localhost:3000

http://localhost:3000

Y to overwrite .gitignore

STEP 2: YO ANGULARmv package.json package.json.express

yo angular

Y for Bootstrap, N for Compass, Return for 3 options (arrows and space to unselect)


NOTE: This isn’t using Express yet

TEST ANGULAR

grunt serverbrowser should popup to default

modify LiveReload port in Gruntfile.js if error regarding 35729 port

grunt testrun unit tests


app/ will be static public folder

INTEGRATE ANGULAR & NODE

merge package.json files and rm package.json.express

optional: rm app/favicon.ico

this is yeoman icon- removing it defaults app to express icon


mv public/stylesheets app/stylesrm -Rf public

vi app.js # see next slide

MERGE PUBLIC TO APP


replace ‘public’ with ‘app’ in two places,(also update your cookieParser)

EDIT APP.JS TO POINT TO APP/


Precedence is key for Express- it’s an HTTP pipeline

EXPRESS APP.JS// all environmentsapp.set('port', process.env.PORT || 3000);app.set('views', __dirname + '/views');app.set('view engine', 'jade');app.use(express.favicon());app.use(express.logger('dev'));app.use(express.bodyParser());app.use(express.methodOverride());app.use(express.cookieParser('rangle your secret here'));app.use(express.session());// app.use(app.router); // ...OR move after use express.static OR comment out ‘/’ routeapp.use(require('less-middleware')({ src: __dirname + '/app' }));app.use(express.static(path.join(__dirname, 'app')));// NOTE: with app.router comment out express.static is first// route handler and gets priority over app.get below.

// development onlyif ('development' == app.get('env')) { app.use(express.errorHandler());}

// NOTE: if app,route isn’t set explicitly above the first route// definition automatically loads it. Since this is after use// express.static the Angular app/ directory has precedenceapp.get('/', routes.index);app.get('/users', user.list);

add cookieParser secret

replace “public” with “app”

comment out ‘/’ node to route to enable Angular to load via static mounting of app OR make sure static mount has precedence over router.


ANGULAR TIP: having the right API is essential to easy Angular dev

BUILD SIMPLE API

npm install winston mongoose passport passport-local --save

mkdir lib

touch lib/{log.js,db.js,user.js}

mkdir loadfiles

touch loadfiles/{users.csv,projects.csv,time.csv}


TIP rapidly create simple seed csv data

SOME QUICK SEED DATA

users.csvuser_id,username,email,password,role1,nick,[email protected],cm,admin2,bob,[email protected],cm,user

tasks.csvproject_id,task,description1,build tim, build tim incrementally with github,162,add blogging to rangle.io,finish deploy anglePress,2

projects.csvproject_id,name,description1,tim,a great time tracker2,anglePress,a crazy AngularJS blog3,rangle.io,my website


mailto:[email protected]




TIP add --drop if you want to drop prior data

IMPORT INITIAL DATA

mongoimport -d tim -c users --type csv --headerline users.csv

mongoimport -d tim -c projects --type csv --headerline projects.csv

mongoimport -d tim -c tasks --type csv --headerline tasks.csv


curl http://localhost:3000/users

API TESTING WITH CURL

a quick test returns our user data

curl http://.../users/1 fails due to missing routing


http://localhost:3000/users


ANGULAR TIP the app routing will be fairly similar to this

NOW ROUTE OTHER API CALLS

Add the following to app.js:

app.get('/projects/:id', project.get);

app.post('/projects', project.post);

app.del('/projects', project.del);


ANGULAR TIP add -i at beginning to see headers

TESTING API

curl http://127.0.0.1:3000/users/1

curl -d “user_id=5&username=joe&password=fresh” http://127.0.0.1:3000/users

curl -X DELETE http://127.0.0.1:3000/users/5


http://localhost:3000/users/1

http://localhost:3000/users/1



http://127.0.0.1:3000/users/5

http://127.0.0.1:3000/users/5

TIP focus on jasmine-node for API server

JASMINE-NODE

Jasmine for node by Misko Hevery

https://github.com/mhevery/jasmine-node

NOT Angular testing but for API and library code

npm install -g jasmine-node

put test in spec/ directory

jasmine-node --verbose --autotest spec/




ANGULAR TIP refactor your file structure like you do your code

RECAP

We’ve created the simplest Mongo + Node + Express + AngularJS project structure possible

This will need to be refactored as the project grows

We’ve tested each stage

We are testing the API layer independent of AngularJS


THE STACK SUMMARY


THE MEAN STACK

Core Stack

Node for the application server

Npm for the package management

MongoDB for the database

Process

yo for scaffolding

bower for client-side package management (e.g. jQuery, Angular, d3, underscore)

grunt (for build management and automation)


THE SERVER STACK

Express for the web framework

Passport for authentication

Winston for logging

Mongoose for the MongoDB acess

Request for calling other REST APIs

Underscore for JSON wrangling


THE ANGULARJS STACK

AngularJS

Bootstrap

Angular-UI

Angular-Grid

underscore.js

d3.js

AVOID jQuery where possible, wrap in directives when needed


CONNECTING NODE TO ANGULAR

test the API with curl first!

version your API if 3rd party integrations, or rapid development for SaaS

return clear meaningful API codes

implement a $http interceptor for 401 (unauthorized codes) and prompt user to log in, and then retry the original call (see book recommendations at end)

secure the API server-side - then it doesn’t matter what shennanigans a user does in the browser

If you have really strong security needs, get an API review


TWO ESSENTIAL BOOKS


RELATED RESOURCES

Free eBook: Configuring the MEAN Stack for Development

Free eBook: Building a Startup Stack with AngularJS

To receive these when out next month, simply register on our mailing list ( bottom of http://rangle.io homepage, or email me at [email protected] )


http://rangle.io

http://rangle.io



RELATED EVENTSWed. Oct. 9 7pm MongoDB Meetup: Building Reporting Services Using REST and Node for Web Applications Using MongoDBhttp://www.meetup.com/Toronto-MongoDB-User-Group/events/140966402/

Wed. Oct. 16 7pm PhoneGap Meetup: Using AngularJS + PhoneGap to Rapidly Create Cross-Platform, Responsive Web Appshttp://www.meetup.com/PhoneGap-Toronto/events/140441122/

Wed. Oct. 23 - Thurs. Oct 24: Building a Startup Stack with AngularJS (2 day class) http://guestlistapp.com/events/192018

Nov. 2013 - Toronto CTO 1-Day Conferencehttp://www.linkedin.com/groups?gid=5164389 “StackFest 2013”


http://www.meetup.com/Toronto-MongoDB-User-Group/events/140966402/

http://www.meetup.com/Toronto-MongoDB-User-Group/events/140966402/

http://www.meetup.com/PhoneGap-Toronto/events/140441122/

http://www.meetup.com/PhoneGap-Toronto/events/140441122/

http://guestlistapp.com/events/192018

http://guestlistapp.com/events/192018

http://www.linkedin.com/groups?gid=5164389

http://www.linkedin.com/groups?gid=5164389

THANK YOU!Nick Van Weerdenburg

[email protected]: @rangleio

http://rangle.io




http://rangle.io

http://rangle.io

building a startup stack with angularjs (nick van weerdenburg at rangle.io)

Technology