the inaugural angularjs-toronto meetupfiles.meetup.com/8527602/5ds_of_angularjs.pdf · an...
TRANSCRIPT
rangle.ioThe Web Inverted
The Inaugural AngularJS-Toronto Meetup
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
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
Attendee Overview
• 286 Members, 241 Attending
• 5th Largest AngularJS Meetup
• 113 using AngularJS
• 47 Planning To
• 60 Backbone, 17 Knockout, 12 Ember
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.
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.
Server-Centric Web Application
SQLDB
data services
authenticationintegrationpaymentgateways
client
templatingand
routing
http
query JavaScript
HTML
HTML
dynamic page elements
dataquery, format, layout
Browser-Centric Web Application
noSQLDB
services
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
query JavaScript
HTML
dynamic page elements
Browser-Centric + Services
noSQLDB
servicesdataqueryauthentication
integrationpaymentgateways
templatingand
routing
http
query JavaScript
HTML
dynamic page elements
Thin-Server Computing
Browser-Centric + BaaS
noSQLDB
services
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
query
JavaScript
HTML
dynamic page elements
No Server Computing!
Browser-Centric + Local Storage
DBservices
dataquery
authenticationintegrationpaymentgateways
templatingand
routing
http
JavaScript
HTML
dynamic page elements
Mobile App, Desktop Apps
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.
The MEAN Stack
Web dev framework for NodeJS
Superheroic frontend framework
Event-based concurrency environment
The HAT Stack
Superheroic frontend framework
HTML 5
AngularJS
Thin-Server
$39.00
$5/month
$2/month
+ RESTful, Cloud Data Services
5 D’s of AngularJS
1. Dry
2. Declarative
3. Dependency-Injection
4. Data-Binding
5. Designer-Friendly
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
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()
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
5 D’s of AngularJS
2. Declarative
• HTML is the view
• Dependency Injection is the wiring
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.
5 D’s of AngularJS
4. Data-Binding
• two-way, pure JavaScript, just {{var}}
5 D’s of AngularJS
5. Designer-Friendly
• Just HTML, No Code, Localized DOM dependencies
Quick Demo
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
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
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!!!
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
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