Click here to load reader

WordCamp Bucharest 2017

  • View
    136

  • Download
    1

Embed Size (px)

Text of WordCamp Bucharest 2017

  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}

Search related