Why you should use a MV* framework

Presented at Codee (http://cod.ee.)

More from me about business and technology.

1. WHY YOU SHOULD USE A CLIENT-SIDE MV FRAMEWORK Joël Cox joelcox.nl @joelcox ˒
2. Who is this kid? (And why should I listen to him?)
4. - Where are we coming from? - What are the challenges? - Where are we heading?
5. VERY LITTLE CODE AHEAD WARNING:
6. 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...
7. XMLHttpRequest
8. XMLHttpRequest be er known as AJAX
9. Other browsers adopted the new “standard”and we lived happily ever a er.
10. Other browsers adopted the new “standard”and we lived happily ever a er?
11. How many people here consider themselves to be experienced jQuery programmers?
12. How many people here consider themselves to be experienced JavaScript programmers?
13. $.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. }); } });
14. Somehow jQuery made us forget about good practices (callbacks ain’t bad, but not 5 levels deep)
15. And now you want to make rich, desktop-like, web applications and then shit hits the fan
16. Didn’t we see that before?
17. <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>
18. MVC
19. Model (data) Controller (request) View (layout)
20. Traditional web MVC does all this work on the server
21. Client-side MV frameworks put all this functionality in the browser ˒
22. Model (data) Controller (request) View (UI) Template (layout)
23. ˒ ?
24. - Where are we coming from? - What are the challenges? - Where are we heading?
26. Lesson #1 Brush up your JS skills, big time
27. Why is function suddenly undefined for this?
28. ... 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'
29. ... 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
30. ... 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'
31. “Learning JavaScript with Object Graphs” on How To Node “Understanding bind and bindAll [in Backbone.js]” on Big Binary
32. Lesson #2 Todo apps don’t give you the whole story
33. Nested views; how do the different frameworks handle this ? (Hints: Zombie views and rerender all the things!)
34. Lesson #3 Flexibility is killer
35. Use something like Marione e.js for additional structure
36. Lesson #4 Listen to the experts (Derek Bailey, Addy Osmani, Tom Dale)
37. “The best programmers are the quickest to Google” – Vu Tran
38. Lesson #5 Refactor, refactor, refactor.
39. Not tackeling stuff right now will leave you with huge technical debt
40. - Where are we coming from? - What are the challenges? - Where are we heading?
41. Shared codebase between client and server (h ps://github.com/airbnb/rendr)
42. API Driven Development (h p://alexbilbie.com/2013/03/api-driven-development-talk/)
43. Fin. Thanks for listening!