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
93
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
1.7k
August 2019 Broadband Service - City Study
danielmorrison
0
5.4k
Holland BPW Fiber to the Premises Capital Recovery Models
danielmorrison
0
7.2k
Holland BPW Broadband Expansion
danielmorrison
0
8.2k
Downtown Holland Fiber Update
danielmorrison
0
93
Interactor
danielmorrison
2
440
Getting Started with Ruby
danielmorrison
5
430
You Can't Fear JavaScript Anymore
danielmorrison
2
180
Other Decks in Programming
See All in Programming
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
Rust.Nagoya #1
codemountains
0
170
DDDを志して3年経ったら「DDDの皮を被ったクリーンアーキテクチャ」になった話【デブサミ2024夏】
texmeijin
1
620
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
유연한 Composable 설계
l2hyunwoo
0
380
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Rustのweb開発を助ける 便利なツール紹介
yuki0418
1
190
CSC307 Lecture 08
javiergs
PRO
0
330
CSC307 Lecture 07
javiergs
PRO
0
220
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Web development in the modern age
philhawksworth
203
10k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
Become a Pro
speakerdeck
PRO
15
4.8k
Atom: Resistance is Futile
akmur
261
25k
What the flash - Photography Introduction
edds
65
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Done Done
chrislema
179
15k
4 Signs Your Business is Dying
shpigford
178
21k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Mythical Team-Month
searls
217
43k
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