Доброго времени суток, коллеги. Эта первая статья (вводная), далее будут подробные статьи по каждому из пакетов кастомных HTML элементов и веб-компонент. Разрабатывая веб интерфейсы на протяжении многих лет, мы заметили что веб разработка с каждым годом становится все сложнее и сложнее. В современных веб приложениях, императивный JavaScript занимает чуть ли не 100% всей кодовой базы, а декларативный HTML может вообще отсутствовать как таковой. Этот факт превращает любой такой веб проект в неподдерживаемого монстра всего за год-другой. Мы очень долго жили с этой болью и вот, наконец, мы решили это исправить, сделав нечто настолько простое и удобное, что способно в корне изменить разработку современных веб приложений. Хочется сказать, что данная статья и сам UiWebKit будут полезны преимущественно прогрессивным веб разработчикам, так что будьте готовы к нестандартным идеям.

Не знаю как вам, а мне всегда хотелось писать как можно меньше JavaScript (Typescript) кода. Не люблю я "кодить" (хотя и умею)! И вообще, считаю что писать много кода - это плохо, очень плохо. Ведь его потом нужно еще поддерживать, обновлять, рефакторить и т.д. Зачем мне это? Сложно это все!

С годами я начал все больше задумываться: а что если найти пресловутую "серебряную пулю" и не писать код совсем. Да-да, не писать код совсем! И это оказалось возможным, но об этом чуть позже. Кстати, под словом "код", подразумевается именно кастомный программный код (JavaScript). Это важно!

И вот начались поиски. Меня заинтересовал стандарт кастомных HTML элементов (Custom Elements & Web Components). Хотелось воспользоваться уже готовыми решениями, а не создавать свой "велосипед", но результатом поисков стал список из дюжины полудохлых библиотек с не совсем приятным дизайном этих самых элементов. В этом списке был даже вариант с кастомными элементами, которые можно было протестировать только после покупки за несколько сотен американских президентов. И это очень раздражает удручает!

Было принято решение что так больше не может продолжаться и нужно брать ситуацию в свои руки. В начале было перепробовано множество инструментов для создания веб-компонент и кастомных HTML элементов, даже предпринималась попытка создания своего велосипеда инструмента на основе lit-html, но в итоге выбор пал на StencilJS. Он позволяет нам не тратить время на автоматизацию и оптимизацию сборок и многократно ускоряет создание новых компонент, а этих самых компонент у нас уже больше тысячи! Но не обошлось и без ложки дёгтя (use composition over inheritance). В целом это отличная тенденция, но по моему мнению, в конкретных случаях наследование имеет свои преимущества.

И вот, с присущим нам максимализмом, началась разработка не просто кнопок и всяких переключалок, а целой экосистемы кастомных HTML элементов. Был разработан специальный Kit (набор), позволяющий не писать JavaScript код совсем. Не буду описывать его в этой статье, только скажу что получилось даже лучше наших самых смелых ожиданий!

Кстати, уже сейчас можно оценить работу целого веб-приложения с документацией и даже стартового приложения, работающих только на кастомных HTML элементах и веб компонентах. Там действительно нет ни единой строчки кастомного JavaScript кода.

И вот результаты наших трудов:

UI Dev Kit - это тот самый набор, что позволяет не писать кастомный код совсем! Можно сказать, что это своего рода декларативный HTML фреймворк, который прокачивает сам HTML до версии X++.

Material Design Kit - набор веб компонент и HTML элементов, содержащих в себе официальные Google’s Material Design компоненты и строго придерживающийся данного дизайна. Компоненты практически не имеют своего кода и выступают только в роли так называемой обертки.

Pro Components Kit - набор веб компонент и HTML элементов, добавляющих еще больше функционала. Здесь находятся компоненты, которые никогда не появятся в Material Design Kit (из-за спецификаций).

Icons Kit - набор HTML элементов для простого использования иконок от Bootstrap, Font Awesome и Material Design. Есть как шрифтовые, так и SVG иконки. Ещё есть флаги стран и компоненты для кастомизации (цвет, размер, позиция, анимация). Является Open Source с MIT лицензией. Размещен на Github код и демо.

Локализация - первый виджет без единой строчки кода (code free) и беспрецедентной кастомизацией. Разработан только с Material Design Kit и UI Dev Kit. Является Open Source с MIT лицензией. Размещен на Github этому адресу.

Статичный шаблон - стартовое веб-приложение без единой строчки кода (code free). Включает в себя практически все продукты UiWebKit и полностью поддерживает SEO. Является Open Source с MIT лицензией. Размещен на Github по этому адресу. Планируется ещё динамический шаблон и шаблон всё-в-одном.

А что такое UiWebKit?

UiWebKit - это Next Gen HTML. Это набор из более чем 1000 кастомных HTML элементов (Custom Elements & Web Components). А еще это целая экосистема, позволяющая создавать UI виджеты или даже целые веб приложения без программирования, а только лишь HTML версткой. И это очень удобно!

И чем это лучше фреймворков и библиотек на JavaScript?

