The document discusses the rise of the "inverted web", where applications are built using client-side frameworks instead of server-side frameworks. It outlines the key drivers being HTML5 adoption, mobile usage, and improved JavaScript ecosystems. Several popular client-side frameworks are mentioned, including Backbone, Angular, Ember, React, and Vue. While the inverted web approach has clear benefits like faster development and improved UX, it also carries risks due to the radical change it requires in architecture and development processes.

1. The$Inverted$Web
and$the$future$of$the$Internet
___________________
Nick%Van%Weerdenburg
Founder/CEO,rangle.io
h"p://rangle.io

3. 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.$

4. 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

5. Let's&start&with&a&ques.on...

6. "Will%the%Internet%Inter,Orb%Protocol%replace%Hypertext%Transfer%
Protocol%as%the%predominant%communica=ons%protocol%for%the%
World%Wide%Web?"

7. "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."

8. “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

9. HE#WAS#RIGHT

10. the$rest$is$implementa-on$details

11. ...APIs&dominate&the&modern&web.

12. And$applica*ons$are$communica*ng$
through$these$APIs$which$are$built$
on$REST$APIs$and$JSON.

13. Surprising,*HTTP*turned*out*to*a*
fantas4c*was*of*doing*this*machine9
to9machine*communica4ons.

14. What's'important'is'the'architectural'principle.

15. So#ware(needs(to(talk(to(other(so#ware.

16. The$most$robust$complex$systems$
are$built$incrementally$from$simpler$
systems.

17. And,%the%end)to)end%principle%from%1981:

18. 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.

19. Browser'applica-ons'(Java,'Ac-veX,'
Flash,'HTML5)'talking'to'server'endA
points'(Corba,'XML'Web'Services,'
REST'APIs)

20. "provided)they)can)be)implemented)
"completely)and)correctly")in)the)
end)hosts."

21. REST%APIs%+%HTML5%=%completely%and%correctly

22. ="The"Inverted"Web

23. History(of(the(Inverted(Web
• Java%Applets
• Ac-veX%Controls
• Shockwave
• Flash
...and%back%to%JavaScript%and%HTML5

24. WHY$NOW?

25. HTML5&>&90%&coverage&of&users

26. Mobile'forcing'a'rewrite'of'the'web.

27. UX#forcing#a#rewrite#of#the#web.

28. An#unbelievably#robust#JavaScript#ecosystem.

29. and$we$finally$enter$the$era$of$the$
inverted$web...

32. Disentanglement
Styling()CSS
Structure'(HTML
Behaviour*+JavaScript
Data$%REST%API

33. Dependencies)are)limited)to)
adjacent)layers,)with)Structure)and)
Styling)being)largely)independent)of)
Data.

34. Transla'on:*We*can*architect*and*
engineer*the*front2end.

40. Client'Side*Architecture*is*the*Cri1cal*
Piece
It's%about%Client/Side%Applica5ons,%NOT%the%
MEAN%stack

46. The$Inverted$Web$Players
• 2010%:%Backbone.js
• 2010%:%AngularJS
• 2011%:%EmberJS
• 2013%:%Polymer
• 2014%:%React
• ?%:%Web%Components
and$REST$APIs.

47. Common%Goals%of%Client.Side%JS
• modules
• dependency-injec0on
• tes0ng-support
• support-for-REST-and-JSON

48. 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?

49. Engineering'Principles'Con/nued
• scale'up'across'larger'projects?
• scale'up'across'teams?
• fit'with'your'applica6on'domain?
• fit'with'your'team?

50. Tradi&onal*web*applica&on*
development*was*insane.

51. The$Frameworks...

52. Backbone
• first&popular&MVC&framework&for&front5
JS
• lightweight
• can&work&nicely&with&other&front5end&
technology&such&as&React.

53. 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

54. 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

55. 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.

56. Polymer
• a#web#component#polyfill
• works#only#on#Chrome#reliably

57. 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

58. Vue.js
• an$event$model$that$handles$complete$
state$interac2ons$across$mul2ple$
components$in$a$UI

59. THE$BUSINESS$CASE

60. A"perfect"storm...
1. mobile
2. UX
3. Lean0development
4. technology0:0HTML50>095%0of0clients
5. ecosystem0:0rapid0innovaEon0and0new0frameworks

61. Clear&benefits...
• faster(to(develop
• improved(UX
• agile:(easier(to(repurpose(and(change
• mobile(friendly

62. 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

63. Nick%Van%Weerdenburg
CEO/Founder,of,rangle.io
@n1cholasv
Email:'nick@rangle.io
h"p://rangle.io
Twi$er:(@rangleio
Blog:(h$p://rangle.io/blog