## Adding React to the current Knockout frontend # 'cause it needs to be better #### by Jisse Reitsma (Yireo)

# Jisse Reitsma - <!-- .element: class="fragment" -->Founder of Yireo - <!-- .element: class="fragment" -->Trainer of Magento 2 developers - <!-- .element: class="fragment" -->Creator of MageTestFest & Reacticon - <!-- .element: class="fragment" -->Organizer of usergroups, hackathons - <!-- .element: class="fragment" -->Member of ExtDN (Magento Ext Dev Network) - <!-- .element: class="fragment" -->Magento Master 2017 & 2018 Mover - <!-- .element: class="fragment" -->For some reason, called **"Knockout" Jisse**

## Welcome to # Knockout Gate

## Here is a slide on # PWA

## It's a hype, so here's another one # PWA

## Back to # Knockout Jisse

# Doppelganger ### an apparition or double of a living person.

# Who is ## the evil Dale Cooper? <table> <tr> <td><img src="/images/mm18pl/dale-cooper-good.jpg" ></td> <td><img src="/images/mm18pl/dale-cooper-bad.jpg" ></td> </tr> </table>

# Who is ## the evil Ash from Evil Dead? <table> <tr> <td><img src="/images/mm18pl/ash-good.jpg" ></td> <td><img src="/images/mm18pl/ash-bad.jpg" ></td> </tr> </table>

# Who is ## the evil politician? <table> <tr> <td><img src="/images/magetitans-uk/trump.jpg" ></td> <td><img src="/images/magetitans-uk/boris.jpg" ></td> </tr> </table>

# Which one is ## the evil UiComponent? <table> <tr> <td><img src="/images/mm18pl/component-good.png" ></td> <td><img src="/images/mm18pl/component-bad.png" ></td> </tr> </table>

## Adding React to the current Knockout frontend # Replacing the native minicart with a React component

# Summary of Knockout - <!-- .element: class="fragment" -->Initial release in 2010 - <!-- .element: class="fragment" -->Back then, a better alternative to Angular - <!-- .element: class="fragment" -->Now superseeded by other solutions - React - Vue - Polymer - Web Components

# Summary of UiComponents - <!-- .element: class="fragment" -->Combination of technologies - XML Layout + Blocks + PHTML templating - RequireJS + mixins - KnockoutJS + HTML templates - Custom Magento logic - <!-- .element: class="fragment" -->Overly complex

# Minicart UiComponent - <!-- .element: class="fragment" -->XML layout, Block class and PHTML template generate JSON blob - <!-- .element: class="fragment" -->`x-magento-init` uses JSON blob to initialize UiComponent `minicart.js` - <!-- .element: class="fragment" -->UiComponent `minicart.js` creates KO ViewModel definition - <!-- .element: class="fragment" -->KO ViewModel is instantiated and bound to `scope: minicart_content` - <!-- .element: class="fragment" -->`customerData` cart details are received from AJAX or localStorage - <!-- .element: class="fragment" -->UiComponent calls upon child ViewModels + templates

# What if we could migrate?

# ... to React - <!-- .element: class="fragment" -->Modern JS framework - <!-- .element: class="fragment" -->Simpler to work with, once you get the hang - <!-- .element: class="fragment" -->JS, HTML, CSS - all combined in 1 single component - <!-- .element: class="fragment" -->Used by upcoming PWA techs like Magento PWA Studio

<div style="text-align:center"> <img src="/images/mm18pl/github.png" style="height:30%; width:30%;"/> <h1 style="text-align:center">GitHub repo</h1> <h3 style="text-align:center">https://github.com/yireo-training/Yireo_ReactMinicart</h3> </div>

# Module structure (1 of 2) ``` registration.php etc/module.xml view/frontend/layout/default.xml view/frontend/templates/minicart.phtml view/frontend/requirejs-config.js view/frontend/web/css/source/_module.less ```

# Module structure (2 of 2) ``` view/frontend/web/js/container.js view/frontend/web/js/react.js view/frontend/web/js/react-dom.js view/frontend/package.json view/frontend/gulpfile.js view/frontend/source/Minicart.js view/frontend/web/js/compiled/Minicart.js ```

