Offline-first apps with WebComponents - DevNexus 2017
0 likes214 views
We will explore how to boost the usability of web and mobile-web apps by implementing offline-first functionalities, its 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 its simple to manipulate a large data, completely offline.
Offline-first apps with WebComponents - DevNexus 2017
- 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
- 10. Mobile-First
- 11. Practical Test 1. Mobile-鍖rst design 2. Touch-鍖rst design 3. Coffee-鍖rst 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=/amahdy/offlinefirst-apps-with-webcomponents-devnexus-2017/"/img/logo.svg"> </div> </template>
- 17. HTML Imports <link rel="import" 鞄姻艶韓=&援顎看岳;馨霞-艶鉛.鞄岳馨鉛&援顎看岳;&乙岳;
- 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
- 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/of鍖ine-鍖rst-app <Links> T H A N K YO U ! - B U D D H A