Talk I gave for JS group in Jönsköping, Sweden. May 7, 2014
I’ve seen the future@HenrikJoreteg
View Slide
JAVASCRIPTAPPLICATIONS
WAIT?!
SERVER?COMMAND LINE?BROWSER?
WEB APPLICATIONS
WHAT IS AWEB APPREALLY?
THE WEB HAS AN
RAILS/.NET/DJANGO
1. REQUEST
1. REQUEST2. PROXY/MIDDLEWARE
1. REQUEST2. PROXY/MIDDLEWARE3. HANDLER
1. REQUEST2. PROXY/MIDDLEWARE3. HANDLER•DATABASE CALL
1. REQUEST2. PROXY/MIDDLEWARE3. HANDLER•DATABASE CALL•TEMPLATING
1. REQUEST2. PROXY/MIDDLEWARE3. HANDLER•DATABASE CALL•TEMPLATING•RETURN HTML
THAT’S AWEB APP!
GMAIL?
GMAIL?FACEBOOK?
GMAIL?FACEBOOK?EVERNOTE?
GMAIL?FACEBOOK?EVERNOTE?DROPBOX?
GMAIL?FACEBOOK?EVERNOTE?DROPBOX?TALKY.IO?
THE WEB HAS CHANGED
"But, I’m not building Facebook"
1. HTML INTERFACE
1. HTML INTERFACE2. API
1. HTML INTERFACE2. API3. iOS APP
1. HTML INTERFACE2. API3. iOS APP4. ANDROID APP
AS SOON ASTHERE IS MORETHAN A SINGLEWEB INTERFACE?
SOMETHINGGREATER THANA WEB APP
SO WHAT?
IT CHANGES YOURARCHITECTURE
LET’S TALKSCIENCE!
COMPUTERSCIENCE
#1 SEPARATIONOF CONCERNS
#2 ENCAPSULATION
SO HOW DID WE DO?
MAYBE NOT PERFECT…
…BUT IT GETS BETTER
…BY WHICH I MEAN WORSE
WE SEND JAVASCRIPT!
1. CODE WITH OUR CONTENT
1. CODE WITH OUR CONTENT2. AJAX TO FETCH MORE DATA
1. CODE WITH OUR CONTENT2. AJAX TO FETCH MORE DATA3. WE DO TEMPLATING AGAIN!
4. JSON API
4. JSON API5. DASHBOARD APP
4. JSON API5. DASHBOARD APP6. SUPPORT TOOL APP
4. JSON API5. DASHBOARD APP6. SUPPORT TOOL APP7. MOBILE WEB APP
WHAT IS THEALTERNATIVE?
HOW DO WESEPARATECONCERNS?
API SERVERSSPEAK DATA
CLIENTS DOPRESENTATION
MOST CAPABLEUBIQUITOUSRUNTIMEON THE PLANET
WE SHOULD STOPTREATING IT LIKEA DUMB DOCUMENTRENDERER…
WEB APPiOS APPMobileWeb AppHTMLRSSJSONMAIN HTMLINTERFACEJSONHTMLPUBLIC APIJSONFEED READERS 3RDPARTIESJSONADMIN INTERFACEHTML
iOS CLIENTDASHBOARDJS CLIENTMAIN JS CLIENT3RD PARTY CLIENTSERVICE INTEGRATIONJSONSESSION API SERVICE API(s)REDIS RIAKSOLRSERVICE API(s)SERVICE API(s)SERVICE APIs
WHAT DO WE GAIN?
EASIER TO DISTRIBUTEWORK TO A TEAM
EASILY BUILD CLIENTSFOR NEW PLATFORMS
ISOLATEPERFORMANCEISSUES
WAY EASIER TO:TEST
WAY EASIER TO:MAINTAIN
WAY EASIER TO:SCALE
WAY EASIER TO:SECURE
SOLVE SCALINGISSUESATTHE EXACTBOTTLENECK
EASILY BUILDVARIATIONSOF YOUR CLIENTS
A/B TESTING ANYONE?
SERVECLIENT APPLICATIONFROM STATIC SERVERS
WORK ON A CLIENTLOCALLYAGAINST PRODUCTION API
"That’s a nice theory, but how?"
SEND THE APP ITSELFTO THE BROWSERINSTEAD OF THERESULT OF RUNNING IT
"You have to send the browser HTML!"
THE ENTIRE HTML FOR AND BANG:GET https://andbang.com/*
SO HOW DO WE BUILD THIS WAY?
{{ DO A DEMO, HENRIK! }}
HOT NEWJAVASCRIPT FRAMEWORKOF THE WEEK!
HOW DO YOU PICK?
WHERE DO YOU START?
andyet.com
~27 DEVELOPERSGOBS OF JS APPSREALTIME APPS
HOW WE DECIDEDWHAT TO USE:
GOALS
1. BUILD GREAT APPSGOALS
1. BUILD GREAT APPS2. QUICKLYGOALS
1. BUILD GREAT APPS2. QUICKLY3. WRITE JAVASCRIPTGOALS
1. BUILD GREAT APPS2. QUICKLY3. WRITE JAVASCRIPT4. HIGH LEVEL OF CONTROLGOALS
1. BUILD GREAT APPS2. QUICKLY3. WRITE JAVASCRIPT4. HIGH LEVEL OF CONTROL5. INSANELY MODULAR/FLEXIBLEGOALS
1. BUILD GREAT APPS2. QUICKLY3. WRITE JAVASCRIPT4. HIGH LEVEL OF CONTROL5. INSANELY MODULAR/FLEXIBLE6. NOT TOO ABSTRACTGOALS
FOUR BIG PROBLEMS TO SOLVE:
1. FETCHING/STORING STATE
2. RENDERING HTML
3. BINDING STATE TO DOM
4. CLIENTSIDE ROUTING
A FEW SPECIFIC FRAMEWORKS:
AngularJS
1. easy to startAngularJS
1. easy to start2. logic mixed into HTMLAngularJS
1. easy to start2. logic mixed into HTML3. you’re learning Angular, not JSAngularJS
1. easy to start2. logic mixed into HTML3. you’re learning Angular, not JS4. highly abstractedAngularJS
Ember
1. Lots of decisions made for youEmber
1. Lots of decisions made for you2. Everything is "ember" as a baseEmber
1. Lots of decisions made for you2. Everything is "ember" as a base3. Lack of flexibilityEmber
Backbone
1. Basic building blocksBackbone
1. Basic building blocks2. Extremely flexibleBackbone
1. Basic building blocks2. Extremely flexible3. You have to solve more problemsBackbone
We made HumanJS:
1. Backbone as a baseWe made HumanJS:
1. Backbone as a base2. Stricter ModelsWe made HumanJS:
1. Backbone as a base2. Stricter Models3. Conventions for binding to viewsWe made HumanJS:
HumanJavascript.com
What’s next?
Shh…
AMPERSAND.js
1. Un-frameworky non-framework
1. Un-frameworky non-framework2. Backbone ripped apart
1. Un-frameworky non-framework2. Backbone ripped apart3. Individual npm modules
1. Un-frameworky non-framework2. Backbone ripped apart3. Individual npm modules4. Insanely flexible
5. Clear starting point
5. Clear starting point6. CommonJS + Browserify
5. Clear starting point6. CommonJS + Browserify7. Directory of "sanctioned" modules
5. Clear starting point6. CommonJS + Browserify7. Directory of "sanctioned" modules8. IE9+ only
WE’RE BUILDING APPSWITH IT ALREADY
ampersandjs.com
QUESTIONS?
THANKS!@HenrikJoreteg
henrikjoreteg
tgalopin
yoshinagaiwnl
sumiren
dskst
takashiinui
ybrliiu
asazutaiga
nasa9084
drumath2237
renjikari
6onoda
stefafafan
paulrobertlloyd
chrisshort
trallard
moore
samanthasiow
eitanlees
kastner
lara
geoffreycrofte
62gerente
chrislema
cromwellryan