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
Making Sense of Web Frameworks
Search
Daniel Morrison
May 11, 2015
Programming
0
100
Making Sense of Web Frameworks
Presented at GLSEC 2015 in Grand Rapids, Michigan on 11 May 2015.
Daniel Morrison
May 11, 2015
Tweet
Share
More Decks by Daniel Morrison
See All by Daniel Morrison
Early 2024 Holland City Fiber Update
danielmorrison
0
4.5k
August 2019 Broadband Service - City Study
danielmorrison
0
6.8k
Holland BPW Fiber to the Premises Capital Recovery Models
danielmorrison
0
8.6k
Holland BPW Broadband Expansion
danielmorrison
0
9.6k
Downtown Holland Fiber Update
danielmorrison
0
98
Interactor
danielmorrison
2
450
Getting Started with Ruby
danielmorrison
5
480
You Can't Fear JavaScript Anymore
danielmorrison
2
180
Other Decks in Programming
See All in Programming
クラス設計の手順
akikogoto
0
130
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
マテリアルって何者?RealityKitで扱うマテリアル入門
nao_randd
0
100
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
160
Golangci-lint v2爆誕: 君たちはどうすべきか
logica0419
1
300
「MCPを使ってる人」が より詳しくなるための解説
yamaguchidesu
0
260
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
170
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
0
140
Ruby で作る RISC-V CPU エミュレーター / RISC-V CPU emulator made with Ruby
hayaokimura
5
1.2k
最速Green Tea 🍵 Garbage Collector
kuro_kurorrr
1
160
M5UnitUnified 最新動向 2025/05
gob
0
150
파급효과: From AI to Android Development
l2hyunwoo
0
170
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Rails Girls Zürich Keynote
gr2m
94
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
A Tale of Four Properties
chriscoyier
159
23k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
810
Practical Orchestrator
shlominoach
187
11k
GraphQLとの向き合い方2022年版
quramy
46
14k
Why Our Code Smells
bkeepers
PRO
336
57k
Designing Experiences People Love
moore
142
24k
The Cult of Friendly URLs
andyhume
78
6.4k
Transcript
collectiveidea.com Making Sense of Web Frameworks Daniel Morrison collectiveidea.com @danielmorrison
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com What’s a Web Framework?
collectiveidea.com Write Code View on the Web Do interesting stuff
collectiveidea.com Why use a Web Framework?
collectiveidea.com Work faster Have fun Profit!
collectiveidea.com What’s out there?
collectiveidea.com
collectiveidea.com
collectiveidea.com Where do we start?
collectiveidea.com
collectiveidea.com Languages vs Frameworks
collectiveidea.com
collectiveidea.com Languages vs Frameworks vs Runtimes
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com Choosing a Framework
collectiveidea.com Option #1 Pick by Language
collectiveidea.com #1: Pick by Language
collectiveidea.com #1: Pick by Language
collectiveidea.com #1: Pick by Language
collectiveidea.com #1: Pick by Language ! Quicker to learn !
Easier to “sell” ! Limits your choices " Wrong for goals? " Baggage " Limits your choices
collectiveidea.com Option #2 Pick by Popularity
collectiveidea.com #2: Popularity
collectiveidea.com #2: Popularity “For the fourth year in a row,
Python retains it's #1 dominance followed by Java, C++, and Javascript.”
collectiveidea.com #2: Popularity
collectiveidea.com #2: Popularity 1 JavaScript 2 Java 3 PHP 4
Python 5 C# 5 C++ 5 Ruby
collectiveidea.com #2: Popularity
collectiveidea.com #2: Popularity source: Google Trends
collectiveidea.com #2: Popularity ! Lots of resources ! Excitement !
Active community " May change too fast " May change too slow " Not battle-tested " Fewer experts " Is it actually used?
collectiveidea.com Server Languages Obscure Popularity
collectiveidea.com Option #3 Pick by Type
collectiveidea.com #3: Type Where is the logic?
collectiveidea.com #3: Type Server Side Icons by alf, Konstantin Velichko,
& Edward Boatman from the Noun Project.
collectiveidea.com #3: Type Client Side Icons by alf, Konstantin Velichko,
& Edward Boatman from the Noun Project.
collectiveidea.com #3: Type Both!
collectiveidea.com #3: Type ! Right tool for the job !
Focus on features ! Optimize for Env " May be new Language " Difficulties may arise " New toolchains
collectiveidea.com Option #4 Ecosystem
collectiveidea.com #4: Ecosystem
collectiveidea.com #4: Ecosystem
collectiveidea.com #4: Ecosystem
collectiveidea.com 4: Ecosystem ! Find helpful people ! Easy to
research ! May be friendly expats " Safety bias " Miss innovations " Different styles
collectiveidea.com We need to weigh all options.
collectiveidea.com Let’s Dive In
collectiveidea.com Server Side • Server Generated Code • Stateless •
Model View Controller • Database ORM • Routing
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com class!Article!<!ActiveRecord::Base end
collectiveidea.com class!ArticlesController!<!ApplicationController !!#!GET!/articles !!#!GET!/articles.json !!def!index !!!!@articles!=!Article.all !!end !!#!GET!/articles/1 !!#!GET!/articles/1.json
!!def!show !!!!@article!=!Article.find(params[:id]) !!end !!#!GET!/articles/new !!def!new !!!!@article!=!Article.new !!end !#!extra!lines!omitted.! end
collectiveidea.com <tbody> !!<%
[email protected]
!do5|article|!%> !!!!<tr> !!!!!!<td><%=!article.title!%></td> !!!!!!<td><%=!article.body!%></td> !!!!!!<td><%=!link_to!'Show',!article!%></td> !!!!!!<td><%=!link_to!'Edit',!edit_article_path(article)!%></td> !!!!!!<td><%=!link_to!'Destroy',!article,!method:!:delete,!! !!!!!!!!!!!!data:!{!confirm:!'Are!you!sure?'!}!%></td>
!!!!</tr> !!<%!end!%> </tbody>
collectiveidea.com Server Side • Most common type of framework •
Safe choice • Works like the web
collectiveidea.com Client Side • Javascript • No server needed •
Stateful
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com Todos.Todo!=!DS.Model.extend({ !!title:!DS.attr('string'), !!isCompleted:!DS.attr('boolean') });
collectiveidea.com Todos.TodosListController!=!Ember.ArrayController.extend({ !!needs:!['todos'], !!allTodos:!Ember.computed.alias('controllers.todos'), !!itemController:!'todo', !!canToggle:!function!()!{ !!!!var!anyTodos!=!this.get('allTodos.length'); !!!!var!isEditing!=!this.isAny('isEditing'); !!!!return!anyTodos!&&!!isEditing;
!!}.property('allTodos.length',!'@each.isEditing') });
collectiveidea.com <section!id="main"> !!{{#if!canToggle}} !!!!{{input!type="checkbox"!id="toggle\all"!checked=allTodos.allAreDone}} !!{{/if}} !!<ul!id="todo\list"> !!!!{{#each}} !!!!!!<li!{{bind\attr!class="isCompleted:completed!isEditing:editing"}}> !!!!!!!!{{#if!isEditing}} !!!!!!!!!!{{todo\input!type="text"!class="edit"!value=bufferedTitle!
!!!!!!!!!!!!focus\out="doneEditing"!insert\newline="doneEditing"! !!!!!!!!!!!!escape\press="cancelEditing"}} !!!!!!!!{{else}} !!!!!!!!!!{{input!type="checkbox"!class="toggle"!checked=isCompleted}} !!!!!!!!!!<label!{{action!"editTodo"!on="doubleClick"}}>{{title}}</label> !!!!!!!!!!<button!{{action!"removeTodo"}}!class="destroy"></button> !!!!!!!!{{/if}} !!!!!!!!</li> !!!!{{/each}} !!</ul> </section>
collectiveidea.com Client Side • No server code needed • Rich,
stageful interfaces • Interfaces feel responsive • Logic runs in the browser
collectiveidea.com Both Sides • Single language • Run code on
either client or server
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com
collectiveidea.com Lists!=!new!Mongo.Collection('lists'); //!Calculate!a!default!name!for!a!list!in!the!form!of!'List!A' Lists.defaultName!=!function()!{ !!var!nextLetter!=!'A',!nextName!=!'List!'!+!nextLetter; !!while!(Lists.findOne({name:!nextName}))!{ !!!!//!not!going!to!be!too!smart!here,!can!go!past!Z !!!!nextLetter!=!String.fromCharCode(nextLetter.charCodeAt(0)!+!1); !!!!nextName!=!'List!'!+!nextLetter;
!!} !!return!nextName; }; Todos!=!new!Mongo.Collection('todos');
collectiveidea.com Router.map(function()!{ !!this.route('join'); !!this.route('signin'); !!this.route('listsShow',!{ !!!!path:!'/lists/:_id', !!!!//!subscribe!to!todos!before!the!page!is!rendered!but!don't!wait!on!the !!!!//!subscription,!we'll!just!render!the!items!as!they!arrive !!!!onBeforeAction:!function!()!{
!!!!!!this.todosHandle!=!Meteor.subscribe('todos',!this.params._id); !!!!!!if!(this.ready())!{ !!!!!!!!//!Handle!for!launch!screen!defined!in!app\body.js !!!!!!!!dataReadyHold.release(); !!!!!!} !!!!}, !!!!data:!function!()!{ !!!!!!return!Lists.findOne(this.params._id); !!!!}, !!!!action:!function!()!{ !!!!!!this.render(); !!!!} !!}); !!this.route('home',!{ !!!!path:!'/', !!!!action:!function()!{ !!!!!!Router.go('listsShow',!Lists.findOne()); !!!!} !!}); });
collectiveidea.com <div!class="list\todos"> !!<a!class="js\new\list!link\list\new">! !!!!<span!class="icon\plus"></span>New!List</a> !!{{#each!lists}} !!!!<a!href="{{pathFor!'listsShow'}}"!class="list\ todo!{{activeListClass}}"!title="{{name}}"> !!!!!!{{#if!userId}} !!!!!!!!<span!class="icon\lock"></span>
!!!!!!{{/if}} !!!!!!{{#if!incompleteCount}} !!!!!!!!<span!class="count\list">!!! !!!!!!!!!!{{incompleteCount}}! !!!!!!!!</span> !!!!!!{{/if}} !!!!!!{{name}} !!!!</a> !!{{/each}} </div>
collectiveidea.com Both Sides • Write in a single language •
Move logic from server to client later
collectiveidea.com So which is best for me?
collectiveidea.com Server Side • Most common choice • Request-response cycle
• Mature frameworks • Avoid Javascript (if you want)
collectiveidea.com Client Side • Newer and less information • Especially
great if simply calculating • May feel more familiar to desktop coders • May require server side anyway
collectiveidea.com What shouldn’t I consider?
collectiveidea.com Marketing
collectiveidea.com Marketing (unless terrible)
collectiveidea.com Version Numbers
collectiveidea.com Version Numbers (unless pre-1.0)
collectiveidea.com Performance
collectiveidea.com
collectiveidea.com
collectiveidea.com But it wouldn’t be done yet!
collectiveidea.com …but then Facebook changed PHP!
collectiveidea.com “The Go standard lib is good enough for most
apps.”
collectiveidea.com
collectiveidea.com Frameworks give us flexibility.
collectiveidea.com Good Frameworks
collectiveidea.com Save you time.
collectiveidea.com Get better over time.
collectiveidea.com Are used in production
collectiveidea.com Have great documentation
collectiveidea.com The right framework for you?
collectiveidea.com The framework that gets work done.
collectiveidea.com Thank You! Daniel Morrison collectiveidea.com @danielmorrison
collectiveidea.com Image Credits • Untitled by kris krüg https://www.flickr.com/photos/kk/6863172432 •
The empty room by Antoine Robiez https://www.flickr.com/photos/enthuan/9317165351 • Wild West Hotel by Marion Doss https://www.flickr.com/photos/ooocha/2594791354