Why you should use a MV* framework

WHY YOU SHOULD USE A CLIENT-SIDE MV FRAMEWORK Joël Cox
joelcox.nl @joelcox ˒

Who is this kid? (And why should I listen to
him?)

- Where are we coming from? - What are the
challenges? - Where are we heading?

VERY LITTLE CODE AHEAD WARNING:

Once upon a time, a team at a small so
ware company in Redmond, USA set out to make the web a bit more dynamic...

XMLHttpRequest

XMLHttpRequest be er known as AJAX

Other browsers adopted the new “standard”and we lived happily ever
a er.

Other browsers adopted the new “standard”and we lived happily ever
a er?

How many people here consider themselves to be experienced jQuery
programmers?

How many people here consider themselves to be experienced JavaScript
programmers?

$.post('api/endpoint', {key: value}, { success: function(data) { $('#container').appendTo(data.message); $.get('api/endpoint/' +
data.id, function(data) { $.get('api/endpoint/2', function(data) { // More callbacks }); }), }, error: function(errorMessage) { $('#container').appendTo(errorMessage); // More callbacks, again. }); } });

Somehow jQuery made us forget about good practices (callbacks ain’t
bad, but not 5 levels deep)

And now you want to make rich, desktop-like, web applications
and then shit hits the fan

Didn’t we see that before?

<html> <head> <title>Articles</title> <?php if (isset($_COOKIE['auth'])) header('/login'); $article = $db->get_results('SELECT
* FROM pages WHERE id = "' . mysql_string_escape($_GET['id'] . '"'); ?> </head> <body> <?php foreach ($articles as $article): ?> <h1><?= $article->title ?></h1> <em>By <?= $article->author ?></em> <?= format_body($article->content) ?> <?php endforeach ?> </body> </html>

Model (data) Controller (request) View (layout)

Traditional web MVC does all this work on the server

Client-side MV frameworks put all this functionality in the browser
˒

Model (data) Controller (request) View (UI) Template (layout)

Lesson #1 Brush up your JS skills, big time

Why is function suddenly undeﬁned for this?

... Server.prototype.bindListeners = function() { this.socket.on('data', this.processData); }; Server.prototype.doSomething =
function(part) { ... }; Server.prototype.processData = function(data) { this.doSomething(data); }; > TypeError: Object #<Object> has no method 'doSomething'

... Server.prototype.bindListeners = function() { this.socket.on('data', this.processData); }; Server.prototype.doSomething =
function(part) { ... }; Server.prototype.processData = function(data) { this.doSomething(data); }; > TypeError: Object #<Object> has no method 'doSomething' this refers to socket, not Server

... Server.prototype.bindListeners = function() { this.socket.on('data', this.processData.bind(this)); }; Server.prototype.doSomething =
function(part) { ... }; Server.prototype.processData = function(data) { this.doSomething(data); }; > TypeError: Object #<Object> has no method 'doSomething'

“Learning JavaScript with Object Graphs” on How To Node “Understanding
bind and bindAll [in Backbone.js]” on Big Binary

Lesson #2 Todo apps don’t give you the whole story

Nested views; how do the diﬀerent frameworks handle this ?
(Hints: Zombie views and rerender all the things!)

Lesson #3 Flexibility is killer

Use something like Marione e.js for additional structure

Lesson #4 Listen to the experts (Derek Bailey, Addy Osmani,
Tom Dale)

“The best programmers are the quickest to Google” – Vu
Tran

Lesson #5 Refactor, refactor, refactor.

Not tackeling stuﬀ right now will leave you with huge
technical debt

Shared codebase between client and server (h ps://github.com/airbnb/rendr)

API Driven Development (h p://alexbilbie.com/2013/03/api-driven-development-talk/)

Fin. Thanks for listening!

Why you should use a MV* framework

Why you should use a MV* framework

More Decks by Joël Cox

Other Decks in Programming

Featured

Transcript