Модули JavaScript и компоненты

Компоненты DOM

Модули JavaScript и компоненты

У сообщества JavaScript есть проблема с семантикой

Вот интригующий вопрос собеседования: можете ли вы описать разницу между компонентом и модулем?

Если вы потенциальный кандидат, вы можете начать ерзать на своем месте, когда услышите этот вопрос. А если вы менеджер по найму, вы можете начать задаваться вопросом, почему такой вопрос начального уровня вызвал столько испуга.

Да, мы можем согласиться, что это всего лишь семантика. Но если вы поищете «модули против компонентов», вы обнаружите, что ни один из основных ответов не может полностью согласиться с тем, что к чему. Вот как начинается путаница:

«Модуль больше, чем компонент. Компонент относительно невелик ». [1]

«Модули имеют дело со статическим кодом и зависимостями времени компиляции, тогда как компоненты имеют дело с экземплярами и зависимостями времени выполнения». [2]

И еще есть это менее чем полезное определение, которое звучит подозрительно рекурсивно: «Модули добавляются так, чтобы можно было легко идентифицировать каждую из функций. Это называется программным обеспечением на основе компонентов. В этом есть разные компоненты программного обеспечения, и каждый из компонентов представляет собой модульный. . . часть системы ». [3] Какого черта !?

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

Популярный фреймворк PHP, Joomla, говорит: «Компонент всегда отображает свои результаты в основной области шаблона. С другой стороны, модули обычно представляют собой другие части вокруг основного контента ». [4]
Для сообщества Java модуль - это код, который распространяется в JAR, а компонент - это «основной объект пользовательского интерфейса в Java; все, что вы видите на дисплее в приложении Java, является компонентом ». [5]
Для сообщества Python модули - это уровень абстракции для «разделения кода на части, содержащие связанные данные и функциональность». [6]

А еще есть JavaScript

В JavaScript мы узнаем, что «Модуль - это просто файл. Один сценарий - это один модуль. Так просто." [7]

Но, конечно, в JavaScript нет ничего простого: есть модули AMD, модули CommonJS, модули UMD и собственные модули ES.

И когда мы, наконец, погрузимся в беспорядок с модулями, у нас все еще останется множество определений для «компонента», и именно здесь путаница начинает становиться самоуверенной.

Разработчик React будет полагаться на понимание того, что «компоненты подобны функциям JavaScript - они принимают произвольные входные данные (называемые« реквизитами ») и возвращают элементы React, описывающие, что должно появиться на экране». [8]
Разработчик Vue прочитает документацию и обнаружит, что «компоненты - это многократно используемые экземпляры с именем - они принимают те же параметры, что и корневой экземпляр, такие как данные и перехватчики жизненного цикла». [9]
Разработчик Svelt обнаружит, что «компоненты являются строительными блоками приложений; они написаны с использованием расширенного набора HTML со сценарием, стилем и разметкой в одном файле ». [10]
Наконец, разработчик Angular столкнется с аналогичным определением для «компонента», но будет встревожен, узнав, что слово «модуль» имеет другое значение: «модули - это контейнеры для связного блока кода, предназначенного для домена приложения. Они могут содержать компоненты, которые представляют собой набор директив, связанных с шаблоном ». [11]

Любой, кто говорит, что все они сводятся к одному и тому же, может быть прав. Или они?

Компонентная модель

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

Цитата из вики WHATWG: «Модель компонентов представляет всестороннюю поддержку для создания элементов DOM». Далее объясняется, что «Модель компонентов формализует концепцию слабосвязанных, согласованных единиц поведения на веб-платформе». [12]

Это было в то время в истории, когда можно было объяснить это так - к всеобщему удовольствию: «Примеры включают менеджеры компоновки, комбинации виджетов Dojo и jQuery, изолированные виджеты, такие как кнопки Like / + 1, и встроенный HTML. сами элементы ».

Потребовалось целое десятилетие, чтобы реализовать эту всесторонность, но сегодня все основные браузеры имеют встроенную поддержку четырех столпов модели:

HTML Пользовательские элементы
W3C Теневой ДОМ
HTML элементы ‹template› и ‹slot›
Модули ES с использованием экспорта / импорта

Кажется, что вся эта семантическая путаница указывает на провал в маркетинге. Кто когда-нибудь слышал о компонентной модели? Да, мы все слышали о «веб-компоненте», но мы не можем распознать это как нечто отличное от неприукрашенного слова «компонент».

В последнее время я слышу фразу ванильный JavaScript, указывающую на то, что в решении для кодирования не задействованы никакие фреймворки или библиотеки. Таким же образом, похоже, что ванильный компонент может быть хорошим выходом из этого беспорядка. Лично мне нравится называть их Компоненты DOM, отдавая должное там, где это необходимо.

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