wordcamp bucharest 2017

Building an E-commerce Progressive Web App

with React and WooCommerce

Alexandra AnghelCTO & Co-founder at Appticles, Co-founder Codette

What is a Progressive Web App?

“A new way to deliver amazing user experienceson the web”*

*https://developers.google.com/web/progressive-web-apps/

Reliable Fast Engaging

! " ⋆

/ PWA Capabilities

Secure (HTTPS)

$

%

Add to Homescreen

Web PushNotifications

&

Offline mode

'

App Shell

JS

/ PWA vs. RWD

( A PWA has responsive capabilities

A PWA has app-like features

86%

14%

/ PWA vs. RWD

%RWD has reached saturation

Customers prefer app-likeexperiences on the web

(87%

* https://www.forrester.com/report/Brief+Embrace+Responsive+Web+Design/-/E-RES133861

/ Why Progressive Web Apps?

Delight Users

Grow Engagement

IncreaseConversions

$ ♥ +

More on: https://developers.google.com/web/showcase

/ Showcase: Alibaba

- 76% increase in total conversions across browsers

- 4X higher interaction rate from Add to Homescreen

/ Showcase: OLX

- Increased engagement by 250%

- 80% drop in bounce rates

- CTR rising 146%

/ Google Chrome Lighthouse

ex. PWA Score

*https://github.com/GoogleChrome/lighthouse

/ Google Chrome Lighthouse

*https://github.com/GoogleChrome/lighthouse

/ JavaScript Frameworks / Libraries

AngularJS & Ionic

PWA & desktop apps

ReactIntuitive, ES6

PWA boilerplate

Vue.jsEasy to learn

/ WooCommerce REST API

- NPM: woocommerce-api (consumer key & secret)- Needs a proxy for restricting access to endpoints

composer require automattic/woocommerce

/ 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

/ Sample React App

/ Getting started with React

Small ReactComponents

,

Folders byFeature

-

Linter with AirbnbJavaScript Style Guide

.

http://airbnb.io/javascript

/ UI/UX Libraries

ex. npm install semantic-ui-react --save

/ E-Commerce App Example

/ Fetching a list of categories from the API

/ Custom Component for Categories List

/ Passing Props between Components

API Categories

CategoriesList

CategoryCard

Props: categories

Props: id, image, name

CategoryCard

Props: id, image, name

…

Redux.JS

“Predictable state container for JavaScript apps”*

* http://redux.js.org

/ Configure App Store

/ Actions for Requesting / Receiving Products

/ Redux Products Reducer

A reducer modifies a part of the app state

/ Products Component - Call API

/ Products List Component - Display Products

/ Add Product to the Shopping Cart

onClickRedux Action

{type: ADD_TO_CART,product}

Redux Reducer {cartProducts}

/ Link App to WordPress

/ Offline Support

https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook

npm install redux-persist --save

/ Web Push Notifications

https://wordpress.org/plugins/onesignal-free-web-push-notifications

/appticles/pwa-theme-woocommerce / 0 wpmobilepack.com

Thank you!

Alexandra Anghelalexandra@appticles.com