В 435-м выпуске Веб-стандартов обсуждали ванильный дауншифтинг. Поводом для этого послужил запуск сайта Plain Vanilla. На этом сайте демонстрируются подходы к созданию компонентов, стилизации, роутингу, модульности, деплою, тестированию и менеджменту состояния с использованием стандартных HTML, CSS, JavaScript и Web API. Без фреймворков, сборщиков, библиотек и прочих инструментов. Проект интересен как минимум тем, что показывает возможности современного веба. Полезно для тех разработчиков, которые много работают в экосистемах фреймворков и мало смотрят за их пределы. Несмотря на ряд спорных моментов, идея классная.
Одно из замечаний к таким проектам обычно звучит так: “круто, автор сделал todo app на vanilla, а как насчёт полноценного приложения”? Тут мне вспомнился доклад “Отказаться от зависимостей и не умереть” Ильи Черторыльского с конференции Frontendconf. Он в качестве эксперимента поставил себе задачу разработать полноценное приложение в React-стиле без использования зависимостей и посмотреть, насколько современные возможности далеко продвинулись.
Говоря о технических деталях:
- Используется VSCode с плагином для подсветки теговых шаблонных литералов
- Нет
node_modules, package.json, package-lock.json, сторонних пакетов и этапа сборки, весь код в папке public- React-подобная структура component/container с корневым компонентом
App и монтированием в точке входа index.js- Простая типизация при помощи
instanceof и подсказки IntelliSense- Стандартные браузерные ES-модули
import/export-
<script type="importmap"> для алиасов путей к модулям-
jsconfig.json для настройки алиасов в VSCode для перехода к файлу по клику (оказывается, такой файл существует для обычного JS, по аналогии с tsconfig.json)- Роутинг на веб-компонентах и History API
- Импорт стилей через Import Attributes (
import style from 'style.css' assert { type: 'css' };). Это уже практически стандарт (Stage 3) с той лишь разницей, что синтаксис с assert заменили на with- Работа с объектом
CSSStyleSheet() и adoptedStylesheet. Илья сказал, что это только для ShadowRoot, но на самом деле можно использовать и для Document- В качестве компонентной модели используются веб-компоненты, в частности Custom Elements и Shadow DOM с классом-обёрткой для более удобного DX (реализован простой DOM diffing, привязки обработчиков событий, ref, storage и т.д.)
-
DOMParser для парсинга шаблонов и точечного обновления DOM- Element Internals, Form-associated Custom Elements и Constraint Validation API для работы веб-компонентов с формами и валидацией
-
<dialog> для создания модальных компонентов- Intl API для локализации дат
В итоге удалось создать приложение внутреннего корпоративного портала для разработчиков. Достаточно большая структура, около сотни компонентов, модалки, формы, авторизация. Получившийся проект дорабатывали как опытные синьоры, так и стажёр. В итоге все разобрались с кодом и смогли реализовать поставленные задачи. По словам Ильи, переход на такой подход удался 50/50, потому что остальная часть проектов в компании написана на React, UIKit сделаны под React и портировать всё это долго и лениво.
Я считаю его опыт успешным. Илья за трое выходных разработал тонкую обёртку над браузерными API и на этом смог построить полноценное работающее приложение без сторонних библиотек и сборщиков. Код читаем, написан в React-стиле, работает достаточно быстро, разработчикам понятно. Это говорит о том, что эксперимент можно считать успешным. Иными словами, на нативных технологиях можно разработать приложение, но не без нюансов, конечно.