UiWebKit — Next Gen HTML. Подъём-переворот в мире веб-разработки
Доброго времени суток, коллеги. Эта первая статья (вводная), далее будут подробные статьи по каждому из пакетов кастомных 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.
Статичный шаблон — стартовое веб-приложение без единой строчки кода (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 элементов почти для каждой компоненты (там где это необходимо).
А вот и они:
Кастомный элемент (Custom Element) — это стандартный вид. Почти каждая функциональная компонента представлена в данном виде. Характеристики: удобство и простота — максимальный уровень; гибкость и настраиваемость — средний и высокий уровень (со свойством «only»).
Веб компонент (Web Component) — это так называемый «черный ящик». Имеет собственный HTML шаблон и стили, которые изолированы по максимуму. Характеристики: надежность и безопасность — максимальный уровень; гибкость и настраиваемость — почти нулевой уровень. Данный вид необходим довольно редко, поэтому реализован далеко не всегда.
Обёртка (Wrapper) — модифицирует только стандартные HTML теги. Не имеет собственного HTML шаблона. Является очень удобным для тонкой настройки и когда нужно иметь доступ ко внутреннему содержимому, например: button, input, и т.д. Характеристики: удобство и простота — средний уровень; кастомизируемость — высочайший уровень.
Решенные проблемы:
Совместимость и портативность. Эти качества крайне необходимы для переиспользования уже разработанных частей интерфейса, что в свою очередь, очень сильно ускоряет разработку, а следовательно и увеличивает скорость выхода нового продукта на рынок. Раньше случалось так, что мы создавали классную часть интерфейса, но не могли использовать ее в других проектах в силу технических особенностей. Мы просто не могли ее интегрировать. UiWebKit — это всего лишь HTML. И даже части интерфейса разработанные на UiWebKit — это всё тот же HTML. А HTML работает и интегрируется в любой веб проект!
Масштабируемость и поддержка — это проблема крупных проектов с историей разработки от года и более. Особенно эта проблема актуальна для бывших стартапов и проектов с очень быстрым циклом разработки. Обычно такие проекты строятся как монолит, так как это проще на начальных этапах. Можно сравнить это с единственным зданием, которое постоянно растет ввысь (вертикальная масштабируемость). Пристраивать что-то на верхних этажах и изменять на нижних со временем становится все сложнее, дольше и опаснее, так как все может обвалиться. Постоянная выплата технического долга не решит эту проблему, ведь он также растет в геометрической прогрессии. В микросервисной архитектуре, напротив, мы строим не одно монолитное здание, а множество зданий помельче. Можно сказать, что мы строим некое подобие города (горизонтальная масштабируемость). На начальных этапах, разработать план целого города гораздо сложнее, чем заложить фундамент одного здания. В этом нам поможет UiWebKit. Продукты UiWebKit построены на компонентной архитектуре, они независимы и могут работать автономно. Это позволяет создавать части интерфейса, которые очень слабо связаны друг с другом (только данными). Мы можем строить столько небольших зданий, сколько нам потребуется. Модифицировать и переносить их будет гораздо проще, быстрее и безопаснее, чем один огромный монолит. Главное условие — они всегда должны оставаться маленькими.
В итоге, мы получаем не только очень быструю и удобную разработку, но и простую и длительную поддержку вашего проекта/продукта.
Всем спасибо! Ставьте звездочки на Github и других ресурсах, ведь чем популярнее продукт будет, тем быстрее он будет развиваться. Следите за нашими новостями в соцсетях. Пользуйтесь в удовольствие, берегите себя, оставайтесь здоровым и продуктивным!
