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
Jakarta EE meets AI
ivargrimstad
0
580
What’s New in Compose Multiplatform - A Live Tour (droidcon London 2024)
zsmb
1
470
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.8k
Click-free releases & the making of a CLI app
oheyadam
2
110
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
330
Arm移行タイムアタック
qnighy
0
300
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
120
Content Security Policy入門 セキュリティ設定と 違反レポートのはじめ方 / Introduction to Content Security Policy Getting Started with Security Configuration and Violation Reporting
uskey512
1
520
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.3k
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
230
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
600

Featured

See All Featured
Typedesign – Prime Four
hannesfritz
40
2.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Thoughts on Productivity
jonyablonski
67
4.3k
Building Adaptive Systems
keathley
38
2.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
16k
How GitHub (no longer) Works
holman
310
140k
How STYLIGHT went responsive
nonsquared
95
5.2k
Documentation Writing (for coders)
carmenintech
65
4.4k
GraphQLとの向き合い方2022年版
quramy
43
13k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k

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