Building A React App With Web And Mobile In Mind

Date: October 15th, 2020 8:00 AM - 11:15 AM PDT // 11:00 AM - 2:15 PM EST

The user experience for your mobile app is just as important as the user experience
on your web app. This session will go over the best practices for building a React app that is both web and mobile-friendly.

Workshop for Nimbella 3-hour of React, Santa Clara, CA

Transcript

1. Building A React App With Web And Mobile In Mind Oct 15, 2020 SHODIPO AYOMIDE | NIMBELLA 3-HOUR REACT WORKSHOP, SANTA CLARA, CA
2. Shodipo Ayomide Senior Developer Advocate & Developer Program Manager - GitHub Star - Cloudinary Media Developer Expert - Community Evangelist Twitter & GitHub @developerayo
3. A progressive web application (PWA) is mobile web page that acts and feels like regular native app. @DEVELOPERAYO Progressive Web Apps (PWA)
4. 5 Billion Devices Connected to web globally. @DEVELOPERAYO
5. Progressive Web Apps (PWA) @DEVELOPERAYO By far smoother experience in both the web and mobile - Reliable - Smooth - Fast - Easy to Access
6. Progressive Web Apps (PWA) @DEVELOPERAYO Progressive Web Apps are added to your home screen in just a single tap.
7. Progressive Web Apps (PWA) @DEVELOPERAYO Act's just like a regular app on your phone but super lightweight.
8. Progressive Web Apps (PWA) @DEVELOPERAYO Example: Lyft App Android App via PlayStore: 17MB IOS App via the AppStore: 75MB Progressive Web App: <1MB
9. Progressive Web Apps (PWA) @DEVELOPERAYO - Super fast loading on slow networks, - Works perfectly on all smartphones - Uses less Data than regular apps
10. Progressive Web App supports a Push Notification service via a Service Worker which works on both Android & IOS Progressive Web Apps (PWA) @DEVELOPERAYO
11. Progressive Web Apps (PWA) @DEVELOPERAYO Example: Twitter Android App via PlayStore: 30MB IOS App via the AppStore: 112MB Progressive Web App: 0.4MB
12. 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
13. Progressive Web Apps (PWA) @DEVELOPERAYO Key Benefits: - Cross Browser - Native-like experience - Offline support - Responsiveness - Push Notifications
14. Progressive Web Apps (PWA) @DEVELOPERAYO Progressive Web Apps can be added to your home scree via 95% of browsers present today in the world.
15. Progressive Web Apps (PWA) @DEVELOPERAYO By 2020, Progressive Web Apps will replace 50% of all consumer-facing native apps - Gartner Research
16. Progressive Web Apps (PWA) @DEVELOPERAYO AND YES IT HAS BEEN ACHIEVED!
17. Progressive Web Apps (PWA) @DEVELOPERAYO Now, let's get into some code!
18. Installation In this section we will scaffold our React app from create- react-app
19. Installation
20. DEMO
21. 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
22. Questions? Follow me on Twitter & GitHub @developerayo Thank You! SHODIPO AYOMIDE | NIMBELLA 3-HOUR REACT WORKSHOP, SANTA CLARA, CA