Online/Offline Equivalence: What our interplanetary tomorrow can teach us about building apps today

*Online/Offline Equivalence*: What our interplanetary tomorrow can teach us about building apps today

*How to use the slides*:

* <kbd>P</kbd> toggle presenter notes
* <kbd>?</kbd> help menu
* <kbd>→</kbd> next slide

Also, [here's the source](https://github.com/chadoh/online-offline-equivalence)

---

# *Online/Offline Equivalence*

What our interplanetary tomorrow can teach us about building apps today

---

???

Prologue: We live in a special time! Whole-species instantaneous communication is a short-lived phenomenon for a technological civilization of sufficient longevity.

---

# me

---

# Chad Ostrowski

---

???

I live in the Orion arm of the Milky Way galaxy

---

???

more specifically, I live on a water planet called Earth

---

???

I live in a city called Lancaster

---

???

Here's what I've been up to for the past 14 years.

---

???

You can make your own life chart on Entire.Life, which I built and maintain in my free time

---

???

Get one! https://entire.life

---
background-image: url(img/citrusbyte.png)

???

During the day, I work at citrusbyte: innovate like a startup, even if you aren't one. We're hiring!

---

* twitter.com/chadoh
* github.com/chadoh
* entire.life/chadoh
* medium.com/@chadoh

---

???

Disclaimer: I am cosmic algae. I am not an expert, I am learning with you. Correct me if you notice mistakes!

Comic from [Poorly Drawn Lines](http://poorlydrawnlines.com/comic/spaceship-earth/)

---

## *Where we're going*

1. Problems of future's present
2. Solutions
  1. Offline First
  2. Distributed Web

---

# let's go on a journey

---

# [How far is it to Mars?](http://www.distancetomars.com/)

---

# 56 million km

---

56,000,000 km ÷ 300,000 km/s =

# *3 light minutes*

---

# *6 minute latency*

(during the fast part of the year)

---

# at the closest!

---

background-image: url(img/mars-one-announces-100-finalists-vying-to-be-first-people-on-mars-image-2.jpg)

???

Mars One wants to establish a permanent human colony on Mars by 2030

---

???

Mars One says that, for astronauts on Mars,

> Easy Internet access will be limited to their preferred sites that are constantly updated on the local Mars web server. Other websites will take between 6 and 45 minutes to appear on their screen - first 3-22 minutes for your click to reach Earth, and then another 3-22 minutes for the website data to reach Mars. Contact friends at home is possible by video, voice or text message–e-mail, WhatsApp, sms–but real time dialogue is not possible, because of the time delay.

---

"preferred sites that are constantly updated on the local Mars web server"

---

# does this even qualify as the Internet?

---

???

protesters during the Arab Spring

---

the internet is

# *a discussion*

---

the internet is

# *many-to-many*

---

the internet is

# *controlled by its participants*

---

the internet is

# *a great democratizer*

---

# and if I *can't contribute*

---

# then it *doesn't count*

---

Let's think through it

---

???

Here's a simple page of text; the sort Mars One might imagine when it says "preferred sites to be updated on local Mars server"

---

???

Except even this page expects interactivity! Is it acceptable to leave Martians out of this sort of discussion?

---

???

At a next level of interactivity, we have social media sites. These are certainly many-to-many! You are expected to contribute. Instagram would not be very "Insta" on Mars!

---

???

Finally, all the apps that require real-time collaboration would just be totally broken on Mars

---

*meanwhile, in 2017*

# why should we care?

---

## tomorrow's problems
## ===
## today's problems but *bigger*

???

Thesis statement.

So if we start solving tomorrow's problems now, we will fix current problems and improve the current world. I'll phrase a lot of this talk around helping and serving people. If that's not motivating for you, you're welcome to translate "helping people" into "making money" in your head. Every now and then, it might actually be true that you can help people and make money off of them at the same time.

---

*Earth problem 1*

# Latency

---

???

Depending on where you've deployed your app and where your customers are, they could experience some significant latencies. Six minutes?

---

???

This image shows how the internet grew worldwide from 2000 - 2012. Found on [Vox - 40 Maps That Explain The Internet](https://www.vox.com/a/internet-maps)

Lots of countries are starting to come online, but the infrastructure still isn't reliable. An internet that works even on Mars would make using the internet much more feasible for these people.

---

# [86 million](http://www.internetlivestats.com/internet-users/nigeria/)

???

The number of internet users in Nigeria, with just 46% of population online. That's a large number of people to be helped.

---

???

Then there are all the more prosaic times that we have poor network connectivity.

The network has many edges where disconnection and flaky connections are a regular occurrence.

---

*Earth Problem 2*

# Censorship

---

???

in January 2011, Egypt shut down its whole country's access to the internet

---

???

That brings us back to these folks. Trying to organize for democracy during the Arab Spring.

---

???

This image shows worldwide risk of countries being disconnected from the internet as of 2014. Found on [Vox - 40 Maps That Explain The Internet](https://www.vox.com/a/internet-maps)

---

???

in August 2011, San Francisco shut down the internet

---

???

Then of course, there's internet censorship, which is a similar problem. Would internet that works even on Mars fix this, too?

---

*Earth Problem 3*

## data growth outpaces network speed

---

???

From https://www.emc.com/leadership/digital-universe/2014iview/index.htm

---

???

From https://www.emc.com/leadership/digital-universe/2014iview/index.htm

---

???

From [Ars Technica in 2012](https://arstechnica.com/features/2012/05/bandwidth-explosion-as-internet-use-soars-can-bottlenecks-be-averted/): Bandwidth explosion: As Internet use soars, can bottlenecks be averted?
Bandwidth usage is soaring, driven by the proliferation of Internet-connected devices.

---

???

From [Nielson](https://www.nngroup.com/articles/law-of-bandwidth/):

> Nielsen's law is similar to the more established Moore's law. Unfortunately, comparing the two laws shows that bandwidth grows slower than computer power. Moore's law says that computers double in capabilities every 18 months, which corresponds to about 60% annual growth.

---

???

Again from [Nielsen](https://www.nngroup.com/articles/law-of-bandwidth/):

> As shown in the table, bandwidth will remain the gating factor in the experienced quality of using the internet medium.

## growth in data demand outpaces network speed

Making the internet work on Mars means Martians would be able to get content directly from each other, rather than needing to wait for a round-trip to Earth.

An internet built in this way would also get around bottlenecks in delivering super-fast 4K video, VR experiences, and the increasingly huge IoT data sets created here on Earth.

---

# what do we do

???

So what do we do about it?

It would be super great if we could build one intermediate layer between users and websites which solved this whole problem without existing websites needing to change. Is that possible?

No. That is not possible. The basic architecture of web pages and apps need to change.

What will this new app architecture look like?

Well, there are two parts to this solution. One is here, right now, and you can start using it. These are the technologies that fit under the banner of Offline First.

The second approach--and the bigger change--is the Distributed Web. This is currently emerging, and if you get involved, you can inform the sort of future we fall into.

---

one step at a time

---

---

---

---

---

---

---

---

---

# 😞

---

*improvement 1*

# HTTP/2

???

[Much info](https://http2.github.io/faq/#why-revise-http)!

---

---

---

???

This feature of HTTP/2 is called Server Push

---

---

# 🎉

---

# 😕

---

# ☹️

???

It gets worse!

---

---

---

---

---

---

---

# 😞

---

*improvement 2*

# Service Workers

---

# What are *Service Workers*?

---

## periodic background syncs <br> *rich offline experiences* <br> push notifications

???

From [Service Workers: An Introduction](https://developers.google.com/web/fundamentals/getting-started/primers/service-workers)

> Rich offline experiences, periodic background syncs, push notifications—functionality that would normally require a native application—are coming to the web. Service workers provide the technical foundation that all these features rely on.

---

???

Service Workers run in the background, intercept calls that the page makes, and can respond with cached content. Image [from Mozilla](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers)

---

# [Can I use it yet?](https://jakearchibald.github.io/isserviceworkerready/)

---

---

---

---

---

---

---

---

---

---

# 😎

---

# 😟

---

---

---

---

background-size: auto
background-image: url(img/entire.life-form.png)

---

```
POST /events
{
  title: "Landed on Mars",
  emoji: ":rocket:",
  date: "2033-09-16"
}

```

---

background-size: auto
background-image: url(img/entire.life-event.png)

---

---

---

---

# 😞

---

*improvement 3*

# Local Storage

---

*the idea*

## store data locally

---

*the idea*

## store data locally <br> sync it back to the server periodically

---

two underlying technologies

* ## [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
* ## [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)

???

Browser-based technologies that store data locally, to be synced back to server (maybe) when connection is available

---

# Can I use it yet?

[yes](http://caniuse.com/#search=localstorage) and [yes](http://caniuse.com/#search=indexeddb)

---

# lots of tools to make it easier

---

???

[localForage](https://localforage.github.io/localForage/) makes using localStorage and related tech easier

---

???

[PouchDB](https://pouchdb.com/) allows you to read and write data directly on the device, and then sync this data to the cloud when you have an internet connection.

---

???

[RxDB](https://pubkey.github.io/rxdb/)

---

???

[Swarm](http://swarmjs.github.io/)

---

background-size: auto
background-image: url(img/synceddb.png)

???

[SyncedDB](https://github.com/paldepind/synceddb)

---

background-size: auto
background-image: url(img/shareddb.png)

???

[SharedDB](https://github.com/share/sharedb)

---

???

[Hoodie](http://hood.ie/) is a backend for JS apps that makes offline first simple. From Hoodie's FAQ:

> Hoodie core only provides typical backend APIs, for user authentication and data persistence. It does not interact with the DOM at all. It perfectly works with any MV* framework or template engines.

Hoodie and other orgs doing seminal thinking about new UX conundrums in an Offline First paradigm.

---

---

---

---

---

---

---

# 😅

---

*Service Workers* + *Local Storage* ≈

# Progressive Web Apps

---

*Service Workers* + *Local Storage* ≈

# Offline First

???

From [Bradley Holt](https://medium.com/ibm-watson-data-lab/offline-first-whats-in-a-name-89c410910694):

> With an Offline First approach you design your app for the most resource-constrained environments first, and then apply progressive enhancement techniques to make your app work better and better as it has access to more and more resources.
>
> Using an Offline First approach means that your app will not only work offline, but your app will work better when it has access to only a flaky network connection, and your app will even work better when it has a great network connection. Without this intent to design your app for the progression from offline to limited connectivity to great connectivity, there would be no reason to call it Offline First.

---

# 😅

---

# 😓

---

---

---

---

---

---

---

---

---

---

---

---

# we need a better architecture

---

background-color: white
background-image: url(img/client-server-model.svg)

???

Everything we've talked about so far has been constrained by the _client-server model architecture_. Devices can't talk directly to each other, they require the internet to mediate their conversation.

---

???

Three types of networks: centralized, decentralized, and distributed. Source: On Distributed Communications Networks, Paul Baran, 1962. More info: https://www.oreilly.com/ideas/understanding-the-blockchain

---

---

*The Distributed Web*

## where two or more devices are gathered, there the Internet is also

---

---

---

# how?

---

# BitTorrent?

---

???

From [How Stuff Works](http://computer.howstuffworks.com/bittorrent2.htm)

---

# git?

---

???

git uses a completely distributed data model

---

???

The git object model: a Merkle DAG (Directed Acyclic Graph)

---

background-size: auto
background-image: url(img/ralph-merkle.jpg)

???

This data structure was created by [Ralph Merkle](https://en.wikipedia.org/wiki/Ralph_Merkle)

---

---

---

---

# 1:1
# file:hash

---

*3fa0d4b98* ↔ *"Hello, World"*

---

So,

# can we use git & BitTorrent together?

---

???

More info: https://ipfs.io

---

"similar to the original aims of the Web, but IPFS is actually more similar to a single bittorrent swarm exchanging git objects"

[github.com/ipfs/ipfs](https://github.com/ipfs/ipfs)

---

# 🎉

---

*improvement 4*

# IPFS

---

"IPFS is a distributed file system that seeks to connect all computing devices with the same system of files."

[github.com/ipfs/ipfs](https://github.com/ipfs/ipfs)

---

"IPFS is becoming a new major subsystem of the internet. If built right, it could complement or replace HTTP. It could complement or replace even more. It sounds crazy. It is crazy."

[github.com/ipfs/ipfs](https://github.com/ipfs/ipfs)

---

# how does it work?

---

# *Content Addressable*

---

h t t p s : / / * t w i t t e r . c o m * / A l s h a h e e e d / s t a t u s / 8 6 0 2 5 7 9 9 8 4 4 6 4 2 8 1 6

???

If all you want is the content of the tweet, you don't really care that it lives on Twitter's servers. Imagine wanting to read a book and needing to go to one specific library, across the country/world, to get it.

---

/ i p f s / * Q m Y w A P J z v 5 C Z s n A 6 2 5 s 3 X f 2 n e m t Y g P p H d W E z 7 9 o j W n P b d G *

???

IPFS, on the other hand, addresses content by a hash unique to that content. You can get it from anyone on the network. You can store it so people near you can quickly retrieve it from your computer.

---

---

---

# 😁

---

# 😒

---

---

---

---

---

---

---

---

---

---

---

---

---

# Can we do this?

---

# Can we do this?

*Yes*

---

*improvement 5*

# IPFS PubSub

---

---

# one more puzzle piece

---

## hooray for *distributed files and data*, what about... *server-side logic*?

---

## hooray for *distributed files and data*, what about ~~server-side~~ *incorruptible* logic?

---

---

---

---

---

---

???

The blockchain allows trustless interactions between peers in a pseudonymous network. Learn more: https://www.youtube.com/watch?v=bBC-nXj3Ng4

---

*we need*

# distributed consensus

---

# aka

---

# blockchain

---

# aka

---

# bitcoin

---

# or

---

# *ethereum*

---

???

ethereum allows creating smart contracts that get run and validated by all machines participating in the blockchain

---

*improvement 6*

# Ethereum

---

# we did it!

---

# we have a fully-functional app!

---

# for any network edge!

---

# we fixed Martian internet!

---

# we fixed latency!

---

# we fixed censorship!

---

# we can put data close to where it's needed!

---

# 😊

---

# 😲

---

???

build a democratic autonomous organization.jpg

---

---

*YOU CAN BUILD:*

* A virtual organization where members vote on issues
* A transparent association based on shareholder voting
* Your own country with an unchangeable constitution
* A better delegative democracy

---

# 😵

---

# *wrapping up*

---

## *where we've been*

1. Problems of future's present – *solved*
2. Solutions
  1. Offline First – *use it now!*
  2. Distributed Web – *help shape its future!*

???

Advice from [@inkel](http://twitter.com/inkel): Don't engage with people that ask a "question" that is in fact a comment or a _I might know better about the subject you're talking about and this is why_. Instead tell them it's a great question and that you can discuss the subject on the hallway track. After all, it's your presentation, not theirs 😉

---

# Resources

---

???

Stanford Seminar - IPFS and the Permanent Web: https://www.youtube.com/watch?v=HUVmypx9HGI

---

* http://offlinefirst.org/
* https://ipfs.io/
* https://ethereum.org/
* https://github.com/chadoh/online-offline-equivalence/