The$Inverted$Weband$the$future$of$the$Internet
___________________
Nick%Van%Weerdenburg
Founder/CEO,rangle.io
h"p://rangle.io
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.$
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
Let's&start&with&a&ques.on...
"Will%the%Internet%Inter,Orb%Protocol%replace%Hypertext%Transfer%Protocol%as%the%predominant%communica=ons%protocol%for%the%World%Wide%Web?"
"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."
“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
HE#WAS#RIGHT
the$rest$is$implementa-on$details
...APIs&dominate&the&modern&web.
And$applica*ons$are$communica*ng$through$these$APIs$which$are$built$
on$REST$APIs$and$JSON.
Surprising,*HTTP*turned*out*to*a*fantas4c*was*of*doing*this*machine9
to9machine*communica4ons.
What's'important'is'the'architectural'principle.
So#ware(needs(to(talk(to(other(so#ware.
The$most$robust$complex$systems$are$built$incrementally$from$simpler$
systems.
And,%the%end)to)end%principle%from%1981:
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.
Browser'applica-ons'(Java,'Ac-veX,'Flash,'HTML5)'talking'to'server'endApoints'(Corba,'XML'Web'Services,'
REST'APIs)
"provided)they)can)be)implemented)"completely)and)correctly")in)the)
end)hosts."
REST%APIs%+%HTML5%=%completely%and%correctly
="The"Inverted"Web
History(of(the(Inverted(Web• Java%Applets
• Ac-veX%Controls
• Shockwave
• Flash
...and%back%to%JavaScript%and%HTML5
WHY$NOW?
HTML5&>&90%&coverage&of&users
Mobile'forcing'a'rewrite'of'the'web.
UX#forcing#a#rewrite#of#the#web.
An#unbelievably#robust#JavaScript#ecosystem.
and$we$finally$enter$the$era$of$the$inverted$web...
Disentanglement
Styling()CSS
Structure'(HTML
Behaviour*+JavaScript
Data$%REST%API
Dependencies)are)limited)to)adjacent)layers,)with)Structure)and)Styling)being)largely)independent)of)
Data.
Transla'on:*We*can*architect*and*engineer*the*front2end.
Client'Side*Architecture*is*the*Cri1cal*Piece
It's%about%Client/Side%Applica5ons,%NOT%the%MEAN%stack
The$Inverted$Web$Players• 2010%:%Backbone.js
• 2010%:%AngularJS
• 2011%:%EmberJS
• 2013%:%Polymer
• 2014%:%React
• ?%:%Web%Components
and$REST$APIs.
Common%Goals%of%Client.Side%JS• modules
• dependency-injec0on
• tes0ng-support
• support-for-REST-and-JSON
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?
Engineering'Principles'Con/nued• scale'up'across'larger'projects?
• scale'up'across'teams?
• fit'with'your'applica6on'domain?
• fit'with'your'team?
Tradi&onal*web*applica&on*development*was*insane.
The$Frameworks...
Backbone
• first&popular&MVC&framework&for&front5JS
• lightweight
• can&work&nicely&with&other&front5end&technology&such&as&React.
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
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
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.
Polymer
• a#web#component#polyfill
• works#only#on#Chrome#reliably
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
Vue.js
• an$event$model$that$handles$complete$state$interac2ons$across$mul2ple$components$in$a$UI
THE$BUSINESS$CASE
A"perfect"storm...
1. mobile
2. UX
3. Lean0development
4. technology0:0HTML50>095%0of0clients
5. ecosystem0:0rapid0innovaEon0and0new0frameworks
Clear&benefits...• faster(to(develop
• improved(UX
• agile:(easier(to(repurpose(and(change
• mobile(friendly
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
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!
