Making Sense of Web Frameworks

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