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: nick@rangle.io 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: nick@rangle.io twitter: @rangleio