Erleben Sie die Integration von Webkomponenten auf der Leroy Merlin-Website

Eines Abends, als ich Kaffee trank, erhielt ich eine Nachricht von einem Kollegen mit dem großen Wort "Lived" und einem Link zu einer Rede über PiterJS . In dieser Rede nahm der Redner die Leroy Merlin-Website und zeigte, wie die Optimierung auf einer nicht optimierten Website durchgeführt werden sollte. Und er hat recht. Wenn wir PageSpeed ​​Insights verwenden, haben wir auf der Hauptseite die folgenden Werte:

Mobiltelefon	Desktop

« »? ! , «» 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 .