Creating windows store java script apps
Upcoming SlideShare
Loading in...5

Like this? Share it with your network

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 144 144

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. CREATING WINDOWS STORE JAVASCRIPT APPS revealed by Eugene Zharkov / @2j2e
  • 2. PROTOTYPECheck official UX guidlines
  • 3. APP FLOWDo not forget about: Form factors App contracts All type of the tiles Toast notifications Touch first Animations
  • 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. 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. 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. PROMISE CHAINvrweIaeFrieeree =qeyule.ul(itrsirr)eeue a hnmgsoTlRtivd urBidrbidpcueLbay.xct();weIaeFrieeree hnmgsoTlRtivd te(ioTlscetTlFinlIae) .hnti.eLclmgPts te(hsgtoaIaeah) te(ioTlscetTlUdts .hnqeeiepae) te(uuTlUdts;
  • 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. 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. 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. HANDLING ERRORS Use .done at the end of method chain.It doesnt return another promise and throw unhandled expetions.
  • 13. HANDLING ERRORSHiloHilocropcroppedImageWriter.js vrdcdrrms =gtretto a eoePoie eOinain .hnfnto (ereePos { te(ucin rtivdrp) eiOinain=(ereePossz !=0 xfretto = ) ?rtivdrp[" 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. 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. 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. 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 xete.iCnrllyu ntnef iJ.ILsLyu)eult re; u) }; ) }; )
  • 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. 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. 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/}>/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 {}" 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 {}" aawnrs"wnoto: lblrppBrutnNm}> <bto> /utn <dv /i>
  • 20. UPDATING TILESHilodefault.js i (urnSaekn ==atvto.ciainidluc){ f = 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); a iepae e ioTlsTlUdtr) tlUdtrudt(; iepae.pae) } }
  • 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 te(ioTlscetTlFinlIae) .hnti.eLclmgPts te(hsgtoaIaeah) te(ioTlscetTlUdts .hnqeeiepae) te(uuTlUdts; }
  • 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. PAGE NAVIGATIONHiloDefault.html <i i=cnetot dt-i-oto=Hl.aeotoNvgtr dt-i- dv d"otnhs" aawncnrl"ioPgCnrlaiao" aawno pin={oe Hl/u/}> 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/,otos; hsnvnvgt(/iodti/ealhm" pin) },
  • 24. CREATING PAGESHiloHilohubhub.js Hl.otospgsdfn(hb,{"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. 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;, hs_atiwtt) } ti.lsVesae=apiwvle hs_atiwtt; },
  • 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. 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. 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. 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. OBJECT ROTATIONHiloHilorotateTouchProvider.js fnto Tuhrvdrosrco(nuEeet { ucin ocPoieCntutriptlmn) vrrcgie; a eonzr e idw.IIptGsueeonzr) rcgie.etrStig 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. 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. 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. 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. 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. WAYS TO TEST YOUR APP Unit testing Integration testing UX testing Security testing Localization testing Accessibility testing Performance testing Device testing
  • 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. 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. 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. TEST APP STATES Debug Location toolbar
  • 40. OTHER TESTSPseudo-localized versionsSTRIDE methodology for threat modelingPerformance Analyzer for HTML5 Apps , PerformanceMonitor :)Visual Studio profilerWindows App Certification Kit
  • 41. DETAILS source - docs - @2j2e