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
   

   View Slide

2. collectiveidea.com
   

   View Slide

3. collectiveidea.com
   

   View Slide

4. collectiveidea.com
   

   View Slide

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

   View Slide

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

   View Slide

7. collectiveidea.com
   Why use a
   Web Framework?
   

   View Slide

8. collectiveidea.com
   Work faster
   Have fun
   Profit!
   

   View Slide

9. collectiveidea.com
   What’s out there?
   

   View Slide

10. collectiveidea.com
    

    View Slide

11. collectiveidea.com
    

    View Slide

12. collectiveidea.com
    Where do we start?
    

    View Slide

13. collectiveidea.com
    

    View Slide

14. collectiveidea.com
    Languages
    vs
    Frameworks
    

    View Slide

15. collectiveidea.com
    

    View Slide

16. collectiveidea.com
    Languages
    vs
    Frameworks
    vs
    Runtimes
    

    View Slide

17. collectiveidea.com
    

    View Slide

18. collectiveidea.com
    

    View Slide

19. collectiveidea.com
    

    View Slide

20. collectiveidea.com
    Choosing a
    Framework
    

    View Slide

21. collectiveidea.com
    Option #1
    Pick by Language
    

    View Slide

22. collectiveidea.com
    #1: Pick by Language
    

    View Slide

23. collectiveidea.com
    #1: Pick by Language
    

    View Slide

24. collectiveidea.com
    #1: Pick by Language
    

    View 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 Slide

26. collectiveidea.com
    Option #2
    Pick by Popularity
    

    View Slide

27. collectiveidea.com
    #2: Popularity
    

    View 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 Slide

29. collectiveidea.com
    #2: Popularity
    

    View Slide

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

    View Slide

31. collectiveidea.com
    #2: Popularity
    

    View Slide

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

    View 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 Slide

34. collectiveidea.com
    Server Languages
    Obscure Popularity
    

    View Slide

35. collectiveidea.com
    Option #3
    Pick by Type
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

39. collectiveidea.com
    #3: Type
    Both!
    

    View 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 Slide

41. collectiveidea.com
    Option #4
    Ecosystem
    

    View Slide

42. collectiveidea.com
    #4: Ecosystem
    

    View Slide

43. collectiveidea.com
    #4: Ecosystem
    

    View Slide

44. collectiveidea.com
    #4: Ecosystem
    

    View Slide

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

    View Slide

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

    View Slide

47. collectiveidea.com
    Let’s Dive In
    

    View Slide

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

    View Slide

49. collectiveidea.com
    

    View Slide

50. collectiveidea.com
    

    View Slide

51. collectiveidea.com
    

    View Slide

52. collectiveidea.com
    

    View Slide

53. collectiveidea.com
    class!Article!end

    

    View 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 Slide

55. collectiveidea.com
    

    !!

    !!!!

    !!!!!!

    !!!!!!

    !!!!!!

    !!!!!!

    !!!!!!!!!!!!!!!!!!data:!{!confirm:!'Are!you!sure?'!}!%>

    !!!!

    !!

    
    

    View Slide

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

    View Slide

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

    View Slide

58. collectiveidea.com
    

    View Slide

59. collectiveidea.com
    

    View Slide

60. collectiveidea.com
    

    View Slide

61. collectiveidea.com
    

    View Slide

62. collectiveidea.com
    

    View Slide

63. collectiveidea.com
    

    View Slide

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

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

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

    });
    

    View 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 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 Slide

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

    View Slide

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

    View Slide

69. collectiveidea.com
    

    View Slide

70. collectiveidea.com
    

    View Slide

71. collectiveidea.com
    

    View Slide

72. collectiveidea.com
    

    View Slide

73. collectiveidea.com
    

    View Slide

74. collectiveidea.com
    

    View 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 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 Slide

77. collectiveidea.com
    

    !!!
    !!!!New!List

    

    !!{{#each!lists}}

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

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

    !!!!!!!!

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

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

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

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

    !!!!!!{{name}}

    !!!!

    !!{{/each}}

    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View 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 Slide

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

    View Slide

83. collectiveidea.com
    Marketing
    

    View Slide

84. collectiveidea.com
    Marketing
    (unless terrible)
    

    View Slide

85. collectiveidea.com
    Version Numbers
    

    View Slide

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

    View Slide

87. collectiveidea.com
    Performance
    

    View Slide

88. collectiveidea.com
    

    View Slide

89. collectiveidea.com
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

93. collectiveidea.com
    

    View Slide

94. collectiveidea.com
    Frameworks give us
    flexibility.
    

    View Slide

95. collectiveidea.com
    Good Frameworks
    

    View Slide

96. collectiveidea.com
    Save you time.
    

    View Slide

97. collectiveidea.com
    Get better over time.
    

    View Slide

98. collectiveidea.com
    Are used in
    production
    

    View Slide

99. collectiveidea.com
    Have great
    documentation
    

    View Slide

100. collectiveidea.com
     The right framework
     for you?
     

     View Slide

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

     View Slide

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

     View 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 Slide