Building A React App With
Web And Mobile In Mind
Oct 15, 2020
SHODIPO AYOMIDE | NIMBELLA 3-HOUR REACT WORKSHOP, SANTA CLARA, CA
Slide 2
Slide 2 text
Shodipo
Ayomide
Senior Developer Advocate & Developer
Program Manager
- GitHub Star
- Cloudinary Media Developer Expert
- Community Evangelist
Twitter & GitHub @developerayo
Slide 3
Slide 3 text
A progressive web
application (PWA) is mobile
web page that acts and
feels like regular native app.
@DEVELOPERAYO
Progressive Web Apps (PWA)
Slide 4
Slide 4 text
5 Billion Devices
Connected to web
globally.
@DEVELOPERAYO
Slide 5
Slide 5 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
By far smoother
experience in both the
web and mobile
- Reliable
- Smooth
- Fast
- Easy to Access
Slide 6
Slide 6 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
Progressive Web Apps are
added to your home
screen in just a single tap.
Slide 7
Slide 7 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
Act's just like a regular app
on your phone but super
lightweight.
Slide 8
Slide 8 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
Example: Lyft App
Android App via PlayStore: 17MB
IOS App via the AppStore: 75MB
Progressive Web App: <1MB
Slide 9
Slide 9 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
- Super fast loading on slow networks,
- Works perfectly on all smartphones
- Uses less Data than regular apps
Slide 10
Slide 10 text
Progressive Web App supports a
Push Notification service via a Service
Worker which works on both Android
& IOS
Progressive Web Apps (PWA)
@DEVELOPERAYO
Slide 11
Slide 11 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
Example: Twitter
Android App via PlayStore: 30MB
IOS App via the AppStore: 112MB
Progressive Web App: 0.4MB
Slide 12
Slide 12 text
Progressive Web Apps (PWA)
@DEVELOPERAYO
Example: Twitter
Increased Twitter session time 65%
2M Daily Visit from the PWA App
80% Increase in Tweets
Saves 95% storage space of it's users