This document discusses principles of offline-first development and building applications that can function without an internet connection. It notes that applications should have as much content as possible pre-loaded so they are functional offline ("offline first"). It also discusses lessons learned around data management, schemas, security and prioritizing important functionality over flashy features. The overall message is to thoughtfully consider how technology can best serve users rather than focusing only on latest tools.

1. I’M OFFLINE
COOL, WHAT NOW?
- we <3 ViewSource -

2. OLA GASIDLO
Lead Developer
CTO
AngefragtJS

3. @misprintedtype
Trigger Warnings
death / pandemic
animated gifs

4. @misprintedtype
Trigger Warnings
death / pandemic
animated gifs

5. @misprintedtype

6. @misprintedtype

7. @misprintedtype

8. @misprintedtype

9. @misprintedtype

10. @misprintedtype

11. @misprintedtype

12. „OFFLINE FIRST“ MEANS
GETTING ON SCREEN WITHOUT
A NETWORK REQUEST…
Jake Archibald @twitter

13. …THE MORE THAT’S THERE
BEFORE THE NETWORK, THE
MORE OFFLINE FIRST IT IS.
Jake Archibald @twitter

14. @misprintedtype
TELL ME…

15. @misprintedtype
WRONG

16. @misprintedtype
WHY?

17. @misprintedtype

18. @misprintedtype

19. @misprintedtype
COMMUNICATION

20. @misprintedtype

21. @misprintedtype

22. @misprintedtype
COMMUNICATION
INFORMATION

23. @misprintedtype

24. @misprintedtype

25. @misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT

26. @misprintedtype

27. @misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE

28. @misprintedtype

29. @misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE

30. @misprintedtype

31. @misprintedtype

32. @misprintedtype

33. @misprintedtype

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

35. @misprintedtype
COMMUNICATION
INFORMATION
EMPOWERMENT
LOVE

36. @misprintedtype

37. @misprintedtype

38. @misprintedtype

39. WEALTHY WESTERN WEB
Bruce Lawson

40. @misprintedtype
https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers

41. @misprintedtype
https://speakerdeck.com/benschwarz/vanity-performance-metrics-looking-beyond-the-numbers

42. 500MB PER MONTH
Bastian Albers

43. 2,4MB AVERAGE PAGE SIZE
= 6,94 SITES/DAY
Bastian Albers

44. ~22MIN 720P VIDEO
Bastian Albers

45. TENS OF THOUSANDS
OF EMAILS
Bastian Albers
https://www.whistleout.com.au/MobilePhones/Guides/Mobile-broadband-usage-guide

46. @misprintedtype

47. @misprintedtype

48. @misprintedtype
the REAL world

49. @misprintedtype
the Router

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

51. @misprintedtype

52. @misprintedtype
(SNC - Service)
Using NAT zones, DTN routing
&& DakNet network.
Saami Network Connectivity

53. @misprintedtype
Learnings (requests & assets)

54. @misprintedtype
Check your requests!

55. @misprintedtype
beware of Lie-Fi

56. @misprintedtype
queries of bandwidth

57. @misprintedtype
queries of bandwidth

58. @misprintedtype
enhance assets with network

59. @misprintedtype
data over assets

60. @misprintedtype

61. @misprintedtype
SVG over IMG

62. @misprintedtype
base64 over IMG

63. @misprintedtype
base64 is expensive && heavy

64. @misprintedtype
the Pandemic

65. @misprintedtype

66. @misprintedtype

67. @misprintedtype

68. @misprintedtype

69. @misprintedtype
rm -rf ~/

70. @misprintedtype
first learning (data)

71. @misprintedtype
Decouple server && client and
build a task / message system.

72. @misprintedtype

73. @misprintedtype

74. @misprintedtype

75. @misprintedtype

76. @misprintedtype
save data locally && frequently

77. @misprintedtype
partial data updates

78. @misprintedtype
partial data updates

79. @misprintedtype

80. @misprintedtype

81. @misprintedtype
second learning (schema)

82. @misprintedtype
define flexible data schema

83. @misprintedtype
prevent merge conflicts

84. @misprintedtype
prevent merge conflicts

85. @misprintedtype
10/2014 12/2015

86. @misprintedtype
the Pizza

87. @misprintedtype

88. @misprintedtype

89. @misprintedtype
Learnings (security)

90. @misprintedtype
validate on server

91. @misprintedtype
validate on server

92. @misprintedtype
CORS <3

93. @misprintedtype
encrypt local data

94. @misprintedtype

95. @misprintedtype

96. @misprintedtype
use JSON Web Tokens

97. @misprintedtype
BONUS

98. @misprintedtype
the Rally

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

100. @misprintedtypehttp://www.minicong.com/lo-tec/

101. @misprintedtype

102. @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

103. @misprintedtype
Learnings

104. @misprintedtype
Rethink how to use technology,
by thinking about the issue.
Not about the tools.

105. @misprintedtype
You rock!

106. @misprintedtype

107. @misprintedtype

108. @misprintedtype
we <3 you!
@misprintedtype && @styladev