Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Why you should use a MV* framework
Search
Joël Cox
April 19, 2013
Programming
2
620
Why you should use a MV* framework
Presented at Codee (
http://cod.ee
.)
More from me about
business and technology
.
Joël Cox
April 19, 2013
Tweet
Share
More Decks by Joël Cox
See All by Joël Cox
Pixelpillow College Tour - HTTP APIs
joelcox
0
16
Pixelpillow College Tour - Call me Maybe
joelcox
0
27
Pixelpillow College Tour - Grafen, automaten en reguliere talen
joelcox
0
63
CI Joe
joelcox
0
68
Shipping products in a start-up environment
joelcox
0
60
Measuring Dependency Freshness in Software Systems
joelcox
0
110
(Really) naive data mining
joelcox
2
600
Deploying large scale web applications
joelcox
1
260
Other Decks in Programming
See All in Programming
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
6
4.8k
What's new in AppKit on macOS 26
1024jp
0
160
#QiitaBash MCPのセキュリティ
ryosukedtomita
2
1.5k
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
8.9k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
280
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
640
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
600
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
190
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
2
670
Model Pollution
hschwentner
1
160
生成AI時代のコンポーネントライブラリの作り方
touyou
1
300
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
49
14k
Art, The Web, and Tiny UX
lynnandtonic
300
21k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
360
How to Ace a Technical Interview
jacobian
278
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Site-Speed That Sticks
csswizardry
10
710
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Navigating Team Friction
lara
187
15k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
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?)
None
- 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>
MVC
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)
˒ ?
- Where are we coming from? - What are the
challenges? - Where are we heading?
None
Lesson #1 Brush up your JS skills, big time
Why is function suddenly undefined 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 different 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 stuff right now will leave you with huge
technical debt
- Where are we coming from? - What are the
challenges? - Where are we heading?
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!