the 5 d's of angularjs by nick van weerdenburg (rangle.io)
DESCRIPTION
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
![Page 1: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/1.jpg)
rangle.ioThe Web Inverted
The Inaugural AngularJS-Toronto Meetup
![Page 2: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/2.jpg)
Agenda7: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
![Page 3: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/3.jpg)
AngularJS is rapidly becoming the most popular front-end framework. Why?
rangle.ioThe Web Inverted
An Introduction to AngularJSThe 5D’s of AngularJS
Nick Van Weerdenburg, Chief Rangler @ rangle.ioemail: [email protected] twitter: @rangleio
![Page 4: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/4.jpg)
Attendee Overview
• 286 Members, 241 Attending
• 5th Largest AngularJS Meetup
• 113 using AngularJS
• 47 Planning To
• 60 Backbone, 17 Knockout, 12 Ember
![Page 5: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/5.jpg)
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.
![Page 6: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/6.jpg)
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.
![Page 7: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/7.jpg)
Server-Centric Web Application
SQLDB
data services
authenticationintegrationpaymentgateways
client
templatingand
routing
http
query JavaScript
HTML
HTML
dynamic page elements
dataquery, format, layout
![Page 8: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/8.jpg)
Browser-Centric Web Application
noSQLDB
services
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
query JavaScript
HTML
dynamic page elements
![Page 9: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/9.jpg)
Browser-Centric + Services
noSQLDB
servicesdataqueryauthentication
integrationpaymentgateways
templatingand
routing
http
query JavaScript
HTML
dynamic page elements
Thin-Server Computing
![Page 10: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/10.jpg)
Browser-Centric + BaaS
noSQLDB
services
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
query
JavaScript
HTML
dynamic page elements
No Server Computing!
![Page 11: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/11.jpg)
Browser-Centric + Local Storage
DBservices
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
JavaScript
HTML
dynamic page elements
Mobile App, Desktop Apps
![Page 12: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/12.jpg)
The New Stack: Not Just Buzz
All 3 tiers have changed!
• Client -> Browser-Centric MV* JS
• Server -> Thin-Server, REST, Event
• Database -> Document, web-centricThis changes the entire stack front-to-back, and the benefits are cumulative.
![Page 13: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/13.jpg)
The MEAN Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
![Page 14: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/14.jpg)
The HAT Stack
Superheroic frontend framework
HTML 5
AngularJS
Thin-Server
$39.00
$5/month
$2/month
+ RESTful, Cloud Data Services
![Page 15: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/15.jpg)
5 D’s of AngularJS
1. Dry
2. Declarative
3. Dependency-Injection
4. Data-Binding
5. Designer-Friendly
![Page 16: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/16.jpg)
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
![Page 17: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/17.jpg)
Traditional JS Framework
View
JSBackbone.
Model.extend
...
HTML
Model
Back
bone
.js
Controller
Back
bone
.jsJS
Backbone.Model.extend
...
Back
bone
.js JSBackbone.
View.extend
...render()
![Page 18: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/18.jpg)
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)
DirectivesDependency
Injection Scope
Services“Just JS”
DependencyInjection
MVC, MVVM, MV*, MVW
![Page 19: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/19.jpg)
5 D’s of AngularJS
2. Declarative
• HTML is the view
• Dependency Injection is the wiring
![Page 20: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/20.jpg)
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.
![Page 21: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/21.jpg)
5 D’s of AngularJS
4. Data-Binding
• two-way, pure JavaScript, just {{var}}
![Page 22: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/22.jpg)
5 D’s of AngularJS
5. Designer-Friendly
• Just HTML, No Code, Localized DOM dependencies
![Page 23: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/23.jpg)
Quick Demo
![Page 24: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/24.jpg)
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
![Page 25: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/25.jpg)
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
![Page 26: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/26.jpg)
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!!!
![Page 27: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/27.jpg)
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
![Page 28: The 5 D's of AngularJS by Nick Van Weerdenburg (rangle.io)](https://reader034.vdocuments.mx/reader034/viewer/2022052303/55498c13b4c90582588b543d/html5/thumbnails/28.jpg)
Services
rangle.ioThe 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.ioemail: [email protected] twitter: @rangleio