1. WRITE SOME HTML
2. LAY IT OUT WITH FRAMES OR TABLES
3. FTP IT TO A SERVER!
4. BAM!
Slide 4
Slide 4 text
CONGRATULATIONS,
YOU’RE A WEB DEVELOPER!
Slide 5
Slide 5 text
THEN IT GOT HARDER
Slide 6
Slide 6 text
WHO’S WRITTEN THEIR
OWN BLOG SOFTWARE?
Slide 7
Slide 7 text
OVER ENGINEERING A
BLOG WAS A RITE OF PASSAGE
Slide 8
Slide 8 text
1. WRITE SOME PHP/PYTHON/ASP/COLDFUSION
2. SET UP RELATIONAL DATABASE
3. WRITE SOME BAD SQL
4. SHOVE DYNAMIC DATA INTO OUR HTML
5. LAY IT OUT WITH CSS (NO TABLES THIS TIME)
6. RUN IT ON SHARED HOSTING SOMEWHERE
Slide 9
Slide 9 text
CONGRATULATIONS,
YOU’RE A WEB DEVELOPER!
Slide 10
Slide 10 text
PHEW!!
Slide 11
Slide 11 text
THEN WE GOT "SMART"
Slide 12
Slide 12 text
USE A FRAMEWORK!!
Slide 13
Slide 13 text
1. RAILS
2. ALL THEM PHP FRAMEWORKS
3. DJANGO
4. ETC.
Slide 14
Slide 14 text
OUR EXCESSIVLELY DYNAMIC BLOG…
IS NOW BETTER ORGANIZED
AND HAS MORE DEPENDENCIES
SEND THE APP ITSELF
TO THE BROWSER
INSTEAD OF THE
RESULT OF RUNNING IT
Slide 38
Slide 38 text
Slide 39
Slide 39 text
SHOULD WE EVEN BE DOING THIS?
Slide 40
Slide 40 text
SHOULD WE BUILD
APPS THAT REQUIRE
JAVASCRIPT?
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
SHOULD WE BUILD
APPS THAT REQUIRE
JAVASCRIPT?
Slide 43
Slide 43 text
{{ RAISE YOUR HAND }}
Slide 44
Slide 44 text
YES!
Slide 45
Slide 45 text
WHAT SERVICE ARE WE PROVIDING?
Slide 46
Slide 46 text
CONTENT?
Slide 47
Slide 47 text
CONTENT SHOULD JUST WORK™
Slide 48
Slide 48 text
NO REASON TO COMPLICATE
THINGS THAT CAN BE SIMPLE
Slide 49
Slide 49 text
BUT THE WEB IS
NO LONGER
JUST ABOUT
LINKED CONTENT!
Slide 50
Slide 50 text
THERE ARE CASES
WHERE CLIENTSIDE
FUNCTIONALITY
IS THE CORE VALUE
PROVIDED BY SERVICE
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
1. RENDERING
2. NETWORKING
3. FILE READ/WRITE
4. STORAGE
5. WEB AUDIO APIS
6. WEBGL
7. VOICE/VIDEO
HIGH PERFORMANCE
Slide 56
Slide 56 text
BROWSERS ARE NOT
DUMB DOCUMENT VIEWERS
Slide 57
Slide 57 text
MOST CAPABLE
UBIQUITOUS
RUNTIMES
ON THE PLANET
Slide 58
Slide 58 text
I’M JUST GOING TO SAY IT:
Slide 59
Slide 59 text
THERE ARE TWO
TYPES OF APPLICATIONS
ON THE WEB
Slide 60
Slide 60 text
1. NATIVE WEB APPS
Slide 61
Slide 61 text
2. SERVER-SIDE WEB APPS
Slide 62
Slide 62 text
THEY ARE
FUNDAMENTALLY
DIFFERENT
Slide 63
Slide 63 text
AND THAT’S O.K.
Slide 64
Slide 64 text
ANYTHING
WE CAN BUILD
WITH WEB TECH
I THINK WE SHOULD
Slide 65
Slide 65 text
EVEN IF WE CAN’T
SUPPORT OLDER
BROWSERS
Slide 66
Slide 66 text
THE WEB IS INFINITELY MORE
OPEN
THAN NATIVE PLATFORMS
Slide 67
Slide 67 text
USER EXPECTATIONS HAVE EVOLVED
Slide 68
Slide 68 text
THE WEB IS DOING PRETTY WELL
ON DESKTOPS
Slide 69
Slide 69 text
THE WEB IS LOSING
ON MOBILE
Slide 70
Slide 70 text
http://media.fb.com/2015/05/12/instantarticles/
Slide 71
Slide 71 text
THE WEB IS LOSING
ON EXPERIENCE
Slide 72
Slide 72 text
WE OFTEN PREFER NATIVE
APPS TO THE WEB
Slide 73
Slide 73 text
QUALITY AND POLISH
OF USER EXPERIENCE
IS OFTEN MUCH BETTER
Slide 74
Slide 74 text
LET’S FIX THIS!
Slide 75
Slide 75 text
WE’RE TOO FOCUSED
ON THE PAST INSTEAD OF
COMPETING ON EXPERIENCE
Slide 76
Slide 76 text
SAYING THERE’S A DISTINCTION
MAKES SOME PEOPLE MAD
Slide 77
Slide 77 text
"Everything should be an enhancement!"
Slide 78
Slide 78 text
WE’RE ON THE
SAME TEAM!
Slide 79
Slide 79 text
WE WANT THE
OPEN WEB
TO WIN!
Slide 80
Slide 80 text
HOW COULD WE EVEN
BUILD A PROGRESSIVELY
ENHANCED VERSION
OF TALKY?
Slide 81
Slide 81 text
SHOULD WE NOT HAVE
BUILT IT?
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
WHERE’S THE DOWNSIDE?
Slide 84
Slide 84 text
ACCESSIBILITY
Slide 85
Slide 85 text
98.6% SCREENREADERS
HAPPILY RUN JS
(in 2012)
http://www.paulirish.com/2012/accessibility-and-developers/
Slide 86
Slide 86 text
SEO
Slide 87
Slide 87 text
https://medium.com/ben-and-dion/is-it-time-to-
go-spa-only-did-google-bot-put-a-nail-in-the-
server-rendered-coffin-d3d4128d1ec0
DION ALMAER
VP Engineering Walmart Mobile
ampersand (the CLI)
ampersand-app
ampersand-view-switcher
ampersand-input-view
ampersand-select-view
ampersand-form-view
etc.
Slide 188
Slide 188 text
INDIVIDUAL GITHUB REPOS
Slide 189
Slide 189 text
STRICT SEMVER
Slide 190
Slide 190 text
todomvc.com
Slide 191
Slide 191 text
FLEXIBILITY
MODULARITY
SO WHAT?!
Slide 192
Slide 192 text
ONLY SEND
CODE YOU USE
Slide 193
Slide 193 text
AMPERSAND TODOMVC:
~28kb min+gzip
Slide 194
Slide 194 text
MODULARITY
LETS YOU REMODEL
THE KITCHEN WITHOUT
BURNING DOWN THE
WHOLE BUILDING
Slide 195
Slide 195 text
Angular 2.0
Slide 196
Slide 196 text
MIX AND MATCH
WHAT YOU WANT
Slide 197
Slide 197 text
WhatsApp:
ampersand-state w/ react
Slide 198
Slide 198 text
FlipKart
ampersand-*
React
Slide 199
Slide 199 text
Yahoo!
ampersand-router
Slide 200
Slide 200 text
BUT MODULARITY ISN’T
THE ONLY FEATURE
Slide 201
Slide 201 text
ONE EXAMPLE OF
WHY WE FORKED
Slide 202
Slide 202 text
SMARTER/STRICTER MODELS
Slide 203
Slide 203 text
var model = new Backbone.Model({
name: 'henrik'
});
model.on('change:name', function () {
console.log('new changed');
});
model.set({name: 'bob'});
Backbone Models
Slide 204
Slide 204 text
IF MODELS ARE OUR
SOURCE OF TRUTH…
WE WANT THEM TO
BE MORE READABLE
Slide 205
Slide 205 text
YOU HAVE TO DEFINE
WHAT YOU STORE
Slide 206
Slide 206 text
var Person = AmpersandState.extend({
props: {
name:'string'
}
});
var model = new Model({name: 'henrik'});
model.on('change:name', someFunc);
model.name = 'bob'; // still fires event
model.name = 47; // throws TypeError
Slide 207
Slide 207 text
SESSION STATE:
RELATED, NOT PERSISTED
Slide 208
Slide 208 text
var Person = AmpState.extend({
props: {
name:'string'
},
session: {
active:'boolean'
}
});
var model = new Person({
name: 'henrik',
active: true
});
model.active; //=> true
model.toJSON(); //=> {name: 'henrik'}
Slide 209
Slide 209 text
GETTER/SETTER
TRANFORMATIONS
Slide 210
Slide 210 text
var Person = AmpState.extend({
props: {
today: 'date'
}
});
// unix timestamp coming in
var henrik = new Person({today: '1418338921707'});
// getter returns Date Object
henrik.today; //=> JS `Date` instance
// timestamp when serializing
JSON.stringify(henrik); //=> {today: 1418338921707}
Slide 211
Slide 211 text
CACHED, OBSERVABLE
DERIVED PROPERTIES
Slide 212
Slide 212 text
var Person = AmpState.extend({
props: {
name: 'string'
},
derived: {
nickName: {
deps: ['name'],
fn: function () {
return this.name.slice(0, 3);
}
}
}
});
Slide 213
Slide 213 text
var someone = new Person({name: 'henrik'});
someone.on('change:nickName', logChange);
// computed only once and cached
someone.nickName; //=> 'hen'
// not triggered if result is same
someone.name = 'henry';
// only if different
someone.name = 'crazy';
// logs changed nick: 'cra'
Slide 214
Slide 214 text
1. derive from child models
2. derive from other derived
3. useful for relationships between models
4. cannot set directly
5. resulting model code is more readable
CACHED, EVENTED, DERIVED PROPERTIES
Slide 215
Slide 215 text
READ MORE IN DOCS
http://ampersandjs.com
Slide 216
Slide 216 text
WEB + IRC CHATROOM:
https://gitter.im/AmpersandJS/AmpersandJS
https://irc.gitter.im/
Slide 217
Slide 217 text
andyet.com
Slide 218
Slide 218 text
HOW CAN WE BE SURE
WE’RE BUILDING WITH
THE RIGHT TOOLS?!