Of!ine for web
Jan Jongboom
Frontend Dev Conf 2014
@janjongboom
Jan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox
OS.
@janjongboom
Jan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox
OS.
Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion people out of 7.
4,500,000,000
Internet is normal for western world, but big part of the world doesnt have it.
Click Only 2.5 billion peopl...
4.5 billion people, all on mobile
These people are going to come online on mobile
Don’t break their experience!
Mobile users don’t always have an internet connection! Don’t break their experience, build w...
37%
Western world, last year. Netherlands already 37% of all traffic is mobile. Will only increase. It’s
ALREADY an issue!
Оффлайн
важна!
For years we have been developing with online in our heads, but we should stop treating like offline is
sti...
Let’s do it!
Let’s do something about it!
Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
Currency converter BYR -> EUR. Price of a beer.
- It’s a website. Resources are on a server.
- Data comes from Yahoo
When no internet connection -> breaks. Oh noes. We want to fix it.
The shell
App content
Let me introduce some basic concepts here. An application consists of two parts:
1. The shell
2. App...
The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all ...
The shell
• All assets
• Distribution through:
• App store
• Publish on web server
• Changes are costly
The shell are all ...
App content
• Everything your app serves
up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app conten...
App content
• Everything your app serves
up
• Pushed down from server
• Highly volatile
• Changes are cheap
The app conten...
Part I: The shell
So we have a website, it has HTML/CSS/JS and now we want to cache it. There is a technique called
appcac...
List all !les, put them in cache
Basically, list all files & put them in the cache.
AppCache
First request
Grabbing jan.com/index.html
manifest.appcache
On first request it looks like this. Browser fetches y...
AppCache
First request
Grabbing jan.com/index.html
Please cache all these !les manifest.appcache
On first request it looks ...
AppCache
2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No wai...
AppCache
2nd request
I need foo/blah
Browser Cache
Second request, if the requested file is already in appcache? OK! No wai...
AppCache
2nd request
I need foo/blah
200 OK! Browser Cache
Second request, if the requested file is already in appcache? OK...
Writing AppCache !le
Store as currency.appcache
Appcache is a file on your server. Very easy.
Writing AppCache !le
Store as currency.appcache
Appcache is a file on your server. Very easy.
Writing AppCache !le
Store as currency.appcache
Appcache is a file on your server. Very easy.
Writing AppCache !le
Store as currency.appcache
Appcache is a file on your server. Very easy.
Tell the browser there is a cache file with attribute
currency.appcache
JavaScript !le
Browser will ALWAYS show cached version. Updates go by updating the version number in the...
Inspecting AppCache (FF)
Tools > Developer > Developer Toolbar
appcache list localhost
Dealing with appcache info, to debug
Inspecting AppCache (FF)
Tools > Developer > Developer Toolbar
appcache clear
appcache validate http://your.appcache
Inspecting AppCache (Chrome)
chrome://appcache-internals/
Chrome has a similar thing under chrome://appcache-internals
Inspecting AppCache (Chrome)
chrome://appcache-internals/
Chrome has a similar thing under chrome://appcache-internals
Shit you will do wrong
• Setting wrong MIME type
• Have one !le 404
• Not realizing user will always see
old version !rst
...
Performance
Also useful for performance. Because no need to hit the server. This is data from a web application I
built. P...
1500 ms
Empty cache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including
exec...
820 ms
Subsequent reload
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including...
320 ms
Reload with appcache
On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (includ...
250% speed bump
Not just for of"ine
Part II: App content
We talked about the shell, but what’s equally important is what the shell contains
App content, comes from server. This is calculated using the textbox and data from a server that has
currency exchange dat...
App content, comes from server. This is calculated using the textbox and data from a server that has
currency exchange dat...
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
A simple AJAX request
This is how I get the data from the server (simple AJAX request)
We can store the result in localStorage. key/value store. If no internet, get data from LS.
We can store the result in localStorage. key/value store. If no internet, get data from LS.
We can store the result in localStorage. key/value store. If no internet, get data from LS.
We can store the result in localStorage. key/value store. If no internet, get data from LS.
We can store the result in localStorage. key/value store. If no internet, get data from LS.
Something in between to shake up the audience.
Path caching
You can use similar things to make your application perceivably faster for users via path caching.
Guess whic...
Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t
want to wait when ...
Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t
want to wait when ...
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via nor...
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via nor...
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via nor...
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via nor...
When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice.
Cache images via nor...
Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works o...
Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works o...
Then when getting the story when user clicks: get data from local storage. If no internet, always get it.
Tah dah. Works o...
Part III: The future
Let’s take a peek into the future
AppCache
AppCache sounds pretty amazing right? Well, not everyone agrees... Jake Archibald, anyone heard of
this guy?
(Lis...
Give developers !ne-grained
control about caching,
without breaking the web
So a new proposal popped up written by Google ...
ServiceWorkers
First request
Grabbing jan.com/index.html
ServiceWorkers
First request
Grabbing jan.com/index.html
For foo/* please consult me!
ServiceWorkers
2nd request
I need foo/blah
Javascript file acts as HTTP proxy now
ServiceWorkers
2nd request
I need foo/blah
Javascript file acts as HTTP proxy now
ServiceWorkers
2nd request
I need foo/blah
200 OK!
Javascript file acts as HTTP proxy now
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,...
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,...
Example: registering
Runs in separate thread just like normal worker. Easy feature detection, no support? no registration,...
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your...
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your...
Example: use cache
It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your...
Spec & playing around
https://github.com/slightlyoff/ServiceWorker
It's testable, there is a polyfill available, but it's r...
OMGAWESOME
Want to see Firefox OS?
OMG AWESOME SHIT. Now you know how to make offline web apps. I know that there will be ...
Thank you!
slideshare.net/janjongboom
Thank you!
slideshare.net/janjongboom
Questions?
Thank you!
Offline for web - Frontend Dev Conf Minsk 2014
Offline for web - Frontend Dev Conf Minsk 2014
Upcoming SlideShare
Loading in …5
×

Offline for web - Frontend Dev Conf Minsk 2014

1,434
-1

Published on

How to make your web applications work offline. Talk given at Frontend Dev Conf 2014 in Minsk on April 19.

Published in: Internet, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,434
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Offline for web - Frontend Dev Conf Minsk 2014

  1. 1. Of!ine for web Jan Jongboom Frontend Dev Conf 2014
  2. 2. @janjongboom Jan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox OS.
  3. 3. @janjongboom Jan, live in Amsterdam. Work for Telenor. Owns part of Vimpelcom. They pay me to work on Firefox OS.
  4. 4. Internet is normal for western world, but big part of the world doesnt have it. Click Only 2.5 billion people out of 7.
  5. 5. 4,500,000,000 Internet is normal for western world, but big part of the world doesnt have it. Click Only 2.5 billion people out of 7.
  6. 6. 4.5 billion people, all on mobile These people are going to come online on mobile
  7. 7. Don’t break their experience! Mobile users don’t always have an internet connection! Don’t break their experience, build with offline in mind!
  8. 8. 37% Western world, last year. Netherlands already 37% of all traffic is mobile. Will only increase. It’s ALREADY an issue!
  9. 9. Оффлайн важна! For years we have been developing with online in our heads, but we should stop treating like offline is still a second class citizen
  10. 10. Let’s do it! Let’s do something about it!
  11. 11. Currency converter BYR -> EUR. Price of a beer. - It’s a website. Resources are on a server. - Data comes from Yahoo
  12. 12. Currency converter BYR -> EUR. Price of a beer. - It’s a website. Resources are on a server. - Data comes from Yahoo
  13. 13. Currency converter BYR -> EUR. Price of a beer. - It’s a website. Resources are on a server. - Data comes from Yahoo
  14. 14. When no internet connection -> breaks. Oh noes. We want to fix it.
  15. 15. The shell App content Let me introduce some basic concepts here. An application consists of two parts: 1. The shell 2. App Content
  16. 16. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly The shell are all assets that make up your application. Code files, the user interface, images. It's the part that you would distribute through an app store, or the application that you put up on a web server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to re-release your product.
  17. 17. The shell • All assets • Distribution through: • App store • Publish on web server • Changes are costly The shell are all assets that make up your application. Code files, the user interface, images. It's the part that you would distribute through an app store, or the application that you put up on a web server. The shell hardly changes, and if you want to make a change it's a costly one. You would need to re-release your product.
  18. 18. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap The app content is everything your app serves up. News items; the facebook feed. Most of the times it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update. Ergo: We need to distinguish between these two types is because they require different caching strategies and techniques, but you can't make an application available without either of these two.
  19. 19. App content • Everything your app serves up • Pushed down from server • Highly volatile • Changes are cheap The app content is everything your app serves up. News items; the facebook feed. Most of the times it's pushed down to the client via HTTP requests, it's generally short lived and very cheap to update. Ergo: We need to distinguish between these two types is because they require different caching strategies and techniques, but you can't make an application available without either of these two.
  20. 20. Part I: The shell So we have a website, it has HTML/CSS/JS and now we want to cache it. There is a technique called appcache. Already in all major browsers, even IE. So you can use it today.
  21. 21. List all !les, put them in cache Basically, list all files & put them in the cache.
  22. 22. AppCache First request Grabbing jan.com/index.html manifest.appcache On first request it looks like this. Browser fetches your HTML page. If it has appcache, it fetches that file and loads all resources. No initial performance penalty.
  23. 23. AppCache First request Grabbing jan.com/index.html Please cache all these !les manifest.appcache On first request it looks like this. Browser fetches your HTML page. If it has appcache, it fetches that file and loads all resources. No initial performance penalty.
  24. 24. AppCache 2nd request I need foo/blah Browser Cache Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
  25. 25. AppCache 2nd request I need foo/blah Browser Cache Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
  26. 26. AppCache 2nd request I need foo/blah 200 OK! Browser Cache Second request, if the requested file is already in appcache? OK! No waiting time anymore. If not, go to server.
  27. 27. Writing AppCache !le Store as currency.appcache Appcache is a file on your server. Very easy.
  28. 28. Writing AppCache !le Store as currency.appcache Appcache is a file on your server. Very easy.
  29. 29. Writing AppCache !le Store as currency.appcache Appcache is a file on your server. Very easy.
  30. 30. Writing AppCache !le Store as currency.appcache Appcache is a file on your server. Very easy.
  31. 31. Tell the browser there is a cache file with attribute
  32. 32. currency.appcache JavaScript !le Browser will ALWAYS show cached version. Updates go by updating the version number in the manifest. Downloads in background. Javascript APIs available, downloading/progress/noupdate.
  33. 33. Inspecting AppCache (FF) Tools > Developer > Developer Toolbar appcache list localhost Dealing with appcache info, to debug
  34. 34. Inspecting AppCache (FF) Tools > Developer > Developer Toolbar appcache clear appcache validate http://your.appcache
  35. 35. Inspecting AppCache (Chrome) chrome://appcache-internals/ Chrome has a similar thing under chrome://appcache-internals
  36. 36. Inspecting AppCache (Chrome) chrome://appcache-internals/ Chrome has a similar thing under chrome://appcache-internals
  37. 37. Shit you will do wrong • Setting wrong MIME type • Have one !le 404 • Not realizing user will always see old version !rst • Expiration headers on appcache • Develop with appcache enabled (tip: set wrong MIME type in dev) Some stuff you will do wrong
  38. 38. Performance Also useful for performance. Because no need to hit the server. This is data from a web application I built. Pretty simple.
  39. 39. 1500 ms Empty cache On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript): And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
  40. 40. 820 ms Subsequent reload On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript): And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
  41. 41. 320 ms Reload with appcache On my home internet connection (60 Mbit, 105 ms. ping to the server) this page renders (including executing all javascript): And that's on a very simple page that is already highly optimized. As we all know, **speed** is the most important aspect of a web page. Having tools to increase the speed of already highly optimized pages by 250% is insane.
  42. 42. 250% speed bump Not just for of"ine
  43. 43. Part II: App content We talked about the shell, but what’s equally important is what the shell contains
  44. 44. App content, comes from server. This is calculated using the textbox and data from a server that has currency exchange data.
  45. 45. App content, comes from server. This is calculated using the textbox and data from a server that has currency exchange data.
  46. 46. A simple AJAX request This is how I get the data from the server (simple AJAX request)
  47. 47. A simple AJAX request This is how I get the data from the server (simple AJAX request)
  48. 48. A simple AJAX request This is how I get the data from the server (simple AJAX request)
  49. 49. We can store the result in localStorage. key/value store. If no internet, get data from LS.
  50. 50. We can store the result in localStorage. key/value store. If no internet, get data from LS.
  51. 51. We can store the result in localStorage. key/value store. If no internet, get data from LS.
  52. 52. We can store the result in localStorage. key/value store. If no internet, get data from LS.
  53. 53. We can store the result in localStorage. key/value store. If no internet, get data from LS.
  54. 54. Something in between to shake up the audience.
  55. 55. Path caching You can use similar things to make your application perceivably faster for users via path caching. Guess which way they go.
  56. 56. Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t want to wait when we click.
  57. 57. Example, BBC is list-detail example. On the left list of news stories. User can click through. We don’t want to wait when we click.
  58. 58. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
  59. 59. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
  60. 60. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
  61. 61. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
  62. 62. When laoding the front page. Make separate calls to get the data, let it expire. Dont do calls twice. Cache images via normal Image JS thing.
  63. 63. Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
  64. 64. Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
  65. 65. Then when getting the story when user clicks: get data from local storage. If no internet, always get it. Tah dah. Works offline!
  66. 66. Part III: The future Let’s take a peek into the future
  67. 67. AppCache AppCache sounds pretty amazing right? Well, not everyone agrees... Jake Archibald, anyone heard of this guy? (Lists some key problems with AppCache)
  68. 68. Give developers !ne-grained control about caching, without breaking the web So a new proposal popped up written by Google (and backed up by Mozilla since then). Originally known under `NavigationControllers`, and currently under `ServiceWorkers`. Main goal:
  69. 69. ServiceWorkers First request Grabbing jan.com/index.html
  70. 70. ServiceWorkers First request Grabbing jan.com/index.html For foo/* please consult me!
  71. 71. ServiceWorkers 2nd request I need foo/blah Javascript file acts as HTTP proxy now
  72. 72. ServiceWorkers 2nd request I need foo/blah Javascript file acts as HTTP proxy now
  73. 73. ServiceWorkers 2nd request I need foo/blah 200 OK! Javascript file acts as HTTP proxy now
  74. 74. Example: registering Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers. This is for the whole domain
  75. 75. Example: registering Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers. This is for the whole domain
  76. 76. Example: registering Runs in separate thread just like normal worker. Easy feature detection, no support? no registration, nothing happens. This also means that you can *just* build for ServiceWorkers. This is for the whole domain
  77. 77. Example: use cache It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
  78. 78. Example: use cache It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
  79. 79. Example: use cache It’s like an HTTP proxy all written in client side javascript. It also doesn’t break HTTP, because your code will still do normal AJAX requests etc. If there are no service workers enabled, this code won’t run and we’ll consult the server.
  80. 80. Spec & playing around https://github.com/slightlyoff/ServiceWorker It's testable, there is a polyfill available, but it's really for experimenting only.
  81. 81. OMGAWESOME Want to see Firefox OS? OMG AWESOME SHIT. Now you know how to make offline web apps. I know that there will be a bunch of ppl that want to know more about FFOS. Meet me afterwards. I also have devices with me. Now ONE MORE THING... This is too good not to show. A commercial from Movistar about Firefox OS to get you excited about that.
  82. 82. Thank you! slideshare.net/janjongboom Thank you!
  83. 83. slideshare.net/janjongboom Questions? Thank you!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×