Common Distribution Technology that Supports the Frontend of Yahoo! JAPAN Shopping

Hiroaki Konaka (Yahoo! JAPAN / Production Division 1, Shopping Service Group, Commerce Group / Frontend Engineer)
Hisashi Tanaka (Yahoo! JAPAN / Production Division 1, Shopping Service Group, Commerce Group / Frontend Engineer)

https://tech-verse.me/ja/sessions/151
https://tech-verse.me/en/sessions/151
https://tech-verse.me/ko/sessions/151

Transcript

2. Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service
3. Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service
4. 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
5. Each team has independent applications Connection via link The html of the common UI is written individually
6. Example Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP
7. Example Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP
8. 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
9. If you want to modify the common UI
10. If you want to modify the common UI There are many people involved.. To whom should we explain
11. If you want to modify the common UI There are many people involved.. To whom should we explain At no time is everyone free..
12. 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
13. 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.
14. 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..
15. 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..
16. Its tough
17. 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
18. Ptah Common UI Distribution System
19. 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)
20. 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)
21. 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)
22. 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)
23. 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)
24. 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
25. 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
26. 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
27. 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
28. 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
29. 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
30. 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
31. ※ https://martinfowler.com/articles/micro-frontends.html Micro Frontends
32. • 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
33. The existing structure Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP
34. The existing structure Top Search Product Details HyperLink HyperLink The Top Team Node.js SearchTeam Node.js Product Details Team PHP
35. 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
36. 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 ✔ ✔
37. 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 ✔ ✔ ✔
38. 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 ✔ ✔ ✔ ✔ ✔
39. 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 ✔ ✔ ✔ ✔ ✔
40. 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
41. Agenda - Circumstances leading up to the birth of the common UI distribution service - Technology that supports the common UI distribution service
42. MicroFrontends In the case of Ptah
43. Front System Configuration CDN Browser Backend 専用BFF Dedicated BFF
44. 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
45. Front <html> <head> <!– Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!– Core JS --> <script src="https://xxx/core.js"></script> <!– Initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> </head> <body> <!– CustomElement tag for UI components --> <shp-header hoge="fuga"></shp-header> <!– JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> </body> </html> Page HTML
46. Front ⎯ Common CSS loading Add link tag <html> <head> <!– Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!– Core JS --> <script src="https://xxx/core.js"></script> <!– Initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> </head> <body> <!– CustomElement tag for UI components --> <shp-header hoge="fuga"></shp-header> <!– JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> </body> </html> Page HTML
47. Front Add script tags ⎯ Common CSS loading ⎯ Loading Ptah’s core JS ⎯ Initialization process Add link tag <html> <head> <!– Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!– Core JS --> <script src="https://xxx/core.js"></script> <!– Initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> </head> <body> <!– CustomElement tag for UI components --> <shp-header hoge="fuga"></shp-header> <!– JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> </body> </html> Page HTML
48. 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 <html> <head> <!– Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!– Core JS --> <script src="https://xxx/core.js"></script> <!– Initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> </head> <body> <!– CustomElement tag for UI components --> <shp-header hoge="fuga"></shp-header> <!– JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> </body> </html> Page HTML
49. 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 <html> <head> <!– Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!– Core JS --> <script src="https://xxx/core.js"></script> <!– Initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> </head> <body> <!– CustomElement tag for UI components --> <shp-header hoge="fuga"></shp-header> <!– JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> </body> </html> Page HTML
50. Browser Render React component Get the content data Load JS/CSS
51. 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
52. 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
53. 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
54. 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
55. 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
56. 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
57. 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
58. Characteristics - Framework-free - UI rendering with Custom Elements + React at runtime
59. 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
60. Isomorphic SSR + CSR
61. 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
62. Front Add a request to the SSR API and paste the HTML fragment/initialization data <!-- Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!-- Core JS --> <script src="https://xxx/core.js"></script> <!– initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> <!– paste the initialization data --> <script id="xxx-json" type="application/json"> [data initialization in SSR] </script> </head> <body> <!-- CustomElement tag for UI components --> <shp-header><div>[SSR HTML string]</div></shp-header> <!-- JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters
63. Front Add a request to the SSR API and paste the HTML fragment/initialization data <!-- Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!-- Core JS --> <script src="https://xxx/core.js"></script> <!– initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> <!– paste the initialization data --> <script id="xxx-json" type="application/json"> [data initialization in SSR] </script> </head> <body> <!-- CustomElement tag for UI components --> <shp-header><div>[SSR HTML string]</div></shp-header> <!-- JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters
64. Front Add a request to the SSR API and paste the HTML fragment/initialization data <!-- Common CSS --> <link rel="stylesheet" href="https://xxx/style.css" /> <!-- Core JS --> <script src="https://xxx/core.js"></script> <!– initialization process --> <script> (function () { xxx.yyy.zzz.init({…}); })(); </script> <!– paste the initialization data --> <script id="xxx-json" type="application/json"> [data initialization in SSR] </script> </head> <body> <!-- CustomElement tag for UI components --> <shp-header><div>[SSR HTML string]</div></shp-header> <!-- JS for UI components --> <script async src="https://xxx/1.0/shp-header.js"></script> Page HTML // What was specified in the attribute of CustomElement const params = { shpHeader: { props: { hoge: 'fuga' } } }; SSR API request parameters
65. 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コンポーネント描画方式の変更
66. 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コンポーネント描画方式の変更
67. 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コンポーネント描画方式の変更
68. Characteristics - Framework-free - SSR with Isomorphic - UI rendering with Custom Elements + React at runtime
69. 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
70. Summary Even if you are not really into MicroFrontends it will be beneficial if well adopted
71. Thank you