Building modern web apps with html5, javascript, and java
3 likes10,264 views
This document discusses building modern web apps with HTML5, JavaScript, and Java. It covers managing complexity with templates, data binding, data syncing, and widgets. It recommends using logic-less templates like Mustache and Handlebars for simplicity. Frameworks like Backbone, Kendo, and AngularJS help separate data and logic through data binding and sync data with backends. The document demonstrates these concepts with code examples. It acknowledges Java's role through frameworks like Play, Scala, and Lift that improve on plain Java for web development. The document concludes by wrapping up how frameworks provide modular pieces to build applications like puzzles.
![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;](https://image.slidesharecdn.com/buildingmodernwebappswithhtml5javascriptandjava-130219044609-phpapp02/85/Building-modern-web-apps-with-html5-javascript-and-java-9-320.jpg)
![Logic-full example: _ and
Kendo
Template
#fr(a i=0 i<ieslnt;i+ {#
o vr ; tm.egh +)
#i ( = 0 {#
f i = )
<i<tog# iesi.ae#/tog<l>
l>srn>= tm[]nm <srn>/i
#}es {#
le
<i< he=# iesi.r #>=iesi.ae#/>/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}
]
}
Usage
vrhm =tmlt(sn;
a tl epaejo)](https://image.slidesharecdn.com/buildingmodernwebappswithhtml5javascriptandjava-130219044609-phpapp02/85/Building-modern-web-apps-with-html5-javascript-and-java-10-320.jpg)
Building modern web apps with html5, javascript, and java
- 1. Building Modern Web Apps with HTML5, JS, and Java ... and how to stay productive with Alex Gyoshev / @alex_gyoshev
- 2. {{Insert clever quote}} “ The secret to building large apps is NEVER build large apps. Break up your applications into small pieces. Then, assemble those testable, bite-sized pieces into your big application. ” Justin Meyer, JavaScriptMVC
- 3. Managing complexity Templates Data binding Data sync Widgets
- 4. Templates
- 6. Template engines Underscore Kendo Resig Micro templates doT Mustache jQuery.tmpl Handlebars PURE EJS Hogan ...and many more
- 7. Which templates are best? Hint: it depends!
- 8. Different template engines Logic-less vs logic-full
- 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. Logic-full example: _ and Kendo Template #fr(a i=0 i<ieslnt;i+ {# o vr ; tm.egh +) #i ( = 0 {# f i = ) <i<tog# iesi.ae#/tog<l> l>srn>= tm[]nm <srn>/i #}es {# le <i< he=# iesi.r #>=iesi.ae#/>/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} ] } Usage vrhm =tmlt(sn; a tl epaejo)
- 11. #protip Use precompiled templates As easy as v r t = _ t m l t ( f o ) a .epae"o";
- 12. #protip Get 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. Data binding
- 15. Example Tightly coupled code fnto adotps){ ucin dPs(ot / cag dt / hne aa pssps(ot; ot.uhps) / eeuecd / xct oe rnePsspss; edrot(ot) udtMn(ot) paeeupss; } Decoupled code / iiilz / ntaie pssbn(cag" rnePss; ot.id"hne, edrot) pssbn(cag" udtMn) ot.id"hne, paeeu; / adn nwdt wl atmtclyeeuetecd / dig e aa il uoaial xct h oe pssps( tte " nwps! }; ot.uh{ il: A e ot" )
- 16. Frameworks that provide this Backbone Kendo (Observable) Knockout Reactive Rivet AngularJS Flight Dojo (Observable)
- 17. Data sync
- 18. Why? separate data and storage bonus: decouple client and server bonus x2: testing gets easier
- 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 source vrdtSuc =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. Frameworks that provide this Backbone (Collection) Kendo (DataSource) AngularJS Dojo (Store) Y.DataSource
- 21. Java
- 23. DESIGN. TECHNOLOGY. COOL SHIT. JAVA?
- 24. We have to admit that the JVM is... Very scalable (Twitter) Ubiquitous
- 25. Problems with Java for web development Slow workflow (involves deploy) Requires lots of code for simple things
- 26. Problems with Java for web development ... solved by frameworks and languages Play Scala Lift Wicket Refreshing lack of XML included!
- 27. Bringing it all together Tech demo, yay! No livecoding, don't yawn
- 30. Share your SCUBA experiences with... Bubbles! Like smoke signals without the smoke
- 32. Wrap-up Modern 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!
- 33. Questions. You has them. slides: slideshare.net/alexandergyoshev project: github.com/gyoshev/fitc-am13-demo @alex_gyoshev alex@gyoshev.net