Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
I've seen the future
Search
Henrik Joreteg
May 07, 2014
Technology
1
200
I've seen the future
Talk I gave for JS group in Jönsköping, Sweden. May 7, 2014
Henrik Joreteg
May 07, 2014
Tweet
Share
More Decks by Henrik Joreteg
See All by Henrik Joreteg
SeattleJS May 14, 2015
henrikjoreteg
1
1k
The Evolution of the "Web App" - FluentConf 2015
henrikjoreteg
6
1.2k
BackboneConf 2014
henrikjoreteg
3
450
A Single Page Story – http://ffconf.org/
henrikjoreteg
12
1.6k
Making WebRTC Awesome, CascadiaJS 2013
henrikjoreteg
9
2.1k
EdgeConf 2013 - Realtime/WebRTC Intro Talk
henrikjoreteg
1
170
WebRTC - JSConf Brazil 2013
henrikjoreteg
10
1.3k
getUserMedia();
henrikjoreteg
1
180
The State of Realtime at &yet
henrikjoreteg
6
420
Other Decks in Technology
See All in Technology
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
DevOpsDays Taipei 2025 -- Creating Awesome Change in SmartNews!
martin_lover
0
160
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
38k
從開發到架構設計的可觀測性實踐
philipz
0
110
toittaにOpenTelemetryを導入した話 / Mackerel APM リリースパーティ
cohalz
1
490
うちの会社の評判は?SNSの投稿分析にAIを使ってみた
doumae
0
270
GigaViewerにおけるMackerel APM導入の裏側
7474
0
460
GitHub Coding Agent 概要
kkamegawa
1
1.7k
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
460
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
240
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
340
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.2k
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
92
6k
How to Think Like a Performance Engineer
csswizardry
23
1.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fireside Chat
paigeccino
37
3.5k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
RailsConf 2023
tenderlove
30
1.1k
Transcript
I’ve seen the future @HenrikJoreteg
JAVASCRIPT APPLICATIONS
WAIT?!
SERVER? COMMAND LINE? BROWSER?
WEB APPLICATIONS
WAIT?!
WHAT IS A WEB APP REALLY?
THE WEB HAS AN
RAILS/.NET/DJANGO
None
1. REQUEST
1. REQUEST 2. PROXY/MIDDLEWARE
1. REQUEST 2. PROXY/MIDDLEWARE 3. HANDLER
1. REQUEST 2. PROXY/MIDDLEWARE 3. HANDLER •DATABASE CALL
1. REQUEST 2. PROXY/MIDDLEWARE 3. HANDLER •DATABASE CALL •TEMPLATING
1. REQUEST 2. PROXY/MIDDLEWARE 3. HANDLER •DATABASE CALL •TEMPLATING •RETURN
HTML
THAT’S A WEB APP!
WAIT?!
None
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"
None
1. HTML INTERFACE
1. HTML INTERFACE 2. API
1. HTML INTERFACE 2. API 3. iOS APP
1. HTML INTERFACE 2. API 3. iOS APP 4. ANDROID
APP
AS SOON AS THERE IS MORE THAN A SINGLE WEB
INTERFACE?
SOMETHING GREATER THAN A WEB APP
SO WHAT?
IT CHANGES YOUR ARCHITECTURE
LET’S TALK SCIENCE!
COMPUTER SCIENCE
#1 SEPARATION OF CONCERNS
#2 ENCAPSULATION
SO HOW DID WE DO?
1. REQUEST 2. PROXY/MIDDLEWARE 3. HANDLER •DATABASE CALL •TEMPLATING •RETURN
HTML
MAYBE NOT PERFECT…
…BUT IT GETS BETTER
…BY WHICH I MEAN WORSE
WE SEND JAVASCRIPT!
None
1. CODE WITH OUR CONTENT
1. CODE WITH OUR CONTENT 2. AJAX TO FETCH MORE
DATA
1. CODE WITH OUR CONTENT 2. AJAX TO FETCH MORE
DATA 3. WE DO TEMPLATING AGAIN!
None
4. JSON API
4. JSON API 5. DASHBOARD APP
4. JSON API 5. DASHBOARD APP 6. SUPPORT TOOL APP
4. JSON API 5. DASHBOARD APP 6. SUPPORT TOOL APP
7. MOBILE WEB APP
None
WHAT IS THE ALTERNATIVE?
HOW DO WE SEPARATE CONCERNS?
API SERVERS SPEAK DATA
CLIENTS DO PRESENTATION
MOST CAPABLE UBIQUITOUS RUNTIME ON THE PLANET
WE SHOULD STOP TREATING IT LIKE A DUMB DOCUMENT RENDERER…
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
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
WHAT DO WE GAIN?
EASIER TO DISTRIBUTE WORK TO A TEAM
EASILY BUILD CLIENTS FOR NEW PLATFORMS
ISOLATE PERFORMANCE ISSUES
WAY EASIER TO: TEST
WAY EASIER TO: MAINTAIN
WAY EASIER TO: SCALE
WAY EASIER TO: SECURE
SOLVE SCALING ISSUES AT THE EXACT BOTTLENECK
EASILY BUILD VARIATIONS OF YOUR CLIENTS
A/B TESTING ANYONE?
SERVE CLIENT APPLICATION FROM STATIC SERVERS
WORK ON A CLIENT LOCALLY AGAINST PRODUCTION API
"That’s a nice theory, but how?"
SEND THE APP ITSELF TO THE BROWSER INSTEAD OF THE
RESULT 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 NEW JAVASCRIPT FRAMEWORK OF THE WEEK!
HOW DO YOU PICK?
WHERE DO YOU START?
andyet.com
~27 DEVELOPERS GOBS OF JS APPS REALTIME APPS
HOW WE DECIDED WHAT TO USE:
GOALS
1. BUILD GREAT APPS GOALS
1. BUILD GREAT APPS 2. QUICKLY GOALS
1. BUILD GREAT APPS 2. QUICKLY 3. WRITE JAVASCRIPT GOALS
1. BUILD GREAT APPS 2. QUICKLY 3. WRITE JAVASCRIPT 4.
HIGH LEVEL OF CONTROL GOALS
1. BUILD GREAT APPS 2. QUICKLY 3. WRITE JAVASCRIPT 4.
HIGH LEVEL OF CONTROL 5. INSANELY MODULAR/FLEXIBLE GOALS
1. BUILD GREAT APPS 2. QUICKLY 3. WRITE JAVASCRIPT 4.
HIGH LEVEL OF CONTROL 5. INSANELY MODULAR/FLEXIBLE 6. NOT TOO ABSTRACT GOALS
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 start AngularJS
1. easy to start 2. logic mixed into HTML AngularJS
1. easy to start 2. logic mixed into HTML 3.
you’re learning Angular, not JS AngularJS
1. easy to start 2. logic mixed into HTML 3.
you’re learning Angular, not JS 4. highly abstracted AngularJS
Ember
1. Lots of decisions made for you Ember
1. Lots of decisions made for you 2. Everything is
"ember" as a base Ember
1. Lots of decisions made for you 2. Everything is
"ember" as a base 3. Lack of flexibility Ember
None
Backbone
1. Basic building blocks Backbone
1. Basic building blocks 2. Extremely flexible Backbone
1. Basic building blocks 2. Extremely flexible 3. You have
to solve more problems Backbone
We made HumanJS:
1. Backbone as a base We made HumanJS:
1. Backbone as a base 2. Stricter Models We made
HumanJS:
1. Backbone as a base 2. Stricter Models 3. Conventions
for binding to views We made HumanJS:
HumanJavascript.com
What’s next?
Shh…
AMPERSAND.js
None
1. Un-frameworky non-framework
1. Un-frameworky non-framework 2. Backbone ripped apart
1. Un-frameworky non-framework 2. Backbone ripped apart 3. Individual npm
modules
1. Un-frameworky non-framework 2. Backbone ripped apart 3. Individual npm
modules 4. Insanely flexible
None
5. Clear starting point
5. Clear starting point 6. CommonJS + Browserify
5. Clear starting point 6. CommonJS + Browserify 7. Directory
of "sanctioned" modules
5. Clear starting point 6. CommonJS + Browserify 7. Directory
of "sanctioned" modules 8. IE9+ only
WE’RE BUILDING APPS WITH IT ALREADY
ampersandjs.com
QUESTIONS?
THANKS! @HenrikJoreteg