1. 1. Building an E-commerce Progressive Web App with React and WooCommerce Alexandra Anghel CTO & Co-founder at Appticles, Co-founder Codette
2. 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. 3. / PWA Capabilities Secure (HTTPS) $ % Add to Homescreen Web Push Notications & Ofine mode ' App Shell JS
4. 4. / PWA vs. RWD ( A PWA has responsive capabilities A PWA has app-like features
5. 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. 6. / Why Progressive Web Apps? Delight Users Grow Engagement Increase Conversions $ + More on: https://developers.google.com/web/showcase
7. 7. / Showcase: Alibaba - 76% increase in total conversions across browsers - 4X higher interaction rate from Add to Homescreen
8. 8. / Showcase: OLX - Increased engagement by 250% - 80% drop in bounce rates - CTR rising 146%
9. 9. / Google Chrome Lighthouse ex. PWA Score *https://github.com/GoogleChrome/lighthouse
10. 10. / Google Chrome Lighthouse *https://github.com/GoogleChrome/lighthouse
11. 11. / JavaScript Frameworks / Libraries AngularJS & Ionic PWA & desktop apps React Intuitive, ES6 PWA boilerplate Vue.js Easy to learn
12. 12. / WooCommerce REST API - NPM: woocommerce-api (consumer key & secret) - Needs a proxy for restricting access to endpoints composer require automattic/woocommerce
13. 13. / 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
14. 14. / Sample React App
15. 15. / Getting started with React Small React Components , Folders by Feature - Linter with Airbnb JavaScript Style Guide . http://airbnb.io/javascript
16. 16. / UI/UX Libraries ex. npm install semantic-ui-react --save
17. 17. / E-Commerce App Example
18. 18. / Fetching a list of categories from the API
19. 19. / Custom Component for Categories List
20. 20. / Passing Props between Components API Categories CategoriesList CategoryCard Props: categories Props: id, image, name CategoryCard Props: id, image, name
21. 21. Redux.JS Predictable state container for JavaScript apps* * http://redux.js.org
22. 22. / Congure App Store
23. 23. / Actions for Requesting / Receiving Products
24. 24. / Redux Products Reducer A reducer modies a part of the app state
25. 25. / Products Component - Call API
26. 26. / Products List Component - Display Products
27. 27. / Add Product to the Shopping Cart onClick Redux Action {type: ADD_TO_CART, product} Redux Reducer {cartProducts}