wordcamp bucharest 2017
TRANSCRIPT
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