Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service

Slide 3

Slide 3 text

Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service

Slide 4

Slide 4 text

The Yahoo Shopping Screen and the Development Team Top Search Product Details Cart Review Contact us Products Campaign Existence of Various Screens and Presence of Various Development Teams

Slide 5

Slide 5 text

Each team has independent applications Connection via link The html of the common UI is written individually

Slide 6

Slide 6 text

Example Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP

Slide 7

Slide 7 text

Example Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP

Slide 8

Slide 8 text

This part is common UI Shopping Convenient acquisition with ID Login Open [Important] Yahoo! Shopping and PayPay Mall will be integrated on October 12th What are you looking for? Filter Cart Favorites H

Slide 9

Slide 9 text

If you want to modify the common UI

Slide 10

Slide 10 text

If you want to modify the common UI There are many people involved.. To whom should we explain

Slide 11

Slide 11 text

If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free..

Slide 12

Slide 12 text

If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free.. The start time for development varies

Slide 13

Slide 13 text

If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free.. The start time for development varies It becomes difficult to align the release time.

Slide 14

Slide 14 text

If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free.. The start time for development varies It becomes difficult to align the release time. It is also possible that there was a team that was overlooked..

Slide 15

Slide 15 text

If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free.. The start time for development varies It becomes difficult to align the release time. It is also possible that there was a team that was overlooked.. There is something that is subtly different..

Slide 16

Slide 16 text

Its tough

Slide 17

Slide 17 text

In the midst of this, a company-wide large-scale refactoring of the system was ordered At the same time, I reviewed the front end too, and built a common UI distribution system for shopping

Slide 18

Slide 18 text

Ptah Common UI Distribution System

Slide 19

Slide 19 text

ptah-commons Though it is not UI, it is logic that is closely related to UI construction and distributed in library format ・Acquisition and processing of user information ・Login judgment ptah-v2 Distribution of UI common to almost all screens module-service Common navigation module used on multiple screens, etc. Three pillars of the common UI distribution system (Ptah)

Slide 20

Slide 20 text

ptah-commons Though it is not UI, it is logic that is closely related to UI construction and distributed in library format ・Acquisition and processing of user information ・Login judgment ptah-v2 Distribution of UI common to almost all screens module-service Common navigation module used on multiple screens, etc. Three pillars of the common UI distribution system (Ptah)

Slide 21

Slide 21 text

ptah-commons Though it is not UI, it is logic that is closely related to UI construction and distributed in library format ・Acquisition and processing of user information ・Login judgment ptah-v2 Distribution of UI common to almost all screens module-service Common navigation module used on multiple screens, etc. Three pillars of the common UI distribution system (Ptah)

Slide 22

Slide 22 text

ptah-commons Though it is not UI, it is logic that is closely related to UI construction and distributed in library format ・Acquisition and processing of user information ・Login judgment ptah-v2 Distribution of UI common to almost all screens module-service Common navigation module used on multiple screens, etc. Three pillars of the common UI distribution system (Ptah)

Slide 23

Slide 23 text

ptah-commons Though it is not UI, it is logic that is closely related to UI construction and distributed in library format ・Acquisition and processing of user information ・Login judgment ptah-v2 Distribution of UI common to almost all screens module-service Common navigation module used on multiple screens, etc. Three pillars of the common UI distribution system (Ptah)

Slide 24

Slide 24 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 25

Slide 25 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 26

Slide 26 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 27

Slide 27 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 28

Slide 28 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 29

Slide 29 text

What we would like to achieve with Ptah-v2 UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours

Slide 30

Slide 30 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Reduction of man-hours Without any work at the front it can be changed

Slide 31

Slide 31 text

※ https://martinfowler.com/articles/micro-frontends.html Micro Frontends

Slide 32

Slide 32 text

• Can be changed in a phased manner Micro Frontends What is? React (Team A) Vue (Team B) Web Components (Team C) • Simple and loosely coupled • Can be deployed independently

Slide 33

Slide 33 text

The existing structure Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP

Slide 34

Slide 34 text

The existing structure Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP

Slide 35

Slide 35 text

The existing structure+common distribution Top Search Product Details Common distribution team Node.js The Top Team Node.js SearchTeam Node.js Product Details Team PHP

Slide 36

Slide 36 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours ✔ ✔

Slide 37

Slide 37 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours ✔ ✔ ✔

Slide 38

Slide 38 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours ✔ ✔ ✔ ✔ ✔

Slide 39

Slide 39 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours ✔ ✔ ✔ ✔ ✔

Slide 40

Slide 40 text

common UI This part is in MicroFrontends Using React Shopping Convenient acquisition with ID Login Open [Important] Yahoo! Shopping and PayPay Mall will be integrated on October 12th What are you looking for? Filter Cart Favorites H

Slide 41

Slide 41 text

Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service

Slide 42

Slide 42 text

MicroFrontends In the case of Ptah

Slide 43

Slide 43 text

Front System Configuration CDN Browser Backend 専用BFF Dedicated BFF

Slide 44

Slide 44 text

Front System Configuration CDN Browser 2. Get JS/CSS 3’. Get the content data 専用BFF 3. Render React component 1. Get the page HTML Backend Dedicated BFF

Slide 45

Slide 45 text

Front (function () { xxx.yyy.zzz.init({…}); })(); Page HTML

Slide 46

Slide 46 text

Front ⎯ Common CSS loading Add link tag (function () { xxx.yyy.zzz.init({…}); })(); Page HTML

Slide 47

Slide 47 text

