Slide 1

Slide 1 text

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

Slide 13

Slide 13 text

Progressive Web Apps (PWA) @DEVELOPERAYO Key Benefits: - Cross Browser - Native-like experience - Offline support - Responsiveness - Push Notifications

Slide 14

Slide 14 text

Progressive Web Apps (PWA) @DEVELOPERAYO Progressive Web Apps can be added to your home scree via 95% of browsers present today in the world.

Slide 15

Slide 15 text

Progressive Web Apps (PWA) @DEVELOPERAYO By 2020, Progressive Web Apps will replace 50% of all consumer-facing native apps - Gartner Research

Slide 16

Slide 16 text

Progressive Web Apps (PWA) @DEVELOPERAYO AND YES IT HAS BEEN ACHIEVED!

Slide 17

Slide 17 text

Progressive Web Apps (PWA) @DEVELOPERAYO Now, let's get into some code!

Slide 18

Slide 18 text

Installation In this section we will scaffold our React app from create- react-app

Slide 19

Slide 19 text

Installation

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

Resources - https://github.com/Developerayo/nimbella-react-workshop - https://web.dev/progressive-web-apps - https://www.smashingmagazine.com/2016/08/a-beginners-guide- to-progressive-web-apps

Slide 22

Slide 22 text

Questions? Follow me on Twitter & GitHub @developerayo Thank You! SHODIPO AYOMIDE | NIMBELLA 3-HOUR REACT WORKSHOP, SANTA CLARA, CA