building modern web apps with html5, javascript, and java
DESCRIPTION
Presentation on building modern web applications from FITC Amsterdam 2013.TRANSCRIPT
![Page 1: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/1.jpg)
Building ModernWeb Apps withHTML5, JS, and
Java... and how to stay productive
with / Alex Gyoshev @alex_gyoshev
![Page 2: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/2.jpg)
{{Insert clever quote}}
Justin Meyer, JavaScriptMVC
“ The secret to building large apps is NEVER buildlarge apps. Break up your applications into smallpieces. Then, assemble those testable, bite-sized
pieces into your big application. ”
![Page 3: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/3.jpg)
Managing complexityTemplatesData bindingData syncWidgets
![Page 4: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/4.jpg)
Templates
![Page 5: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/5.jpg)
Why?separate data and rendering
![Page 6: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/6.jpg)
Template enginesUnderscoreResig Micro templatesMustacheHandlebarsEJS
KendodoTjQuery.tmplPUREHogan
...and many more
![Page 7: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/7.jpg)
Which templates are best?Hint: it depends!
![Page 8: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/8.jpg)
Different template enginesLogic-less vs logic-full
![Page 9: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/9.jpg)
Logic-less example: MustacheTemplate
JSON
Usage
{{#items}} {{#first}} <li><strong>{{name}}</strong></li> {{/first}} {{#link}} <li><a href="{{url}}">{{name}}</a></li> {{/link}}{{/items}}
{ "items": [ {"name": "red", "first": true, "url": "#Red"}, {"name": "green", "link": true, "url": "#Green"}, {"name": "blue", "link": true, "url": "#Blue"} ]}
var html = Mustache.to_html(template, json);
![Page 10: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/10.jpg)
Logic-full example: _ andKendoTemplate
JSON
Usage
# for (var i = 0; i < items.length; i++) { # # if (i == 0) { # <li><strong>#= items[i].name #</strong></li> # } else { # <li><a href="#= items[i].url #">#= items[i].name #</a></li> # } ## } #
{ "items": [ {"name": "red", "url": "#Red"}, {"name": "green", "url": "#Green"}, {"name": "blue", "url": "#Blue"} ]}
var html = template(json);
![Page 11: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/11.jpg)
#protip
Use precompiled templatesAs easy as var t = _.template("foo");
![Page 12: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/12.jpg)
#protip
Get away from the withblocks!
#= name # becomes #= item.name #Speed gains: 10x. Or 1000%.Available in most template engines
![Page 13: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/13.jpg)
Data binding
![Page 14: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/14.jpg)
Why?separate data and logic
![Page 15: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/15.jpg)
ExampleTightly coupled code
Decoupled code
function addPost(post) { // change data posts.push(post);
// execute code renderPosts(posts);
updateMenu(posts);}
// initializeposts.bind("change", renderPosts);posts.bind("change", updateMenu);
// adding new data will automatically execute the codeposts.push({ title: "A new post!" });
![Page 16: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/16.jpg)
Frameworks that provide thisBackboneKendo (Observable)KnockoutReactiveRivetAngularJSFlightDojo (Observable)
![Page 17: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/17.jpg)
Data sync
![Page 18: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/18.jpg)
Why?separate data and storage
bonus: decouple client and serverbonus x2: testing gets easier
![Page 19: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/19.jpg)
ExampleTraditional fetching of data
Fetching data with data source
$.get("/posts", function(data, status) { if (status == 404) { return showError(); }
var posts = data.posts;
renderPosts(posts);});
var dataSource = new DataSource({ transport: { read: "/posts" },
schema: { data: "posts" }});
dataSource.bind("change", renderPosts);dataSource.bind("error", showError);
![Page 20: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/20.jpg)
Frameworks that provide thisBackbone (Collection)Kendo (DataSource)AngularJSDojo (Store)Y.DataSource
![Page 21: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/21.jpg)
Java
![Page 22: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/22.jpg)
OMG, he said the J word!
![Page 23: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/23.jpg)
DESIGN.TECHNOLOGY.COOL SHIT.
JAVA?
![Page 24: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/24.jpg)
We have to admit that theJVM is...
Very scalable (Twitter)Ubiquitous
![Page 25: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/25.jpg)
Problems with Java for webdevelopment
Slow workflow (involves deploy)Requires lots of code for simple things
![Page 26: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/26.jpg)
Problems with Java for webdevelopment
... solved by frameworks and languagesPlayScalaLiftWicket
Refreshing lack of XML included!
![Page 27: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/27.jpg)
Bringing it all togetherTech demo, yay!
No livecoding, don't yawn
![Page 28: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/28.jpg)
Has anyone done SCUBA lately?
![Page 29: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/29.jpg)
![Page 30: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/30.jpg)
Share your SCUBA experiences with...
Bubbles!Like smoke signals without the smoke
![Page 31: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/31.jpg)
Tech stack
Play + Kendo
![Page 32: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/32.jpg)
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!
![Page 33: Building modern web apps with html5, javascript, and java](https://reader030.vdocument.in/reader030/viewer/2022020206/547ec1d05906b5c9718b4709/html5/thumbnails/33.jpg)
Questions. You has them.slides:
project:
slideshare.net/alexandergyoshev
github.com/gyoshev/fitc-am13-demo
@alex_gyoshev