Building microservices with Scala, functional domain models and Spring Boot (#Devnexus)
Offline-first apps with WebComponents - DevNexus 2017
-
Upload
amahdy-abdelaziz -
Category
Technology
-
view
45 -
download
0
Transcript of Offline-first apps with WebComponents - DevNexus 2017
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
# 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
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
Technology
Technology
Technology
Content Producer
Technology
Content Producer
Technology
USER
Mobile-First
Practical Test
1. Mobile-first design
2. Touch-first design
3. Coffee-first design
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
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
OF 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
Bringing Component-based Software Engineering to the Web
Templates
<template id=“my-template"> <style> ... </style> <div> <h1>Web Components</h1> <img src="/img/logo.svg"> </div> </template>
HTML Imports
<link rel="import" href="my-el.html">
Custom Elements
<my-new-element></my-new-element>
S H A D O W D O M
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
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>
• Encapsulation
• Reusability
Benefits of using Web Components
Browser Support
Chrome Opera Firefox Safari IE/Edge
~c g ~ ~
~* As of December 2016
Web Components Polyfill
IE10 IE11+ Chrome* Firefox* Safari 7+*Chrome Android*
Mobile Safari*
Custom Elements ~HTML Imports ~Shadow DOM
Templates
•Angular •Polymer •React •Framework.JS
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
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
D E M O A P P
https://github.com/amahdy/offline-first-app
<Links> T H A N K Y O U ! - B U D D H A