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