Presentation on building modern web applications from FITC Amsterdam 2013.

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

5. Why?
separate data and rendering

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

14. Why?
separate data and logic

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

22. OMG, he said the J word!

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

28. Has anyone done SCUBA lately?

30. Share your SCUBA experiences with...
Bubbles!
Like smoke signals without the smoke

31. Tech stack
Play + Kendo

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