wordcamp bucharest 2017

32
Building an E-commerce Progressive Web App with React and WooCommerce Alexandra Anghel CTO & Co-founder at Appticles, Co-founder Codette

Upload: alexandra-anghel

Post on 22-Jan-2018

140 views

Category:

Internet


1 download

TRANSCRIPT

Page 1: WordCamp Bucharest 2017

Building an E-commerce Progressive Web App

with React and WooCommerce

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

Page 2: WordCamp Bucharest 2017

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

! " ⋆

Page 3: WordCamp Bucharest 2017

/ PWA Capabilities

Secure (HTTPS)

$

%

Add to Homescreen

Web PushNotifications

&

Offline mode

'

App Shell

JS

Page 4: WordCamp Bucharest 2017

/ PWA vs. RWD

( A PWA has responsive capabilities

A PWA has app-like features

Page 5: WordCamp Bucharest 2017

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

Page 6: WordCamp Bucharest 2017

/ Why Progressive Web Apps?

Delight Users

Grow Engagement

IncreaseConversions

$ ♥ +

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

Page 7: WordCamp Bucharest 2017

/ Showcase: Alibaba

- 76% increase in total conversions across browsers

- 4X higher interaction rate from Add to Homescreen

Page 8: WordCamp Bucharest 2017

/ Showcase: OLX

- Increased engagement by 250%

- 80% drop in bounce rates

- CTR rising 146%

Page 9: WordCamp Bucharest 2017

/ Google Chrome Lighthouse

ex. PWA Score

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

Page 10: WordCamp Bucharest 2017

/ Google Chrome Lighthouse

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

Page 11: WordCamp Bucharest 2017

/ JavaScript Frameworks / Libraries

AngularJS & Ionic

PWA & desktop apps

ReactIntuitive, ES6

PWA boilerplate

Vue.jsEasy to learn

Page 12: WordCamp Bucharest 2017

/ WooCommerce REST API

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

composer require automattic/woocommerce

Page 13: WordCamp Bucharest 2017
Page 14: WordCamp Bucharest 2017

/ 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

Page 15: WordCamp Bucharest 2017

/ Sample React App

Page 16: WordCamp Bucharest 2017

/ Getting started with React

Small ReactComponents

,

Folders byFeature

-

Linter with AirbnbJavaScript Style Guide

.

http://airbnb.io/javascript

Page 17: WordCamp Bucharest 2017

/ UI/UX Libraries

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

Page 18: WordCamp Bucharest 2017

/ E-Commerce App Example

Page 19: WordCamp Bucharest 2017

/ Fetching a list of categories from the API

Page 20: WordCamp Bucharest 2017

/ Custom Component for Categories List

Page 21: WordCamp Bucharest 2017

/ Passing Props between Components

API Categories

CategoriesList

CategoryCard

Props: categories

Props: id, image, name

CategoryCard

Props: id, image, name

Page 22: WordCamp Bucharest 2017

Redux.JS

“Predictable state container for JavaScript apps”*

* http://redux.js.org

Page 23: WordCamp Bucharest 2017

/ Configure App Store

Page 24: WordCamp Bucharest 2017

/ Actions for Requesting / Receiving Products

Page 25: WordCamp Bucharest 2017

/ Redux Products Reducer

A reducer modifies a part of the app state

Page 26: WordCamp Bucharest 2017

/ Products Component - Call API

Page 27: WordCamp Bucharest 2017

/ Products List Component - Display Products

Page 28: WordCamp Bucharest 2017

/ Add Product to the Shopping Cart

onClickRedux Action

{type: ADD_TO_CART,product}

Redux Reducer {cartProducts}

Page 29: WordCamp Bucharest 2017

/ Link App to WordPress

Page 30: WordCamp Bucharest 2017

/ Offline Support

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

npm install redux-persist --save

Page 31: WordCamp Bucharest 2017

/ Web Push Notifications

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

Page 32: WordCamp Bucharest 2017

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

Thank you!

Alexandra [email protected]