Transforming a PHP Team into PWA Superheroes

class: center, middle, cover

# Transforming a **PHP** Team into
# .big[**PWA Superheroes**]

## (Stories & Fairytales)
---
class: middle
background-image: url(images/fabian-schmengler-speaker.jpg)

.layer-opaque[
#**Fabian Schmengler**

Software Architect

.icon[![integer_net GmbH](images/Logo.png)]

.right[**.twitter[@fschmengler]**]

E-Commerce made in Aachen

]

---
layout: true
.footer[.left[Fabian Schmengler /> **Transforming a PHP Team into PWA Superheroes**] .right[@fschmengler]]
---
background-image:url(images/question.jpg)

.layer[
#.big[PWA?]
]

---
background-image:url(images/question.jpg)

.layer-opaque[
#.big[Progressive Web App]

> Progressive Web Apps use modern web capabilities to deliver an **app-like user experience**. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.

.right[*Addy Osmani, Google*]
-
]

???

- Term coined by Google Engineers, [2015](https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/)
- Websites with the user experience of native mobile apps

---
class: center

.width80[![](images/pwa-general-0-@1x.jpg)]

???

- First, you visit the website like any other in a browser
- On mobile devices you *may* choose to add it as an app to the home screen
- which makes it launchable as a separate activity in the app switcher
- no browser chrome, that means URL bar, navigation, settings

---
class: center

.width66[![](images/pwa-general-3-@1x.jpg)]

???

- app should be able to start offline
- logic in client, using service workers and local cache

TODO: Slide für PWA=UX ?

- Main keywords: Reliable, Fast, Engaging
- The Checklist

---
class: center
background-image: url(images/bg-m1.jpg)

.layer[

# .big[integer_net 2015: Magento 1]

.big.icon[
![Magento](images/magento.png)
![PHP](images/new-php-logo.png)
![ZF1](images/zf-logo-mark.png)
![prototype.js](images/prototypejs.png)
![jQUery](images/jQuery-Logo.png)
![Sass](images/sass-logo.svg)
]

]

???

- 3 Backend Developers: PHP 
- 2 Frontend Developers: PHP / HTML Templating, XML Layout, CSS
- JavaScript glitter on top
- Magento 1.x Technology Stack:
  - PHP 5.3, Zend Framework 1, prototype.js
- stuck in ~2008 (feels like centuries ago. Castle)

---
class: center
background-image: url(images/bg-m2.jpg)

.layer[

# .big[integer_net 2017: Magento 2]

.team[.person.avs[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]

.person.vf[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]

.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]


.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
]
.big.icon[
![Magento](images/magento.png)
![PHP](images/new-php-logo.png)
![ZF1/ZF2](images/zf-logo-mark.png)
![Symfony](images/symfony_black_03.png)
![require.js](images/requirejs-logo.png)
![Knockout](images/knockout-logo.svg)
![jQUery](images/jQuery-Logo.png)

![less](images/less_logo.png)
]

]

???

- Developer team had grown a bit, (+ .blue[Freelancers])
- We're in transition from M1 to M2
- Magento 2.x Technology Stack
  - PHP 7.0, ZF 1, ZF 2, Symfony, require.js, Knockout, jQuery, jQuery UI, less
  - own framework on top. see towers? looks nice but can get lost
- Overall: a little more modern but far from up to date.

---
background-image: url(images/bg-pwa.jpg)

.layer[

# .big[Summer 2017]

.center.width50[![](images/2017-deity-nyc.jpg)]

]
???

But that summer, there was hope again!

PL/NL agency Hatimeria presents **Deity** at MM 🌍, internal solution, with the prospect to become OS at some point.

Deity soon own company, backed by investors; Met CEO Jamie, was convinced by their vision

modular node.js application with PWA frontend and service oriented approach. Magento as one possible backend

---
background-image: url(images/bg-pwa.jpg)

.layer[

# .big[The Rise of The PWAs]

.center.width66[![](images/2017-vue.png)]

]
???

While we were waiting for Deity open source, other solutions popped up.

- In November 17, Divante starts **Vue Storefront** asfresh open source project
- vue.js frontend, nosql data store, Magento API

---

background-image: url(images/bg-pwa.jpg)

.layer[

# .big[The Rise of The PWAs]

.center.width66[![](images/pwa-studio.png)]

]

???

Magento announces their own **PWA Studio**

- set of tools to build PWA frontends for Magento
- vision to become industry standard
- yet unclear how it will work

Good for ecosystem: M pushes API coverage and GraphQL support on the backend

TODO: Front Commerce slide?
---
background-image: url(images/road.jpg)

.layer[
.right[
# .huge.bigicon[![Deity Premium Partner](images/deity-badge.png)]
]

# .big[February 2018]

## .big[Our Journey Begins]

]
???

- Deity still not OS, but looked for partners
- early access, opportunity to give feedback and contribute => help shape the path to open source
- Their dutch headquarters are less than two hours from ours and we had multiple partner meetings and workshops, close contact
- Also there was valuable exchange with other partner agencies, some of them started implementations immediately, others experimented and compared the different solutions

