Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

collectiveidea.com

Slide 3

Slide 3 text

collectiveidea.com

Slide 4

Slide 4 text

collectiveidea.com

Slide 5

Slide 5 text

collectiveidea.com What’s a Web Framework?

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

collectiveidea.com Why use a Web Framework?

Slide 8

Slide 8 text

collectiveidea.com Work faster Have fun Profit!

Slide 9

Slide 9 text

collectiveidea.com What’s out there?

Slide 10

Slide 10 text

collectiveidea.com

Slide 11

Slide 11 text

collectiveidea.com

Slide 12

Slide 12 text

collectiveidea.com Where do we start?

Slide 13

Slide 13 text

collectiveidea.com

Slide 14

Slide 14 text

collectiveidea.com Languages vs Frameworks

Slide 15

Slide 15 text

collectiveidea.com

Slide 16

Slide 16 text

collectiveidea.com Languages vs Frameworks vs Runtimes

Slide 17

Slide 17 text

collectiveidea.com

Slide 18

Slide 18 text

collectiveidea.com

Slide 19

Slide 19 text

collectiveidea.com

Slide 20

Slide 20 text

collectiveidea.com Choosing a Framework

Slide 21

Slide 21 text

collectiveidea.com Option #1 Pick by Language

Slide 22

Slide 22 text

collectiveidea.com #1: Pick by Language

Slide 23

Slide 23 text

collectiveidea.com #1: Pick by Language

Slide 24

Slide 24 text

collectiveidea.com #1: Pick by Language

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

collectiveidea.com Option #2 Pick by Popularity

Slide 27

Slide 27 text

collectiveidea.com #2: Popularity

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

collectiveidea.com #2: Popularity

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

collectiveidea.com #2: Popularity

Slide 32

Slide 32 text

collectiveidea.com #2: Popularity source: Google Trends

Slide 33

Slide 33 text

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?

Slide 34

Slide 34 text

collectiveidea.com Server Languages Obscure Popularity

Slide 35

Slide 35 text

collectiveidea.com Option #3 Pick by Type

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

collectiveidea.com #3: Type Both!

Slide 40

Slide 40 text

collectiveidea.com #3: Type ! Right tool for the job ! Focus on features ! Optimize for Env " May be new Language " Difficulties may arise " New toolchains

Slide 41

Slide 41 text

collectiveidea.com Option #4 Ecosystem

Slide 42

Slide 42 text

collectiveidea.com #4: Ecosystem

Slide 43

Slide 43 text

collectiveidea.com #4: Ecosystem

Slide 44

Slide 44 text

collectiveidea.com #4: Ecosystem

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

collectiveidea.com We need to weigh all options.

Slide 47

Slide 47 text

collectiveidea.com Let’s Dive In

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

collectiveidea.com

Slide 50

Slide 50 text

collectiveidea.com

Slide 51

Slide 51 text

collectiveidea.com

Slide 52

Slide 52 text

collectiveidea.com

Slide 53

Slide 53 text

collectiveidea.com class!Article!

Slide 54

Slide 54 text

collectiveidea.com class!ArticlesController!

Slide 55

Slide 55 text

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!%>


Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

collectiveidea.com

Slide 59

Slide 59 text

collectiveidea.com

Slide 60

Slide 60 text

collectiveidea.com

Slide 61

Slide 61 text

collectiveidea.com

Slide 62

Slide 62 text

collectiveidea.com

Slide 63

Slide 63 text

collectiveidea.com

Slide 64

Slide 64 text

collectiveidea.com Todos.Todo!=!DS.Model.extend({
 !!title:!DS.attr('string'),
 !!isCompleted:!DS.attr('boolean')
 });

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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


Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

collectiveidea.com

Slide 70

Slide 70 text

collectiveidea.com

Slide 71

Slide 71 text

collectiveidea.com

Slide 72

Slide 72 text

collectiveidea.com

Slide 73

Slide 73 text

collectiveidea.com

Slide 74

Slide 74 text

collectiveidea.com

Slide 75

Slide 75 text

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


Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

collectiveidea.com 
 !!! !!!!New!List
 
 !!{{#each!lists}}
 !!!!
 !!!!!!{{#if!userId}}
 !!!!!!!!
 !!!!!!{{/if}}
 !!!!!!{{#if!incompleteCount}}
 !!!!!!!!!!! !!!!!!!!!!{{incompleteCount}}! !!!!!!!!
 !!!!!!{{/if}}
 !!!!!!{{name}}
 !!!!
 !!{{/each}}


Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

collectiveidea.com So which is best for me?

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

collectiveidea.com What shouldn’t I consider?

Slide 83

Slide 83 text

collectiveidea.com Marketing

Slide 84

Slide 84 text

collectiveidea.com Marketing (unless terrible)

Slide 85

Slide 85 text

collectiveidea.com Version Numbers

Slide 86

Slide 86 text

collectiveidea.com Version Numbers (unless pre-1.0)

Slide 87

Slide 87 text

collectiveidea.com Performance

Slide 88

Slide 88 text

collectiveidea.com

Slide 89

Slide 89 text

collectiveidea.com

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

collectiveidea.com …but then Facebook changed PHP!

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

collectiveidea.com

Slide 94

Slide 94 text

collectiveidea.com Frameworks give us flexibility.

Slide 95

Slide 95 text

collectiveidea.com Good Frameworks

Slide 96

Slide 96 text

collectiveidea.com Save you time.

Slide 97

Slide 97 text

collectiveidea.com Get better over time.

Slide 98

Slide 98 text

collectiveidea.com Are used in production

Slide 99

Slide 99 text

collectiveidea.com Have great documentation

Slide 100

Slide 100 text

collectiveidea.com The right framework for you?

Slide 101

Slide 101 text

collectiveidea.com The framework that gets work done.

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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