EMBER.JSRaphaël Rougeron / @goldoraf
MAIS QUEST-CE ?ember.js est un framework MVC pour le développement de Single Page Apps, né des cendres de Sproutcore...   ...
QUI LUTILISE ?
MODÈLE OBJETApTd =EbrOjc.xed{ p.oo   me.betetn(   tte nl,    il: ul   cmltd fle    opee: as,     cmlt:fnto( {      opee uc...
HÉRITAGEApTs =ApTd.xed{ p.ak   p.ooetn(   det nl,    uA: ul   cmltdt nl,    opeeA: ul     cmlt:fnto( {      opee ucin)    ...
RÉOUVERTURE DINSTANCESApTs.epn{ p.akroe(   asge:nl    sine ul}; )    RÉOUVERTURE DE "CLASSES"ApTs.epnls( p.akroeCas{   isa...
COMPUTED PROPERTIESApCnat=EbrOjc.xed{ p.otc    me.betetn(   frtae nl,    isnm: ul   lsnm:nl,    atae ul   eal nl,    mi: u...
COMPUTED PROPERTIES           GETTERS / SETTERSApCnatroe( p.otc.epn{   flnm:fnto(e,vle {    ulae ucinky au)     / gte     ...
BINDINGSApCnat=EbrOjc.xed{ p.otc    me.betetn(   frtae nl,    isnm: ul   lsnm:nl,    atae ul   eal nl,    mi: ul     adeso...
OBSERVERSApTd =EbrOjc.xed{ p.oo   me.betetn(   tte nl,    il: ul   cmltd fle    opee: as,     tdCagd fnto( {      oohne: u...
OBSERVERS        SYNTAXES ALTERNATIVESApTd =EbrOjc.xed{ p.oo    me.betetn(   tte nl,    il: ul   cmltd fle    opee: as,   ...
OBSERVERS SUR LES ARRAYSApTdLs =EbrOjc.xed{ p.ooit   me.betetn(   tds [,    oo: ]     cmltd fnto( {      opee: ucin)      ...
ENUMERABLESvrtds=[ a oo   ApTd.rae{tte cee l pi},    p.oocet( il: Ahtr e an )   ApTd.rae{tte ii mssie},    p.oocet( il: Fn...
ENUMERABLES #2vrtte =tdsmpfnto(tm { a ils   oo.a(ucinie)   rtr ie.e(tte)    eun tmgtil;}; )vrtte =tdsmprpryil; a ils  oo.a...
ENUMERABLES #3vralopee =tdseeyfnto(tm { a lCmltd   oo.vr(ucinie)   rtr ie.e(cmltd)==tu;    eun tmgtopee = re}; )vralopee =...
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...
VIEWS ET TEMPLATES<cittp=tx/-adeas dt-epaenm=h" srp ye"etxhnlbr" aatmlt-ae"i>   H,{nm}    i {ae}<srp> /citvrve =EbrVe.rae{...
TEMPLATES ET BINDINGSH,{nm} i {ae}H, i<citi=mtmrh0sat tp=tx/-lchle"<srp srp d"eaop--tr" ye"etxpaeodr>/cit>Bb o<citi=mtmrh1...
HELPERS HANDLEBARS            {{bindAttr}}ApNtcVe =EbrVe.rae{ p.oieiw    me.iwcet(   seiiCSls:brntc-i,    pcfcSCas ue-oieu...
HELPERS HANDLEBARS            {{bindAttr}}<i {bnAt cas"sro:ro:no}> dv {idtr ls=iErrerrif"}  Lrmism  oe pu<dv /i><i {bnAt c...
HELPERS HANDLEBARS                  {{view}}ApCnatiw=EbrVe.xed{p.otcVe      me.iwetn(   tmltNm:otc    epaeae cnat,   cnat ...
<cittp=tx/-adeas dt-epaenm=cnat>srp ye"etxhnlbr" aatmlt-ae"otc"  Nm:{cnatfrtae}{cnatlsnm}  ae {otc.isnm} {otc.atae}  {ve A...
HELPERS HANDLEBARS             {{view}}<cittp=tx/-adeas dt-epaenm=cnat> srp ye"etxhnlbr" aatmlt-ae"otc"   Nm:{cnatfrtae}{c...
HELPERS HANDLEBARS                   {{action}}ApTdVe =EbrVe.xed{p.ooiw   me.iwetn(  tmltNm:oove  epaeae td-iw,  td:nl,  o...
LE MVC DANS EMBER
CONTROLLERSAptdsotolr=EbrAryotolretn( p.ooCnrle    me.raCnrle.xed{   rmiig fnto( {    eann: ucin)     rtr ti.itrrpryopee f...
MODELS               EMBER-DATAApTd =D.oe.xed{p.oo    SMdletn(   tte D.trtig)   il: Sat(srn,   cmltd D.trola,   opee: Sat(...
vrtds=ApsoefnAlApTd) a oo   p.tr.idl(p.oo;/ - GT/oo / > E tds
ROUTERwno.p =EbrApiaincet(idwAp      me.plcto.rae{   Apiainiw=EbrVe.xed{    plctoVe     me.iwetn(      tmltNm:plcto       ...
ROUTER ET OUTLETSwno.p =EbrApiaincet(idwAp      me.plcto.rae{   ..    .   soe=D.tr.rae)    tr    SSoecet(,   Rue:EbrRue.xe...
ROUTER #2wno.p =EbrApiaincet( idwAp     me.plcto.rae{   ..    .   Rue:EbrRue.xed{    otr me.otretn(      ro:EbrRueetn(    ...
ROUTER ET TRANSITIONSwno.p =EbrApiaincet(idwAp      me.plcto.rae{   ..    .   Rue:EbrRue.xed{    otr me.otretn(      ro:Eb...
<cittp=tx/-adeas dt-epaenm=apiain>srp ye"etxhnlbr" aatmlt-ae"plcto"  <1{tte}/1   h>{il}<h>  < {ato gtCmltd}Ve cmltd/>   a ...
CONCLUSION
Ember.js
Ember.js
Ember.js
Ember.js
Upcoming SlideShare
Loading in …5
×

Ember.js

1,830 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,830
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ember.js

  1. 1. EMBER.JSRaphaël Rougeron / @goldoraf
  2. 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. 3. QUI LUTILISE ?
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. LE MVC DANS EMBER
  26. 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. 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. 28. vrtds=ApsoefnAlApTd) a oo p.tr.idl(p.oo;/ - GT/oo / > E tds
  29. 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. 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. 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. 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. 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. 34. CONCLUSION

×