Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Say hello to offline first!

Ola Gasidlo
May 19, 2014
Programming
4
2.2k

Say hello to offline first!

// slidedeck with speakernotes
https://docs.google.com/presentation/d/1kGKyvw6BsQMFcQYDagCHzBjYoqvBnSg6NDRzEyQ-edM/edit?usp=sharing

Re-Imagining Web Design and Development for the Real World

We live in a disconnected & battery-powered world. Devices and user interactions have changed enormously over the years. What hasn't changed is the internet itself and the way how we concept and build applications in it.

Offline First does not only mean reverting our design processes and creating apps for offline use first. In this new world where "online" is just a feature and not default state, we have to find new approaches and patterns for our thoughts and processes in app design and development.

This talk will cover the philosophy behind and current state of offline support on the web, the starting points and the design challenges posed by developing a first-class offline experience, and it will also give you first insights in the technical parts.

How can we change the way the web is built?

Ola Gasidlo

May 19, 2014
Tweet

More Decks by Ola Gasidlo

See All by Ola Gasidlo
AYB14 - offline first <3
zoepage
0
110
AYB14 - offline first <3
zoepage
2
1.1k
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
88

Other Decks in Programming

See All in Programming
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Arm移行タイムアタック
qnighy
0
340
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
React への依存を最小にするフロントエンド設計
takonda
12
3.1k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
180
CSC509 Lecture 11
javiergs
PRO
0
180
Make Impossible States Impossibleを 意識してReactのPropsを設計しよう
ikumatadokoro
0
270
Tauriでネイティブアプリを作りたい
tsucchinoko
0
370
CSC509 Lecture 09
javiergs
PRO
0
140
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
710
cmp.Or に感動した
otakakot
3
230
イマのCSSでできる
インタラクション最前線 + CSS最新情報
clockmaker
4
760

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
What's new in Ruby 2.0
geeforr
343
31k
Embracing the Ebb and Flow
colly
84
4.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Designing Experiences People Love
moore
138
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Code Review Best Practice
trishagee
64
17k
A Tale of Four Properties
chriscoyier
156
23k
We Have a Design System, Now What?
morganepeng
50
7.2k
RailsConf 2023
tenderlove
29
900

Transcript

  1. Say Hello To Offline First Re-Imagining Web Design and Development

    for the Real World we <3 beyondtellerrand

  2. Ola Gasidlo - Javascript & Frontend Developer for 10 years

    - Core Member of Team Hood.ie - Organizer of OpenTechSchool Dortmund twitter@misprintedtype

  3. The internet turned 25 this year!

  4. We grew up.

  5. None

  6. amount of mobile-only web users is out of reach

  7. None

  8. Tell me...

  9. None
  10. None

  11. “WE CAN’T KEEP BUILDING APPS WITH THE DESKTOP MINDSET OF

    PERMANENT, FAST CONNECTIVITY, WHERE A TEMPORARY DISCONNECTION OR SLOW SERVICE IS REGARDED AS A PROBLEM AND COMMUNICATED AS AN ERROR.”
  12. None

  13. ...work offline...

  14. ...MANIFEST...

  15. ...MANIFEST… ++ use app offline ++ loading is fast ++

    users get the full experience

  16. ...MANIFEST… <html manifest="example.appcache"> ... </html> IE8+ / FF 3.5+ /

    Chrome 4.0+ / Safari 4.0+ / Opera 10.5+ / iPhone 2.0+ / Android 2.0+

  17. ...MANIFEST… AddType text/cache-manifest .appcache

  18. ...MANIFEST… CACHE MANIFEST # 2013-11-13:v3 CACHE index.html NETWORK: * FALLBACK:

    /online.html /offline.html

  19. ...MANIFEST… http://appcache.rawkes.com/ (generate it!) or read the tutorial: http://www.html5rocks.com/en/tutorials/appcache/beginner/

  20. None
  21. None
  22. None
  23. None

  24. offline > error handling

  25. inform user

  26. None

  27. build trust

  28. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  29. http://branch.com/b/redesigning-the-save-symbol-let-s-do-this

  30. organize data

  31. None

  32. decide

  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. None
  40. None
  41. None
  42. None
  43. None

  44. Do not harm human! (first law of robotic)

  45. Do not lose data! (first law of offline first)

  46. None
  47. None
  48. None

  49. http://hood.ie / http://offlinefirst.org/

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. None
  62. None
  63. None

  64. hoodie <3 you @misprintedtype / @hoodiehq