Building modern web apps with html5, javascript, and java

  • Published on

  • View

  • Download


Presentation on building modern web applications from FITC Amsterdam 2013.


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>/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;"hne, edrot)pssbn(cag" udtMn)"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}; )"hne,rnePss; aaorebn(cag" edrot)"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: project: @alex_gyoshev


View more >