The 5 D's of AngularJS

Nick Van Weerdenburg from http://rangle.io presented this introduction to AngularJS at the inaugural AngularJS Toronto meetup on Wed. June 19, 2013. It discusses how all 3 tiers of web applications are changing, and why AngularJS is so important in this new web development landscape.

Transcript

1. rangle.io The Web Inverted The Inaugural AngularJS-Toronto Meetup
2. Agenda 7:00-7:20 Arrive, socialize, 2 minute intros 7:20-7:40 5 D’s of AngularJS, rangle.io 7:40-8:00 AngularJS for Social Media Startups, moPals.com 8:00-8:10 Break 8:10-8:30 AngularJS in Your Pocket, uken.com 8:30-8:50 AngularJS, Scala & Play, trialfire.com 8:50-9:10 ng-animate & Animation, yearofmoo.com 9:10-9:15 Closing
3. AngularJS is rapidly becoming the most popular front-end framework. Why? rangle.io The Web Inverted An Introduction to AngularJS The 5D’s of AngularJS Nick Van Weerdenburg, Chief Rangler @ rangle.io email: nick@rangle.io twitter: @rangleio
4. Attendee Overview • 286 Members, 241 Attending • 5th Largest AngularJS Meetup • 113 using AngularJS • 47 Planning To • 60 Backbone, 17 Knockout, 12 Ember
5. Why Client-Side JS Frameworks? • Client development is 75% of most web applications. • Even before JS Frameworks like Backbone, approx. 50% of Rails and Django applications was JavaScript. • Each rich client interaction is essentially a duplication of server-side code.
6. The Tail is Wagging the Dog Basecamp rewrite- 5K Ruby, 5K Coffee Script which compiled to 10K JavaScript Why call this a Rails Application? It’s a JavaScript application.
7. 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
8. Browser-Centric Web Application 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
9. 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
10. Browser-Centric + BaaS 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 No Server Computing!
11. Browser-Centric + Local Storage DB services data query authentication integration payment gateways templating and routing h t t p JavaScript HTML dynamic page elements Mobile App, Desktop Apps
12. 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 This changes the entire stack front-to-back, and the benefits are cumulative.
13. The MEAN Stack Web dev framework for NodeJS Superheroic frontend framework Event-based concurrency environment
14. The HAT Stack Superheroic frontend framework HTML 5 AngularJS Thin-Server $39.00 $5/month $2/month + RESTful, Cloud Data Services
15. 5 D’s of AngularJS 1. Dry 2. Declarative 3. Dependency-Injection 4. Data-Binding 5. Designer-Friendly
16. 5 D’s of AngularJS 1. Dry • No duplication of logic in HTML and templating language • No duplication of logic in browser and on server • No unnecessary boilerplate
17. Traditional JS Framework View JS Backbone. Model. extend ... HTML Model Backbone.js Controller Backbone.js JS Backbone. Model. extend ... Backbone.js JS Backbone. View. extend ... render()
18. AngularJS - “Just JS, Just HTML” View (Templating) Model “Just JS” HTML “Just HTML” Domain Model + Domain Logic ViewModel / Controller (Application Logic, Routing) Controllers “Just JS” AngularJS (Services, DI, Scope, Data-binding) Directives Dependency Injection Scope Services “Just JS” Dependency Injection MVC, MVVM, MV*, MVW
19. 5 D’s of AngularJS 2. Declarative • HTML is the view • Dependency Injection is the wiring
20. 5 D’s of AngularJS 3. Dependency-Injection • Controllers, Directives, and Services have services given to them, rather than them requesting it. • Code is decoupled, testing is easier.
21. 5 D’s of AngularJS 4. Data-Binding • two-way, pure JavaScript, just {{var}}
22. 5 D’s of AngularJS 5. Designer-Friendly • Just HTML, No Code, Localized DOM dependencies
23. Quick Demo
24. Why AngularJS Was Hard To Learn • Multiple New Concepts ($resource, promises, dependency injection, scopes, directives) • New thinking at database, server, AND client • Looks small, but is vast when you dig into it • Few resources for learning until late 2012 • Documentation assumes jQuery, JSON, and REST mastery • No native UI framework until early 2013
25. Why AngularJS is Now Easy to Learn :) • 3 books released in 3 months, more coming • great video training (egghead.io, Pluralsight) • Google+ community and overall ecosystem • angular-ui for Twitter Bootstrap magic! • yeoman - yo, grunt, and bower for workflow • rapid scaffolding of application with routing • easy management of dependencies
26. Tips for Learning AngularJS • Think of each area as a separate framework (e.g. $resource) and give it respect and time • Understand what foundation you are missing... taking a MongoDB course before learning AngularJS can be a huge benefit • Don’t confuse server-side (Node) and client- side (AngularJS)...embrace thin servers • Abandon imperative thinking (jQuery) • Write AngularJS apps!!!
27. Five Commandments of AngularJS 1. HTML is the view! 2. REST APIs should provide PERFECT JSON 3. communication is one way: Directives->HTML->Controller->Services 4. the controller DOES NOT manipulate the DOM (use directives!) 5. single-responsibility principle for controllers, services and directives
28. Services rangle.io The Web Inverted • Project Reviews • In-flight Refactoring • Development Support • Training and Mentoring • Rails Rescue • Backbone Bailout • Knockout Klean-up • SQL Sunset Learn more at http://rangle.io Nick Van Weerdenburg, Chief Rangler @ rangle.io email: nick@rangle.io twitter: @rangleio