Making Sense of Web Frameworks

Presented at GLSEC 2015 in Grand Rapids, Michigan on 11 May 2015.

Transcript

1. collectiveidea.com Making Sense of Web Frameworks Daniel Morrison collectiveidea.com @danielmorrison
2. collectiveidea.com
3. collectiveidea.com
4. collectiveidea.com
5. collectiveidea.com What’s a Web Framework?
6. collectiveidea.com Write Code View on the Web Do interesting stuff
7. collectiveidea.com Why use a Web Framework?
8. collectiveidea.com Work faster Have fun Profit!
9. collectiveidea.com What’s out there?
10. collectiveidea.com
11. collectiveidea.com
12. collectiveidea.com Where do we start?
13. collectiveidea.com
14. collectiveidea.com Languages vs Frameworks
15. collectiveidea.com
16. collectiveidea.com Languages vs Frameworks vs Runtimes
17. collectiveidea.com
18. collectiveidea.com
19. collectiveidea.com
20. collectiveidea.com Choosing a Framework
21. collectiveidea.com Option #1 Pick by Language
22. collectiveidea.com #1: Pick by Language
23. collectiveidea.com #1: Pick by Language
24. collectiveidea.com #1: Pick by Language
25. collectiveidea.com #1: Pick by Language ! Quicker to learn ! Easier to “sell” ! Limits your choices " Wrong for goals? " Baggage " Limits your choices
26. collectiveidea.com Option #2 Pick by Popularity
27. collectiveidea.com #2: Popularity
28. collectiveidea.com #2: Popularity “For the fourth year in a row, Python retains it's #1 dominance followed by Java, C++, and Javascript.”
29. collectiveidea.com #2: Popularity
30. collectiveidea.com #2: Popularity 1 JavaScript 2 Java 3 PHP 4 Python 5 C# 5 C++ 5 Ruby
31. collectiveidea.com #2: Popularity
32. collectiveidea.com #2: Popularity source: Google Trends
33. 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?
34. collectiveidea.com Server Languages Obscure Popularity
35. collectiveidea.com Option #3 Pick by Type
36. collectiveidea.com #3: Type Where is the logic?
37. collectiveidea.com #3: Type Server Side Icons by alf, Konstantin Velichko, & Edward Boatman from the Noun Project.
38. collectiveidea.com #3: Type Client Side Icons by alf, Konstantin Velichko, & Edward Boatman from the Noun Project.
39. collectiveidea.com #3: Type Both!
40. collectiveidea.com #3: Type ! Right tool for the job ! Focus on features ! Optimize for Env " May be new Language " Difficulties may arise " New toolchains
41. collectiveidea.com Option #4 Ecosystem
42. collectiveidea.com #4: Ecosystem
43. collectiveidea.com #4: Ecosystem
44. collectiveidea.com #4: Ecosystem
45. collectiveidea.com 4: Ecosystem ! Find helpful people ! Easy to research ! May be friendly expats " Safety bias " Miss innovations " Different styles
46. collectiveidea.com We need to weigh all options.
47. collectiveidea.com Let’s Dive In
48. collectiveidea.com Server Side • Server Generated Code • Stateless • Model View Controller • Database ORM • Routing
49. collectiveidea.com
50. collectiveidea.com
51. collectiveidea.com
52. collectiveidea.com
53. collectiveidea.com class!Article!<!ActiveRecord::Base
 end

54. 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
55. collectiveidea.com <tbody>
 !!<%!@articles.each!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>
56. collectiveidea.com Server Side • Most common type of framework • Safe choice • Works like the web
57. collectiveidea.com Client Side • Javascript • No server needed • Stateful
58. collectiveidea.com
59. collectiveidea.com
60. collectiveidea.com
61. collectiveidea.com
62. collectiveidea.com
63. collectiveidea.com
64. collectiveidea.com Todos.Todo!=!DS.Model.extend({
 !!title:!DS.attr('string'),
 !!isCompleted:!DS.attr('boolean')
 });
65. 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')
 });
66. 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>
67. collectiveidea.com Client Side • No server code needed • Rich, stageful interfaces • Interfaces feel responsive • Logic runs in the browser
68. collectiveidea.com Both Sides • Single language • Run code on either client or server
69. collectiveidea.com
70. collectiveidea.com
71. collectiveidea.com
72. collectiveidea.com
73. collectiveidea.com
74. collectiveidea.com
75. 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');

76. 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());
 !!!!}
 !!});
 });
77. 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>
78. collectiveidea.com Both Sides • Write in a single language • Move logic from server to client later
79. collectiveidea.com So which is best for me?
80. collectiveidea.com Server Side • Most common choice • Request-response cycle • Mature frameworks • Avoid Javascript (if you want)
81. 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
82. collectiveidea.com What shouldn’t I consider?
83. collectiveidea.com Marketing
84. collectiveidea.com Marketing (unless terrible)
85. collectiveidea.com Version Numbers
86. collectiveidea.com Version Numbers (unless pre-1.0)
87. collectiveidea.com Performance
88. collectiveidea.com
89. collectiveidea.com
90. collectiveidea.com But it wouldn’t be done yet!
91. collectiveidea.com …but then Facebook changed PHP!
92. collectiveidea.com “The Go standard lib is good enough for most apps.”
93. collectiveidea.com
94. collectiveidea.com Frameworks give us flexibility.
95. collectiveidea.com Good Frameworks
96. collectiveidea.com Save you time.
97. collectiveidea.com Get better over time.
98. collectiveidea.com Are used in production
99. collectiveidea.com Have great documentation
100. collectiveidea.com The right framework for you?
101. collectiveidea.com The framework that gets work done.
102. collectiveidea.com Thank You! Daniel Morrison collectiveidea.com @danielmorrison
103. 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