Ola Gasidlo: Cool, What Now? I'm Offline

Preview:

Citation preview

I’M OFFLINECOOL, WHAT NOW?

- we <3 ViewSource -

OLA GASIDLO

Lead Developer

CTOAngefragtJS

@misprintedtype

Trigger Warnings

death / pandemic

animated gifs

@misprintedtype

Trigger Warnings

death / pandemic

animated gifs

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

„OFFLINE FIRST“ MEANS GETTING ON SCREEN WITHOUT A NETWORK REQUEST…

Jake Archibald @twitter

…THE MORE THAT’S THERE BEFORE THE NETWORK, THE MORE OFFLINE FIRST IT IS.

Jake Archibald @twitter

@misprintedtype

TELL ME…

@misprintedtype

WRONG

@misprintedtype

WHY?

@misprintedtype

@misprintedtype

@misprintedtype

COMMUNICATION

@misprintedtype

@misprintedtype

@misprintedtype

COMMUNICATIONINFORMATION

@misprintedtype

@misprintedtype

@misprintedtype

COMMUNICATIONINFORMATIONEMPOWERMENT

@misprintedtype

@misprintedtype

COMMUNICATIONINFORMATIONEMPOWERMENTLOVE

@misprintedtype

@misprintedtype

COMMUNICATIONINFORMATIONEMPOWERMENTLOVE

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

„YOU WANTED A BANANA BUT WHAT YOU GOT WAS A GORILLA HOLDING THE BANANA AND THE ENTIRE JUNGLE.“

Joe Armstrong

@misprintedtype

COMMUNICATIONINFORMATIONEMPOWERMENTLOVE

@misprintedtype

@misprintedtype

@misprintedtype

WEALTHY WESTERN WEB

Bruce Lawson

@misprintedtypehttps://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers

@misprintedtypehttps://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers

500MB PER MONTH

Bastian Albers

2,4MB AVERAGE PAGE SIZE = 6,94 SITES/DAY

Bastian Albers

~22MIN 720P VIDEO

Bastian Albers

TENS OF THOUSANDS OF EMAILS

Bastian Albers

https://www.whistleout.com.au/MobilePhones/Guides/Mobile-broadband-usage-guide

@misprintedtype

@misprintedtype

@misprintedtype

the REAL world

@misprintedtype

the Router

@misprintedtypehttps://ingevald.files.wordpress.com/2009/02/sweden-river-fog-morning-looking-at-sun.jpg

@misprintedtype

@misprintedtype

Learnings (requests & assets)

@misprintedtype

Check your requests!

@misprintedtype

beware of Lie-Fi

@misprintedtype

queries of bandwidth

@misprintedtype

queries of bandwidth

@misprintedtype

enhance assets with network

@misprintedtype

data over assets

@misprintedtype

@misprintedtype

SVG over IMG

@misprintedtype

base64 over IMG

@misprintedtype

base64 is expensive && heavy

@misprintedtype

the Pandemic

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

rm -rf ~/

@misprintedtype

first learning (data)

@misprintedtype

Decouple server && client andbuild a task / message system.

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

@misprintedtype

save data locally && frequently

@misprintedtype

partial data updates

@misprintedtype

partial data updates

@misprintedtype

@misprintedtype

@misprintedtype

second learning (schema)

@misprintedtype

define flexible data schema

@misprintedtype

prevent merge conflicts

@misprintedtype

prevent merge conflicts

@misprintedtype

10/2014 12/2015

@misprintedtype

the Pizza

@misprintedtype

@misprintedtype

@misprintedtype

Learnings (security)

@misprintedtype

validate on server

@misprintedtype

validate on server

@misprintedtype

CORS <3

@misprintedtype

encrypt local data

@misprintedtype

@misprintedtype

@misprintedtype

use JSON Web Tokens

@misprintedtype

BONUS

@misprintedtype

the Rally

@misprintedtypehttps://en.wikipedia.org/wiki/Mongol_Rally#After_the_rally

@misprintedtype http://www.minicong.com/lo-tec/

@misprintedtype

@misprintedtype

1

2

3

4

5

6

7

8

1 1

1 1

1 1

1 1

1 1

0 0

0 0

0 0

@misprintedtype

Learnings

@misprintedtype

Rethink how to use technology,by thinking about the issue.

Not about the tools.

@misprintedtype

You rock!

@misprintedtype

@misprintedtype

@misprintedtype

we <3 you!@misprintedtype && @styladev