HTML enhanced for web appsGoogle Developers Group - Porto Alegre

11-26-2013

Vinicius LinckMobile Apps Architect

var agenda ={

“chapter1”: “Angular… what?”,

“chapter2”: “How does it work?”,

“chapter3”: “Why Angular?”,

“chapter4”: “Common pitfalls”,

“chapter 5”: “Things I wish I were told about being hero…”

};

AngularJSA super-heroic Javascript framework

Facing the truth:Java is to javascript as ham is to hamster…

Little bits of history

• Created 2009 by Misko Hervery (Googler) and Adam Abron;

• GetAngular.com: Front end for an online JSON storage service;

• New members: Igor Minár & Vojta Jína (Googlers)

Background

• HTML is an excellent choice for declaring static documents, but it falters when providing dynamic behaviour, which is important for web apps.

• AngularJS extends HTML vocabulary of your application resulting in an expressive, readable and productive develop environment.

AngularJS• An open-source javascript framework maintained

by Google;

• MVW (Model-View-Whatever);

• Declarative programming for UIs (HTML, CSS);

• Imperative programming for expressing BL (javascript);

• Designed for Decoupling & Testing;

How does it work?Web programming requires web understanding

Common applicationYou need to implement the “cycle”

This is the “cycle”You need to respect that… and learn how to break it.

STEAL THIS SLIDE

Scope is the keyUnderstanding scopes, you understand pretty much

everything…

STEAL THIS SLIDE

Things got easier…… and now, you are ready for single-page application

development.

Why angular?• Two-way data bindings: one source of information;

• Directives: extend your app as you wish;

• Dependency injection;

• Less coding (~50%): fewer bugs;

• Awesome performance;

• Is JQuery compatible (try to avoid that);

• Reusability!!!!

Common pitfalls…… and how to deal with them.

Ugly, but tasteful…• JQM Stack

• MEAN Stack

• yo-yo problem

• Sequential coupling

• Poltergeists

• Action at a distance

• Lasagna code

STEAL THIS SLIDE

Starting with AngularJSThings I wish I were told about being hero…

Be aware…• How modules work;

• scope and rootscope differences;

• Always manipulate DOM through directives;

• Keep “event orgy” under control;

• Try to understand how things are implemented before import an existing module into your app;

• Study browser internals!

STEAL THIS SLIDE

Refactor & RewriteThere’s no framework capable to replace dumbness…

vinnylinck@gmail.com http://vinnylinck.tumblr.com

$scope.$emit(“THANK YOU!”);