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:'nick@rangle.io

h"p://rangle.io

Twi$er:(@rangleioBlog:(h$p://rangle.io/blog

Subscribe)to)our)newsle/er)on)our)site!