building modern web apps with html5, javascript, and java

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

alex@gyoshev.net