Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

# 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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Technology

Slide 5

Slide 5 text

Technology

Slide 6

Slide 6 text

Technology Content Producer

Slide 7

Slide 7 text

Technology Content Producer

Slide 8

Slide 8 text

Technology USER

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Mobile-First

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Bringing Component-based Software Engineering to the Web

Slide 16

Slide 16 text

Templates     ...   

Web Components

Slide 17

Slide 17 text

HTML Imports  

Slide 18

Slide 18 text

Custom Elements

Slide 19

Slide 19 text

S H A D O W D O M

Slide 20

Slide 20 text

Before Shadow DOM

1

1 2 3 4

Slide 21

Slide 21 text

With Shadow DOM 1 2 3 4 1 2 3 4

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

• Encapsulation • Reusability Benefits of using Web Components

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

•Angular •Polymer •React •Framework.JS

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

D E M O A P P https://github.com/amahdy/ofﬂine-ﬁrst-app T H A N K YO U ! - B U D D H A