Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

A717e9d055b2284e573b2412e32f5397?s=128

WordPress Greek Community

December 09, 2017
Tweet

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
  13. None
  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