Embed Size (px)
Citation preview
O F F L I N E - F I R S T D E S I G N &
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
@ A M A H D Y 7
Massive Tech. Specs
• 88 Gigabyte of RAM
• Multi-Hexa Processor
• 2 Tera Pixel Camera
• Convertible into white Goblin
€ 1 0 0 0
USER
T E C H S P E C S
V S . U S A B I L I T Y
D E S I G N N O T E # 0 0
A M A Z O N
AMAZON
AMAZON
AMAZON
F A M I L I A R T O O L S
V S . TA R G E T A U D I E N C E
D E S I G N N O T E # 0 1
Twitter• 24 MB
• ? Permission
• ? Autofill
• ? Remember
• ? Updates
• ? Cost
Twitter• 24 MB
• ? Permission
• ? Autofill
• ? Remember
• ? Updates
• ? Cost
• 0.24 MB
• Permission
• Autofill
• Remembers
• Latest
• The Platform
N AT I V E ?
O R C R O S S / M U L T I P L AT F O R M ?
USER
W H Y M O B I L E P H O N E D O E S N O T C O M E W I T H
A L L A P P S P R E - I N S TA L L E D ?
W H Y M O B I L E P H O N E D O E S N O T C O M E W I T H
A L L A P P S P R E - I N S TA L L E D ?
T H AT ’ S C A L L E D I N T E R N E T
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
F A N C Y T E C H
V S . U S E R E X P E R I E N C E
D E S I G N N O T E # 1 0
Progressive Web Apps
(PWA)
Progressive Web Apps
F A S T
S E R V I C E W O R K E R
O F F L I N E - F I R S T D E S I G N
E N G A G I N G ( W E B N O T I F I C AT I O N S )
Progressive Web Apps
F A S T
S E R V I C E W O R K E R
O F F L I N E - F I R S T D E S I G N
E N G A G I N G ( W E B N O T I F I C AT I O N S )
OfflineFirst
OfflineFirst WebComponents
OfflineFirst WebComponents Java
Jfokus
WebComponents
• Encapsulation
• Reusability
Benefits of using Web Components
Vaadin Framework
After WC• Works only with Vaadin Framework
• Limited to own add-ons
• Challenging to modify/ test/ debug
Before WC• Standard: works anywhere
• Can work with any Standard WC
• Separation of concern
OfflineFirst WebComponents Java
Jfokus
OfflineFirst Design
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
Solution
C A C 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
Solution
Demo
Demo
https://github.com/amahdy/offline-first-app
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
OfflineFirst WebComponents Java
Jfokus
Solution
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
Vaadin Framework
After WCBefore WChttps://dzone.com/articles/using-web-components-in-plain-java
Practical Test
1. Mobile-first design
2. Touch-first design
3. Coffee-first design
D E M O A P P
https://github.com/amahdy/offline-first-app
J A V A W I T H P W A
H T T P : / / J . M P / J A V A P W A
T H A N K Y O U ! - B U D D H A
@ A M A H D Y 7
