the inverted web by nick van weerdenburg
DESCRIPTION
In this presentation by rangle.io's CEO Nick Van Weerdenburg, Nick goes over the radical shift in responsibilities from the server to the browser. This presentation was from the Web Unleashed conference which took place in Toronto on Sept. 17-18, 2014. Meanwhile, HTML5, Mobile and Single Page Applications have disrupted web development and adopting the inverted web has become a strategic necessity for ALL companies. The talk covered the inverted web technical landscape (AngularJS, EmberJS, React, Polymer, Web Components, REST) as well as the business and technical cases for adopting it.TRANSCRIPT
![Page 1: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/1.jpg)
The$Inverted$Weband$the$future$of$the$Internet
___________________
Nick%Van%Weerdenburg
Founder/CEO,rangle.io
h"p://rangle.io
![Page 2: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/2.jpg)
![Page 3: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/3.jpg)
Overview
The$Inversion$of$the$Web$is$a$radical$shi4$in$responsibili6es$from$the$server$to$the$browser;$HTML5,$Mobile$and$Single$Page$Applica6ons$have$disrupted$web$development$and$adop6ng$the$inverted$web$has$become$a$strategic$necessity$for$ALL$companies.$
![Page 4: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/4.jpg)
Five%Things%the%Audience%Will%Learn
1. What'the'inverted'web'landscape
2. The'technical'case
3. The'business'case
4. Current'limita;ons
5. The'future
![Page 5: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/5.jpg)
Let's&start&with&a&ques.on...
![Page 6: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/6.jpg)
"Will%the%Internet%Inter,Orb%Protocol%replace%Hypertext%Transfer%Protocol%as%the%predominant%communica=ons%protocol%for%the%World%Wide%Web?"
![Page 7: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/7.jpg)
"At$Object$World$West$last$year,$Netscape$Communica:ons$Corp.'s$Marc$Andreessen$said$it$will,$since$IIOP$enables$objects$to$communicate$over$a$TCP/IP$network."
![Page 8: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/8.jpg)
“We$expect$that$over$the$next$few$years$IIOP$will$become$as$
ubiquitous$as$HTTP$and$CGI,$IIOP$provides$a$comprehensive$
system$through$which$objects$can$request$services$from$one$
another$across$the$wide$variety$of$plaDorms$or$database$systems$
they’re$built$on.$Just$as$Web$technology$has$helped$companies$
simplify$and$centralize$the$distribuIon$of$informaIon,$distributed$
objects$will$help$them$simplify$and$centrilize$their$enterprise$
applicaIons…$Now$that$we$have$standard$ways$to$build$networks$
and$run$services$on$them,$we$have$an$opportunity$that$never$
existed$before$M$to$build$network$applicaIons.$Let’s$take$advantage$
of$it.”$
• Marc&Andreessen,&Netscape&Co2founder,&October&1996
![Page 9: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/9.jpg)
HE#WAS#RIGHT
![Page 10: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/10.jpg)
the$rest$is$implementa-on$details
![Page 11: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/11.jpg)
...APIs&dominate&the&modern&web.
![Page 12: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/12.jpg)
And$applica*ons$are$communica*ng$through$these$APIs$which$are$built$
on$REST$APIs$and$JSON.
![Page 13: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/13.jpg)
Surprising,*HTTP*turned*out*to*a*fantas4c*was*of*doing*this*machine9
to9machine*communica4ons.
![Page 14: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/14.jpg)
What's'important'is'the'architectural'principle.
![Page 15: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/15.jpg)
So#ware(needs(to(talk(to(other(so#ware.
![Page 16: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/16.jpg)
The$most$robust$complex$systems$are$built$incrementally$from$simpler$
systems.
![Page 17: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/17.jpg)
And,%the%end)to)end%principle%from%1981:
![Page 18: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/18.jpg)
The$end'to'end$principle$states$that$applica1on'specific$func1ons$ought$
to$reside$in$the$end$hosts$of$a$network$rather$than$in$intermediary$
nodes$–$provided$they$can$be$implemented$"completely$and$correctly"$in$the$end$hosts.
![Page 19: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/19.jpg)
Browser'applica-ons'(Java,'Ac-veX,'Flash,'HTML5)'talking'to'server'endApoints'(Corba,'XML'Web'Services,'
REST'APIs)
![Page 20: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/20.jpg)
"provided)they)can)be)implemented)"completely)and)correctly")in)the)
end)hosts."
![Page 21: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/21.jpg)
REST%APIs%+%HTML5%=%completely%and%correctly
![Page 22: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/22.jpg)
="The"Inverted"Web
![Page 23: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/23.jpg)
History(of(the(Inverted(Web• Java%Applets
• Ac-veX%Controls
• Shockwave
• Flash
...and%back%to%JavaScript%and%HTML5
![Page 24: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/24.jpg)
WHY$NOW?
![Page 25: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/25.jpg)
HTML5&>&90%&coverage&of&users
![Page 26: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/26.jpg)
Mobile'forcing'a'rewrite'of'the'web.
![Page 27: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/27.jpg)
UX#forcing#a#rewrite#of#the#web.
![Page 28: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/28.jpg)
An#unbelievably#robust#JavaScript#ecosystem.
![Page 29: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/29.jpg)
and$we$finally$enter$the$era$of$the$inverted$web...
![Page 30: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/30.jpg)
![Page 31: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/31.jpg)
![Page 32: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/32.jpg)
Disentanglement
Styling()CSS
Structure'(HTML
Behaviour*+JavaScript
Data$%REST%API
![Page 33: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/33.jpg)
Dependencies)are)limited)to)adjacent)layers,)with)Structure)and)Styling)being)largely)independent)of)
Data.
![Page 34: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/34.jpg)
Transla'on:*We*can*architect*and*engineer*the*front2end.
![Page 35: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/35.jpg)
![Page 36: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/36.jpg)
![Page 37: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/37.jpg)
![Page 38: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/38.jpg)
![Page 39: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/39.jpg)
![Page 40: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/40.jpg)
Client'Side*Architecture*is*the*Cri1cal*Piece
It's%about%Client/Side%Applica5ons,%NOT%the%MEAN%stack
![Page 41: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/41.jpg)
![Page 42: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/42.jpg)
![Page 43: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/43.jpg)
![Page 44: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/44.jpg)
![Page 45: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/45.jpg)
![Page 46: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/46.jpg)
The$Inverted$Web$Players• 2010%:%Backbone.js
• 2010%:%AngularJS
• 2011%:%EmberJS
• 2013%:%Polymer
• 2014%:%React
• ?%:%Web%Components
and$REST$APIs.
![Page 47: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/47.jpg)
Common%Goals%of%Client.Side%JS• modules
• dependency-injec0on
• tes0ng-support
• support-for-REST-and-JSON
![Page 48: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/48.jpg)
Broader'Engineering'Principles'to'Judge• isola'on)/)decoupling
• encapsula'on)/)cohesion
• clarity)of)applica'on)state?
• ease)of)repurposing
• expressiveness
• how)easy)to)reason)about)code?
![Page 49: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/49.jpg)
Engineering'Principles'Con/nued• scale'up'across'larger'projects?
• scale'up'across'teams?
• fit'with'your'applica6on'domain?
• fit'with'your'team?
![Page 50: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/50.jpg)
Tradi&onal*web*applica&on*development*was*insane.
![Page 51: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/51.jpg)
The$Frameworks...
![Page 52: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/52.jpg)
Backbone
• first&popular&MVC&framework&for&front5JS
• lightweight
• can&work&nicely&with&other&front5end&technology&such&as&React.
![Page 53: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/53.jpg)
AngularJS
• declara(ve*views*in*HTML*with*direc(ves
• 26way*databinding
• dataflow*architecture
• plain*JSON*and*JS
• deep*tes(ng*support
• dependency*injec(on
• module*system
![Page 54: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/54.jpg)
EmberJS
• deep%focus%on%state%and%rou/ng
• deep%focus%on%a%canonical%way%of%doing%things
• conven/on%of%configura/on
• Ember%data
• MVC,%modules
![Page 55: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/55.jpg)
Web$Components
• a#standardized#take#on#extending#HTML#with#components
• the#problem#AngularJS#was#first#built#to#accomplish
• many#years#out#sAll,#but#strong#aCenAon#from#all#the#framework#vendors.
![Page 56: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/56.jpg)
Polymer
• a#web#component#polyfill
• works#only#on#Chrome#reliably
![Page 57: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/57.jpg)
React
• a#reac've#view#layer#based#on#a#immutable#virtual#DOM
• an#other#approach#to#state#management
• makes#it#easier#to#reason#about#state#in#the#view#layer
• most#apps#don't#need#this
![Page 58: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/58.jpg)
Vue.js
• an$event$model$that$handles$complete$state$interac2ons$across$mul2ple$components$in$a$UI
![Page 59: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/59.jpg)
THE$BUSINESS$CASE
![Page 60: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/60.jpg)
A"perfect"storm...
1. mobile
2. UX
3. Lean0development
4. technology0:0HTML50>095%0of0clients
5. ecosystem0:0rapid0innovaEon0and0new0frameworks
![Page 61: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/61.jpg)
Clear&benefits...• faster(to(develop
• improved(UX
• agile:(easier(to(repurpose(and(change
• mobile(friendly
![Page 62: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/62.jpg)
Serious(risks...• a#radical#switch#in#architecture
• a#radical#switch#in#development#process#(tes5ng,#agile,#func5onal)
• a#radical#switch#in#responsibility<#the#middle#stack#developer
![Page 63: The Inverted Web by Nick Van Weerdenburg](https://reader034.vdocuments.mx/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/63.jpg)
Nick%Van%WeerdenburgCEO/Founder,of,rangle.io
@n1cholasvEmail:'[email protected]
h"p://rangle.io
Twi$er:(@rangleioBlog:(h$p://rangle.io/blog
Subscribe)to)our)newsle/er)on)our)site!