Building ModernWeb Apps withHTML5, JS, and
Java... and how to stay productive
with / Alex Gyoshev @alex_gyoshev
{{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. ”
Managing complexityTemplatesData bindingData syncWidgets
Templates
Why?separate data and rendering
Template enginesUnderscoreResig Micro templatesMustacheHandlebarsEJS
KendodoTjQuery.tmplPUREHogan
...and many more
Which templates are best?Hint: it depends!
Different template enginesLogic-less vs logic-full
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);
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);
#protip
Use precompiled templatesAs easy as var t = _.template("foo");
#protip
Get away from the withblocks!
#= name # becomes #= item.name #Speed gains: 10x. Or 1000%.Available in most template engines
Data binding
Why?separate data and logic
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!" });
Frameworks that provide thisBackboneKendo (Observable)KnockoutReactiveRivetAngularJSFlightDojo (Observable)
Data sync
Why?separate data and storage
bonus: decouple client and serverbonus x2: testing gets easier
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);
Frameworks that provide thisBackbone (Collection)Kendo (DataSource)AngularJSDojo (Store)Y.DataSource
Java
OMG, he said the J word!
DESIGN.TECHNOLOGY.COOL SHIT.
JAVA?
We have to admit that theJVM is...
Very scalable (Twitter)Ubiquitous
Problems with Java for webdevelopment
Slow workflow (involves deploy)Requires lots of code for simple things
Problems with Java for webdevelopment
... solved by frameworks and languagesPlayScalaLiftWicket
Refreshing lack of XML included!
Bringing it all togetherTech demo, yay!
No livecoding, don't yawn
Has anyone done SCUBA lately?
Share your SCUBA experiences with...
Bubbles!Like smoke signals without the smoke
Tech stack
Play + Kendo
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!
Questions. You has them.slides:
project:
slideshare.net/alexandergyoshev
github.com/gyoshev/fitc-am13-demo
@alex_gyoshev