Slides for Introductory talk on Ember.js at the 3rd BangaloreJS meetup on 24th November, 2012. Code to demos is here https://github.com/theobile/intro-ember.js/tree/master/ember-talk

1. Starting out with
Ember.js
24 November, 2012
BangaloreJS Meetup

2. whoami?
Anirudh Shivanand
@theobile
JS noob
iOS developer
Siebel faker

3. about ember.js
Been around since 2011
Came out of SproutCore -> Amber -> Ember
It's a JavaScript MVC framework
Eliminates boilerplate code and provides architecture
auto updating templates
data bindings
computed properties
routers - state managers

4. Dependencies
jQuery
Handlebars.js - Template language

5. Init | app.js
Ap=EbrApiaincet(
p me.plcto.rae{
ato:'nrd'
uhr Aiuh
};
)
ApApiainotolr=EbrCnrle.xed)
p.plctoCnrle me.otolretn(;
ApApiainiw=EbrVe.xed{
p.plctoVe me.iwetn(
tmltNm:'plcto'
epaeae apiain
};
)
Apiiilz(;
p.ntaie)

6. Source HTML
<dcyehm>
!otp tl
<ed
ha>
<citsc"slbjur-..-i.s>/cit
srp r=j/i/qey172mnj"<srp>
<citsc"slbhnlbr-...ea6j"<srp>
srp r=j/i/adeas100bt..s>/cit
<citsc"slbebr100pe2mnj"<srp>
srp r=j/i/me-..-r..i.s>/cit
<ha>
/ed
<oy
bd>
<cittp=tx/-adeas dt-epaenm=api
srp ye"etxhnlbr" aatmlt-ae"pl
cto"
ain>
<3Wount!/3
h>hdni?<h>
{Apato}
{p.uhr}
<srp>
/cit
<citsc"sapj"<srp>
srp r=j/p.s>/cit
<bd>
/oy
<hm>
/tl

7. Voila!
Wount!
hdni?
Aiuh
nrd

8. Demo

9. Computed Property
ApUe =EbrOjc.xed{
p.sr me.betetn(
frt nl,
is: ul
ls:nl,
at ul
fl:fnto({
ul ucin)
rtr ti.e(frt)""ti.e(ls';
eun hsgt'is'+ +hsgt'at)
}poet(frt,ls'
.rpry'is''at)
};
)

10. Subclassing | Data Binding
Apcret=ApUe.rae{
p.urn p.srcet(
frt 'o'
is: Bb,
ls:'aly,
at Mre'
peettidn:'p.oain
rsnABnig Aplcto'
};
)

11. HTML
<cittp=tx/-adeas dt-epaenm=apiain>
srp ye"etxhnlbr" aatmlt-ae"plcto"
<i>aecetdb:{Apato}<dv<r
dvPg rae y {p.uhr}/i>b>
<i>{p.urn.ul}i {Apcretpeett}/i>b>
dv{Apcretfl} n {p.urn.rsnA}<dv<r
<utn{ato "eGe"tre=Apcret}>e Ge<bt
bto {cin bees agt"p.urn"}Be es/ut
o>
n
<utn{ato "oeM tre=Apcret}>oe M<bto
bto {cin bny" agt"p.urn"}Bny ?/ut
n>
<srp>
/cit

12. Demo

13. Thank you.