مكونات الويب في العالم الحقيقي

_{الصورة بواسطة نيونبراند}

مكونات الويب هي الاسم الشائع لمجموعة من التقنيات المصممة لمساعدة مطوري الويب على إنشاء كتل قابلة لإعادة الاستخدام. إن النهج القائم على المكونات لإنشاء واجهات راسخة في أطر العمل الأمامية ، ويبدو أنه من الجيد دمج هذه الوظيفة أصلاً في المتصفحات. لقد وصل دعم هذه المتصفحات لهذه التكنولوجيا بالفعل إلى مستوى كافٍ بحيث يمكنك التفكير بجدية في استخدام هذه التكنولوجيا لمشاريع عملك.

في هذه المقالة ، سوف نلقي نظرة على ميزات استخدام مكونات الويب ، والتي لا يتحدث عنها مبشرو هذه التقنيات لسبب ما.

ما هي مكونات الويب

تحتاج أولاً إلى تحديد ما يتم تضمينه بالضبط في مفهوم مكونات الويب. هناك وصف جيد للتكنولوجيا على MDN. إذا كانت بإيجاز شديد ، فعادةً ما يشمل هذا المفهوم الميزات التالية:

• العناصر المخصصة - القدرة على تسجيل علامات HTML الخاصة بك مع سلوك معين
• Shadow DOM - إنشاء سياق معزول CSS
• فتحات - القدرة على دمج محتوى html خارجي مع مكون html داخلي

hello-world , :

// -     html-
class HelloWorld extends HTMLElement {
  constructor() {
    super();
    //  Shadow DOM
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    const name = this.getAttribute("name");
    //     Shadow DOM
    this.shadowRoot.innerHTML = `Hello, <strong>${name}</strong> :)`;
  }
}

//     html-
window.customElements.define("hello-world", HelloWorld);

, , <hello-world name="%username%"></hello-world>, . !

.

, - , . , . html- Vue React , , . DOM – , html, DOM–, . , .

, , - Shadow DOM. , – ! , , ..

, -, , lit-element. -, lit-html DOM , . , API.

- Javascript. lit-element, - 6 , preact, , React, 2 , 3 . , - .

Shadow DOM

html- CSS, . Shadow DOM. CSS. , , . , - , , Shadow DOM. Shadow DOM this.attachShadow(), Shadow DOM , <style></style> <link rel="stylesheet">.

, CSS, . , . Shadow DOM 30, Shadow DOM 50. , , - <my-list items="myItems"> <my-item item="item">.

, , CSS-, , , CSS.

- customElements.define. , , - my-button, . , , , , , , . , , CSS-, -.

Tree-shaking

– . , React

import { Button } from "./button";

//...

render() {
  return <Button>Click me!</Button>
}

Button. , . - , html-, . lit-element :

import '@polymer/paper-button/paper-button.js';

// ...

render() {
  return html`<paper-button>Click me!</paper-button>`;
}

. , - , . , - .

tree-shaking , . , , , :

import { Button, Icon } from './components';

//...

render() {
  return <Button>Click me!</Button>
}

Icon . - , . 2010 , jquery-.

Javascript , . , Typescript Flow. React, :

class Button extends Component<{ text: string }> {}

<Button />  // :    text
<Button text="Click me" action="test" />  // :   action

<Button text="Click me" /> //   ,  

- . , - , Typescript -. JSX.IntrinsicElements – , Typescript .

namespace JSX {
  interface IntrinsicElements {
    'paper-button': {
      raised: boolean;
      disabled: boolean;
      children: string
    }
  }
}

Typescript -, . , JSX . , querySelector. :

const component = document.querySelector('paper-button') as PaperButton;

, , Typescript -, - .

, <input> <button>, . , , , . .

//     DOM
const component = document.querySelector("users-list");

//    
component.items = myData;

, :

class UsersList extends HTMLElement {
  set items(items) {
    //  
    this.__items = items;
    //  
    this.__render();
  }
}

lit-element – property:

class UsersList extends HTMLElement {
  @property()
  users: User[];
}

, , :

const component = document.querySelector("users-list");

component.expanded = true;
component.items = myData;
component.selectedIndex = 3;

, , . , - . , . lit-element , , , - setTimeout(() => this.__render(), 0). , , :

component.items = [{ id: 1, name: "test" }];
//  ,    
// expect(component.querySelectorAll(".item")).toHaveLength(1);

await delay(); //     
expect(component.querySelectorAll(".item")).toHaveLength(1);

, - .

, - . , :

• - . Github. - open-source . , , - .
• -. , , - . CSS . iframe, - Shadow DOM, .

, - :

• UI- , tree-shaking , . UI- (, ..) , (React, Vue .) .
• - . , - <my-app /> SPA-. Javascript, - . Angular/React/Vue - , - .
• - . , .

. .