Building a Startup Stack with AngularJS

BUILDING A STARTUP STACK
WITH ANGULARJS
Copyright 2013 rangle.io and NickVanWeerdenburg
Saturday, 28 September, 13

WITH ANGULAR JS

WITH ANGULARJS HTML 5

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 ﬁt
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
SQL
DB
data services
authentication
integration
payment
gateways
client
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
HTML
dynamic page
elements
data
query,
format,
layout

data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services client
HTML
templating
and
routing
authentication
integration
payment
gateways

data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
HTML
templating
and
routing
authentication
integration
payment
gateways

data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
HTML
authentication
integration
payment
gateways

data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
authentication
integration
payment
gateways

data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services
authentication
integration
payment
gateways

data
query,
format,
layout
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services
authentication
integration
payment
gateways

SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services
authentication
integration
payment
gateways

SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services
authentication
integration
payment
gateways

SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
data services
authentication
integration
payment
gateways
data
query

SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
services
authentication
integration
payment
gateways
data
query

SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
authentication
integration
payment
gateways
data
query

BROWSER-CENTRIC +
SERVICES
noSQL
DB
services
data
queryauthentication
integration
payment
gateways
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic page
elements
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-STACK
Best-Practice, Canonical Stack Building From First
Principles

MEAN Process Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
Recipes, Not Seeds

CREATINGYOUR DEFAULT
PROJECT STACK
AngularJS + REST + API Server + MongoDB
for 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.5
NPM
Yeoman
Bower
Yo
Grunt
Mongo
Git
Sublime 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://LOCALHOST:3000
EXPRESS IS RUNNING

Y to overwrite .gitignore
STEP 2:YO ANGULAR
mv 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 server
browser should popup to default
modify LiveReload port in
Gruntﬁle.js if error regarding
35729 port
grunt test
run unit tests

app/ will be static public folder
INTEGRATE ANGULAR &
NODE
merge package.json ﬁles 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/styles
rm -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 environments
app.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 ‘/’ route
app.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 only
if ('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 precedence
app.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 loadﬁles
touch loadﬁles/{users.csv,projects.csv,time.csv}

TIP rapidly create simple seed csv data
SOME QUICK SEED DATA
users.csv
user_id,username,email,password,role
1,nick,nick@rangle.io,cm,admin
2,bob,bob@rangle.io,cm,user
tasks.csv
project_id,task,description
1,build tim, build tim incrementally with github,16
2,add blogging to rangle.io,ﬁnish deploy anglePress,2
projects.csv
project_id,name,description
1,tim,a great time tracker
2,anglePress,a crazy AngularJS blog
3,rangle.io,my website

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

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

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 ﬁle 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 ﬁrst!
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: Conﬁguring 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 nick@rangle.io )

RELATED EVENTS
Wed. Oct. 9 7pm MongoDB Meetup: Building
Reporting Services Using REST and Node
for Web Applications Using MongoDB
http://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 Apps
http://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 Conference
http://www.linkedin.com/groups?gid=5164389 “StackFest 2013”

THANKYOU!
NickVan Weerdenburg
nick@rangle.io
twitter: @rangleio
http://rangle.io

Building a Startup Stack with AngularJS

More Related Content

What's hot (20)

Similar to Building a Startup Stack with AngularJS (20)

More from FITC (20)

Recently uploaded (20)

Building a Startup Stack with AngularJS