Принятие стандартов лучше, чем погоня за рамками

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

Вместо этого нам нужен простой способ добиться хороших результатов.

Итак, для единообразия я решил следовать стандартному шаблону для всех компонентов DOM, которые я построил для достижения этих хороших результатов. Хотя есть соблазн превратить этот шаблон в основу, я намеренно сопротивлялся этому побуждению. Это оказалось удачным решением.

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

Итак, для меня фреймворки отсутствуют, а шаблоны присутствуют. Но какой шаблон?

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

Моя философия для компонентов DOM состоит в том, чтобы охватить стандарты, разработанные Консорциумом World Wide Web (W3C), Ecma International и Инженерной группой Интернета (IETF). Это совещательные органы, которые так усердно работали, чтобы дать нам возможность разметить, стилизовать, создать сценарии и обеспечить удобство работы в Интернете на разнообразном наборе аппаратных устройств.

Эта философия, состоящая из пяти частей, включает изоляцию, разделение, модуляризацию, конфигурацию и передовые методы.

1. Изоляция

raison d’être компонента DOM. Здесь и вписывается теневой DOM. Он устанавливает брандмауэр между основным документом и экземпляром компонента. Одно не может повлиять на другое. Кроме того, очень важным следствием этого является то, что мой компонент не может вызвать сбой вашего компонента.

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

Идентификатор типа #xyzFrame001 можно сократить до #frame. Более того, селектор CSS для якорных элементов, таких как a.specialLink {...}, может быть уменьшен до a {...}, что во многих случаях полностью устраняет необходимость в именах классов.

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

2. Разделение

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

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

Скрытый бонус этого подхода - кеширование. HTML-шаблоны загружаются один раз и кэшируются браузером, объявления CSS загружаются один раз и кешируются браузером, модули JavaScript загружаются один раз и кешируются браузером - все автоматически, без каких-либо усилий с нашей стороны.

3. Модуляризация

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

Примечательно, что это означает отсутствие транспиляции или прокладок, никаких накладных расходов на манифест или упаковку, а также отсутствие упаковщиков, разделителей или загрузчиков. Это означает, что мы можем просто написать наши сценарии и развернуть их прямо на сервере. Мы можем заново открыть для себя удовольствие от интерпретируемого JavaScript.

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

4. Настройка

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

Стандарты DOM предоставляют нам три способа предоставить эту настройку потребителям компонентов: с помощью элементов со слотами, с атрибутами HTML и с переменными CSS. Они являются родными для языков HTML и CSS, поэтому используют тот же синтаксис и следуют тем же идиоматическим выражениям, что и все, что мы уже узнали. В отличие от реквизита, они выглядят и ощущаются как настоящие, потому что таковыми являются.

5. Передовой опыт

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

  • Используйте современный сервер HTTP / 2 для устранения задержки и перемещения файлов компонентов с сервера в браузер за один непрерывный сеанс.
  • Отказ от устаревших жизненных циклов транспилятора / сборщика / сплиттера / загрузчика. Примите новый подход ESNext к асинхронной, модульной и кэшируемой доставке.
  • Примите тот факт, что сценарии браузера основаны на объектной модели. Используйте в своих скриптах классы и экземпляры объектов. В конце концов, вся DOM является доказательством того, что объектно-ориентированное программирование работает.
  • Перестаньте гнаться за undefined ошибками. Замените анонимные объекты объявленными классами, которые имеют четко определенные формы и правильную инициализацию конструктора.
  • Используйте события вместо обратных вызовов. Помните, что самым большим прорывом 80-х было программирование, управляемое событиями. Это то, что позволяет нам работать с мышью и окнами. Это оригинальный неблокирующий шаблон кодирования.

Заключение

Катализаторами этого манифеста являются компоненты DOM с открытым исходным кодом. Для более глубокого изучения философии, лежащей в основе этого, см. 7 аспектов веб-компонентов.

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