1. AngularJS
HTML ENHANCED FOR WEB APPS
- Patrick Aljord / @patcito

2. What Is AngularJS Trying To Fix?
HTML is great for declarative code for static web page
<>el wrd<p
pHlo ol!/>
Not so for dynamic pages:
< i=getn1>/>
p d"reig"<p
<cit
srp>
vriI =dcmn.tahvn;
a sE ouetatcEet
vraditnr=iI
a dLsee sE
?fnto(,t f){
ucine , n
eatcEet'n +t f)}
.tahvn(o' , n;
:fnto(,t f){
ucine , n
eadvnLsee(,f,fle;;
.dEetitnrt n as)}
aditnrdcmn,'od,fnto({
dLsee(ouet la' ucin)
vrgetn =dcmn.eEeetyd'reig';
a reig ouetgtlmnBI(getn1)
i (sE {
f iI)
getn.neTx ='el Wrd'
reiginret Hlo ol!;
}es {
le
getn.etotn ='el Wrd'
reigtxCnet Hlo ol!;
}
};
)
<srp>
/cit

3. But...
= Imperative :-(
Declarative FTW!
1. <>el wrd/>
pHlo ol<p
2. <>{reig}/>
p{Getn}<p

4. Data Binding
1. Define a model
2. Binds it to a template
3. When you modify the model, templates updates automotically
4. When the user intereacts with the UI, templates knows how
to sync the data with the model.

5. Concrete Example: JQuery Vs AngularJS
<cittp=tx/aacit>
srp ye"etjvsrp"
$fnto ( {
(ucin )
vrnm =$'nm'.a(;
a ae (#ae)vl)
vrgetn =$'getn';
a reig (#reig)
nm.eu(ucin( {
aekypfnto )
getn.et'el ' nm +'';
reigtx(Hlo + ae !)
})
})
<srp>
/cit
<i>
dv
<ae>ae<lbl
lblNm:/ae>
<nu tp=tx"i=nm"
ipt ye"et d"ae>
< i=getn"<p
p d"reig>/>
<dv
/i>
Name: Enter a name here
HELLO

6. Concrete Example: JQuery Vs AngularJS
<i n-p>
dv gap
<ae>ae<lbl
lblNm:/ae>
<nu tp=tx"n-oe=yuNm"
ipt ye"et gmdl"orae>
<>el {yuNm}!/>
pHlo {orae}<p
<dv
/i>
Name: Enter a name here
HELLO !

7. SO DATA BINDING ALLOWS CODE THAT IS
1. very simple
2. very recognizable
3. looks like the original HTML hello world
Thanks To...
1. Dirty checking
2. Only checks the current view
3. Only check when change may happen
4. Leverage the JIT
5. But... the DOM is slow

8. DATA BINDING COMING TO A BROWSER NEAR
YOU
Implementation When?
AngularJS Javascript Now
Model Driven Views Native Future
Object.observe Native Future
There's already an AngularJS branch using Object.observe !

9. BUT HTML CAN BE
VERBOSE!

10. ↤ Beatiful widgets: Cool
Tricking the browser: Not Cool ↧↧
<lcas"a nvtb"i=mTb>
u ls=nv a-as d"ya"
<icas"cie>ahe=#eto1>eto 1/>/i
l ls=atv"< rf"scin"Scin <a<l>
<i< he=#rfl"Scin2/>/i
l>a rf"poie>eto <a<l>
<u>
/l
<i cas"a-otn"
dv ls=tbcnet>
<i cas"a-aeatv"i=scin"H,ImScin1/i
dv ls=tbpn cie d"eto1>i ' eto <d
v>
<i cas"a-ae i=scin"H,ImScin2/i>
dv ls=tbpn" d"eto2>i ' eto <dv
<dv
/i>
<cit
srp>
$fnto ( {
(ucin )
$'mTbals'.a(so';
(#ya :at)tb'hw)
})
<srp>
/cit
Declarative reusable components:
Cool ↧↧
<as
tb>
<aette"eto 1>
pn il=Scin "
H,ImScin1
i ' eto
<pn>
/ae
<aette"eto 2>
pn il=Scin "
H,ImScin2
i ' eto
<pn>
/ae
<tb>
/as

11. <google-map>
<tabs>
<tweet>
<avatar>
<color-picker>
<invoice>
<unleash-your-imagination>

12. REUSABLE COMPONENTS COMING TO A
BROWSER NEAR YOU
Implementation When?
AngularJS DOM+JS Now
(directives)
Web Native Near Future
Components

13. Mozilla shim for web components: x-tags.org
W3C specs:
http://www.w3.org/TR/2012/WD-components-intro-
20120522/#custom-element-section

14. THE WHOLE PACKAGE
TO BUILD KICK ASS WEB APPS!
✓ Data binding
✓ Templating
✓ Routing and deep linking
✓ Testing
✓ Form validation
✓ Dependency injection
✓ MVW (Model/View/Whatever!)

16. angularjs scaffold
Checkout angularjs_scaffold if you're into Rails.
https://github.com/patcito/angularjs_scaffold

17. Thanks!
Patrick Aljord @patcito
http://blog.ricodigo.com
http://twitter.com/patcito
+Patrick Aljord
Credits for the slides: Vojta Jína, Miško Hevery, Igor Minar.