Your SlideShare is downloading. ×
Ember.js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ember.js

1,348
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,348
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
42
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. EMBER.JSRaphaël Rougeron / @goldoraf
  • 2. MAIS QUEST-CE ?ember.js est un framework MVC pour le développement de Single Page Apps, né des cendres de Sproutcore... Version stable : 0.9.8.1 Dernière version : 1.0.0-pre2
  • 3. QUI LUTILISE ?
  • 4. MODÈLE OBJETApTd =EbrOjc.xed{ p.oo me.betetn( tte nl, il: ul cmltd fle opee: as, cmlt:fnto( { opee ucin) ti.e(cmltd,tu) hsstopee re; }}; )vrtd =ApTd.rae{ a oo p.oocet( tte cee d pi il: Ahtr u an}; )cnoelgtd.e(tte); osl.o(oogtil)td.e(cmltd,tu) oostopee re;
  • 5. HÉRITAGEApTs =ApTd.xed{ p.ak p.ooetn( det nl, uA: ul cmltdt nl, opeeA: ul cmlt:fnto( { opee ucin) ti.spr) hs_ue(; ti.e(cmltdt,nwDt() hsstopeeA e ae); }}; )
  • 6. RÉOUVERTURE DINSTANCESApTs.epn{ p.akroe( asge:nl sine ul}; ) RÉOUVERTURE DE "CLASSES"ApTs.epnls( p.akroeCas{ isatae fnto( { ntnit: ucin) rtr ti.rae) eun hscet(; }}; )
  • 7. COMPUTED PROPERTIESApCnat=EbrOjc.xed{ p.otc me.betetn( frtae nl, isnm: ul lsnm:nl, atae ul eal nl, mi: ul flnm:fnto( { ulae ucin) rtr ti.e(frtae)++ti.e(lsnm eun hsgtisnm hsgtatae); }poet(frtae,atae) .rpryisnm lsnm}; )
  • 8. COMPUTED PROPERTIES GETTERS / SETTERSApCnatroe( p.otc.epn{ flnm:fnto(e,vle { ulae ucinky au) / gte / etr i (ruet.egh==1 { f agmnslnt = ) rtr ti.e(frtae) eun hsgtisnm ++ti.e(lsnm; hsgtatae) / ste / etr }es { le vrnm =vleslt""; a ae au.pi( ) ti.e(frtae,nm[]; hsstisNm ae0) ti.e(lsNm nm[]; hsstatae, ae1) } }poet(frtae,atae) .rpryisnm lsnm}; )
  • 9. BINDINGSApCnat=EbrOjc.xed{ p.otc me.betetn( frtae nl, isnm: ul lsnm:nl, atae ul eal nl, mi: ul adesokidn:p.esnldrsbo.ae drsboBnig ApProaAdesoknm}; )vrc=ApCnatcet( a p.otc.rae{ frtae on, isnm: Jh lsnm:o atae De}; )cnoelgcgtdrsbo) / - ycnat osl.o(.e(adesok); / > M otcs
  • 10. OBSERVERSApTd =EbrOjc.xed{ p.oo me.betetn( tte nl, il: ul cmltd fle opee: as, tdCagd fnto( { oohne: ucin) Apsoesv(hs; p.tr.aeti) }osre(tte,opee .bevsil cmltd)}; )
  • 11. OBSERVERS SYNTAXES ALTERNATIVESApTd =EbrOjc.xed{ p.oo me.betetn( tte nl, il: ul cmltd fle opee: as, tdCagd Ebrosre(ucin){ oohne: me.bevrfnto( Apsoesv(hs; p.tr.aeti) } il opee , tte, cmltd)}; )vrtd =ApTd.rae) a oo p.oocet(;td.dOsre(tte,opee fnto( { ooadbevril cmltd, ucin) Apsoesv(hs; p.tr.aeti)}; )
  • 12. OBSERVERS SUR LES ARRAYSApTdLs =EbrOjc.xed{ p.ooit me.betetn( tds [, oo: ] cmltd fnto( { opee: ucin) rtr ti.e(tds)flePoet(cmltd,tu eun hsgtoo.itrrpryopee re); }poet(tds@ahcmltd) .rpryoo.ec.opee}; )
  • 13. ENUMERABLESvrtds=[ a oo ApTd.rae{tte cee l pi}, p.oocet( il: Ahtr e an ) ApTd.rae{tte ii mssie}, p.oocet( il: Fnr e lds ) ApTd.rae{tte oe d l giae } p.oocet( il: Jur e a utr )];tdsfrahfnto(tm idx sl){ oo.oEc(ucinie, ne, ef ie.e(cmltd,tu) tmstopee re;}; )tdsivk(cmlt; oo.noeopee)
  • 14. ENUMERABLES #2vrtte =tdsmpfnto(tm { a ils oo.a(ucinie) rtr ie.e(tte) eun tmgtil;}; )vrtte =tdsmprpryil; a ils oo.aPoet(tte)vrcmltd=tdsfle(ucinie){ a opee oo.itrfnto(tm rtr ie.e(cmltd)==tu; eun tmgtopee = re}; )vrcmltd=tdsflePoet(cmltd,tu) a opee oo.itrrpryopee re;
  • 15. ENUMERABLES #3vralopee =tdseeyfnto(tm { a lCmltd oo.vr(ucinie) rtr ie.e(cmltd)==tu; eun tmgtopee = re}; )vralopee =tdseeyrpryopee tu) a lCmltd oo.vrPoet(cmltd, re;vrsmCmltd=tdssm(ucinie){ a oeopee oo.oefnto(tm rtr ie.e(cmltd)==tu; eun tmgtopee = re}; )vrsmCmltd=tdssmPoet(cmltd,tu) a oeopee oo.oerpryopee re;
  • 16. HANDLEBARS<pncas"il"{ts.il}<sa> sa ls=tte>{aktte}/pn< he=# cas"sine>{akasge.ae}/> a rf"" ls=asge"{ts.sinenm}<a{#fts.uA} {i akdet} Dea {fra_aets.uA} u t {omtdt akdet}{/f} {i}
  • 17. VIEWS ET TEMPLATES<cittp=tx/-adeas dt-epaenm=h" srp ye"etxhnlbr" aatmlt-ae"i> H,{nm} i {ae}<srp> /citvrve =EbrVe.rae{ a iw me.iwcet( tmltNm:i, epaeae h nm:o ae Bb}; )ve.pedocnanr) iwapnT(#otie;
  • 18. TEMPLATES ET BINDINGSH,{nm} i {ae}H, i<citi=mtmrh0sat tp=tx/-lchle"<srp srp d"eaop--tr" ye"etxpaeodr>/cit>Bb o<citi=mtmrh1sat tp=tx/-lchle"<srp srp d"eaop--tr" ye"etxpaeodr>/cit>H,{ubudnm} i {non ae}H,Bb i o
  • 19. HELPERS HANDLEBARS {{bindAttr}}ApNtcVe =EbrVe.rae{ p.oieiw me.iwcet( seiiCSls:brntc-i, pcfcSCas ue-oieu iErr tu sro: re}; )<i {bnAt cas"pcfcSCasiErr}> dv {idtr ls=seiiCSls sro"} Lrmism oe pu<dv /i>= <i cas"brntc-ii-ro"Lrmism/i> > dv ls=ue-oieu serr>oe pu<dv
  • 20. HELPERS HANDLEBARS {{bindAttr}}<i {bnAt cas"sro:ro:no}> dv {idtr ls=iErrerrif"} Lrmism oe pu<dv /i><i {bnAt cas"sro:err}> dv {idtr ls=iErr:ro"} Lrmism oe pu<dv /i>
  • 21. HELPERS HANDLEBARS {{view}}ApCnatiw=EbrVe.xed{p.otcVe me.iwetn( tmltNm:otc epaeae cnat, cnat ApCnatcet( otc: p.otc.rae{ frtae on,lsnm:o isnm: Jh atae De, eal dez.o mi: jo@zcm })};)ApCnatnoiw=EbrVe.xed{p.otcIfVe me.iwetn( tmltNm:no epaeae if};)
  • 22. <cittp=tx/-adeas dt-epaenm=cnat>srp ye"etxhnlbr" aatmlt-ae"otc" Nm:{cnatfrtae}{cnatlsnm} ae {otc.isnm} {otc.atae} {ve ApCnatnoiwcnatidn=cnat} {iw p.otcIfVe otcBnig"otc"}<srp>/cit<cittp=tx/-adeas dt-epaenm=if"srp ye"etxhnlbr" aatmlt-ae"no> Eal {cnateal} mi: {otc.mi}<srp>/cit
  • 23. HELPERS HANDLEBARS {{view}}<cittp=tx/-adeas dt-epaenm=cnat> srp ye"etxhnlbr" aatmlt-ae"otc" Nm:{cnatfrtae}{cnatlsnm} ae {otc.isnm} {otc.atae} {#iwApCnatnoiwcnatidn=cnat} {ve p.otcIfVe otcBnig"otc"} Eal {cnateal} mi: {otc.mi} {/iw} {ve}<srp> /cit
  • 24. HELPERS HANDLEBARS {{action}}ApTdVe =EbrVe.xed{p.ooiw me.iwetn( tmltNm:oove epaeae td-iw, td:nl, oo ul iEiig fle sdtn: as, ei:fnto(vn){ dt ucineet ti.e(iEiig,tu) hsstsdtn re; }};){ve EbrCeko cekdidn=td.opee"} {iw me.hcbx hceBnig"oocmltd}{#fiEiig} {i sdtn} {ve EbrTxFedvleidn=td.il"} {iw me.etil auBnig"ootte}{es} {le} <pn{ato "dt o=cik tre=prnVe"}{td.il}<sa sa {cin ei" n"lc" agt"aetiw}>{ootte}/pn>{/f} {i}
  • 25. LE MVC DANS EMBER
  • 26. CONTROLLERSAptdsotolr=EbrAryotolretn( p.ooCnrle me.raCnrle.xed{ rmiig fnto( { eann: ucin) rtr ti.itrrpryopee fle.e(lnt eun hsflePoet(cmltd, as)gtegh) ; }poet(@ahcmltd) .rpryec.opee}; )$gtoo.sn,fnto(aa { .e(tdsjo ucindt) Aptdsotolrstotn dt) p.ooCnrle.e(cnet, aa;}; ){#ahAptdsotolra td} {ec p.ooCnrle s oo} {ve ApTdVe tdBnig"oo} {iw p.ooiw ooidn=td"}{/ah} {ec}Rmiig {Aptdsotolrrmiig} eann: {p.ooCnrle.eann}
  • 27. MODELS EMBER-DATAApTd =D.oe.xed{p.oo SMdletn( tte D.trtig) il: Sat(srn, cmltd D.trola, opee: Sat(boen) onr D.eogT(ApUe we: Sblnsop.sr)};)ApUe =D.oe.xed{p.sr SMdletn( flnm:D.trtig) ulae Sat(srn, tds D.aMn(ApTd oo: Shsayp.oo)};)Apsoe=D.tr.rae{p.tr SSoecet( aatr D.ETdpe.rae) dpe: SRSAatrcet(};)
  • 28. vrtds=ApsoefnAlApTd) a oo p.tr.idl(p.oo;/ - GT/oo / > E tds
  • 29. ROUTERwno.p =EbrApiaincet(idwAp me.plcto.rae{ Apiainiw=EbrVe.xed{ plctoVe me.iwetn( tmltNm:plcto epaeae apiain }, ) Apiainotolr=EbrCnrle.xed{ plctoCnrle me.otolretn( tte ools il: Td it }, ) Rue:EbrRue.xed{ otr me.otretn( ro:EbrRueetn( ot me.ot.xed{ idx EbrRueetn( ne: me.ot.xed{ rue ot: / }) }) })};)<cittp=tx/-adeas dt-epaenm=apiain>srp ye"etxhnlbr" aatmlt-ae"plcto" <1{tte}/1 h>{il}<h><srp>/cit
  • 30. ROUTER ET OUTLETSwno.p =EbrApiaincet(idwAp me.plcto.rae{ .. . soe=D.tr.rae) tr SSoecet(, Rue:EbrRue.xed{ otr me.otretn( ro:EbrRueetn( ot me.ot.xed{ idx EbrRueetn( ne: me.ot.xed{ rue ot: /, cnetult:fnto(otr cnet { oncOtes ucinrue, otx) rue.e(apiainotolr)cnetultoo otrgtplctoCnrle.oncOte(tds,soefnAlApTd); tr.idl(p.oo) } }) }) })};)<cittp=tx/-adeas dt-epaenm=apiain>srp ye"etxhnlbr" aatmlt-ae"plcto" <1{tte}/1 h>{il}<h> <i i=cnet>{ult}/i> dv d"otn"{ote}<dv<srp>/cit
  • 31. ROUTER #2wno.p =EbrApiaincet( idwAp me.plcto.rae{ .. . Rue:EbrRue.xed{ otr me.otretn( ro:EbrRueetn( ot me.ot.xed{ idx EbrRueetn( ne: me.ot.xed{ rue ot: /, .. . }, ) cmltd EbrRueetn( opee: me.ot.xed{ rue cmltd, ot: /opee cnetult:fnto(otr cnet { oncOtes ucinrue, otx) rue.e(apiainotolr)cnetultoo otrgtplctoCnrle.oncOte(tds, soefle(p.oo fnto(oo { tr.itrApTd, ucintd) rtr ie.e(cmltd)==tu; eun tmgtopee = re }) ); } }) }) })}; )
  • 32. ROUTER ET TRANSITIONSwno.p =EbrApiaincet(idwAp me.plcto.rae{ .. . Rue:EbrRue.xed{ otr me.otretn( ro:EbrRueetn( ot me.ot.xed{ gtCmltd EbrRuetastoT(ro.opee, ooopee: me.ot.rniinootcmltd) idx EbrRueetn( ne: me.ot.xed{ rue ot: /, .. . }, ) cmltd EbrRueetn( opee: me.ot.xed{ rue cmltd, ot: /opee .. . }) }) })};)
  • 33. <cittp=tx/-adeas dt-epaenm=apiain>srp ye"etxhnlbr" aatmlt-ae"plcto" <1{tte}/1 h>{il}<h> < {ato gtCmltd}Ve cmltd/> a {cin ooopee}>iw opee<a <i i=cnet>{ult}/i> dv d"otn"{ote}<dv<srp>/cit
  • 34. CONCLUSION