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
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!