Client-side rendering

whoami

Maciej Małecki

Node.js contributor, open source hacker. Maintainer of cradle and vows. Favorite buzzword: web scale.

Quite cool guy.

https://github.com/mmalecki

https://twitter.com/maciejmalecki

me@mmalecki.com

client-side rendering

pretty much what it sounds like

making client's browser render templates.

and making your server return JSON.

it means you're getting an API. for free!

your app as an API

focus on data

mobile devices

developers, developers, developers!

he approves!

other advantages

easier testing

easier for front-end programmers

less load on your servers

decoupled code

disadvantages of classic model

mixing business logic with presentation

programmers writing templates

but my users won't curl!

$ curl api.myawesomesite.com
{"message":"No resource specified"}

oh well...

wild developer appears

hey, I like your service. do you have an API?

you don't always need an API

your homepage doesn't need an API.

neither does your blog.

solutions

client-side frameworks

knockout.js

ember.js

backbone.js

flatiron

and many more...

knockout.js

mvvm (Model-View-ViewModel)

no data access layer

jQuery templating

bindings

<p data-bind="text: property"></p>            <!-- input -->
<script>
  ko.applyBindings({ property: "hello web-5" });
</script>

<p data-bind="text: property">hello web-5</p> <!-- output -->

ember.js

mvc

full-blown web framework

handlebars templating

library for data access available

example: travis ci

backbone.js

literally binds frontend to backend

data access layer

no templating

flatiron

very modular

no data access layer

plates templating

broadway

resourceful

<script>
  Plates.bind("<p id=\"text\"></p>", { text: "hello web-5" });
</script>

<p id="text">hello web-5</p>

server-side frameworks

flatiron

restify

express

or just...

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ data: 'hello, web-5!' });
}).listen(1337);

questions?