# Migration method for Minicart - <!-- .element: class="fragment" -->Copy real-life HTML from Element Inspector - <!-- .element: class="fragment" -->Remove all KO parts - Remove all KO comments (containerless bindings) - Remove all element bindings (`data-bind=`)

# Minicart HTML Old HTML: ```html <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'"><!-- ko template: getTemplate() --><div class="block-title"><strong><span class="text" data-bind="i18n: 'My Cart'">My Cart</span><span class="qty" data-bind="css: { empty: !!getCartParam('summary_count') == false }, attr: { title: $t('Items in Cart') }, text: getCartParam('summary_count')" title="Items in Cart">1</span></strong></div> ``` New HTML: ```html <div id="minicart-content-wrapper"><div class="block-title"><strong><span class="text" >My Cart</span><span class="qty" title="Items in Cart">1</span></strong></div> ```

# Migration method for Minicart - Copy real-life HTML from Element Inspector - Remove all KO parts - Remove all KO comments (containerless bindings) - Remove all element bindings (`data-bind=`) - <!-- .element: class="fragment" -->Start copying HTML to React component (and subcomponents) - How cool: PhpStorm converts HTML to JSX - <!-- .element: class="fragment" -->Make logic dynamic - `this.props.cart` is populated from localStorage - Create dropdown with `<details>` HTML element

# requirejs-config.js ```js var config = { map: { '*': { react: 'Yireo_ReactMinicart/js/react', reactDom: 'Yireo_ReactMinicart/js/react-dom', reactMinicart: 'Yireo_ReactMinicart/js/container', reactMinicartComponent: 'Yireo_ReactMinicart/js/compiled/Minicart', reactCustomerData: 'Yireo_ReactMinicart/js/customerData' } }, shim: { reactMinicartComponent: ['react', 'reactDom'] } }; ```

# PHTML template ```php <div class="react-minicart-wrapper" data-mage-init='{"reactMinicart":{}}'> <a class="action showcart" href="/checkout/cart/"> <span class="text"><?= __('My Cart') ?></span> </a> </div> ```

# container.js ```js define([ 'react', 'reactDom', 'reactMinicartComponent', 'Magento_Customer/js/customer-data' ], function(React, ReactDOM, MinicartComponent, customerData) { 'use strict'; return function(config, element) { var reactElement = React.createElement(MinicartComponent.default); ReactDOM.render(reactElement, element); customerData.get('cart').subscribe(function() { var reactElement = React.createElement(MinicartComponent.default); ReactDOM.render(reactElement, element); }); }; }); ```

# React component source ```js import CustomerData from './CustomerData'; import React from 'react'; import Cart from "./Minicart/Cart"; import EmptyCart from "./Minicart/EmptyCart"; class Minicart extends React.Component { render() { var cart = CustomerData.getCartFromLocalStorage(); return ( <div> ... </div> ); } } export default Minicart; ```

# React components ```js Minicart Minicart/Cart Minicart/Cart/Actions Minicart/Cart/Product Minicart/Cart/ProductDetails Minicart/Cart/Subtotal Minicart/EmptyCart ```

# Source compilation gulpfile.js: ```js gulp.task("build", function () { return gulp .src(jsFiles.source) .pipe(babel()) .pipe(gulp.dest("web/js/compiled/")); }); ``` .babelrc: ```json { "presets": ["react", "es2015"], "plugins": ["transform-es2015-modules-amd"] } ```

# Kat in het bakkie

# Minicart React component - Gulp to compile ES6+React code into plain ES5 files - KO listener to re-render React component when customerData.get('cart') changes - Dropdown based on React click-handler and state, not complex UiComponent - Simple CustomerData object to copy data from localStorage

# Current limitations - No support for text translations (yet) - No way to send state back to KO ViewModels (?)

# Lessons learned - <!-- .element: class="fragment" -->Knockout sucks, React sucks less - <!-- .element: class="fragment" -->You can gradually add React components to existing frontend - <!-- .element: class="fragment" -->Once Magento 2.3 is out, start playing with GraphQL too

# Slides ## slides.yireo.com/yireo/react_to_ko