AngularJS vs Backbone.js Smackdown

SMACKDOWN

Photo credit: ljlphotography via Flickr

About Me

John [email protected]

Why Use a 3rd Party Toolset?

• Implement a tested architecture

• Write less code• DRY• Abstract browser differences• Faster time to market• More time to kick ass and

chew bubblegum Photo: Soriinsim via Flickr

What The?

MVCMVPMVVMMV*MV-WTF

Photo: James McCauley via Flickr

Photo by: Alex Chen via Flickr

A Tale of Two Projects

• Dashboard App• Restful Service –

single domain• Small Team, co-

located• Modern Web

Browsers

• Complex SPA• Large Team• Dozens of

Views• Geographical

ly Diverse• IE 6+

• Prescriptive• Done For You• More rigid

• Less Prescriptive• Use What You Want• Toolbox Agnostic• You Wire

Concepts• Templates• Directives• Models• Scope• Expressions• Compiler• Filter• View• Data Binding• Controllers• Dependency Injection• Injector• Modules• Services• Routing• Animation

• Model• Collection• View• Router

Dependencies

NADAZIP

ZILCH

• jQuery or Zepto• Json2.js (for

ancient browsers)

• Underscore or Lo-dash

Models

Views

Controllers

Karen Elliot via Flickr

DOM Philosophy

“AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.”

"Get your truth out of the DOM"

Ancient Browser (IE < 9) Support

v 1.2 supports IE 8.

v 1.3 dropped IE8 support

Could be shimmed maybe but is a huge pain

IE 6+

I suggest having json2 and modernizr because old IE really sucks

In Common

• Just JavaScript• All Clientside / Front-end• Don’t Prevent You From Doing Stupid Things• Active Communities• Numerous Plugins / Extensions• Used on Large Commercial Projects• O’Reilly Books / Tutorials / YouTubes

My Recommendations / Parting Comments

• Test• Refactor all the time• Read the source-code• Don’t Hack The Platform• Coffeescript & Jade are the devil

Photo: Tom Coates via Flickr

[email protected]