Front Add script tags ⎯ Common CSS loading ⎯ Loading Ptah’s core JS ⎯ Initialization process Add link tag (function () { xxx.yyy.zzz.init({…}); })(); Page HTML

Slide 48

Slide 48 text

Front Add script tags Add tags for UI components ⎯ Common CSS loading ⎯ Loading Ptah’s core JS ⎯ Initialization process ⎯ Placement of CustomElement tag ⎯ Loading JS for UI Components ⎯ Specify parameters with attributes Add link tag (function () { xxx.yyy.zzz.init({…}); })(); Page HTML

Slide 49

Slide 49 text

Front Add script tags Add tags for UI components ⎯ Common CSS loading ⎯ Loading Ptah’s core JS ⎯ Initialization process ⎯ Placement of CustomElement tag ⎯ Loading JS for UI Components ⎯ Specify parameters with attributes Add link tag (function () { xxx.yyy.zzz.init({…}); })(); Page HTML

Slide 50

Slide 50 text

Browser Render React component Get the content data Load JS/CSS

Slide 51

Slide 51 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 52

Slide 52 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 53

Slide 53 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 54

Slide 54 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 55

Slide 55 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 56

Slide 56 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 57

Slide 57 text

Browser Render React component Get the content data Load JS/CSS // CustomElementClass Definition class Element extends HTMLElement { connectedCallback() { // Render React components with lifecycle callbacks const container = document.createElement('div'); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); } }; // Add CustomElement customElements.define('shp-header’, Element); CustomElement → React component

Slide 58

Slide 58 text

Characteristics - Framework-free - UI rendering with Custom Elements + React at runtime

Slide 59

Slide 59 text

Important matters UX will not be compromised Unified layout and specifications Using React Front language/FW will not be restricted Without any work at the front it can be changed Reduction of man-hours ✔ ✔ ✔ ✔ ✔ → need SSR Layout shift

Slide 60

Slide 60 text

Isomorphic SSR + CSR

Slide 61

Slide 61 text

Front System Configuration CDN Browser 2. Get JS/CSS 3’. Get the content data 専用BFF 3. Render React component 1. Get the page HTML SSR API 1’. Get HTML fragment SSR with the same React component as 3 Backend Dedicated BFF

Slide 62

Slide 62 text

Front Add a request to the SSR API and paste the HTML fragment/initialization data (function () { xxx.yyy.zzz.init({…}); })(); [data initialization in SSR]
[SSR HTML string]
Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters

Slide 63

Slide 63 text

Front Add a request to the SSR API and paste the HTML fragment/initialization data (function () { xxx.yyy.zzz.init({…}); })(); [data initialization in SSR]
[SSR HTML string]
Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters

Slide 64

Slide 64 text

Front Add a request to the SSR API and paste the HTML fragment/initialization data (function () { xxx.yyy.zzz.init({…}); })(); [data initialization in SSR]
[SSR HTML string]
Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters

Slide 65

Slide 65 text

Browser ... // Initialization data includes parameters and content data used during SSR const jsonTag = document.getElementById('xxx-json’); const initialData = JSON.parse(jsonTag.textContent); const props = { ...initialData.shpHeader?.props, initialData }; //For operation without JS version update, hydrate is not used // hydrate is based on the assumption that the DOM structure is the same for SSR and CSR const container = this.children[0]; container.innerHTML = ''; ReactDOM.render( React.createElement(ShpHeader, props), container); ... ... const container = document.createElement('div’); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); ... CSR Isomorphic Reactコンポーネント描画方式の変更

Slide 66

Slide 66 text

Browser ... // Initialization data includes parameters and content data used during SSR const jsonTag = document.getElementById('xxx-json’); const initialData = JSON.parse(jsonTag.textContent); const props = { ...initialData.shpHeader?.props, initialData }; //For operation without JS version update, hydrate is not used // hydrate is based on the assumption that the DOM structure is the same for SSR and CSR const container = this.children[0]; container.innerHTML = ''; ReactDOM.render( React.createElement(ShpHeader, props), container); ... ... const container = document.createElement('div’); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); ... CSR Isomorphic Reactコンポーネント描画方式の変更

Slide 67

Slide 67 text

Browser ... // Initialization data includes parameters and content data used during SSR const jsonTag = document.getElementById('xxx-json’); const initialData = JSON.parse(jsonTag.textContent); const props = { ...initialData.shpHeader?.props, initialData }; //For operation without JS version update, hydrate is not used // hydrate is based on the assumption that the DOM structure is the same for SSR and CSR const container = this.children[0]; container.innerHTML = ''; ReactDOM.render( React.createElement(ShpHeader, props), container); ... ... const container = document.createElement('div’); const props = { hoge: this.getAttribute('hoge') }; const component = React.createElement(ShpHeader, props); ReactDOM.render(component, container); this.appendChild(container); ... CSR Isomorphic Reactコンポーネント描画方式の変更

Slide 68

Slide 68 text

Characteristics - Framework-free - SSR with Isomorphic - UI rendering with Custom Elements + React at runtime

Slide 69

Slide 69 text

Effect ⎯ Common UI development cost is 1/8, and reduction in workload of about 20 man-months per year (*FY2021 results) Reduction in development cost Reduced lead time ⎯ A change in URL link takes less than an hour Increased number of front deployments ⎯ To use the resources where you want to focus

Slide 70

Slide 70 text

Summary Even if you are not really into MicroFrontends it will be beneficial if well adopted

Slide 71

Slide 71 text

Thank you