Building an E-commerce Progressive Web App with React and WooCommerce What is a PWA?, PWA E-commerce Showcases (ex. Alibaba), Differences between a PWA and a responsive website, Technologies used to build a PWA, Structuring a PWA with React, Retrieving data from the API and displaying it, UI/UX components, Integrate a PWA in WordPress, Adding advanced features – Web Push Notifications & Offline Mode

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

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. / Offline Support
https://developers.google.com/web/fundamentals/
instant-and-offline/offline-cookbook
npm install redux-persist --save

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

32. /appticles/pwa-theme-woocommerce/
0 wpmobilepack.com
Thank you!
Alexandra Anghel
alexandra@appticles.com