Starting out with Ember.js

1,156 views
1,122 views

Published on

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

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,156
On SlideShare
0
From Embeds
0
Number of Embeds
93
Actions
Shares
0
Downloads
18
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Starting out with Ember.js

  1. 1. Starting out withEmber.js 24 November, 2012 BangaloreJS Meetup
  2. 2. whoami?Anirudh Shivanand @theobile JS noob iOS developer Siebel faker
  3. 3. about ember.jsBeen around since 2011Came out of SproutCore -> Amber -> EmberIts a JavaScript MVC frameworkEliminates boilerplate code and provides architectureauto updating templatesdata bindingscomputed propertiesrouters - state managers
  4. 4. DependenciesjQueryHandlebars.js - Template language
  5. 5. Init | app.jsAp=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. 6. Source HTML<dcyehm>!otp tl<edha> <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<oybd> <cittp=tx/-adeas dt-epaenm=api srp ye"etxhnlbr" aatmlt-ae"plcto"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. 7. Voila!Wount! hdni?Aiuh nrd
  8. 8. Demo
  9. 9. Computed PropertyApUe =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 hsgtis+ +hsgtat) }poet(frt,ls .rpryisat)};)
  10. 10. Subclassing | Data BindingApcret=ApUe.rae{p.urn p.srcet( frt o is: Bb, ls:aly, at Mre peettidn:p.oain rsnABnig Aplcto};)
  11. 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/uto>n <utn{ato "oeM tre=Apcret}>oe M<bto bto {cin bny" agt"p.urn"}Bny ?/utn><srp> /cit
  12. 12. Demo
  13. 13. Thank you.

×