Alexandra Anghel - Building an E-commerce Progressive Web App with React and WooCommerce

Progressive Web Apps are becoming the new standard for building amazing experiences on the web. E-commerce businesses all over the world, starting with Alibaba, have already proved that having a PWA will greatly improve conversions and interactions rates. WordPress's popularity makes it the perfect candidate for powering / sustaining this new wave of web development. The WordPress REST API has opened the door for separating content from UI/UX, allowing us to create engaging apps for the web. It’s up to the community to accept the challenge and steer both WordPress and the web in a “progressive” direction.

Transcript

1. Building an E-commerce Progressive Web App with React and WooCommerce Alexandra Anghel CTO & Co-founder at Appticles, Co-founder Codette
2. What is a Progressive Web App? “A new way to deliver amazing user experiences on the web”* *https://developers.google.com/web/progressive-web-apps/ Reliable Fast Engaging ! " ⋆
3. PWA Capabilities Secure (HTTPS) $ % Add to Homescreen Web Push Notifications & Offline mode ' App Shell JS
4. PWA vs. RWD ( A PWA has responsive capabilities  A PWA has app-like features
5. 86% 14% PWA vs. RWD % RWD has reached saturation Customers prefer app-like experiences on the web (87% * https://www.forrester.com/report/Brief+Embrace+Responsive+Web+Design/-/E-RES133861
6. Why Progressive Web Apps? Delight Users Grow Engagement Increase Conversions $ ♥ + More on: https://developers.google.com/web/showcase
7. Showcase: Alibaba - 76% increase in total conversions across browsers
 - 4X higher interaction rate from Add to Homescreen
8. Showcase: OLX - Increased engagement by 250%
 - 80% drop in bounce rates - CTR rising 146%
9. Google Chrome Lighthouse ex. PWA Score *https://github.com/GoogleChrome/lighthouse
10. Google Chrome Lighthouse *https://github.com/GoogleChrome/lighthouse
11. JavaScript Frameworks / Libraries AngularJS & Ionic PWA & desktop apps React Intuitive, ES6 PWA boilerplate Vue.js Easy to learn
12. WooCommerce REST API - NPM: woocommerce-api (consumer key & secret) - Needs a proxy for restricting access to endpoints composer require automattic/woocommerce
14. Create New React App in 4 Simple Steps 1) Install NodeJS & NPM globally npm install create-react-app -g create-react-app my-app 2) Install create-react-app boilerplate 3) Generate new React application cd my-app & npm start 4) Start application
15. Sample React App
16. Getting started with React Small React Components , Folders by Feature - Linter with Airbnb JavaScript Style Guide . http://airbnb.io/javascript
17. UI/UX Libraries ex. npm install semantic-ui-react --save
18. E-Commerce App Example
19. Fetching a list of categories from the API
20. Custom Component for Categories List
21. Passing Props between Components API Categories CategoriesList CategoryCard Props: categories Props: id, image, name CategoryCard Props: id, image, name …
22. Redux.JS “Predictable state container for JavaScript apps”* * http://redux.js.org
23. Configure App Store
24. Actions for Requesting / Receiving Products
25. Redux Products Reducer A reducer modifies a part of the app state
26. Products Component - Call API
27. Products List Component - Display Products
28. Add Product to the Shopping Cart onClick Redux Action {type: ADD_TO_CART, product} Redux Reducer {cartProducts}
29. Link App to WordPress
30. Service Workers % Add to Homescreen Web Push Notifications & Offline mode '
31. Offline Support - Caching Files
32. “Network falling back to cache” Strategy https://developers.google.com/web/fundamentals/ instant-and-offline/offline-cookbook
33. Offline Support - Caching Data npm install redux-persist --save
34. Web App Install Banners (Add to Homescreen)
35. Web Push Notifications https://wordpress.org/plugins/onesignal-free-web-push-notifications
36. Thank you! Alexandra Anghel alexandra@appticles.com /appticles/pwa-theme-woocommerce / 0 0 pwacommerce.com wordpress.org/plugins/pwacommerce