Expérience de l'intégration de composants Web sur le site Web de Leroy Merlin

Un soir, en buvant du café, j'ai reçu un message d'un collègue avec le mot volumineux «Vécu» et un lien vers un discours sur PiterJS . Dans ce discours, le conférencier a pris le site Web de Leroy Merlin et a montré comment l'optimisation doit être effectuée sur un site non optimisé. Et il a raison. Si nous prenons PageSpeed ​​Insights, alors sur la page principale, nous avons les valeurs suivantes:

Téléphone portable	Bureau

« »? ! , «» PageSpeed Insights .

, . , , , , , , - !

« » . , , .

«», . front-end- Adobe Experience Manager (AEM). , . .

CMS , . .

1. , . AEM, Java, AEM .
2. . , . , , .
3. -. HTML CSS like for like, copy-paste. AEM . HTML CSS .

:

1. , HTML;
2. ES5, jQuery ( ), underscore, less, bootstrap.

-. react/angular/vue/svelte, -. .

, : « < >?» — :

1. JSON, HTML;
2. JSON, SSR CMS.

— « ». , : «, — R&D, , ». . , , . A/B . , , , , . : « », — , .

, - , . -. polymer , . . . HTML import v0 — v1. , , .

, , -.

vanila . -. innerHTML , document.createElement .

polymer lit-element, -. lit-html , - , , -. , , , -, .

Stencil — , , . -, TypeScript. - — loader , . , — TypeScript. , TS-, , TypeScript, any, - .

sencil, lit-element , . - . . Lighthouse 100 100 , , , js , . 1/3. HTML W3C- .

. - — http/1.1. , , http/2 - - . , , , stencil. , «» , , CDN, http/2. , .

, dynamic import. ( ):

1. , body;
2. body;
3. ;
4. , ( );
5. ;
6. switch…case -, .

Intersection Observer, , , . , JS- 1/3. — , , , , .

, webpack es5, es6. open-wc , , webpack.

. . - , . , , , SEO, .

:

html :

<uc-payment-options text=" " credit="visa mastercard mir" cash></uc-payment-options>

JS :

, , . , HTML devtools.

, JS , html (, — ).

— CORS, CDN.

.

, , lit-element shadowdom — . , , . -. stencil , shadowdom, shadowdom , . stencil ie11 Edge, lit-element .

, , , .

product owner, , , «» :

1. ie11 .
2. — Chrome 2 . «» , .
3. «» 2 , .
4. Edge ( 18 ) , Edge 79 chromium .

. , . , . . , .

— es5 .

-.

2 :

1. ui-kit;
2. - (elbrus-ui).

, ui-kit . , - , .

: - , — . , -, storybook, , , - HTML-.

, . , . . , - , AEM.

— , , . - - . — 2 - - -, , ui-kit, elbrus-ui.

, - .

- . , , , .

«» -.

(basket, wishlist, compare, lk, analytics) document.body . , , , ( , , html, ).

custom event, .

, , basket:update.

, , , .

, redux, , .

, , «», , — -.

, ( ). , , + -, -, A/B (, , ).

1. Basket + checkout. , .

   
   
   
   

   , lit-element , , SPA ( , ). uc-basket, -, . redux/mobx, . . , , lit-element, , -, . , , , , . , . -. - .

   
   

2. Header. - , api.

   
   
   

3. .

   
   
   
   
   

   SEO- . , - SEO, . Yandex: SEO- lightdom. , Yandex, Google.

   
   

4. ( A/B 23.12.19)

   
   
   
   

   . , , , , UX/UI, . , . — -. HTML, , . , , safari.

   
   

PageSpeed Insights .

, 100 100.

: 954kb (gzip) 120kb — - (JS + CSS + SVG). — , . , PageSpeed Insights, .

, . . , , .

. switch...case 2500 , . , , ga-, , - .

, -, , .

, , , : DOM-, . , . . , .

. , , - . , ga body. . , . , ga . .

, , , , .

1. . , , . C , Apple UI, - (stencil). Firefox, about:config -.
2. . , , - -. Adobe Oracle, - . :
   
   
   
3. . . « » , ( ), . , « react» — .
4. ui-kit. , « », - UI, api, .
5. , shadowdom .
6. safari selenium shadowdom .
7. - . , shadowdom. : safari , shadowdom. , - — .
8. , . - , , , . , , lit-html, , .
9. , constructible style sheets — . , . , , . , chrome, , lit-element. JS, , , JS.

10. , shadowdom. . . , shadowdom , , , . Slot, , . ::part() . , , - -. , , , shadowdom, . , .

    
    

    , loading=”lazy” img shadowdom. , , data-src + IntersectionObserver .

    
    

11. , , . , , . , , 116kb, 380kb — . performance lighthouse 4g .

    
    

    max	47	21
    min	19	2
    	lazy	static

    
    

    , .

    
    

    Safari - : , , , .

    
    

    . , , , . , . - .

    
    

12. , -. : () -? .

    
    
    1. -, , .
    2. - - .
    3. — UI .
    4. html.
    5. , , . , , UI-.
    
    

react. -. react + lit-element . 2 .