BUILDING A STARTUP STACK
WITH ANGULARJS
Copyright 2013 rangle.io and NickVanWeerdenburg
Saturday, 28 September, 13
Saturday, 28 September, 13
Saturday, 28 September, 13
BUILDING A STARTUP STACK
WITH ANGULAR JS
Copyright 2013 rangle.io and NickVanWeerdenburg
Saturday, 28 September, 13
BUILDING A STARTUP STACK
WITH ANGULARJS HTML 5
Copyright 2013 rangle.io and NickVanWeerdenburg
Saturday, 28 September, 13
BUILDING A STARTUP STACK
WITH ANGULARJS
Copyright 2013 rangle.io and NickVanWeerdenburg
Saturday, 28 September, 13
Saturday, 28 September, 13
The MEAN Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
Saturday, 2...
KEY POINT
Build an app with a
SPA framework and
a JSON datastore,
and PHP (or Rails)
become a poor fit
for most business
ca...
SERVER-CENTRIC WEB
APPLICATION
SQL
DB
data services
authentication
integration
payment
gateways
client
templating
and
rout...
data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
h
t
t
p
q
u
e
r
y JavaScript
HTML
dy...
data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e...
data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e...
data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e...
data
query,
format,
layout
SQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e...
data
query,
format,
layout
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
...
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
data
query
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HT...
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic ...
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic ...
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic ...
SQL
DB
noSQL
DB
BROWSER-CENTRIC WEB
APPLICATION
services
templating
and
routing
h
t
t
p
q
u
e
r
y JavaScript
HTML
dynamic ...
BROWSER-CENTRIC +
SERVICES
noSQL
DB
services
data
queryauthentication
integration
payment
gateways
templating
and
routing
...
THE NEW STACK: NOT JUST
BUZZ
All 3 tiers have changed!
Client -> Browser-Centric MV* JS
Server -> Thin-Server, REST, Event...
Saturday, 28 September, 13
http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic-
JavaScript-MVW-Framework.htm
Saturday, 28...
THE SOLUTION?
Seed projects are sprouting like weeds.They all suck.
Saturday, 28 September, 13
INTRODUCING...
Saturday, 28 September, 13
THE META-STACK
Best-Practice, Canonical Stack Building From First
Principles
Saturday, 28 September, 13
MEAN Process Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
Recipes...
CREATINGYOUR DEFAULT
PROJECT STACK
AngularJS + REST + API Server + MongoDB
for a project called tim
Saturday, 28 September...
CHECKLIST
nodejistu account created
mongolab account created or mongodb installed
locally
node, npm, yo, bower at the righ...
THE STARTING STACK
Node 0.10.5
NPM
Yeoman
Bower
Yo
Grunt
Mongo
Git
Sublime Text 2 and Webstorm
Saturday, 28 September, 13
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 (default...
npm install, node app
BASIC EXPRESS PROJECT
npm install
node app
“open http://localhost:
3000” to view
Saturday, 28 Septem...
HTTP://LOCALHOST:3000
EXPRESS IS RUNNING
Saturday, 28 September, 13
Y to overwrite .gitignore
STEP 2:YO ANGULAR
mv package.json package.json.express
yo angular
Y for Bootstrap, N for Compass...
NOTE: This isn’t using Express yet
TEST ANGULAR
grunt server
browser should popup to default
modify LiveReload port in
Gru...
app/ will be static public folder
INTEGRATE ANGULAR &
NODE
merge package.json files and
rm package.json.express
optional: r...
mv public/stylesheets app/styles
rm -Rf public
vi app.js # see next slide
MERGE PUBLIC TO APP
Saturday, 28 September, 13
replace ‘public’ with ‘app’ in two places,
(also update your cookieParser)
EDIT APP.JS TO POINT TO APP/
Saturday, 28 Septe...
Precedence is key for Express- it’s an
HTTP pipeline
EXPRESS APP.JS
// all environments
app.set('port', process.env.PORT |...
ANGULAR TIP: having the right API is
essential to easy Angular dev
BUILD SIMPLE API
npm install winston mongoose passport ...
TIP rapidly create simple seed csv data
SOME QUICK SEED DATA
users.csv
user_id,username,email,password,role
1,nick,nick@ra...
TIP add --drop if you want to drop prior data
IMPORT INITIAL DATA
mongoimport -d tim -c users --type csv --headerline user...
curl http://localhost:3000/users
API TESTING WITH CURL
a quick test returns our
user data
curl http://.../users/1 fails
du...
ANGULAR TIP the app routing will be fairly
similar to this
NOW ROUTE OTHER API
CALLS
Add the following to app.js:
app.get(...
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=...
TIP focus on jasmine-node for API server
JASMINE-NODE
Jasmine for node by Misko Hevery
https://github.com/mhevery/jasmine-...
ANGULAR TIP refactor your file structure
like you do your code
RECAP
We’ve created the simplest Mongo + Node + Express +
An...
THE STACK SUMMARY
Saturday, 28 September, 13
THE MEAN STACK
Core Stack
Node for the application server
Npm for the package management
MongoDB for the database
Process
...
THE SERVER STACK
Express for the web framework
Passport for authentication
Winston for logging
Mongoose for the MongoDB ac...
THE ANGULARJS STACK
AngularJS
Bootstrap
Angular-UI
Angular-Grid
underscore.js
d3.js
AVOID jQuery where possible, wrap in d...
CONNECTING NODE TO ANGULAR
test the API with curl first!
version your API if 3rd party integrations, or rapid
development f...
TWO ESSENTIAL BOOKS
Saturday, 28 September, 13
RELATED RESOURCES
Free eBook: Configuring the MEAN Stack for
Development
Free eBook: Building a Startup Stack with
AngularJ...
Saturday, 28 September, 13
RELATED EVENTS
Wed. Oct. 9 7pm MongoDB Meetup: Building
Reporting Services Using REST and Node
for Web Applications Using ...
THANKYOU!
NickVan Weerdenburg
nick@rangle.io
twitter: @rangleio
http://rangle.io
Saturday, 28 September, 13
Upcoming SlideShare
Loading in...5
×

Building a Startup Stack with AngularJS

25,818

Published on

Presented at SCREENS 2013 in Toronto.
Details at fitc.ca/screens
with Nick Van Weerdenburg

AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.

Published in: Technology, Design

Building a Startup Stack with AngularJS

  1. 1. BUILDING A STARTUP STACK WITH ANGULARJS Copyright 2013 rangle.io and NickVanWeerdenburg Saturday, 28 September, 13
  2. 2. Saturday, 28 September, 13
  3. 3. Saturday, 28 September, 13
  4. 4. BUILDING A STARTUP STACK WITH ANGULAR JS Copyright 2013 rangle.io and NickVanWeerdenburg Saturday, 28 September, 13
  5. 5. BUILDING A STARTUP STACK WITH ANGULARJS HTML 5 Copyright 2013 rangle.io and NickVanWeerdenburg Saturday, 28 September, 13
  6. 6. BUILDING A STARTUP STACK WITH ANGULARJS Copyright 2013 rangle.io and NickVanWeerdenburg Saturday, 28 September, 13
  7. 7. Saturday, 28 September, 13
  8. 8. The MEAN Stack Web dev framework for NodeJS Superheroic frontend framework Event-based concurrency environment Saturday, 28 September, 13
  9. 9. 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 Saturday, 28 September, 13
  10. 10. 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 Saturday, 28 September, 13
  11. 11. 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 Saturday, 28 September, 13
  12. 12. 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 client HTML templating and routing authentication integration payment gateways Saturday, 28 September, 13
  13. 13. 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 client HTML authentication integration payment gateways Saturday, 28 September, 13
  14. 14. 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 client authentication integration payment gateways Saturday, 28 September, 13
  15. 15. 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 Saturday, 28 September, 13
  16. 16. 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 Saturday, 28 September, 13
  17. 17. 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 Saturday, 28 September, 13
  18. 18. 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 Saturday, 28 September, 13
  19. 19. 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 Saturday, 28 September, 13
  20. 20. 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 Saturday, 28 September, 13
  21. 21. 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 Saturday, 28 September, 13
  22. 22. 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 Saturday, 28 September, 13
  23. 23. 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 Saturday, 28 September, 13
  24. 24. Saturday, 28 September, 13
  25. 25. http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic- JavaScript-MVW-Framework.htm Saturday, 28 September, 13
  26. 26. THE SOLUTION? Seed projects are sprouting like weeds.They all suck. Saturday, 28 September, 13
  27. 27. INTRODUCING... Saturday, 28 September, 13
  28. 28. THE META-STACK Best-Practice, Canonical Stack Building From First Principles Saturday, 28 September, 13
  29. 29. MEAN Process Stack Web dev framework for NodeJS Superheroic frontend framework Event-based concurrency environment Recipes, Not Seeds Saturday, 28 September, 13
  30. 30. CREATINGYOUR DEFAULT PROJECT STACK AngularJS + REST + API Server + MongoDB for a project called tim Saturday, 28 September, 13
  31. 31. CHECKLIST nodejistu account created mongolab account created or mongodb installed locally node, npm, yo, bower at the right versions git installed Saturday, 28 September, 13
  32. 32. THE STARTING STACK Node 0.10.5 NPM Yeoman Bower Yo Grunt Mongo Git Sublime Text 2 and Webstorm Saturday, 28 September, 13
  33. 33. NPM PACKAGES Update package.json: mongoose winston run “npm install” Future one-off packages: npm install mongoose --save Saturday, 28 September, 13
  34. 34. 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) Saturday, 28 September, 13
  35. 35. npm install, node app BASIC EXPRESS PROJECT npm install node app “open http://localhost: 3000” to view Saturday, 28 September, 13
  36. 36. HTTP://LOCALHOST:3000 EXPRESS IS RUNNING Saturday, 28 September, 13
  37. 37. 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) Saturday, 28 September, 13
  38. 38. NOTE: This isn’t using Express yet TEST ANGULAR grunt server browser should popup to default modify LiveReload port in Gruntfile.js if error regarding 35729 port grunt test run unit tests Saturday, 28 September, 13
  39. 39. 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 Saturday, 28 September, 13
  40. 40. mv public/stylesheets app/styles rm -Rf public vi app.js # see next slide MERGE PUBLIC TO APP Saturday, 28 September, 13
  41. 41. replace ‘public’ with ‘app’ in two places, (also update your cookieParser) EDIT APP.JS TO POINT TO APP/ Saturday, 28 September, 13
  42. 42. 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. Saturday, 28 September, 13
  43. 43. 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} Saturday, 28 September, 13
  44. 44. 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,finish 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 Saturday, 28 September, 13
  45. 45. 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 Saturday, 28 September, 13
  46. 46. 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 Saturday, 28 September, 13
  47. 47. 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); Saturday, 28 September, 13
  48. 48. 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 Saturday, 28 September, 13
  49. 49. 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/ Saturday, 28 September, 13
  50. 50. 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 Saturday, 28 September, 13
  51. 51. THE STACK SUMMARY Saturday, 28 September, 13
  52. 52. 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) Saturday, 28 September, 13
  53. 53. 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 Saturday, 28 September, 13
  54. 54. THE ANGULARJS STACK AngularJS Bootstrap Angular-UI Angular-Grid underscore.js d3.js AVOID jQuery where possible, wrap in directives when needed Saturday, 28 September, 13
  55. 55. 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 Saturday, 28 September, 13
  56. 56. TWO ESSENTIAL BOOKS Saturday, 28 September, 13
  57. 57. 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 nick@rangle.io ) Saturday, 28 September, 13
  58. 58. Saturday, 28 September, 13
  59. 59. 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” Saturday, 28 September, 13
  60. 60. THANKYOU! NickVan Weerdenburg nick@rangle.io twitter: @rangleio http://rangle.io Saturday, 28 September, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×