1. CODE WITH OUR CONTENT
2. AJAX TO FETCH MORE DATA
Slide 49
Slide 49 text
1. CODE WITH OUR CONTENT
2. AJAX TO FETCH MORE DATA
3. WE DO TEMPLATING AGAIN!
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
4. JSON API
Slide 52
Slide 52 text
4. JSON API
5. DASHBOARD APP
Slide 53
Slide 53 text
4. JSON API
5. DASHBOARD APP
6. SUPPORT TOOL APP
Slide 54
Slide 54 text
4. JSON API
5. DASHBOARD APP
6. SUPPORT TOOL APP
7. MOBILE WEB APP
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
WHAT IS THE
ALTERNATIVE?
Slide 57
Slide 57 text
HOW DO WE
SEPARATE
CONCERNS?
Slide 58
Slide 58 text
API SERVERS
SPEAK DATA
Slide 59
Slide 59 text
CLIENTS DO
PRESENTATION
Slide 60
Slide 60 text
MOST CAPABLE
UBIQUITOUS
RUNTIME
ON THE PLANET
Slide 61
Slide 61 text
WE SHOULD STOP
TREATING IT LIKE
A DUMB DOCUMENT
RENDERER…
Slide 62
Slide 62 text
WEB APP
iOS APP
Mobile
Web App
HTML
RSS
JSON
MAIN HTML
INTERFACE
JSON
HTML
PUBLIC API
JSON
FEED
READERS 3RD
PARTIES
JSON
ADMIN
INTERFACE
HTML
Slide 63
Slide 63 text
iOS CLIENT
DASHBOARD
JS CLIENT
MAIN
JS CLIENT
3RD PARTY
CLIENT
SERVICE
INTEGRATION
JSON
SESSION API SERVICE API(s)
REDIS RIAK
SOLR
SERVICE API(s)
SERVICE API(s)
SERVICE APIs
Slide 64
Slide 64 text
WHAT DO WE GAIN?
Slide 65
Slide 65 text
EASIER TO DISTRIBUTE
WORK TO A TEAM
Slide 66
Slide 66 text
EASILY BUILD CLIENTS
FOR NEW PLATFORMS
Slide 67
Slide 67 text
ISOLATE
PERFORMANCE
ISSUES
Slide 68
Slide 68 text
WAY EASIER TO:
TEST
Slide 69
Slide 69 text
WAY EASIER TO:
MAINTAIN
Slide 70
Slide 70 text
WAY EASIER TO:
SCALE
Slide 71
Slide 71 text
WAY EASIER TO:
SECURE
Slide 72
Slide 72 text
SOLVE SCALING
ISSUES
AT
THE EXACT
BOTTLENECK
Slide 73
Slide 73 text
EASILY BUILD
VARIATIONS
OF YOUR CLIENTS
Slide 74
Slide 74 text
A/B TESTING ANYONE?
Slide 75
Slide 75 text
SERVE
CLIENT APPLICATION
FROM STATIC SERVERS
Slide 76
Slide 76 text
WORK ON A CLIENT
LOCALLY
AGAINST PRODUCTION API
Slide 77
Slide 77 text
"That’s a nice theory, but how?"
Slide 78
Slide 78 text
SEND THE APP ITSELF
TO THE BROWSER
INSTEAD OF THE
RESULT OF RUNNING IT
Slide 79
Slide 79 text
"You have to send the browser HTML!"
Slide 80
Slide 80 text
THE ENTIRE HTML FOR AND BANG:
GET https://andbang.com/*
Slide 81
Slide 81 text
SO HOW DO WE BUILD THIS WAY?
Slide 82
Slide 82 text
{{ DO A DEMO, HENRIK! }}
Slide 83
Slide 83 text
HOT NEW
JAVASCRIPT FRAMEWORK
OF THE WEEK!
Slide 84
Slide 84 text
HOW DO YOU PICK?
Slide 85
Slide 85 text
WHERE DO YOU START?
Slide 86
Slide 86 text
andyet.com
Slide 87
Slide 87 text
~27 DEVELOPERS
GOBS OF JS APPS
REALTIME APPS
Slide 88
Slide 88 text
HOW WE DECIDED
WHAT TO USE:
Slide 89
Slide 89 text
GOALS
Slide 90
Slide 90 text
1. BUILD GREAT APPS
GOALS
Slide 91
Slide 91 text
1. BUILD GREAT APPS
2. QUICKLY
GOALS
Slide 92
Slide 92 text
1. BUILD GREAT APPS
2. QUICKLY
3. WRITE JAVASCRIPT
GOALS
Slide 93
Slide 93 text
1. BUILD GREAT APPS
2. QUICKLY
3. WRITE JAVASCRIPT
4. HIGH LEVEL OF CONTROL
GOALS
Slide 94
Slide 94 text
1. BUILD GREAT APPS
2. QUICKLY
3. WRITE JAVASCRIPT
4. HIGH LEVEL OF CONTROL
5. INSANELY MODULAR/FLEXIBLE
GOALS
Slide 95
Slide 95 text
1. BUILD GREAT APPS
2. QUICKLY
3. WRITE JAVASCRIPT
4. HIGH LEVEL OF CONTROL
5. INSANELY MODULAR/FLEXIBLE
6. NOT TOO ABSTRACT
GOALS
Slide 96
Slide 96 text
FOUR BIG PROBLEMS TO SOLVE:
Slide 97
Slide 97 text
1. FETCHING/STORING STATE
Slide 98
Slide 98 text
2. RENDERING HTML
Slide 99
Slide 99 text
3. BINDING STATE TO DOM
Slide 100
Slide 100 text
4. CLIENTSIDE ROUTING
Slide 101
Slide 101 text
A FEW SPECIFIC FRAMEWORKS:
Slide 102
Slide 102 text
AngularJS
Slide 103
Slide 103 text
1. easy to start
AngularJS
Slide 104
Slide 104 text
1. easy to start
2. logic mixed into HTML
AngularJS
Slide 105
Slide 105 text
1. easy to start
2. logic mixed into HTML
3. you’re learning Angular, not JS
AngularJS
Slide 106
Slide 106 text
1. easy to start
2. logic mixed into HTML
3. you’re learning Angular, not JS
4. highly abstracted
AngularJS
Slide 107
Slide 107 text
Ember
Slide 108
Slide 108 text
1. Lots of decisions made for you
Ember
Slide 109
Slide 109 text
1. Lots of decisions made for you
2. Everything is "ember" as a base
Ember
Slide 110
Slide 110 text
1. Lots of decisions made for you
2. Everything is "ember" as a base
3. Lack of flexibility
Ember
Slide 111
Slide 111 text
No content
Slide 112
Slide 112 text
Backbone
Slide 113
Slide 113 text
1. Basic building blocks
Backbone
Slide 114
Slide 114 text
1. Basic building blocks
2. Extremely flexible
Backbone
Slide 115
Slide 115 text
1. Basic building blocks
2. Extremely flexible
3. You have to solve more problems
Backbone
Slide 116
Slide 116 text
We made HumanJS:
Slide 117
Slide 117 text
1. Backbone as a base
We made HumanJS:
Slide 118
Slide 118 text
1. Backbone as a base
2. Stricter Models
We made HumanJS:
Slide 119
Slide 119 text
1. Backbone as a base
2. Stricter Models
3. Conventions for binding to views
We made HumanJS: