@PixelsCommanderdenis.radin@gmail.com

What is beyond isomorphic?

orP2P web apps distribution

Let`s go retrospectiveAnd see how responsibilities sharing

between client and server was changing

In the beginning there was nothing...

And then god created a server and client

Server was responsible for everything

And client was just displaying HTML

On the second day god created SPA paradigm

And client become responsible for a view

layer

On the third day god created isomorphism

Why isomorphic is cool?Powers of server side rendering

and SPA are combined

Server renderingmeans faster app delivery

Server renderingmeans search engines optimisation

Single pagemeans better responsivity

Isomorphic toolingPretty powerful because of high demand

Let`s sum up

First day

When server is everything

Server Client

UI rendering + -

Data retrieval + -

App delivery + -

Second day (SPA)

WOW! We can do some things on client - side, lets SPA everything!

Server Client

UI rendering - +

Data retrieval - +

App delivery + -

Third day (Isomorphic)

Ok, let`s use all powers we have now

Server Client

UI rendering + +

Data retrieval + +

App delivery + -

Fourth day?

On the fourth day god created WebRTC and

said“Every browser can deliver content to the rest,

bypassing server. Do something with this!”

What is WebRTC?Browser API designedfor P2P communication

Fourth day?

Let`s break the boundaries to have more powers!

Server Client

UI rendering + +

Data retrieval + +

App delivery + +

Why P2P is cool?Powers of self-maintainable CDN,

server side rendering and SPA are combined

Reduce distancesget application from seeds near you to reduce latency

Traditional app distributionIt takes a lot of transatlantic trips to transmit an app when doing it in a traditional way.

P2P app distributionP2P allows to reduce number of transcontinental transfers and reduce server load.

Use fasternetworkget application from company`s internal network once it got there

Traditional app distributionServer sends package many times, corporative internet channels are loaded appropriately.

P2P app distributionIn case of P2P distribution application hits corporative network once and then is distributed using high speed internal network. This reduces server load and corporative internet channel load.

How to enable browser to seed your app P2P?First client gets app + small JS snippet which enables browser to distribute app further via

WebRTC

Application code

Basically any HTML/JS content

Viraladdition

Serves app P2P

distribution

+

What first browser gets from server

Browser essentially gets infected by app

And can infect others…

Thin client

Serves getting app from other browser

What every next client gets from server

Thin client

Serves getting app from other browser

Then it connects to other browser via WebRTC

Application code

Basically any HTML/JS content

Viraladdition

Serves app P2P

distribution

+P2P

Viral JavaScriptServer Client

UI rendering + +

Data retrieval + +

App delivery + +

Clients demand for more rights!

Let`s do some mathWarning! You ll need some patience...

Load speed math modelMa - app size (HTML, JS, CSS)

Madd - viral addition size

Mt - thin client size

Bint - Internet speed

Bnet - internal company network speed

Load speed math model● Ma - app size (HTML, JS, CSS)● Madd - viral addition size● Mt - thin client size● Bint - Internet speed● Bnet - internal company network speed

Tn = Ma / Bint - application transfer time when done in traditional way over Internet

Tp2p = (Ma + Madd) / Bnet + Mt / Bint - viral addition and thin client are

being transfered via Internet and application body is sent over internal network

Load speed calc● Ma - 1000 (1 Mb)● Madd - 50 (50 Kb)● Mt - 50 (50 Kb)● Bint - 1250 (10 Mbit average in Europe in Q2 2015 according to research)● Bnet - 1250000 (1 Gbit optic fiber)

Tn = 1000 / 1250 = 0.8 sec

Tp2p = (1000 + 50) / 125000 + 50 / 1250 = 0,0484 sec

0,8 vs 0,0484 sec

1652% improvement

Load speed (improved)● Ma - 3000● Madd - 10● Mt - 10● Bint - 1250● Bnet - 1250000

Tn = 3000 / 1250 = 2.4 sec

Tp2p = (3000 + 10) / 125000 + 10 / 1250 = 0,032 sec

2,4 vs 0,032 sec

7500% improvement

Is it realistic?No

Not every user is P2PSomeone still need to be seeded from server

Uavg = 5Let`s imagine that every corporative network your

application is distributed in have 5 users

2,4 vs 0,032 sec

7500% improvementevery 5th need full package so our win is

7500 - (7500 / 5) = 6000%

Is it realistic?No

Handshake takes a lotSince it is ICEd

The world without NATs

Our world

This adds 4 RTT at least400 msec in average

2,4 vs 0,432 sec

550% improvementevery 5th need full package so our win is

550 - (550 / 5) = 440%

Is it realistic?No

But close to be =)

WebTorrents?Why not this one?

WebTorrents

Same but slower start since it establishes connection not just on WebRTC level but also via Torrent

protocol

Server Client

UI rendering + +

Data retrieval + +

App delivery + +

Demo timepixelscommander.com:3000

And the nicest one...

npm -i viraljs

var ViralContainer = require(’viraljs’);

myExpressApp.use(new ViralContainer().middleware);

github.com/PixelsCommander/ViralJS

Questions?

@PixelsCommander