CREATING WINDOWS STORE JAVASCRIPT              APPS     revealed by Eugene Zharkov / @2j2e
PROTOTYPECheck official UX guidlines
APP FLOWDo not forget about: Form factors App contracts All type of the tiles Toast notifications Touch first Animations
ASYNC PATTERNS     You should understand how:to compose asynchronous codeto use promisesto chain and group promisesto code...
PROMISESA promise is an object that represent a value that will be                     available later.        Most APIs a...
PROMISES A promise is an object that represent a value that will be                      available later.HiloHiloimageQuer...
PROMISE CHAINvrweIaeFrieeree =qeyule.ul(itrsirr)eeue a hnmgsoTlRtivd  urBidrbidpcueLbay.xct();weIaeFrieeree hnmgsoTlRtivd ...
PROMISE CHAIN
BIND FUNCTION                    Define funtion environment with .bindHiloHiloTilesTileUpdater.js  vrqeeiepae =ti.uuTlUdts...
BIND FUNCTION                   Bind can receive additional parameters.HiloHiloTilescreateTileFriendlyImages.js  fnto cetT...
GROUPING A PROMISE  When you have non-sequential, asynchronous operationsthat must all complete before you can continue a ...
HANDLING ERRORS        Use .done at the end of method chain.It doesnt return another promise and throw unhandled          ...
HANDLING ERRORSHiloHilocropcroppedImageWriter.js  vrdcdrrms =gtretto   a eoePoie   eOinain  .hnfnto (ereePos {   te(ucin r...
MVPThe model represents the state and operations of businessobjects that your app manipulatesThe view (HTML and CSS) defin...
MVP - VIEWHiloHilohubhub.html  <i i=hbiaetmlt"dt-i-oto=WnSBnigTmlt"   dv d"u-mg-epae aawncnrl"iJ.idn.epae>     <i dt-i-id"...
MVP - PRESENTER TESTHiloHilo.SpecficationsspecshubListViewPresenter.spec.js  dsrb(we sapd,fnto ( {   ecie"hn npe" ucin )  ...
PRESENTERSEach presenter is responsible for a specific part of the page (a                          control)One page-speci...
PRESENTERSHiloHilodetaildetail.js  ray fnto (lmn,otos {   ed: ucin eeet pin)     vrqey=otosqey      a ur   pin.ur;     vrq...
SEPARATING RESPONSIBILITIESHiloHilohubhub.html  <eto i=iaenv dt-i-oto=WnSU.tloto"dt-i-pi   scin d"mg-a" aawncnrl"iJ.IHmCnr...
UPDATING TILESHilodefault.js  i (urnSaekn ==atvto.ciainidluc){   f crettt.id = ciainAtvtoKn.anh     i (urnSaepeiuEeuintt !...
UPDATING TILESHiloHiloTilesTileUpdater.js  udt:fnto ( {   pae ucin )     / Bn tefnto t acnet s ta `hs wl b rsle      / id ...
UPDATING TILES      The XML for a typical tile notification<ie tl>  <iul   vsa>    <idn tmlt=TlWdIaeolcin>     bnig epae"i...
PAGE NAVIGATIONHiloDefault.html  <i i=cnetot dt-i-oto=Hl.aeotoNvgtr dt-i-   dv d"otnhs" aawncnrl"ioPgCnrlaiao" aawno  pin=...
CREATING PAGESHiloHilohubhub.js  Hl.otospgsdfn(hb,{   iocnrl.ae.eie"u"        ray fnto (lmn,otos {         ed: ucin eeet p...
SUPPORTING DIFFERENT LAYOUTSHiloHiloPageControlNavigator.js   fnto PgCnrlaiao(lmn,otos {    ucin aeotoNvgtreeet pin)      ...
SUPPORTING DIFFERENT LAYOUTSHiloHilohubhub.js  udtLyu:fnto (lmn,veSae lsVeSae {   paeaot ucin eeet iwtt, atiwtt)     ti.it...
DATA BINDINGTemplates for group items and group headers in the normal                          view.HiloHilomonthmonth.htm...
DATA SOURCE TYPESWinJS.Binding.List - synchronous data source, in-memorydata source (an array), all its data must be avail...
UXYou should provide both pointer and touch experience to your                              user.The pointer is an old sch...
OBJECT ROTATIONHiloHilorotateTouchProvider.js  fnto Tuhrvdrosrco(nuEeet {   ucin ocPoieCntutriptlmn)     vrrcgie =nwWnosU....
PERFORMANCE TIPSLimit the start timeEmphasize responsivenessUse thumbnails for quick renderingRetrieve thumbnails when acc...
IN DEPTHBytecode caching is a technique in which the system createsbytecode for each JavaScript file once, rather than re-...
IN DEPTH Use Windows Runtime thumbnail APIs to cache and show                    thumbnails.  Use DOM objects only to stor...
IN DEPTH Combine API calls to reduce the number of layout passes. Store session data in the sessionState in-memory object....
WAYS TO TEST YOUR APP  Unit testing  Integration testing  UX testing  Security testing  Localization testing  Accessibilit...
MOCHAHilo.SpecificationsspecsqueriesimageQueryBuilder.spec.js  dsrb(IaeQeyBidr,fnto ( {   ecie"mg ur ule" ucin )        vr...
ASYNC TESTSHilo.SpecificationsspecsqueriesimageQueryBuilder.spec.js  dsrb(we eeuigaqeyta seiistenme o iae t la   ecie"hn x...
HANDLING EXCEPTIONS   Mocha test runner should intercepts this exception and                 reports it as a test failure....
TEST APP STATES Debug Location toolbar
OTHER TESTSPseudo-localized versionsSTRIDE methodology for threat modelingPerformance Analyzer for HTML5 Apps , Performanc...
DETAILS source - http://bit.ly/win8jsapp docs - http://bit.ly/pphilojs    eu.zharkov@gmail.com            @2j2e
Upcoming SlideShare
Loading in …5
×

Creating windows store java script apps

976 views

Published on

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

No Downloads
Views
Total views
976
On SlideShare
0
From Embeds
0
Number of Embeds
394
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Creating windows store java script apps

  1. 1. CREATING WINDOWS STORE JAVASCRIPT APPS revealed by Eugene Zharkov / @2j2e
  2. 2. PROTOTYPECheck official UX guidlines
  3. 3. APP FLOWDo not forget about: Form factors App contracts All type of the tiles Toast notifications Touch first Animations
  4. 4. ASYNC PATTERNS You should understand how:to compose asynchronous codeto use promisesto chain and group promisesto code promise chains to avoid nestingto wrap non-promise values in a promiseto handle errors in a promise
  5. 5. PROMISESA promise is an object that represent a value that will be available later. Most APIs are wraped to the promises. All based on two methods .then and .done.
  6. 6. PROMISES A promise is an object that represent a value that will be available later.HiloHiloimageQueryBuilder.js i (hsstig.idbe { f ti.etnsbnal) / Cet `ioPcue ojcsisedo rtrig`trgFl`ojcs / rae Hl.itr` bet nta f eunn Soaeie bet qeyrms =qeyrms.hnti.cetVeMdl) urPoie urPoiete(hs_raeiwoes; }
  7. 7. PROMISE CHAINvrweIaeFrieeree =qeyule.ul(itrsirr)eeue a hnmgsoTlRtivd urBidrbidpcueLbay.xct();weIaeFrieeree hnmgsoTlRtivd .hnHl.ie.raeieredymgs te(ioTlscetTlFinlIae) .hnti.eLclmgPts te(hsgtoaIaeah) .hnHl.ie.raeiepae) te(ioTlscetTlUdts .hnqeeiepae) te(uuTlUdts;
  8. 8. PROMISE CHAIN
  9. 9. BIND FUNCTION Define funtion environment with .bindHiloHiloTilesTileUpdater.js vrqeeiepae =ti.uuTlUdtsbn(hs; a uuTlUdts hsqeeiepae.idti) qeeiepae:fnto (oiiain){ uuTlUdts ucin ntfctos vrsl =ti; a ef hs ntfctosfrahfnto (oiiain { oiiain.oEc(ucin ntfcto) sl.iepae.paentfcto) eftlUdtrudt(oiiain; }; ) },
  10. 10. BIND FUNCTION Bind can receive additional parameters.HiloHiloTilescreateTileFriendlyImages.js fnto cetTlFinlIae(ie){ ucin raeieredymgsfls vrlclodr=apiainaacretlclodr a oaFle plctoDt.urn.oaFle; vrcpTubalTFle =cpFlsoodrbn(ul fls; a oyhmnisoodr oyieTFle.idnl, ie) vrweFleCetd=lclodrcetFleAyctubalodr a hnodrrae oaFle.raeodrsn(hmniFle Nm,cetoCliinpinrpaexsig; ae rainolsoOto.elcEitn) rtr weFleCetd eun hnodrrae .hncpTubalTFle) te(oyhmnisoodr; }
  11. 11. GROUPING A PROMISE When you have non-sequential, asynchronous operationsthat must all complete before you can continue a task, you can use the WinJS.Promise.join vrweFlIOe =treFl.pnsn(iecesoeraWie; a hniespn agtieoeAycflAcsMd.edrt) vrweTubiIRay=sucFl.eTubalsn(hmniMd.iget a hnhmalsed oreiegthmniAyctubaloesnlI e) m; vrweEeyhnIRay=WnSPoieji( oee:weFlIOe,ra a hnvrtigsed iJ.rms.on{ pnd hniespn ed y weTubiIRay}; : hnhmalsed )
  12. 12. HANDLING ERRORS Use .done at the end of method chain.It doesnt return another promise and throw unhandled expetions.
  13. 13. HANDLING ERRORSHiloHilocropcroppedImageWriter.js vrdcdrrms =gtretto a eoePoie eOinain .hnfnto (ereePos { te(ucin rtivdrp) eiOinain=(ereePossz !=0 xfretto rtivdrp.ie = ) ?rtivdrp[Sse.ht.retto" ereePos"ytmPooOinain] :pooretto.oml htOinainnra; } fnto (ro){ , ucin err sic (ro.ubr { wth errnme) cs Hl.mgWie.ICDCERUSPOTDPRTO: ae ioIaertrWNOE_R_NUPREOEAIN cs Hl.mgWie.ICDCERPOETNTUPRE: ae ioIaertrWNOE_R_RPRYOSPOTD eiOinain=pooretto.oml xfretto htOinainnra; bek ra; dfut eal: trwerr ho ro; } }; )
  14. 14. MVPThe model represents the state and operations of businessobjects that your app manipulatesThe view (HTML and CSS) defines the structure, layout, andappearance of what the user sees on the screen. The viewmanages the controls on the page and forwards user eventsto a presenter classThe presenter contains the logic to respond to events,update the model and, in turn, manipulate the state of theview
  15. 15. MVP - VIEWHiloHilohubhub.html <i i=hbiaetmlt"dt-i-oto=WnSBnigTmlt" dv d"u-mg-epae aawncnrl"iJ.idn.epae> <i dt-i-id"tl.akrudmg:ulbcgonUl at nm; dv aawnbn=syebcgonIae r.akrudr; l: ae casae casae cas"hmni" lsNm: lsNm" ls=tubal> <dv /i> <dv /i>
  16. 16. MVP - PRESENTER TESTHiloHilo.SpecficationsspecshubListViewPresenter.spec.js dsrb(we sapd,fnto ( { ecie"hn npe" ucin ) vre; a l bfrEc(ucin( { eoeahfnto ) vrapiw={; a pVe } e =nwSesWnotoSu(; l e pc.iCnrltb) e.iCnrladvnLsee =fnto ( {} lwnoto.dEetitnr ucin ) ; vrlsvePeetr=nwHl.u.itiwrsne(l apiw a itiwrsne e ioHbLsVePeetre, pVe) ; lsvePeetrstiwtt(idw.IVeMngmn.plcto itiwrsne.eVeSaeWnosU.iwaaeetApiai niwtt.npe) VeSaesapd; }; ) i(teLsVe sol ueaLsLyu" fnto ( { t"h itiw hud s itaot, ucin ) epc(lwnoto.aotisaco WnSU.itaot.qa( xete.iCnrllyu ntnef iJ.ILsLyu)eult re; u) }; ) }; )
  17. 17. PRESENTERSEach presenter is responsible for a specific part of the page (a control)One page-specific presenter (the mediator) coordinates theother presenters (control-specific) and receives forwarded events
  18. 18. PRESENTERSHiloHilodetaildetail.js ray fnto (lmn,otos { ed: ucin eeet pin) vrqey=otosqey a ur pin.ur; vrqeyae=qeystig.otAder a urDt ur.etnsmnhnYa; vrpgTte=Hl.aeomte.eMnhrmqeyae +""+Hl a aeil iodtFratrgtotFo(urDt) io .aeomte.eYaFo(urDt) dtFratrgterrmqeyae; ti.idaeil(aeil) hsbnPgTtepgTte; vrhlApaE =dcmn.urSlco(#pbr) a iopBrl ouetqeyeetr"apa"; vrhlApa =nwHl.otosHlApa.iopBrrsne(io a iopBr e ioCnrl.iopBrHlApaPeetrhlA pBrl WnSNvgto,qey; paE, iJ.aiain ur) vrflsrpl=dcmn.urSlco(#imti"; a imtiE ouetqeyeetr"flsrp) vrfiveE =dcmn.urSlco(#lpiw) a lpiwl ouetqeyeetr"five"; vrfivePeetr=nwHl.ealFivePeetrfiveE) a lpiwrsne e ioDti.lpiwrsne(lpiwl; vrflsrprsne =nwHl.ealFlsrprsne(imtiE a imtiPeetr e ioDti.imtiPeetrflsrpl ); vrdtiPeetr=nwHl.ealDtiPeetrflsrprsne a ealrsne e ioDti.ealrsne(imtiPeet r fivePeetr hlApa,WnSNvgto) , lpiwrsne, iopBr iJ.aiain; dtiPeetradvnLsee(pgSlce" fnto (rs { ealrsne.dEetitnr"aeeetd, ucin ag) vrieIdx=ag.ealieIdx a tmne rsdti.tmne; otosieIdx=ieIdx pin.tmne tmne; }; ) dtiPeetr ealrsne
  19. 19. SEPARATING RESPONSIBILITIESHiloHilohubhub.html <eto i=iaenv dt-i-oto=WnSU.tloto"dt-i-pi scin d"mg-a" aawncnrl"iJ.IHmCnrl aawnot os"ui Hl/otosHlApa/iopBrhm"<scin n={r: /iocnrl/iopBrhlApa.tl}>/eto>HiloHilocontrolsHiloAppBarhiloAppBar.html <i i=apa"dt-i-oto=WnSU.pBr dt-i-pin={tcy dv d"pbr aawncnrl"iJ.IApa" aawnotos"sik :fle" as}> <utn bto dt-i-oto=WnSU.pBromn" aawncnrl"iJ.IApaCmad dt-i-pin={doae,io:rtt scin eeto aawnotos"i:rtt cnoae, eto: slcin, dsbe:tu} iald re" dt-i-id"dsbe:iCrut" aawnbn={iald sorp} dt-i-e={iCnrl {ae:RttApaBto.ae}" aawnrs"wnoto: lbloaepBrutnNm}> <bto> /utn <utn bto dt-i-oto=WnSU.pBromn" aawncnrl"iJ.IApaCmad dt-i-pin={drp,io:co scin eeto ds aawnotos"i:co cnrp, eto: slcin, ia be:tu} ld re" dt-i-id"dsbe:iCrut" aawnbn={iald sorp} dt-i-e={iCnrl {ae:CoApaBto.ae}" aawnrs"wnoto: lblrppBrutnNm}> <bto> /utn <dv /i>
  20. 20. UPDATING TILESHilodefault.js i (urnSaekn ==atvto.ciainidluc){ f crettt.id = ciainAtvtoKn.anh i (urnSaepeiuEeuintt !=atvto.plctoEeui f crettt.rvosxctoSae = ciainApiainxct oSaetriae){ ntt.emntd / We teapi satd w wn t udt istl / hn h p s tre, e at o pae t ie / o tesatsre.Sneti AIi ntacsil / n h tr cen ic hs P s o cesbe / isd o Bed w ol ivk i we w aenti / nie f ln, e ny noe t hn e r o n / dsg md. / ein oe i (WnosApiainoe.einoedsgMdEald { f !idw.plctoMdlDsgMd.einoenbe) vrtlUdtr=nwHl.ie.iepae(; a iepae e ioTlsTlUdtr) tlUdtrudt(; iepae.pae) } }
  21. 21. UPDATING TILESHiloHiloTilesTileUpdater.js udt:fnto ( { pae ucin ) / Bn tefnto t acnet s ta `hs wl b rsle / id h ucin o otx, o ht ti` il e eovd / we i i ivkdi tepoie / hn t s noe n h rms. vrqeeiepae =ti.uuTlUdtsbn(hs; a uuTlUdts hsqeeiepae.idti) / Bidaqeyt gttenme o iae nee frtetls / ul ur o e h ubr f mgs edd o h ie. vrqeyule =nwHl.mgQeyule(; a urBidr e ioIaeurBidr) qeyule.on(ubrfmgsoeree; urBidrcutnmeOIaeTRtiv) vrweIaeFrieeree =qeyule.ul(itrsirr)ee a hnmgsoTlRtivd urBidrbidpcueLbay.xc ue) t(; weIaeFrieeree hnmgsoTlRtivd .hnHl.ie.raeieredymgs te(ioTlscetTlFinlIae) .hnti.eLclmgPts te(hsgtoaIaeah) .hnHl.ie.raeiepae) te(ioTlscetTlUdts .hnqeeiepae) te(uuTlUdts; }
  22. 22. UPDATING TILES The XML for a typical tile notification<ie tl> <iul vsa> <idn tmlt=TlWdIaeolcin> bnig epae"ieiemgCleto" <mg i=1 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae0jg/ <mg i=2 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae1jg/ <mg i=3 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae2jg/ <mg i=4 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae3jg/ <mg i=5 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae4jg/ <bnig /idn> <idn tmlt=TlSurIae> bnig epae"ieqaemg" <mg i=1 sc"sapaa//oa/hmnistubmg_.p"> iae d"" r=m-pdt:/lcltubal/hmIae0jg/ <bnig /idn> <vsa> /iul<tl> /ie
  23. 23. PAGE NAVIGATIONHiloDefault.html <i i=cnetot dt-i-oto=Hl.aeotoNvgtr dt-i- dv d"otnhs" aawncnrl"ioPgCnrlaiao" aawno pin={oe Hl/u/u.tl}> tos"hm: /iohbhbhm" <dv /i>HiloHilohubhubPresenter.js ieCikd fnto (rs { tmlce: ucin ag) / Gtte`ioPcue ie ta wsbudt teivkdiae / e h Hl.itr` tm ht a on o h noe mg, / adteie idxfo tels ve cnrl / n h tm ne rm h it iw oto. vrpcue=ag.ealie.aa a itr rsdti.tmdt; / Bidteqeyta cnfn ti pcuewti i mnhgop / ul h ur ht a id hs itr ihn ts ot ru. vrotos=ti.ulQeyoPcuepcue; a pin hsbidurFritr(itr) / Nvgt t tedti ve,seiyn temnhqeyt / aiae o h eal iw pcfig h ot ur o / so,adteidxo teidvda ie ta wsivkd / hw n h ne f h niiul tm ht a noe. ti.a.aiae"Hl/ealdti.tl,otos; hsnvnvgt(/iodti/ealhm" pin) },
  24. 24. CREATING PAGESHiloHilohubhub.js Hl.otospgsdfn(hb,{ iocnrl.ae.eie"u" ray fnto (lmn,otos { ed: ucin eeet pin) / Hnl teapbrbto cik frsoigadhdn teap / ade h p a utn lcs o hwn n iig h p br a. vrapaE =dcmn.urSlco(#pbr) a pBrl ouetqeyeetr"apa"; vrhlApa =nwHl.otosHlApa.iopBrrsne( a iopBr e ioCnrl.iopBrHlApaPeetra pBrl WnSNvgto) paE, iJ.aiain; / Hnl slcigadivkn (lcig iae. / ade eetn n noig cikn) mgs vrlsVeE =dcmn.urSlco(#itrsirr"; a itiwl ouetqeyeetr"pcueLbay) ti.itiwrsne =nwHl.u.itiwrsne(itiwl hslsVePeetr e ioHbLsVePeetrlsVeE, WnosU.iwaaeetApiainiw; idw.IVeMngmn.plctoVe) / Codnt teprso tehbpg. / oriae h at f h u ae ti.uVePeetr=nwHl.u.uVePeetr hshbiwrsne e ioHbHbiwrsne( WnSNvgto, iJ.aiain hlApa, iopBr ti.itiwrsne, hslsVePeetr nwHl.mgQeyule( e ioIaeurBidr) ); ti.uVePeetr hshbiwrsne .tr(nwFlespcueLbay satkonodr.itrsirr) .hnfnto ( { te(ucin ) WnSApiainadvnLsee(Hl:otnshne" iJ.plcto.dEetitnr"ioCnetCagd, Hl.aiao.eod; ionvgtrrla)
  25. 25. SUPPORTING DIFFERENT LAYOUTSHiloHiloPageControlNavigator.js fnto PgCnrlaiao(lmn,otos { ucin aeotoNvgtreeet pin) / ... / wno.neie=ti.rszdbn(hs; idworsz hs_eie.idti) / ... / }, _eie:fnto (rs { rszd ucin ag) i (hspgCnrl& ti.aeoto.paeaot { f ti.aeoto & hspgCnrludtLyu) ti.aeoto.paeaotcl(hspgCnrl ti.aelmn hspgCnrludtLyu.alti.aeoto, hspgEeet ,apiwvle ti.lsVesae; pVe.au, hs_atiwtt) } ti.lsVesae=apiwvle hs_atiwtt pVe.au; },
  26. 26. SUPPORTING DIFFERENT LAYOUTSHiloHilohubhub.js udtLyu:fnto (lmn,veSae lsVeSae { paeaot ucin eeet iwtt, atiwtt) ti.itiwrsne.eVeSaeveSae lsVeSae; hslsVePeetrstiwtt(iwtt, atiwtt) },HiloHilohublistViewPresenter.js stiwtt:fnto (iwtt){ eVeSae ucin veSae ti.vlyu =ti.eetaotveSae; hsl.aot hsslcLyu(iwtt) }, slcLyu:fnto (iwtt,lsVeSae { eetaot ucin veSae atiwtt) i (atiwtt ==veSae {rtr;} f lsVeSae = iwtt) eun i (iwtt ==apiwtt.npe){ f veSae = pVeSaesapd rtr nwWnSU.itaot) eun e iJ.ILsLyu(; } es { le vrlyu =nwWnSU.rdaot) a aot e iJ.IGiLyu(; lyu.ruIf =fnto ( {rtr lsVeLyuStig;} aotgopno ucin ) eun itiwaotetns ; lyu.aRw =3 aotmxos ; rtr lyu; eun aot } },
  27. 27. DATA BINDINGTemplates for group items and group headers in the normal view.HiloHilomonthmonth.html <i i=mnhtmepae dt-i-oto=WnSBnigTmlt" dv d"otIeTmlt" aawncnrl"iJ.idn.epae> <i dt-i-id"tl.akrudmg:ulbcgonUl casae dv aawnbn=syebcgonIae r.akrudr; lsNm: casae>/i> lsNm"<dv <dv /i> <i i=mnhruHaeTmlt"dt-i-oto=WnSBnigTmlt" dv d"otGopedrepae aawncnrl"iJ.idn.epae> < cas"otLn"he=#>sa dt-i-id"neHM:tte>/p a ls=mnhik rf""<pn aawnbn=inrTL il"<s a>(sa dt-i-id"neTx:cut>/pn)/> n <pn aawnbn=inret on"<sa><a <dv /i> <i i=mnhnpeTmlt"dt-i-oto=WnSBnigTmlt" dv d"otSapdepae aawncnrl"iJ.idn.epae> <pndt-i-id"neHM:tte>/pn (sa dt-i-id"ne sa aawnbn=inrTL il"<sa> <pn aawnbn=in ret cut>/pn) Tx: on"<sa> <i dt-i-id"tl.akrudmg:bcgonUl"cas"hmn dv aawnbn=syebcgonIae akrudr; ls=tuba i"<dv l>/i> <dv /i>
  28. 28. DATA SOURCE TYPESWinJS.Binding.List - synchronous data source, in-memorydata source (an array), all its data must be available fordisplayStorageDataSource - built-in support for the Windows filesystemVirtualizedDataSource - custom implementation
  29. 29. UXYou should provide both pointer and touch experience to your user.The pointer is an old school, touch control requires some skills from developer.
  30. 30. OBJECT ROTATIONHiloHilorotateTouchProvider.js fnto Tuhrvdrosrco(nuEeet { ucin ocPoieCntutriptlmn) vrrcgie =nwWnosU.nu.etrRcgie(; a eonzr e idw.IIptGsueeonzr) rcgie.etrStig =WnosU.nu.etrStig.aiua eonzrgsueetns idw.IIptGsueetnsmnplt inoae oRtt; iptlmn.dEetitnr"SoneDw" fnto (v){ nuEeetadvnLsee(MPitron, ucin et vrp =etcreton; a p v.urnPit i (ppitreiepitreieye==pitreieyetuh f p.oneDvc.oneDvcTp = oneDvcTp.oc) { rcgie.rcsDwEetp) eonzrpoesonvn(p; } } fle; , as) iptlmn.dEetitnr"SoneMv" fnto (v){ nuEeetadvnLsee(MPitroe, ucin et vrps=etitreitPit; a p v.nemdaeons i (p[]& ps0.oneDvc.oneDvcTp ==pitre f ps0 & p[]pitreiepitreieye = oneDv ieyetuh { cTp.oc) rcgie.rcsMvEet(p) eonzrpoesoevnsps; } } fle; , as) iptlmn.dEetitnr"SoneU" fnto (v){ nuEeetadvnLsee(MPitrp, ucin et vrp =etcreton; a p v.urnPit i (ppitreiepitreieye==pitreieyetuh f p.oneDvc.oneDvcTp = oneDvcTp.oc) { rcgie.rcsUEetp) eonzrpoespvn(p; }
  31. 31. PERFORMANCE TIPSLimit the start timeEmphasize responsivenessUse thumbnails for quick renderingRetrieve thumbnails when accessing itemsRelease media and stream resources when theyre nolonger neededOptimize ListView performanceKeep DOM interactions to a minimumOptimize property accessUse independent animationsManage layout efficientlyStore state efficientlyKeep your app’s memory usage low when its suspendedMinimize the amount of resources that your app uses
  32. 32. IN DEPTHBytecode caching is a technique in which the system createsbytecode for each JavaScript file once, rather than re-creating the bytecode each time it starts the app (30% improvment in large apps). Avoid synchronous API calls. Break proccessing operations into series of smaller operations.
  33. 33. IN DEPTH Use Windows Runtime thumbnail APIs to cache and show thumbnails. Use DOM objects only to store information that directly affects how the DOM lays out or draws elements.Certain types of animations are offloaded from the UI thread to GPU-accelerated system thread.
  34. 34. IN DEPTH Combine API calls to reduce the number of layout passes. Store session data in the sessionState in-memory object.When your app begins the suspension process, it should freeany large objects that can be easily rebuilt when it resumes.
  35. 35. WAYS TO TEST YOUR APP Unit testing Integration testing UX testing Security testing Localization testing Accessibility testing Performance testing Device testing
  36. 36. MOCHAHilo.SpecificationsspecsqueriesimageQueryBuilder.spec.js dsrb(IaeQeyBidr,fnto ( { ecie"mg ur ule" ucin ) vrqeyule,soaeodr a urBidr trgFle; bfrEc(ucin(oe { eoeahfnto dn) qeyule =nwHl.mgQeyule(; urBidr e ioIaeurBidr) vrweFle =WnosSoaeApiainaacretlclodr a hnodr idw.trg.plctoDt.urn.oaFle. gtodrsn(Idxd) eFleAyc"nee"; weFle.hnfnto (odr { hnodrte(ucin fle) soaeodr=fle; trgFle odr dn(; oe) }; ) }; )
  37. 37. ASYNC TESTSHilo.SpecificationsspecsqueriesimageQueryBuilder.spec.js dsrb(we eeuigaqeyta seiistenme o iae t la ecie"hn xctn ur ht pcfe h ubr f mgs o o d,fnto ( { " ucin ) vrqeyeut a urRsl; bfrEc(ucin( { eoeahfnto ) qeyeut=qeyule urRsl urBidr .on() cut1 .ul(trgFle) bidsoaeodr .xct(; eeue) }; ) i(sol la teseiidnme o iae" fnto (oe { t"hud od h pcfe ubr f mgs, ucin dn) qeyeutte(ucin(mgs { urRsl.hnfnto iae) epc(mgslnt)eul() xetiae.egh.qas1; dn(; oe) }.oenl,dn) )dn(ul oe; }; ) }; )
  38. 38. HANDLING EXCEPTIONS Mocha test runner should intercepts this exception and reports it as a test failure. But WinJS is intercepting all promises errors..done function is never called, test will go into a wait state and Mocha will time out (2 seconds), omitting the fail message.
  39. 39. TEST APP STATES Debug Location toolbar
  40. 40. OTHER TESTSPseudo-localized versionsSTRIDE methodology for threat modelingPerformance Analyzer for HTML5 Apps , PerformanceMonitor :)Visual Studio profilerWindows App Certification Kit
  41. 41. DETAILS source - http://bit.ly/win8jsapp docs - http://bit.ly/pphilojs eu.zharkov@gmail.com @2j2e

×