По нашему мнению, декларативный HTML проще в использовании и поддержке чем императивный JavaScript. Кроме того, многие Best Practice говорят, что если есть возможность реализовать что-то, только лишь с помощью HTML и/или CSS, тогда нужно смело выбирать именно этот вариант. Согласитесь, разбираться в HTML шаблоне гораздо проще и удобнее, чем в сложном и запутанном JavaScript коде. Еще приятный бонус - это скорость разработки, с кастомными HTML элементами она стала в разы быстрее. Разработка превращается в подобие сборки кастомизируемого конструктора! Но только не подумайте что UiWebKit это визуальный конструктор сайтов. Во-первых, для создания чего-либо, вам потребуются хотя бы базовые знания HTML. Во-вторых, UiWebKit компоненты могут легко и просто интегрироваться куда угодно, ведь это всего лишь HTML теги. И в третьих, в отличие от визуального конструктора, с помощью UiWebKit компонент можно реализовать все что угодно и они очень легко кастомизируются!

Как это подключается?

Подключение UiWebKit в основном происходит по старинке, через тег script в теге head веб страницы и занимает всего несколько секунд. Есть версия как для современных браузеров, так и с поддержкой IE11. Это удобно еще и тем, что так как JavaScript/Typescript нам уже не нужен, то и все системы сборки тоже оказываются не нужными. А значит мы экономим время (и нервы) не только на этапе развертывания проекта, но и после каждого изменения. Но, а если же ваш проект со системой сборки, тогда для него все же есть npm пакеты (@uiwebkit/...). Приятным бонусом будет еще и то, что код компоненты подгружается только тогда, когда HTML элемент появляется в области видимости на странице (есть lazy-loading), а это очень сильно экономит трафик, время загрузки и ресурсы системы. 

Универсальное - враг хорошего?

Кастомизация - это именно то, чего критически не хватает подавляющему числу программных продуктов. Разработать стандартное решение, которое работает именно так, как задумывал его автор, намного проще, чем создать гибкое и настраиваемое решение. В принципе, стандартное решение, которое подходит большинству пользователей, тоже имеет право на существование. Но мы решили реализовать сразу несколько версий кастомных HTML элементов почти для каждой компоненты (там где это необходимо).

А вот и они:

1. Кастомный элемент (Custom Element) - это стандартный вид. Почти каждая функциональная компонента представлена в данном виде. Характеристики: удобство и простота - максимальный уровень; гибкость и настраиваемость - средний и высокий уровень (со свойством “only”).

2. Веб компонент (Web Component) - это так называемый "черный ящик". Имеет собственный HTML шаблон и стили, которые изолированы по максимуму. Характеристики: надежность и безопасность - максимальный уровень; гибкость и настраиваемость - почти нулевой уровень. Данный вид необходим довольно редко, поэтому реализован далеко не всегда.

3. Обёртка (Wrapper) - модифицирует только стандартные HTML теги. Не имеет собственного HTML шаблона. Является очень удобным для тонкой настройки и когда нужно иметь доступ ко внутреннему содержимому, например: button, input, и т.д. Характеристики: удобство и простота - средний уровень; кастомизируемость - высочайший уровень.

Решенные проблемы:

Совместимость и портативность. Эти качества крайне необходимы для переиспользования уже разработанных частей интерфейса, что в свою очередь, очень сильно ускоряет разработку, а следовательно и увеличивает скорость выхода нового продукта на рынок. Раньше случалось так, что мы создавали классную часть интерфейса, но не могли использовать ее в других проектах в силу технических особенностей. Мы просто не могли ее интегрировать. UiWebKit - это всего лишь HTML. И даже части интерфейса разработанные на UiWebKit - это всё тот же HTML. А HTML работает и интегрируется в любой веб проект!

Масштабируемость и поддержка - это проблема крупных проектов с историей разработки от года и более. Особенно эта проблема актуальна для бывших стартапов и проектов с очень быстрым циклом разработки. Обычно такие проекты строятся как монолит, так как это проще на начальных этапах. Можно сравнить это с единственным зданием, которое постоянно растет ввысь (вертикальная масштабируемость). Пристраивать что-то на верхних этажах и изменять на нижних со временем становится все сложнее, дольше и опаснее, так как все может обвалиться. Постоянная выплата технического долга не решает эту проблему, ведь он также растет в геометрической прогрессии. В микросервисной архитектуре, напротив, мы строим не одно монолитное здание, а множество зданий помельче. Можно сказать, что мы строим некое подобие города (горизонтальная масштабируемость). На начальных этапах, разработать план целого города гораздо сложнее, чем заложить фундамент одного здания. В этом нам поможет UiWebKit. Продукты UiWebKit построены на компонентной архитектуре, они независимы и могут работать автономно. Это позволяет создавать части интерфейса, которые очень слабо связаны друг с другом (только данными). Мы можем строить столько небольших зданий, сколько нам потребуется. Модифицировать и переносить их будет гораздо проще, быстрее и безопаснее, чем один огромный монолит. Главное условие - они всегда должны оставаться маленькими.

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

UPD: Версионирование:

Используется semver (x.x.x). Планируется выпуск бета-версии новой мажорной версии (с поломкой обратной совместимости) почти сразу же после релиза стабильной версии. Все фичи и фиксы со стабильной версии попадают и в бета-версию. Бета-версия будет в разработке примерно год, затем станет стабильной и поддержка предыдущей стабильной версии прекратится. Таким образом, можно получать новый функционал и фиксы, которые ломают обратную совместимость, сразу же, не дожидаясь стабильной версии.

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