Используйте веб-компонент для создания библиотеки компонентов корпоративного уровня.

внешний интерфейс React.js Web Components Polymer

Текущее состояние библиотеки компонентов

В настоящее время основные интерфейсные фреймворки включают react, vuejs, angular и т. д.

Когда мы обычно создаем библиотеку компонентов, мы создаем ее на основе определенного фреймворка. Например, ant-design — это библиотека компонентов пользовательского интерфейса, основанная на реакции, а elementUI — библиотека компонентов, основанная на vuejs.

Хотя в настоящее время у сообщества есть соответствующие инструменты для предоставления услуг преобразования между фреймворками, таких как преобразование компонентов vuejs в компоненты реагирования. Но ведь это другой фреймворк с другими стандартами. Итак, API фреймворка меняется, тогда вам нужно переписать логику преобразования, Явно негибкий, поэтому пока не будем обсуждать эту ситуацию.

Как компании, вам нужно писать разные библиотеки компонентов для разных фреймворков, хотя логика одна и та же.

Кроме того, при обновлении фреймворка, например, с 1.x до 2.x, необходимо обновить соответствующую библиотеку компонентов.Если в компании много библиотек компонентов (vuejs, react, angular и т. д.), Тогда вероятность этого апгрейда будет больше.

Что такое веб-компонент?

Так есть ли лучшее решение, написать один раз, использовать везде?

Ответ заключается в использовании веб-компонентов.

Веб-компоненты представляют собой наборw3cВозможности HTML и DOM позволяют разработчикам создавать повторно используемые компоненты.

Поскольку веб-компоненты продвигаются организацией w3c, весьма вероятно, что в ближайшем будущем они станут стандартом для браузеров.

Веб-компоненты в основном состоят из следующих четырех частей:

  • Custom Elements — API для определения новых HTML-элементов.
  • Shadow DOM — инкапсулированный DOM и стиль с композицией.
  • Импорт HTML — декларативные методы импорта HTML-документов в другие документы.
  • HTML-шаблоны —<template> element, which allows documents to contain inert chunks of DOM

В чем преимущества веб-компонента

Каковы преимущества использования веб-компонентов для создания библиотеки компонентов? Как упоминалось ранее, веб-компоненты — это набор спецификаций, продвигаемых w3c, которые являются стандартом.

Если мы используем API веб-компонентов для разработки компонента, этот компонент существует вне фреймворка, то есть Вы можете использовать его в любом фреймворке и, конечно же, непосредственно в нативном js.

Нам не нужно писать разные библиотеки компонентов для разных фреймворков.

Основное использование библиотеки компонентов, написанной с помощью веб-компонентов, вероятно, выглядит следующим образом:

  <script src="/build/duiba.js"></script>

  <!-- 运营位组件 -->
  <operation-list></operation-list>

сказал без преувеличения,web componentsэто будущее.

Однако API веб-компонентов относительно сложен, поэтому по-прежнему необходимо разрабатывать веб-компоненты с собственным API. Это относительно сложно, как если бы вы разрабатывали игры напрямую с помощью нативного API холста.

Ниже мы представляем библиотеки, используемые для упрощения разработки веб-компонентов.

polymer

Первый полимер — это библиотеки разработки веб-компонентов, с которыми я связался много лет назад.

Build modern apps using web components

Подробнее о введенииpolymer

stencil

stencil — это библиотека, которая появилась после полимера. При обмене первым контактом на Polymer Summit 2017 разместите адрес здесьUsing Web Components in Ionic - Polymer Summit 2017.

Stencil is a tool developers use to create Web Components with some powerful features baked in, but it gets out of the way at runtime.

Итак, к чему именно относятся мощные функции?

Virtual DOM
Async rendering (inspired by React Fiber)
Reactive data-binding
TypeScript
JSX

Это также инструмент для создания веб-компонентов. Разница в том, что он предоставляет больше возможностей (реактивное связывание данных, TypeScript, JSX, виртуальный дом) и более высокую производительность (виртуальный дом, асинхронный рендеринг).

Внимательный человек мог заметить, что я отношу Virtual DOM и к фиче, и к перфомансу, да! Виртуальный DOM обеспечивает сопоставление с реальным DOM, поэтому разработчикам не нужно заботиться о реальном DOM, с этого уровня это функция.

Из дифференциала между виртуальным домом и процессом исчезновения Diff Info для реального DOM (примирение), это производительность.

Опыт разработки веб-компонентов с помощью stencil, наверное, такой:

import { Component, Prop, State } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.scss'
})
export class MyComponent {
  // Indicate that name should be a property on our new component
  @Prop() first: string;

  @Prop() last: string;

  @State() isVisible: boolean = true;

  render() {
    return (
      <p>
        Hello, my name is {this.first} {this.last}
      </p>
    );
  }
}

Demo

Это основано наstenciljs + storybookНаписан небольшой пример. Вы можете клонировать и запустить, чтобы увидеть эффект.

duiba-components

Благодаря построенной таким образом библиотеке компонентов уровня предприятия можно легко предоставить базовую библиотеку компонентов для различных направлений бизнеса, не беспокоясь о технологическом стеке пользователей (каждой бизнес-стороны).

В будущем, когда фреймворк бизнес-стороны будет обновлен (например, vue1 будет обновлен до vue2), наша библиотека компонентов все еще может использоваться.

Вполне возможно, что если стандарт es будет разработан достаточно хорошо, а спецификации, такие как веб-компоненты, будут достаточно популярны, наступит эра отсутствия фреймворков.

Отсутствие фреймворка не означает, что не используется библиотека.

Разрабатывать достаточно общие компоненты можно только с помощью инструментальных библиотек, никаких конвертеров типа babel и не нужно всяких полифиллов. Тогда разработчики, вероятно, будут очень счастливы, к сожалению, такого дня не может быть, но это также прекрасно, чтобы быть достаточно близко к этой цели.

Категории