OfflineFirst apps with WebComponents

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.

Transcript

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