Pengalaman mengintegrasikan komponen web di situs web Leroy Merlin

Suatu malam, ketika minum kopi, saya menerima pesan dari seorang kolega dengan kata luas “Hidup” dan tautan ke sebuah pidato di PiterJS . Dalam pidato ini, pembicara mengambil situs web Leroy Merlin dan menunjukkan bagaimana optimasi harus dilakukan pada situs yang tidak dioptimalkan. Dan dia benar. Jika kami mengambil PageSpeed ​​Insights, maka pada halaman utama kami memiliki nilai-nilai berikut:

Telepon genggam	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 .