Здравствуйте, мои друзья, ориентированные на компоненты JavaScript,
вы устали? Если нет, вы, вероятно, будете, если продолжите изучать новый фреймворк, поскольку вы можете находить новые еженедельно.
Если вы работаете в веб-разработке, вы, вероятно, создали по крайней мере один компонент angular/react/vue/ember/dsakjndas. , верно?
Представьте, что все, что вы создали до сих пор, доступно для повторного использования в любое время и в любой среде, которую вы хотите.
Что ж, это вполне возможно. Почти без усилий.
Веб-компоненты спешат на помощь.
Что такое веб-компоненты?
Это настраиваемые элементы, которые позволяют создавать новые теги HTML, которые могут иметь сложную логику. Вы Создатель, поэтому пределом может быть только небо.
Если вы знакомы с компонентной архитектурой, значит, вы уже знаете все, что нужно для понимания веб-компонентов.
Есть всего несколько новых концепций (в зависимости от вашего опыта веб-разработки вы, возможно, уже знакомы с ними)
— Пользовательские элементы: API-интерфейсы JavaScript, которые позволяют вам определять гибкие, настраиваемые и повторно используемые пользовательские элементы с собственным поведением и пользовательским интерфейсом
— Shadow DOM: API-интерфейсы JavaScript для прикрепления инкапсулированного «теневого» дерева DOM к элементу. То же, что и основной документ DOM, за исключением того, что тень скрыта от остального кода, что обеспечивает конфиденциальность и легкость вашего ума, потому что вам не нужно беспокоиться о возможных коллизиях и конфликтах.
— HTML-шаблоны: ‹template› и ‹slot › Элементы позволяют вам писать структуру HTML, которая не прикрепляется к DOM, но доступна для повторного использования, улучшая ваш опыт разработки.
Если я привлек ваше внимание, пожалуйста, прочитайте подробное объяснение этой технологии: https://developer.mozilla.org/en-US/docs/Web/Web_Components
Если вы переходите с разработки на Angular или React, я рекомендую вам перейти на StencilJS для вашего первого компонента (https://stenciljs.com/). Настройка занимает около 1 минуты. Я написал компонент списка, который использует компонент элемента списка, просто для простоты.
Итак, код для компонента списка:
Вы можете видеть, что StencilJS использует декораторы точно так же, как Angular, и метод рендеринга точно так же, как компоненты класса React.
Пользовательский интерфейс выглядит следующим образом:
при наведении второго элемента списка.
Но почему я должен использовать веб-компоненты, мы все слышали, что React — это вещь…
Внедряя свои пользовательские элементы, вы гарантируете, что ваша работа всегда будет доступна, независимо от того, какие технологии используют потребители. Одно можно сказать наверняка, пока существует WWW, веб-компоненты останутся.
Мы, в компании Brain Information Technology, работаем над собственным набором веб-компонентов,
пожалуйста, сообщите нам, как вы думаете, сколько рабочих дней вы потратили в своей карьере на реализацию подобных компонентов в разных фреймворках?
Если вам нравятся новости о WWW, ознакомьтесь с историей моего колледжа здесь: https://medium.com/brainit/what-is-pwa-and-why-is-it-trending-in-the-mobile-world. -c33cec78f4d2