---
class: center
background-image:url(images/construction.jpg)

.layer[

#.big[Foundation & New Tools]

## .icon[
![ES6](images/es6.png) ![GraphQL React.js](images/graphql-reactjs.png) ![node.js](images/nodejs.png) ![webpack](images/webpack.png)
]

]
???

We did not jump right into it. But we wanted this and now we needed some foundation.

Whole new world of JavaScript:
- ES6, node.js, React.js, GraphQL, Webpack, ...

---
background-image:url(images/deity-partner-day.jpg)

.layer[

#.big[Deity Partner Days]

.team[
.person.avs.level1.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level1.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
]

- First contact with the code
- Architecture discussions
]

???

- First contact was during the Deity partner days where we attended with several developers
- Understanding Deity architecture, trying out the frontend dev workflow

---
background-image: url(images/2018-enterjs.jpg)
class: center

![](images/blogs.png)

???

Blogged and blogged and blogged and talked and told the world: This is what we believe in.

First projects were in aquisition and concept phase, but it did not get serious yet.

---
background-image: url(images/screenshot-ballon2.png)

.layer-opaque[

.aside.width100[![](images/react-book.jpg)]

#.big[Hands on!]

- Internal tools
- Product designer
]

???

Meanwhile at home: backend colleague started to dig into React.js

- Self-taught by book
- wrote small single page apps for internal use
- rewrote a product designer for a balloon shop in React
- good learning experience

---
background-image:url(images/time.jpg)

.layer-opaque[

#.big[Summer 2018: New project!]
- Sold as PWA
- New Deity not yet ready for open source
- Using previous version unattractive
- Limited time until Go Live
]

???

Aquired new big project where we offered a PWA frontend.

BUT: Deity open source release delayed due to *extensive rewrite*

could have used previous version: *tech debt* from beginning

*Tight deadline* until MVP should go live.

---
background-image:url(images/new-frontend-on-top.jpg)

.layer-opaque[

#.big[Compromise]
- Start with legacy Magento 2 frontend
- Replace parts with React.js apps, *decouple*
- Migration of frontend in mind for later phase
]

???

after some back and forth, a compromise was found.
---
background-image:url(images/knowledge.jpg)

.layer[

#.big[Preparation]
##.big[React.js Workshop]

.person.avs.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level1.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level2.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>
]
]

???

To kick off frontend development:

internal workshop to share the previously gathered knowledge

---
background-image:url(images/screenshot-article.png)

.layer-opaque[

#.big[React Product Configurator]

.person.avs.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level2.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>
]

- Embedded in Magento Layout
- JSON data from backend
- State management
- Component hierarchy
]
???

default configurable product page of M2 not a good fit. Custom product type

lots of moving parts:
- color, size, inch/cm
- size table, manufacturer size, standard country size, text content, images

"add to cart" goes back to standard flow

*learned:* state management; how to work with components

---
background-image:url(images/screenshot-checkout.png)

