The Inverted Web by Nick Van Weerdenburg
description
Transcript of The Inverted Web by Nick Van Weerdenburg
![Page 1: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/2.jpg)
![Page 3: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/9.jpg)
HE#WAS#RIGHT
![Page 10: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/11.jpg)
...APIs&dominate&the&modern&web.
![Page 12: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/22.jpg)
="The"Inverted"Web
![Page 23: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/24.jpg)
WHY$NOW?
![Page 25: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/25.jpg)
HTML5&>&90%&coverage&of&users
![Page 26: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/28.jpg)
An#unbelievably#robust#JavaScript#ecosystem.
![Page 29: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/30.jpg)
![Page 31: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/31.jpg)
![Page 32: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/35.jpg)
![Page 36: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/36.jpg)
![Page 37: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/37.jpg)
![Page 38: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/38.jpg)
![Page 39: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/39.jpg)
![Page 40: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/41.jpg)
![Page 42: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/42.jpg)
![Page 43: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/43.jpg)
![Page 44: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/44.jpg)
![Page 45: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/45.jpg)
![Page 46: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/51.jpg)
The$Frameworks...
![Page 52: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/reader034/viewer/2022051323/547e0c03b4af9f1d2b8b4671/html5/thumbnails/59.jpg)
THE$BUSINESS$CASE
![Page 60: The Inverted Web by Nick Van Weerdenburg](https://reader034.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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.fdocuments.in/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!