Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Starting out with Ember.js


Published on

Slides for Introductory talk on Ember.js at the 3rd BangaloreJS meetup on 24th November, 2012. Code to demos is here

  • Be the first to comment

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