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.1k

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
99
AYB14 - offline first <3
zoepage
2
960
Coding the dream
zoepage
1
1.1k
offline first
zoepage
1
85

Other Decks in Programming

See All in Programming
⼤規模⾔語モデルの拡張（RAG）が 終わったかも知れない件について
nearme_tech
23
15k
コードレビューで学ぶ！Kotlinオブジェクト指向デザインパターン
akkie76
2
190
SwiftUI Performance 不要なViewの再描画と更新を抑える
bigamitiongit
1
160
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
Behind VS Code Extensions for JavaScript / TypeScript Linnting and Formatting
unvalley
5
870
Snowflakeで眠ったデータを起こそう！
estie
0
110
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
630
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
CQRS/ES avec Symfony, c’est (trop) bien !
jeremyfreeagent
1
640
チーム力を高めるスクラム実践法：カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110

Featured

See All Featured
The Language of Interfaces
destraynor
151
23k
Designing the Hi-DPI Web
ddemaree
276
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
1
3.4k
A Philosophy of Restraint
colly
196
16k
Unsuck your backbone
ammeep
663
57k
How GitHub (no longer) Works
holman
304
140k
How to Ace a Technical Interview
jacobian
272
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Infographics Made Easy
chrislema
238
18k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
Statistics for Hackers
jakevdp
789
220k

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