Making Sense of Web Frameworks

Making Sense of Web Frameworks

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

16ae5c2e160af3bdb60db447c092985d?s=128

Daniel Morrison

May 11, 2015
Tweet

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