Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building modern web apps with html5, javascript, and java


Published on

Presentation on building modern web applications from FITC Amsterdam 2013.

Published in: Technology
  • Be the first to comment

Building modern web apps with html5, javascript, and java

  1. 1. Building ModernWeb Apps withHTML5, JS, and Java ... and how to stay productive with Alex Gyoshev / @alex_gyoshev
  2. 2. {{Insert clever quote}}“ 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. 3. Managing complexity Templates Data binding Data sync Widgets
  4. 4. Templates
  5. 5. Why?separate data and rendering
  6. 6. Template engines Underscore Kendo Resig Micro templates doT Mustache jQuery.tmpl Handlebars PURE EJS Hogan ...and many more
  7. 7. Which templates are best? Hint: it depends!
  8. 8. Different template engines Logic-less vs logic-full
  9. 9. Logic-less example: Mustache Template {#tm} {ies} {#is} {frt} <i<tog{nm}<srn>/i l>srn>{ae}/tog<l> {/is} {frt} {#ik} {ln} <i< he={ul}>{ae}/>/i l>a rf"{r}"{nm}<a<l> {/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. 10. Logic-full example: _ and Kendo Template#fr(a i=0 i<ieslnt;i+ {# o vr ; tm.egh +) #i ( = 0 {# f i = ) <i<tog#<l> l>srn>= tm[]nm <srn>/i #}es {# le <i< he=# iesi.r #>>/i l>a rf"= tm[]ul "# tm[]nm <a<l> #}##}# 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. 11. #protipUse precompiled templates As easy as v r t = _ t m l t ( f o ) a .epae"o";
  12. 12. #protipGet away from the w t ih blocks! # n m #becomes # i e . a e # = ae = tmnm Speed gains: 10x. Or 1000%. Available in most template engines
  13. 13. Data binding
  14. 14. Why?separate data and logic
  15. 15. Example Tightly coupled codefnto adotps){ ucin dPs(ot / cag dt / hne aa pssps(ot; ot.uhps) / eeuecd / xct oe rnePsspss; edrot(ot) udtMn(ot) paeeupss;} Decoupled code/ 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. 16. Frameworks that provide this Backbone Kendo (Observable) Knockout Reactive Rivet AngularJS Flight Dojo (Observable)
  17. 17. Data sync
  18. 18. Why? separate data and storagebonus: decouple client and server bonus x2: testing gets easier
  19. 19. Example Traditional fetching of data$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)}; ) Fetching data with data sourcevrdtSuc =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. 20. Frameworks that provide this Backbone (Collection) Kendo (DataSource) AngularJS Dojo (Store) Y.DataSource
  21. 21. Java
  22. 22. OMG, he said the J word!
  24. 24. We have to admit that the JVM is... Very scalable (Twitter) Ubiquitous
  25. 25. Problems with Java for web development Slow workflow (involves deploy) Requires lots of code for simple things
  26. 26. Problems with Java for web development... solved by frameworks and languages Play Scala Lift Wicket Refreshing lack of XML included!
  27. 27. Bringing it all together Tech demo, yay! No livecoding, dont yawn
  28. 28. Has anyone done SCUBA lately?
  29. 29. Share your SCUBA experiences with... Bubbles! Like smoke signals without the smoke
  30. 30. Tech stackPlay + Kendo
  31. 31. Wrap-upModern applications are like jigsaw puzzles — frameworks give you the pieces,you fit them into a beautiful picture. The above statement is less than 140 chars!
  32. 32. Questions. You has them. slides: project: @alex_gyoshev