Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making Sense of Web Frameworks

Making Sense of Web Frameworks

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

Daniel Morrison

May 11, 2015
Tweet

More Decks by Daniel Morrison

Other Decks in Programming

Transcript

  1. collectiveidea.com
    Making Sense of
    Web Frameworks
    Daniel Morrison
    collectiveidea.com
    @danielmorrison

    View full-size slide

  2. collectiveidea.com

    View full-size slide

  3. collectiveidea.com

    View full-size slide

  4. collectiveidea.com

    View full-size slide

  5. collectiveidea.com
    What’s a
    Web Framework?

    View full-size slide

  6. collectiveidea.com
    Write Code
    View on the Web
    Do interesting stuff

    View full-size slide

  7. collectiveidea.com
    Why use a
    Web Framework?

    View full-size slide

  8. collectiveidea.com
    Work faster
    Have fun
    Profit!

    View full-size slide

  9. collectiveidea.com
    What’s out there?

    View full-size slide

  10. collectiveidea.com

    View full-size slide

  11. collectiveidea.com

    View full-size slide

  12. collectiveidea.com
    Where do we start?

    View full-size slide

  13. collectiveidea.com

    View full-size slide

  14. collectiveidea.com
    Languages
    vs
    Frameworks

    View full-size slide

  15. collectiveidea.com

    View full-size slide

  16. collectiveidea.com
    Languages
    vs
    Frameworks
    vs
    Runtimes

    View full-size slide

  17. collectiveidea.com

    View full-size slide

  18. collectiveidea.com

    View full-size slide

  19. collectiveidea.com

    View full-size slide

  20. collectiveidea.com
    Choosing a
    Framework

    View full-size slide

  21. collectiveidea.com
    Option #1
    Pick by Language

    View full-size slide

  22. collectiveidea.com
    #1: Pick by Language

    View full-size slide

  23. collectiveidea.com
    #1: Pick by Language

    View full-size slide

  24. collectiveidea.com
    #1: Pick by Language

    View full-size slide

  25. collectiveidea.com
    #1: Pick by Language
    ! Quicker to learn
    ! Easier to “sell”
    ! Limits your choices
    " Wrong for goals?
    " Baggage
    " Limits your choices

    View full-size slide

  26. collectiveidea.com
    Option #2
    Pick by Popularity

    View full-size slide

  27. collectiveidea.com
    #2: Popularity

    View full-size slide

  28. collectiveidea.com
    #2: Popularity
    “For the fourth year in a row,
    Python retains it's #1 dominance
    followed by Java, C++, and
    Javascript.”

    View full-size slide

  29. collectiveidea.com
    #2: Popularity

    View full-size slide

  30. collectiveidea.com
    #2: Popularity
    1 JavaScript
    2 Java
    3 PHP
    4 Python
    5 C#
    5 C++
    5 Ruby

    View full-size slide

  31. collectiveidea.com
    #2: Popularity

    View full-size slide

  32. collectiveidea.com
    #2: Popularity
    source: Google Trends

    View full-size slide

  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?

    View full-size slide

  34. collectiveidea.com
    Server Languages
    Obscure Popularity

    View full-size slide

  35. collectiveidea.com
    Option #3
    Pick by Type

    View full-size slide

  36. collectiveidea.com
    #3: Type
    Where is the logic?

    View full-size slide

  37. collectiveidea.com
    #3: Type
    Server Side
    Icons by alf, Konstantin Velichko, & Edward Boatman
    from the Noun Project.

    View full-size slide

  38. collectiveidea.com
    #3: Type
    Client Side
    Icons by alf, Konstantin Velichko, & Edward Boatman
    from the Noun Project.

    View full-size slide

  39. collectiveidea.com
    #3: Type
    Both!

    View full-size slide

  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

    View full-size slide

  41. collectiveidea.com
    Option #4
    Ecosystem

    View full-size slide

  42. collectiveidea.com
    #4: Ecosystem

    View full-size slide

  43. collectiveidea.com
    #4: Ecosystem

    View full-size slide

  44. collectiveidea.com
    #4: Ecosystem

    View full-size slide

  45. collectiveidea.com
    4: Ecosystem
    ! Find helpful people
    ! Easy to research
    ! May be friendly expats
    " Safety bias
    " Miss innovations
    " Different styles

    View full-size slide

  46. collectiveidea.com
    We need to
    weigh all options.

    View full-size slide

  47. collectiveidea.com
    Let’s Dive In

    View full-size slide

  48. collectiveidea.com
    Server Side
    • Server Generated Code
    • Stateless
    • Model View Controller
    • Database ORM
    • Routing

    View full-size slide

  49. collectiveidea.com

    View full-size slide

  50. collectiveidea.com

    View full-size slide

  51. collectiveidea.com

    View full-size slide

  52. collectiveidea.com

    View full-size slide

  53. collectiveidea.com
    class!Article!end


    View full-size slide

  54. collectiveidea.com
    class!ArticlesController!!!#!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

    View full-size slide

  55. collectiveidea.com

    !!<%[email protected]!do5|article|!%>

    !!!!

    !!!!!!<%=!article.title!%>

    !!!!!!<%=!article.body!%>

    !!!!!!<%=!link_to!'Show',!article!%>

    !!!!!!<%=!link_to!'Edit',!edit_article_path(article)!%>

    !!!!!!<%=!link_to!'Destroy',!article,!method:!:delete,!!
    !!!!!!!!!!!!data:!{!confirm:!'Are!you!sure?'!}!%>

    !!!!

    !!<%!end!%>


    View full-size slide

  56. collectiveidea.com
    Server Side
    • Most common type of framework
    • Safe choice
    • Works like the web

    View full-size slide

  57. collectiveidea.com
    Client Side
    • Javascript
    • No server needed
    • Stateful

    View full-size slide

  58. collectiveidea.com

    View full-size slide

  59. collectiveidea.com

    View full-size slide

  60. collectiveidea.com

    View full-size slide

  61. collectiveidea.com

    View full-size slide

  62. collectiveidea.com

    View full-size slide

  63. collectiveidea.com

    View full-size slide

  64. collectiveidea.com
    Todos.Todo!=!DS.Model.extend({

    !!title:!DS.attr('string'),

    !!isCompleted:!DS.attr('boolean')

    });

    View full-size slide

  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')

    });

    View full-size slide

  66. collectiveidea.com

    !!{{#if!canToggle}}

    !!!!{{input!type="checkbox"!id="toggle\all"!checked=allTodos.allAreDone}}

    !!{{/if}}

    !!

    !!!!{{#each}}

    !!!!!!

    !!!!!!!!{{#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}}

    !!!!!!!!!!{{title}}

    !!!!!!!!!!

    !!!!!!!!{{/if}}

    !!!!!!!!

    !!!!{{/each}}

    !!


    View full-size slide

  67. collectiveidea.com
    Client Side
    • No server code needed
    • Rich, stageful interfaces
    • Interfaces feel responsive
    • Logic runs in the browser

    View full-size slide

  68. collectiveidea.com
    Both Sides
    • Single language
    • Run code on either client
    or server

    View full-size slide

  69. collectiveidea.com

    View full-size slide

  70. collectiveidea.com

    View full-size slide

  71. collectiveidea.com

    View full-size slide

  72. collectiveidea.com

    View full-size slide

  73. collectiveidea.com

    View full-size slide

  74. collectiveidea.com

    View full-size slide

  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');


    View full-size slide

  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());

    !!!!}

    !!});

    });

    View full-size slide

  77. collectiveidea.com

    !!!
    !!!!New!List


    !!{{#each!lists}}

    !!!!todo!{{activeListClass}}"!title="{{name}}">

    !!!!!!{{#if!userId}}

    !!!!!!!!

    !!!!!!{{/if}}

    !!!!!!{{#if!incompleteCount}}

    !!!!!!!!!!!
    !!!!!!!!!!{{incompleteCount}}!
    !!!!!!!!

    !!!!!!{{/if}}

    !!!!!!{{name}}

    !!!!

    !!{{/each}}


    View full-size slide

  78. collectiveidea.com
    Both Sides
    • Write in a single language
    • Move logic from server to client later

    View full-size slide

  79. collectiveidea.com
    So which is best
    for me?

    View full-size slide

  80. collectiveidea.com
    Server Side
    • Most common choice
    • Request-response cycle
    • Mature frameworks
    • Avoid Javascript (if you want)

    View full-size slide

  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

    View full-size slide

  82. collectiveidea.com
    What shouldn’t
    I consider?

    View full-size slide

  83. collectiveidea.com
    Marketing

    View full-size slide

  84. collectiveidea.com
    Marketing
    (unless terrible)

    View full-size slide

  85. collectiveidea.com
    Version Numbers

    View full-size slide

  86. collectiveidea.com
    Version Numbers
    (unless pre-1.0)

    View full-size slide

  87. collectiveidea.com
    Performance

    View full-size slide

  88. collectiveidea.com

    View full-size slide

  89. collectiveidea.com

    View full-size slide

  90. collectiveidea.com
    But it wouldn’t be
    done yet!

    View full-size slide

  91. collectiveidea.com
    …but then Facebook
    changed PHP!

    View full-size slide

  92. collectiveidea.com
    “The Go standard lib is
    good enough for
    most apps.”

    View full-size slide

  93. collectiveidea.com

    View full-size slide

  94. collectiveidea.com
    Frameworks give us
    flexibility.

    View full-size slide

  95. collectiveidea.com
    Good Frameworks

    View full-size slide

  96. collectiveidea.com
    Save you time.

    View full-size slide

  97. collectiveidea.com
    Get better over time.

    View full-size slide

  98. collectiveidea.com
    Are used in
    production

    View full-size slide

  99. collectiveidea.com
    Have great
    documentation

    View full-size slide

  100. collectiveidea.com
    The right framework
    for you?

    View full-size slide

  101. collectiveidea.com
    The framework that
    gets work done.

    View full-size slide

  102. collectiveidea.com
    Thank You!
    Daniel Morrison
    collectiveidea.com
    @danielmorrison

    View full-size slide

  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

    View full-size slide