rangle.io The Web Inverted The Inaugural AngularJS-Toronto Meetup 

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 

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: [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 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 

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 

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 

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! 

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 

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. 

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 JS Backbone. Model. extend ... HTML Model Backbone.js Controller Backbone.js JS Backbone. Model. extend ... Backbone.js JS Backbone. 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) Directives Dependency Injection Scope Services “Just JS” Dependency Injection 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.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: [email protected] twitter: @rangleio