.layer-opaque[

#.big[API-driven React Checkout]

.person.avs.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level3[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.super[.person.ef.external.level5.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]

- Customized checkout flow
- Using native Magento REST API
- Routing
]

???

The next part was the checkout. Standard M2 checkout flow hard to customize
- evaluated alternatives: best to roll our own

Backend provided everything needed. Figuring it out took time.

*Learned:* Routing, because here we have multiple steps with changed URLs

New dev, tutorial, expert. Later blue superhero hired to assist.
---
background-image:url(images/screenshot-expert.png)

#.big[Let's Hire An Expert to Help]

.center[!["I need to rewrite it from scratch"](images/dilbert.gif)]

???

but what happens if you hire expert to help with existing code base?

[pause]

they want to rewrite everything!

meanwhile, feature development

rewritten branch ended up never to be merged

but helpful exchange in code reviews
---
background-image:url(images/screenshot-orderhistory.png)

.layer-opaque[

#.big[React order history]

.team[
.person.avs.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level3[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level3[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.super[.person.ef.external.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.mp.external.level5.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
]

- Fetch data from external API

]

???
still, for another component, a different expert was hired.

this one is the order history. it comes from an external API b/c order mgmt happens outside of Magento

---
background-image:url(images/cat.jpg)

.layer[
#.big[Another Expert]

- Greenfield development against API
- Small self-contained app
- Code reviews to understand and oversee
- Frictionless takeover
]

???

What did we do differntly this time?

first, the expert was a cat! - just kidding, but I heard that talks with cat pictures are rated higher

task was given from scratch to him

---

#.big[XP gathered]

.team[
.person.avs.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level1[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
]

![Level Up](images/level-up-ds.jpg)

???

In the end, this project made a good part of the team level up regarding frontend technology

while still working on familiar ground

---
background-image:url(images/reacticon_v2.png)

.layer[

#.big[2018: JS Conferences]

.team[
.person.avs.level2.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.lb.level4.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.sw.level2.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.fs.level4.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.bd.level1.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level4.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level3.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
]

- Reacticon
- enterJS
- dotJS
]

???

Meanwhile, almost all of our developers visited a JavaScript related conference last year.

Conferences are an important part of continuing education in our company. But usually that's mostly Magento conferences.

It was good seeing what's going on in the JS world

---
background-image:url(images/screenshot-amla.png)

.layer-opaque[

#.big[2019: The real PWA project]

.team[
.person.avs.level2[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.vf.level3.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.super[.person.lb.level5.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.person.level2.sw[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.super[.person.fs.level5.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.person.bd[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ww.level4[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.gp.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.ah.level4.external.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
.person.th.level4.external.levelup[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]
]

- Migration from Magento 1
- Delayed since last year, no fixed deadline
- Client open for innovation
- Collaboration with experienced frontend freelancers
- **Experiment:** Deity Falcon .icon[![](images/falcon-logo.png)] *vs.* .icon[![](images/vue-storefront-logo.png)] Vue Storefront
]

???

But this year, we finally started for real

One project that had already been delayed for a while
---
background-image:url(images/Atwix_Magento_2_wallpaper_1-1366x768.jpg)

.layer[
#.big[The Future?]

.team.future[
.super[.person.avs.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.vf.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.lb.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.level5.sw[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.fs.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.bd.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.ww.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.gp.external.level5[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.ah.level5.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
.super[.person.th.level5.external[<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 100 100" class="heroicon-user heroicon heroicons-lg">
    <path class="heroicon-user-top heroicon-component-accent heroicon-component-fill" d="M60 72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h76V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24V72z"></path>
    <path class="heroicon-user-face heroicon-component-fill" d="M42 60.5V72a8 8 0 1 0 16 0V60.5A22 22 0 0 0 72 40V24a22 22 0 0 0-44 0v16a22 22 0 0 0 14 20.5z"></path>
    <path class="heroicon-shadows" d="M40 61.82V64l-8.74 4.37A33.84 33.84 0 0 0 50 74c6.93 0 13.37-2.07 18.74-5.63L60 64v-2.18A23.91 23.91 0 0 1 50 64c-3.57 0-6.96-.78-10-2.18z"></path>
    <path class="heroicon-outline" fill-rule="nonzero" d="M40 61.82a24 24 0 0 1-14-21.81V23.99a24 24 0 0 1 48 0v16.02a24 24 0 0 1-14 21.82V64l24.63 12.31c2.96 1.49 5.37 5.37 5.37 8.7V100H10V85c0-3.31 2.4-7.2 5.37-8.69L40 64v-2.18zm2 .81V72a8 8 0 1 0 16 0v-9.36a23.97 23.97 0 0 1-16 0zm18 3.6V72a10 10 0 1 1-20 0v-5.76L16.27 78.1A8.65 8.65 0 0 0 12 85v13h8v-6h1v6h58v-6h1v6h8V85a8.65 8.65 0 0 0-4.27-6.9L60 66.24zM28 24v16.02a22 22 0 0 0 44 0V23.99a22 22 0 0 0-44 0zm5.9-8.04A18 18 0 0 1 50 6v1a17 17 0 0 0-15.2 9.4l-.9-.45z"></path>
</svg>]]
]

- Headless Magento
- Attractive for frontend developers
- PWA is here to stay
]
???

- We're ready for it
- How do we get there? continue the path we've taken so far. Let me summarize:

---
background-image:url(images/library.jpg)

.layer[
#.big[Summary:]

#.huge[Learn]
]

???

- Most importantly, make sure that knowledge is spread internally
- Then give developers time to learn. Read books, online tutorials, trainings, conferences

---
background-image:url(images/elephant.jpg)

.layer[
#.big[Summary:]

#.huge[Try out]
]

???

- Try out new technology in small scope: internal projects, smaller parts of a website
- Accept failures

---
background-image:url(images/measure.jpg)

.layer[
#.big[Summary:]

#.huge[(Re)-Evaluate]
]

???

- Watch the market of current solutions and technology.
- It's moving fast, re-evaluate your choices from time to time
- Communicate with the vendors, communicate with other agencies
- "when nothing goes right, go left"

---
background-image:url(images/help.jpg)

.layer[
#.big[Summary:]

#.huge[Get help]
]

???

- not only talk to others, don't try to do everything on your own
- integrate external experts into a project team or give out self-contained tasks. But understand what they are doing. Conduct code reviews in either direction.

---
background-image:url(images/summary.jpg)

.layer.summary[
#.big[Summary:]

.left[
##.huge[Learn]
##.huge[Try out]
].right[
##.huge[(Re-)Evaluate]
##.huge[Get Help]
]
.clear[]
]

---
class: center, final

#.huge[Thank you!]

.width33[![](images/CodetalksCommerce_2zeilig_textwhite-1.png)]

---

# Image sources

- PWA Overview: [Google](https://developers.google.com/web/updates/2015/12/getting-started-pwa) ([CC BY 3.0](https://creativecommons.org/licenses/by/3.0/))
- Magento Superheroes: [atwix.com](https://www.atwix.com/design/collection-of-magento-wallpapers/)
- Dilbert: [dilbert.com](https://dilbert.com/)
- Photos: [pixaby.com](https://pixaby.com/) (Pixaby Licence, free for commercial usage)