Upload
fitc
View
2.779
Download
0
Tags:
Embed Size (px)
DESCRIPTION
The Inverted Web and the Future of the Internet with Nick Van Weerdenburg Presented on September 18 2014 at FITC's Web Unleashed Toronto 2014 The Inversion of the Web is a radical shift in responsibilities from the server to the browser; HTML5, Mobile and Single Page Applications have disrupted web development and adopting the inverted web has become a strategic necessity for ALL companies. This talk will cover the inverted web technical landscape (AngularJS, EmberJS, React, Polymer, Web Components, REST) as well as the business and technical cases for adopting it. OBJECTIVE Enable audience members to plan for and leverage the inverted web. TARGET AUDIENCE Web developers and project stakeholders such as product managers and entrepreneurs. ASSUMED AUDIENCE KNOWLEDGE An understanding of how web applications are developed. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What the inverted web landscape looks like (AngularJS, Ember, React) The business case The technical case Current limitations Single page applications as a mobile strategy
Citation preview
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!