Building a Startup Stack with AngularJS

AngularJS has to connect and operate with many different technologies. Attempts to jumpstart development with seed projects are awkward- you have to delete as much as you gain. In this talk, I discuss building a complete startup stack with generators and recipes based on emerging best practices, resulting in an optimized stack you need, want, and understand.

The talk that goes with this presentation is on the AngularJS Toronto YouTube channel-

http://www.youtube.com/watch?v=w1mJuX-vA0o

Transcript

1. BUILDING A STARTUP STACK WITH ANGULARJS Copyright 2013 rangle.io and Nick Van Weerdenburg Saturday, 28 September, 13
2. Saturday, 28 September, 13
3. Saturday, 28 September, 13
4. BUILDING A STARTUP STACK WITH ANGULAR JS Copyright 2013 rangle.io and Nick Van Weerdenburg Saturday, 28 September, 13
5. BUILDING A STARTUP STACK WITH ANGULARJS HTML 5 Copyright 2013 rangle.io and Nick Van Weerdenburg Saturday, 28 September, 13
6. BUILDING A STARTUP STACK WITH ANGULARJS Copyright 2013 rangle.io and Nick Van Weerdenburg Saturday, 28 September, 13
7. Saturday, 28 September, 13
8. The MEAN Stack Web dev framework for NodeJS Superheroic frontend framework Event-based concurrency environment Saturday, 28 September, 13
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. BROWSER-CENTRIC + SERVICES noSQL DB services data query authentication 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. 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. Saturday, 28 September, 13
25. http://www.bennadel.com/blog/2439-My-Experience-With-AngularJS-The-Super-heroic- JavaScript-MVW-Framework.htm Saturday, 28 September, 13
26. THE SOLUTION? Seed projects are sprouting like weeds. They all suck. Saturday, 28 September, 13
27. INTRODUCING... Saturday, 28 September, 13
28. THE META-STACK Best-Practice, Canonical Stack Building From First Principles Saturday, 28 September, 13
29. MEAN Process Stack Web dev framework for NodeJS Superheroic frontend framework Event-based concurrency environment Recipes, Not Seeds Saturday, 28 September, 13
30. CREATING YOUR DEFAULT PROJECT STACK AngularJS + REST + API Server + MongoDB for a project called tim Saturday, 28 September, 13
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. THE STARTING STACK Node 0.10.5 NPM Yeoman Bower Yo Grunt Mongo Git Sublime Text 2 and Webstorm Saturday, 28 September, 13
33. NPM PACKAGES Update package.json: mongoose winston run “npm install” Future one-off packages: npm install mongoose --save Saturday, 28 September, 13
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. npm install, node app BASIC EXPRESS PROJECT npm install node app “open http://localhost: 3000” to view Saturday, 28 September, 13
36. HTTP://LOCALHOST:3000 EXPRESS IS RUNNING Saturday, 28 September, 13
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. 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. 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. mv public/stylesheets app/styles rm -Rf public vi app.js # see next slide MERGE PUBLIC TO APP Saturday, 28 September, 13
41. replace ‘public’ with ‘app’ in two places, (also update your cookieParser) EDIT APP.JS TO POINT TO APP/ Saturday, 28 September, 13
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. 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. 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. 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. 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. 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. 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. 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. 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. THE STACK SUMMARY Saturday, 28 September, 13
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. 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. 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. 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. TWO ESSENTIAL BOOKS Saturday, 28 September, 13
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. Saturday, 28 September, 13
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. THANK YOU! Nick Van Weerdenburg nick@rangle.io twitter: @rangleio http://rangle.io Saturday, 28 September, 13