Building modern web apps with html5, javascript, and java

Download Building modern web apps with html5, javascript, and java

Post on 02-Dec-2014

5.698 views

Category:

Technology

4 download

DESCRIPTION

Presentation on building modern web applications from FITC Amsterdam 2013.

TRANSCRIPT

  • 1. BuildingModernWebAppswithHTML5,JS,and Java ...andhowtostayproductive with Alex Gyoshev / @alex_gyoshev
  • 2. {{Insertcleverquote}} The secret to building large apps is NEVER buildlarge apps. Break up your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. Justin Meyer, JavaScriptMVC
  • 3. Managingcomplexity Templates Data binding Data sync Widgets
  • 4. Templates
  • 5. Why?separatedataandrendering
  • 6. Templateengines Underscore Kendo Resig Micro templates doT Mustache jQuery.tmpl Handlebars PURE EJS Hogan ...and many more
  • 7. Whichtemplatesarebest? Hint:itdepends!
  • 8. Differenttemplateengines Logic-lessvslogic-full
  • 9. Logic-lessexample:Mustache Template {#tm} {ies} {#is} {frt} /i l>srn>{ae}/tog {/is} {frt} {#ik} {ln} {ae}/>/i l>a rf"{r}"{nm} {/ik} {ln} {/tm} {ies} JSON { "tm" [ ies: {nm" "e" "is" tu,"r" "Rd} "ae: rd, frt: re ul: #e", {nm" "re" "ik:tu,"r" "Gen} "ae: gen, ln" re ul: #re", {nm" "le,"ik:tu,"r" "Bu" "ae: bu" ln" re ul: #le} ] } Usage vrhm =Msah.ohm(epae jo) a tl utcet_tltmlt, sn;
  • 10. Logic-fullexample:_and Kendo Template#fr(a i=0 i l>srn>= tm[]nm /i #}es {# le =iesi.ae#/>/i l>a rf"= tm[]ul "# tm[]nm #}##}# JSON{ "tm" [ ies: {nm" "e" "r" "Rd} "ae: rd, ul: #e", {nm" "re" "r" "Gen} "ae: gen, ul: #re", {nm" "le,"r" "Bu" "ae: bu" ul: #le} ]} Usagevrhm =tmlt(sn; a tl epaejo)
  • 11. #protipUseprecompiledtemplates As easy as v r t = _ t m l t ( f o ) a .epae"o";
  • 12. #protipGetawayfromthew t ih blocks! # n m #becomes # i e . a e # = ae = tmnm Speed gains: 10x. Or 1000%. Available in most template engines
  • 13. Databinding
  • 14. Why?separatedataandlogic
  • 15. Example Tightlycoupledcodefnto adotps){ ucin dPs(ot / cag dt / hne aa pssps(ot; ot.uhps) / eeuecd / xct oe rnePsspss; edrot(ot) udtMn(ot) paeeupss;} Decoupledcode/ iiilz / ntaiepssbn(cag" rnePss; ot.id"hne, edrot)pssbn(cag" udtMn) ot.id"hne, paeeu;/ adn nwdt wl atmtclyeeuetecd / dig e aa il uoaial xct h oepssps( tte " nwps! }; ot.uh{ il: A e ot" )
  • 16. Frameworksthatprovidethis Backbone Kendo (Observable) Knockout Reactive Rivet AngularJS Flight Dojo (Observable)
  • 17. Datasync
  • 18. Why? separatedataandstoragebonus:decoupleclientandserver bonusx2:testinggetseasier
  • 19. Example Traditionalfetchingofdata$gt"pss,fnto(aa sau){ .e(/ot" ucindt, tts i (tts= 44 { f sau = 0) rtr soErr) eun hwro(; } vrpss=dt.ot; a ot aapss rnePsspss; edrot(ot)}; ) FetchingdatawithdatasourcevrdtSuc =nwDtSuc( a aaore e aaore{ tasot {ra:"pss } rnpr: ed /ot" , shm:{dt:"ot"} cea aa pss}; )dtSuc.id"hne,rnePss; aaorebn(cag" edrot)dtSuc.id"ro" soErr; aaorebn(err, hwro)
  • 20. Frameworksthatprovidethis Backbone (Collection) Kendo (DataSource) AngularJS Dojo (Store) Y.DataSource
  • 21. Java
  • 22. OMG,hesaidtheJword!
  • 23. DESIGN.TECHNOLOGY. COOLSHIT. JAVA?
  • 24. Wehavetoadmitthatthe JVMis... Very scalable (Twitter) Ubiquitous
  • 25. ProblemswithJavaforweb development Slow workflow (involves deploy) Requires lots of code for simple things
  • 26. ProblemswithJavaforweb development...solvedbyframeworksandlanguages Play Scala Lift Wicket Refreshing lack of XML included!
  • 27. Bringingitalltogether Techdemo,yay! No livecoding, dont yawn
  • 28. HasanyonedoneSCUBAlately?
  • 29. ShareyourSCUBAexperienceswith... Bubbles! Like smoke signals without the smoke
  • 30. TechstackPlay+Kendo
  • 31. Wrap-upModernapplicationsarelikejigsaw puzzles frameworksgiveyouthepieces,youfitthemintoabeautifulpicture. The above statement is less than 140 chars!
  • 32. Questions.Youhasthem. slides: slideshare.net/alexandergyoshev project: github.com/gyoshev/fitc-am13-demo @alex_gyoshev alex@gyoshev.net