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.

WordPress Greek Community

December 09, 2017
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

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
    [email protected]
    /appticles/pwa-theme-woocommerce
    /
    0
    0
    pwacommerce.com
    wordpress.org/plugins/pwacommerce

    View Slide