This document summarizes a presentation about the AngularJS JavaScript framework. It begins with an agenda and introduction to AngularJS. Some history is provided, noting it was created in 2009 by Google employees and others. AngularJS extends HTML to provide dynamic functionality for web apps. It uses a Model-View-Whatever pattern and declarative programming. Common concepts like scopes, directives, and data binding are explained. Advantages like reduced coding and reusability are highlighted. Potential pitfalls and common problems are also covered, along with advice for working with AngularJS effectively.

1. HTML enhanced for web apps
Google Developers Group - Porto Alegre
11-26-2013

2. Vinicius Linck
Mobile Apps Architect

3. 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…”
};

4. AngularJS
A super-heroic Javascript framework

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

6. 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)

7. 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.

8. 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;

9. How does it work?
Web programming requires web understanding

10. Common application
You need to implement the “cycle”

11. ST
EA
SL L T
ID HI
E S
This is the “cycle”
You need to respect that… and learn how to break it.

12. ST
EA
SL L T
ID HI
E S
Scope is the key
Understanding scopes, you understand pretty much
everything…

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

15. 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!!!!

16. Common pitfalls…
… and how to deal with them.

17. Ugly, but tasteful…
•
JQM Stack
•
MEAN Stack
•
yo-yo problem
•
Sequential coupling
•
Poltergeists
•
Action at a distance
•
Lasagna code
ST
EA
SL L T
ID HI
E S

18. Starting with AngularJS
Things I wish I were told about being hero…

20. 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!
ST
EA
SL L T
ID HI
E S

21. Refactor & Rewrite
There’s no framework capable to replace dumbness…

22. $scope.$emit(“THANK YOU!”);
vinnylinck@gmail.com
http://vinnylinck.tumblr.com