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
   

   View Slide

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
   ! " ⋆
   

   View Slide

3. PWA Capabilities
   Secure (HTTPS)
   $
   %
   Add to
   Homescreen
   Web Push
   Notifications
   &
   Offline mode
   '
   App Shell
   JS
   

   View Slide

4. PWA vs. RWD
   ( A PWA has responsive capabilities
    A PWA has app-like features
   

   View Slide

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
   

   View Slide

6. Why Progressive Web Apps?
   Delight
   Users
   Grow
   Engagement
   Increase
   Conversions
   $
   ♥ +
   More on: https://developers.google.com/web/showcase
   

   View Slide

7. Showcase: Alibaba
   - 76% increase in total
   conversions across browsers

   - 4X higher interaction rate
   from Add to Homescreen
   

   View Slide

8. Showcase: OLX
   - Increased engagement by
   250%

   - 80% drop in bounce rates
   - CTR rising 146%
   

   View Slide

9. Google Chrome Lighthouse
   ex. PWA Score
   *https://github.com/GoogleChrome/lighthouse
   

   View Slide

10. Google Chrome Lighthouse
    *https://github.com/GoogleChrome/lighthouse
    

    View Slide

11. JavaScript Frameworks / Libraries
    AngularJS & Ionic
    PWA & desktop apps
    React
    Intuitive, ES6
    PWA boilerplate
    Vue.js
    Easy to learn
    

    View Slide

12. WooCommerce REST API
    - NPM: woocommerce-api (consumer key & secret)
    - Needs a proxy for restricting access to endpoints
    composer require automattic/woocommerce
    

    View Slide

13. View Slide

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
    

    View Slide

15. Sample React App
    

    View Slide

16. Getting started with React
    Small React
    Components
    ,
    Folders by
    Feature
    -
    Linter with Airbnb
    JavaScript Style Guide
    .
    http://airbnb.io/javascript
    

    View Slide

17. UI/UX Libraries
    ex. npm install semantic-ui-react --save
    

    View Slide

18. E-Commerce App Example
    

    View Slide

19. Fetching a list of categories from the API
    

    View Slide

20. Custom Component for Categories List
    

    View Slide

21. Passing Props between Components
    API Categories
    CategoriesList
    CategoryCard
    Props: categories
    Props: id, image, name
    CategoryCard
    Props: id, image, name
    …
    

    View Slide

22. Redux.JS
    “Predictable state container for JavaScript apps”*
    * http://redux.js.org
    

    View Slide

23. Configure App Store
    

    View Slide

24. Actions for Requesting / Receiving Products
    

    View Slide

25. Redux Products Reducer
    A reducer modifies a part of the app state
    

    View Slide

26. Products Component - Call API
    

    View Slide

27. Products List Component - Display Products
    

    View Slide

28. Add Product to the Shopping Cart
    onClick
    Redux Action
    {type: ADD_TO_CART,
    product}
    Redux Reducer
    {cartProducts}
    

    View Slide

29. Link App to WordPress
    

    View Slide

30. Service Workers
    %
    Add to
    Homescreen
    Web Push
    Notifications
    &
    Offline mode
    '
    

    View Slide

31. Offline Support - Caching Files
    

    View Slide

32. “Network falling back to cache” Strategy
    https://developers.google.com/web/fundamentals/
    instant-and-offline/offline-cookbook
    

    View Slide

33. Offline Support - Caching Data
    npm install redux-persist --save
    

    View Slide

34. Web App Install Banners (Add to Homescreen)
    

    View Slide

35. Web Push Notifications
    https://wordpress.org/plugins/onesignal-free-web-push-notifications
    

    View Slide

36. Thank you!
    Alexandra Anghel
    alexandra@appticles.com
    /appticles/pwa-theme-woocommerce
    /
    0
    0
    pwacommerce.com
    wordpress.org/plugins/pwacommerce
    

    View Slide