We will explore how to boost the usability of web and mobile-web apps by implementing offline-first functionalities, it’s the only way to guarantee 100% always on user experience. Low signal or no connectivity should no longer be a blocker for the user, we will discuss the available solutions for caching, in-browser database, and data replication. We will also take a look at how WC such as Polymer and Vaadin Elements help solving those issues out of the box. There will be a live coding demo to see how it’s simple to manipulate a large data, completely offline.

1. DEVPIXEL
O F F L I N E - F I R S T A P P S
W I T H
W E B C O M P O N E N T S
A M A H D Y A B D E L A Z I Z
W W W . A M A H D Y . N E T

2. # 1 J A V A U I F R A M E W O R K
1. 100% Java
2. Awesome UX
3. Big set of Components + Add-ons
4. Used by 40% of fortune 500 companies
5. And much more…
Vaadin

3. Technology
‘ C L O U D ’ I S T H E D E F A U L T
‘ M O B I L E ’ I S TA K I N G O V E R

4. Technology

5. Technology

6. Technology
Content Producer

7. Technology
Content Producer

8. Technology
USER

10. Mobile-First

11. Practical Test
1. Mobile-first design
2. Touch-first design
3. Coffee-first design

12. Mobile-First
T O U C H - F I R S T D E S I G N
L O W - R E S O U R C E S D E S I G N
O F F L I N E - F I R S T D E S I G N
M U L T I - O R I E N TAT I O N D E S I G N

13. Mobile-First
T O U C H - F I R S T D E S I G N
L O W - R E S O U R C E S D E S I G N
O F F L I N E - F I R S T D E S I G N
M U L T I - O R I E N TAT I O N D E S I G N

14. O F F L I N E - F I R S T I S
T H E O N L Y W A Y T O
A C H I E V E A T R U E 1 0 0 %
A L W A Y S - O N U S E R
E X P E R I E N C E . *
* A S S U M I N G T H E D E V I C E I S
R E L I A B L E

15. Bringing Component-based Software Engineering to the Web

16. Templates
<template id=“my-template">
<style>
...
</style>
<div>
<h1>Web Components</h1>
<img src="/img/logo.svg">
</div>
</template>

17. HTML Imports
<link rel="import" href="my-el.html">

18. Custom Elements
<my-new-element></my-new-element>

19. S H A D O W D O M

20. Before Shadow DOM
<div id="slides-to-show">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="data slick-initialized slick-slider" data-slick="{"slidesToShow": 4, "slidesToScroll": 4}">
<button class="slick-prev slick-arrow" role="button" aria-label="Previous" data-role="none" type="button"
style="display: block;">Previous</button>
<div class="slick-list draggable" aria-live="polite">
<div class="slick-track" style="opacity: 1; width: 1960px; transform: translate3d(-560px, 0px, 0px);"
role="listbox">
<div class="slick-slide slick-cloned" data-slick-index="-4" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="-3" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="-2" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="-1" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 140px;"
tabindex="-1" role="option" aria-describedby="slick-slide30">
<h3>1</h3>
</div>
<div class="slick-slide slick-active" data-slick-index="1" aria-hidden="false" style="width: 140px;" tabindex="-1"
role="option" aria-describedby="slick-slide31">
<div class="slick-slide slick-active" data-slick-index="2" aria-hidden="false" style="width: 140px;" tabindex="-1"
role="option" aria-describedby="slick-slide32">
<div class="slick-slide slick-active" data-slick-index="3" aria-hidden="false" style="width: 140px;" tabindex="-1"
role="option" aria-describedby="slick-slide33">
<div class="slick-slide" data-slick-index="4" aria-hidden="true" style="width: 140px;" tabindex="-1" role="option"
aria-describedby="slick-slide34">
<div class="slick-slide" data-slick-index="5" aria-hidden="true" style="width: 140px;" tabindex="-1" role="option"
aria-describedby="slick-slide35">
<div class="slick-slide slick-cloned" data-slick-index="6" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="7" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="8" aria-hidden="true" style="width: 140px;" tabindex="-1">
<div class="slick-slide slick-cloned" data-slick-index="9" aria-hidden="true" style="width: 140px;" tabindex="-1">
</div>
</div>
<button class="slick-next slick-arrow" role="button" aria-label="Next" data-role="none" type="button"
style="display: block;">Next</button>
</div>
1 2 3 4

21. With Shadow DOM
1 2 3 4 1 2 3 4
<div id="slides-to-show">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div id="slides-to-show">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

23. • Encapsulation
• Reusability
Benefits of using Web Components

24. Browser Support
Chrome Opera Firefox Safari IE/Edge
~
c g ~ ~
~
* As of December 2016

25. Web Components Polyfill
IE10 IE11+ Chrome* Firefox* Safari 7+*
Chrome
Android*
Mobile
Safari*
Custom Elements ~
HTML Imports ~
Shadow DOM
Templates

27. •Angular
•Polymer
•React
•Framework.JS

28. Solution
C A S H I N G
F I R E B A S E
O F F L I N E S T O R A G E
D ATA R E P L I C AT I O N

31. Challenges
I N I T I A L L O A D T I M E
S E C U R I T Y O F S T O R E D D ATA
R A C E C O N D I T I O N

32. D E M O A P P
https://github.com/amahdy/offline-first-app
<Links> T H A N K YO U !
- B U D D H A