Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

VERY LITTLE CODE AHEAD WARNING:

Slide 6

Slide 6 text

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...

Slide 7

Slide 7 text

XMLHttpRequest

Slide 8

Slide 8 text

XMLHttpRequest be er known as AJAX

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

$.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. }); } });

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Didn’t we see that before?

Slide 17

Slide 17 text

Articles get_results('SELECT * FROM pages WHERE id = "' . mysql_string_escape($_GET['id'] . '"'); ?>

title ?>

By author ?> content) ?>

Slide 18

Slide 18 text

MVC

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Traditional web MVC does all this work on the server

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

˒ ?

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

Lesson #1 Brush up your JS skills, big time

Slide 27

Slide 27 text

Why is function suddenly undefined for this?

Slide 28

Slide 28 text

... 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 # has no method 'doSomething'

Slide 29

Slide 29 text

... 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 # has no method 'doSomething' this refers to socket, not Server

Slide 30

Slide 30 text

... 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 # has no method 'doSomething'

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Lesson #3 Flexibility is killer

Slide 35

Slide 35 text

Use something like Marione e.js for additional structure

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Lesson #5 Refactor, refactor, refactor.

Slide 39

Slide 39 text

Not tackeling stuff right now will leave you with huge technical debt

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Fin. Thanks for listening!