Ui фреймворк что это

UI фреймворки

UI фреймворк обеспечивает отображение пользовательского интерфейса.

Twitter Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.

Dojo — свободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов. Разработка библиотеки была начата Алексом Русселом в 2004 году. Библиотека находится под двойной лицензией: BSD License и Academic Free License. Dojo Foundation — некоммерческая организация, созданная для продвижения Dojo. Dojo используется в Zend Framework, начиная .

Enyo — JavaScript framework. Разрабатывался для замены Mojo (еще один JS framework) в недрах Palm и HP. Первые версии входили в состав WebOS, а позднее выделился в отдельный проект.

Foundation is the first and most advanced responsive, front-end framework in the world.

Framework7- HTML-фреймворк для разработки гибридных приложений для iOS7. Главная цель Framework7 – дать вам возможность создавать приложения для iOS 7 на основе HTML, CSS и JavaScript.

For iOS, Android, Windows 8, BlackBerry 10, Tizen, Chrome OS & anything else with HTML5. Widgets, lists and scrolling goodness using JavaScript & CSS3. Make native mobile apps or web apps with the same code. Works great with PhoneGap.

A Zepto/jQuery plugin for mobile web development on the iPhone, Android, iPod Touch, and other forward-thinking devices.

jQuery Mobile — сенсорно-ориентированный веб фреймворк (так же известен как мобильный фреймворк), разрабатывается командой jQuery, создателей jQuery. Разработка сфокусирована на кросс-браузерности с уклоном в сторону смартфонов и планшетов. JQuery Mobile совместим с прочими мобильными фреймворками, такими как PhoneGap, Worklight и другими.

A front-end framework for building HTML5 mobile apps with a native look and feel. CSS3 Transitions optimized for mobile performance. Swipable carousels using flickable.js. Integration with backbone.js views and routers. Ratchet CSS UI components. Try loading this page on a mobile phone or try our «simulator» to the right.

Sencha Touch — мобильный HTML5 фреймворк с более чем 50 компонентами, темами для современных платформ и встроенной MVC системой.

Create cross-platform mobile web apps based on Backbone.js that look stunning native. The-M-Project is a mobile HTML5 JavaScript framework that helps you build great mobile apps, easy and fast.

CSS для быстрых мобильных и веб приложений от Adobe.

Zepto это минималистичная JavaScript библиотека для современных браузеров, совместимая с jQuery. Если вы знаете jQuery, то знаете и Zepto.

5 лучших фреймворков для верстки: как они устроены и есть ли у них минусы

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

Bootstrap

Bootstrap на сегодняшний день является одним из самых популярных CSS-фреймворков — с его помощью создано около 22% всех сайтов в мире. Чаще всего его используют для создания адаптивных сайтов, а также мобайл-ферст сервисов. Сейчас последней версией фреймворка является Bootstrap 5. Документацию к Bootstrap вы можете почитать здесь .

Плюсы Bootstrap

Адаптивная сетка Bootstrap

Благодаря Bootstrap разработчикам и верстальщикам не нужно тратить рабочее время на создание собственной сетки — сервис позволяет автоматически построить адаптивную сетку, основанную на Flex-модели. При этом пользователи могут как менять эту адаптивную сетку под свои нужды, так и оставить версию по умолчанию, потому что она будет самостоятельно меняться в зависимости от наполнения контейнеров контентом и особенностям сайта.

Адаптивные изображения

Bootstrap поставляется со своим кодом для автоматического изменения размера изображений в зависимости от текущего размера экрана пользователя. Для этого нужно просто добавить к изображениям класс .img-responsive — все остальное сделают стандартные правила CSS.

Компоненты Bootstrap

Bootstrap поставляется с огромным набором компонентов , которые можно легко использовать. Среди них:

• Панели навигации
• Выпадающие списки
• Индикаторы прогресса

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

JavaScript в Bootstrap

Тем, кому не хватает возможностей Bootstrap, сервис позволяет использовать JS. Это дает разработчикам еще больше возможностей для интерактивности.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Документация Bootstrap

Документация у Bootstrap — одна из лучших на рынке. Каждый фрагмент кода подробно описан и объяснен.

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

Настраиваемость Bootstrap

Когда дело доходит до таких фреймворков как Bootstrap, одной из главных проблем является их размер — их вес может замедлять первую загрузку страницы. Например, текущая версия CSS-файла Bootstrap весит 119 КБ, что достаточно много.

Bootstrap позволяет настраивать, какую функцию пользователи собираются встроить в свою загрузку. Можно просто отменить загрузку функций, которые не нужны для работы данного сайта — это снижает вес CSS-файла и ускоряет время загрузки страницы.

Сообщество Bootstrap

Как и во многих опенсорс-проектах, за Bootstrap стоит большое сообщество дизайнеров и разработчиков. Размещение на GitHub позволяет разработчикам легко изменять кодовую базу Bootstrap и вносить в нее свой вклад. Это позволяет core-team в Bootstrap действительно понимать, чего не хватает пользователям их продукта, и быстро реализовывать необходимые фичи.

Внешние шаблоны Bootstrap

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

Продолжайте учиться: На Хекслете есть профессия Верстальщика — в ней вы узнаете как основы HTML и CSS, так и самые современные технологии и концепции для верстки. В этой профессии изучается и Bootstrap

Минусы Bootstrap

Непонятный синтаксис Bootstrap

В самом начале знакомства с Bootstrap некоторые детали его синтаксиса могут сбивать с толку. Например, в системе сеток для того, чтобы создать столбец, занимающий треть экрана, нужно добавить к нему класс .col-md-4. При этом интуитивно сначала кажется, что вместо четверки нужно поставить тройку — ведь мы говорим о трети экрана, а не о четверти. Однако Bootstrap использует систему из 12 столбцов, а 4 — это треть из 12, поэтому такая логика имеет право на существования, хотя первоначально кажется очень неинтуитивной.

Файлы начальной загрузки очень большие

Мы уже писали об этом выше — CSS-файлы Bootstrap весят достаточно много, и опытные разработчики могут вручную сгрузить ненужные им функции. Однако начинающим программистам это сделать самостоятельно практически нереально.

Tailwind

Еще один CSS-фреймворк — Tailwind, который называют «Bootstrap будущего», предлагает огромный каталог классов и инструментов, с помощью которых разработчик может облегчить стилизацию сайта — либо приложения. Эта CSS-библиотека упрощает стилизацию HTML при помощи большого количества разных классов — при этом, в отличие от Bootstrap, который предлагает готовые компоненты, в Tailwind можно создавать конкретные свойства, и применять их уже дальше на разные компоненты.

Например, в Taildwind можно применить классы bg-blue-500 py-2 px-4 rounded к кнопке, сохранить ее и назвать .btn, а потом постоянно использовать в тех местах, где это нужно (да и не нужно тоже).

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

Плюсы Tailwind

Tailwind легко настраивается

У фреймворка есть файл с конфигурацией по умолчанию tailwind.config.js, в котором можно настроить цветовые палитры, стили, темы и так далее.

Tailwind имеет собственные служебные шаблоны

Это решает множество проблем, начиная с определения классов и их организацию, заканчивая неймингом классов. Такие служебные классы сильно упрощают процесс создания пользовательских компонентов — теперь не нужно прям погружаться в разработку или верстку, можно просто применить функцию theme() и все заработает.

Интеграция с PurgeCSS

Этот фреймворк можно оптимизировать с помощью PurgeCSS. С его помощью можно уменьшить размер файла, отсканировав HTML и удалив неиспользуемые классы. Обычно, по мере увеличения размера проекта, размер файла CSS тоже увеличивается — однако это не происходит у Tailwind из-за стандартизированного набора классов и настроенной оптимизации. Однако такая возможность есть и у других фреймворков, просто у Tailwind эта функция наиболее оптимизирована.

Адаптивность

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

Коммьюнити

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

Прокачивайте свой уровень программирования: На Хекслете есть несколько десятков треков — специальных курсов для опытных программистов, позволяющие повысить уровень компетентности разработчика в разных направлениях.

Минусы Tailwind

Огромное количество классов, которые не используются

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

Практики написания кода

Tailwind приучает пользователей писать стили inline.

Material-UI

Material-UI — библиотека с открытым кодом, которая включает в себя компоненты React , реализующие Material Design от Google. Она построена с использованием Less (Leaner Style Sheets) — обратно совместимым языковым расширением для CSS. Запустившись в 2014 году — вскоре после того, как появился React, Material-UI набрал более 68 тыс. звезд на GitHub и на сегодняшний день является чуть ли не лучшей библиотекой для пользовательских интерфейсов для React.

Плюсы Material-UI

Документация

Material-UI имеет очень подробную документацию. Это сильно упрощает навигацию по фреймворку и полностью раскрывает все его возможности.

Регулярные обновления

Фреймворк Material-UI постоянно обновляется — разработчики развивают проект и активно расширяют его функционал, убирая ошибки

Хороший вкус

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

Минусы Material-UI

Мутабельность

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

Проблемы с производительностью

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

Принадлежность к экосистеме Google

До конца непонятно, хорошо это или плохо — но Material-UI все-таки является библиотекой, которую активно продвигает Google. Это следует учитывать разработчикам, которые хотят создавать платформенно-независимый UX (например, приложение, которое должно хорошо работать и на iOS).

Foundation

Если перейти на сайт Foundation , можно увидеть надпись «Самый продвинутый в мире адаптивный интерфейсный фреймворк» — и, в общем, это является не только маркетинговым лозунгом. Foundation был разработан так, чтобы естественно сочетаться с фреймворком Rails — и поэтому он перенял несколько «буддийских» руководящих принципов Rails.

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

При этом Foundation — проект с открытым исходным кодом, который ранее поддерживала компания ZURB. С 2019 года этот проект поддерживают только волонтеры.

Сейчас Foundation не имеет такого же влияния на фронтенд-разработчиков, как Bootstrap или хотя бы Tailwind, однако сейчас этот фреймворк постепенно начинает набирать обороты и распространяться среди программистов и верстальщиков. Например, согласно данным BuiltWith, 11,8% из 100 тыс. лучших сайтов используют Bootstrap. И 2,3% — Foundation Framework.

Foundation имеет модульную структуру и состоит в основном из стилей Sass. По сути, фреймворк построен на основе сетки в 940 пикселей, которая является адаптивным макетом.

Плюсы Foundation

Большое количество инструментов

Технически не очень верно утверждать, что Foundation — это CSS-фреймворк. Изначально он создавался как модульный набор инструментов, предназначенных для решения практически всех видов интерфейсных задач. В Foundation есть отдельные инструменты для веб-сайтов, отдельные — для электронной почты и так далее. Также Foundation поставляется с интерфейсом командной строки — это очень порадует разработчиков, которые привыкли работать с Webpack или другими сборщиками модулей.

Гибкость

В отличие от Bootstrap, Foundation был создан для того, чтобы предоставить разработчику полный контроль над своим пользовательским интерфейсом. В результате Foundation будет казаться новичку чрезвычайно сложным. Однако причина в том, что Foundation не навязывает разработчику какой-либо язык стилей, а стремится быть тем, чем он является: отличным фреймворком CSS.

Больше, чем просто элементы интерфейса

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

Минусы Foundation

Небольшое сообщество

У Foundation достаточно небольшое сообщество, и найти разработчика, который знает Bootstrap, все же намного проще. Поэтому и найти решение сложной задачи тоже сложнее на Foundation, чем на Bootstrap.

Сложность

Если разработчик привык к Bootstrap или к ванильному CSS, Foundation будет казаться очень и очень сложным. Слои внутри слоев, компоненты с компонентами, бесконечные возможности настройки. Но это вытекает из плюсов Foundation, поэтому с этим стоит смириться.

Кошмар для перфекционистов

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

UIkit

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

Но UIkit — достаточно автономная система, поэтому ее нельзя расширять или изменять. При этом как и Bootstrap, UIkit работает со своим JavaScript. Это значит, что вы можете использовать jQuery для манипуляций с DOM, но использование виртуальной структуры DOM, такой как React — невозможно.

По сути, UIkit — комплект готовых компонентов для различных частей сайтов.

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

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

18 популярных UI-фреймворков, с помощью которых можно сделать удобный и отзывчивый сайт

Материал обновлен в январе 2022 года. Мы добавили еще 12 ресурсов.

В июле 2017 журналисты Теплицы социальных технологий подрoбно рассказывали об UX (User eXperience) опыте пользователя и UI (User interface) и пользовательских интерфейсах. В этой статье мы решили рассказать о том, какие существуют популярные UI-фреймворки с удобным и отзывчивым интерфейсом. Составить обзор замредактору Теплицы Наталье Барановой помогали веб-разработчик Оксана Климова и ведущий разработчик компании «Ананас» Егор Таланцев.

Эксперты посоветовали, какие именно фреймворки стоит использовать профессионалам и новичкам в работе, назвали их плюсы и минусы.

Framework — это набор инструментов, библиотек и готовых модулей, которые веб-разработчик может использовать при создании сайтов. «Сайты, построенные на фреймворках обладают большей доступностью, лучшей адаптивностью и большим соответствиям стандартам. Они развивают веб», — заметила Оксана Климова.

Плюсы фреймворков

1. Упрощает и ускоряет процесс. Веб-фреймворки экономят время и спасают от рутинных задач. Как обьясняет Оксана Климова, разработчику не нужно изобретать велосипед и тратить время на написание кода, который уже содержится во фреймворке. Он берет необходимые в его конкретном случае компоненты и как из кирпичиков складывает страницы сайта», — объяснила Оксана Климова.

«Компоненты фреймворка разработаны так, что не нужно будет думать об их совместимости, то есть по умолчанию все должно работать без каких-либо багов».

Оксана Климова

2. Содержат практически все, что необходимо при разработке. От простой css-стилизации текстов посредством добавления классов и даже javascript-компоненты модальных окон, табов, слайдеров.

3. Позволяют создавать респонсивные сайты. Сайты адаптируются под разные разрешения экранов: ноутбуки, планшеты, телефоны. «Только представьте, чтобы сайт стал респонсивным, блокам в верстке необходимо всего лишь прописать соответствующие классы, описанные в документации к фреймворку», — уточнила Оксана Климова.

4. Легко понять, как работать с незнакомым сайтом. «Если на сайте работают несколько человек или к вам в руки попадает сайт от другого разработчика, и проект построен на фреймворке, то вам будет намного проще понять, как что-то изменять или добавлять на нем, — объяснила Оксана Климова. — Все потому, что перед глазами всегда есть подробная документация к фреймворку».

Подборка фреймворков

Bootstrap

Самый популярный в мире ui-фреймворк. На данный момент существует две версии: 3.3.7 и v4.0.0-alpha.6. Оксана Климова предупредила, если нужно поддерживать Internet Explorer ниже 9 версии, то лучше использовать Bootstrap 3.3.7. Также Егор Таланцев заметил, что поддержка Bootstrap версии 3 приостановлена.

• позволяет строить адаптивные grid-сетки,
• включает в себя HTML и CSS-шаблоны оформления типографики, кнопок, форм, таблиц, навигационного меню и других элементов,
• содержит такие javascript-компоненты, как модальные окна, выпадающие меню, тултипы, аккордеоны, карусели.

«Можно найти множество плагинов и верстки под Bootstrap, то есть, если необходимо решить какую-то задачу, которую нельзя сделать «из коробки», в большинстве случаев решение найдется в сети», — поделилась Оксана Климова.

«В портфолио нашей веб-студии Ананас преобладают работы на UI-фреймворке Bootstrap. Мы запустили вместе с Теплицей проект «Ананас.ТСН». И благодаря Bootstrap нашей команде удалось собрать удобный, отзывчивый интерфейс за короткий срок и выиграть Хакатон ЖКХак от Теплицы».

Егор Таланцев

Bootstrap имеет очень подробную документацию, поэтому, по мнению Оксаны Климовой, отлично подходит как для новичков, так и для опытных разработчиков.

Также у фреймворка хорошая поддержка стандартов доступности для людей с инвалиностью.

Bulma

Во всех новых проектах веб-студия «Ананас» использует Bulma. Во многом, по мнению Егора Таланцева, этот фреймворк не уступает Bootstrap. Но единственный минус в том, что в нем нет JS. «Из-за этого функциональность некоторых компонентов, таких, как открытие модальных окон, приходится реализовывать самостоятельно», — поделился наблюдениями Таланцев.

Foundation

Foundation, также, как и Bootstrap, включает в себя HTML, CSS и JavaScript-шаблоны и поддерживает графическое ускорение для более плавных анимаций.

По словам Оксаны Климовой, Foundation в сравнении с Bootstrap предоставляет больше опций при выборе grid-сетки.

«Кроме того, команда Foundation работала с ведущими экспертами, чтобы переписать все компоненты фреймворка в соответствии со строгими стандартами доступности».

Оксана Климова

У Foundation также есть:

• обширная документация,
• поддержка,
• туториалы,
• многочисленные плагины.

Единственный минус, по мнению Климовой, этот фреймворк более сложен для освоения новичкам, нежели Bootstrap.

Semantic UI

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

UIKit

UIKit — это модульный фреймворк в стиле материального дизайна (Material Design — дизайн программного обеспечения и приложений операционной системы Android от компании Google). По словам Оксаны Климовой, он сильно отличается от Bootstrap и Foundation. Содержит более 30 очень гибких и адаптивных компонентов, включая модальные окна, выезжающие вкладки, параллакс и многое другое.

«Компоненты хорошо кастомизируются и позволяют легко создавать сложные интерфейсы».

Оксана Климова

Однако, эксперт отметила, что для него в сети можно найти уже не так много дополнительных материалов, как для Bootstrap и Foundation

Materialize

Этот фреймворк был разработан Google и является наиболее популярным в стиле Material Design. Также, как и предыдущие, он позволяет создавать адаптивные сайты.

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

«Документация к Materialize довольно понятная, использование не требует очень глубоких знаний в разработке», — уточнила Оксана Климова.

Dojo

Cвободная модульная библиотека JavaScript. Разработана с целью упростить ускоренную разработку основанных на JavaScript или AJAX приложений и сайтов.

Инструментарий экономит ваше время и масштабируется вместе с процессом разработки. Предоставляет все необходимое для создания веб-приложения. Языковые утилиты, компоненты пользовательского интерфейса и многое другое — все в одном месте, созданном для идеальной работы.

Enact

Фреймворк для разработки приложений на базе React. Enact был разработан для создания приложений собственного качества для самых разных встроенных веб-платформ, имеет полный набор настраиваемых виджетов, которые можно настраивать в соответствии с конкретным стилем каждого проекта.

jQuery Mobile

Cенсорно-ориентированный веб-фреймворк, также известный как фреймворк для мобильных устройств. JQuery Mobile совместим с прочими мобильными фреймворками: PhoneGap, Worklight и другими.

Девиз разработчиков: «пиши меньше, делай больше». Вместо того, чтобы писать уникальные приложения для каждого мобильного устройства или ОС, они предлагают разработать один фирменный адаптивный веб-сайт или приложение. Оно будет работать на всех популярных платформах для смартфонов, планшетов и компьютеров.

Ant Design

Ant Design — это язык дизайна и UI-библиотека React. В ней вы найдете более ста разнообразных компонентов, от типографики до таблиц. Ant-компоненты позволяют разработчикам экономить время. Например, благодаря готовым компонентам форм, разработчику не придется возиться с их созданием форм и валидацией.

Ant Design также экономит время дизайнеров. Ко всем компонентам приложены файлы Sketch и Figma.

Material-UI

Одна из самых популярных библиотек React. Это собрание простых и настраиваемых компонентов, благодаря которому ваши React-приложения станут быстрее, красивее и доступнее.

В Material-UI вы найдете больше ста компонентов. Кроме того, там есть больше тысячи иконок. Библиотека предоставляет файлы Sketch, Figma иAdobe Xd для дизайнеров (правда, на платной основе).

Chakra UI

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

Компоненты Chakra UI соответствуют спецификациям WAI-ARIA и имеют aria-* атрибуты.

Semantic UI React

Фреймворк UI-компонентов, основанный на принципах естественного языка. Содержит больше 50 компонентов. В них не используется jQuery: вся функциональность была заново реализована на React.

Fluent UI

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

Fluent UI разработана Microsoft. Дизайн Fluent используется для устройств и инструментов Windows 10 и Windows 11. Платформа имеет коллекцию утилит, React- и веб-компонентов для создания веб-приложений.

Evergreen

UI-фреймворк для создания веб-продуктов. Компоненты Evergreen построены на основе React UI Primitive с расчетом на пригодность для компоновки. Разработчики компонентов — команда Segment и внешние контрибьюторы. Содержит больше 30 компонентов.

Grommet

Фреймворк на базе React. Это доступность, модульность, адаптивность и красивые темы в одном аккуратном пакете. В Grommet вы найдете больше 60 компонентов. Он также предоставляет Sketch, Figma, AdobeXd файлы и больше 600 иконок.

Reakit

Reakit — библиотека низкоуровневых компонентов для создания доступных высокоуровневых UI-библиотек, систем дизайна и приложений на React. Отличается маленьким размером и высокой скоростью.

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

Mantine

Библиотека компонентов и хуков React с нативной поддержкой темной темы. В фокусе этой библиотеки удобство использования, доступность и удобство для разработчика.

Mantine содержит больше 120 настраиваемых компонентов и хуков: элементы ввода, кнопки, модальные окна, всплывающие окна, элементы типографики, управление макетами.

Изучение фреймворков

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

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

Оксана Климова

2. Необходимо выучить базу HTMLи CSS. По мнению Егора Таланцева, выучив основы можно без проблем использовать любой UI-фреймворк. Разработчик посоветовал такие сайты для обучения:

• HTML Book — основы HTML и CSS, а также справочник всех HTML тэгов;
• Learn Javascript — базовые основы Javascript.

Оксана Климова и Егор Таланцев — участники программы «Пасека».

Vaadin Flow — диковинный олень

Как вы возможно знаете, Vaadin — один из самых популярных web-фреймворков на Java:

• https://zeroturnaround.com/rebellabs/java-web-frameworks-index-by-rebellabs/
• https://javapipe.com/hosting/blog/best-java-web-frameworks/

Совсем недавно вышел новый релиз этого фреймворка для разработки web UI — Vaadin 10. Про Vaadin 10 и Vaadin Flow пока довольно мало публикаций на русском и этот пост призван восполнить этот пробел.

Создатели позиционируют Vaadin Flow как новый Java web-фреймворк для разработки современных веб-приложений и веб-сайтов (вот тут я им не совсем верю). Это часть Vaadin Platform, которая приходит на замену другому продукту — Vaadin Framework, она позволяет разрабатывать web-приложения (а если быть точным, то web UI) с применением стандарта Web Components на Java.

Тут у читателя в голове скорее всего всё уже смешалось, все эти Vaadin Bla Bla, фреймворк, платформа и прочее. Что происходит?

Мы используем Vaadin в составе своей платформы CUBA для UI back-office систем на протяжении 7 лет и за это время накопили большой опыт работы с ним, поэтому нас не может не волновать его судьба. Под катом вы найдёте мои спекуляции на тему Vaadin 10.

Vaadin Framework

Vaadin — это финская компания, которая разрабатывает инструменты и библиотеки для разработки UI. Они же делают одноимённый фреймворк для web-разработки на Java.

Vaadin Framework — это UI фреймворк с server-side моделью программирования, в которой вся логика UI и его состояние расположены на сервере, а в браузере исполняется только код UI компонентов. По сути, это технология тонкого клиента, где браузер всего лишь отображает то, что скажет сервер, а все события отправляются на сервер.

Server-side подход позволяет забыть про то, что разработка ведется под web, и разрабатывать UI как настольное Java-приложение с непосредственным доступом к данным и сервисам на сервере. При этом Vaadin позаботится и о отображении UI в браузере, и об AJAX-взаимодействии между браузером и сервером. Движок Vaadin осуществляет рендеринг пользовательского интерфейса приложения серверной стороны в браузере и реализует все детали обмена клиента и сервера.

У этого подхода есть много плюсов:

• Java код проще писать и отлаживать
• Можно использовать существующие Java библиотеки и инструменты (IDE, компиляторы, тестирование)
• Не требуется разрабатывать веб-сервисы
• Лучше обстоят дела с безопасностью

• Нужно много памяти на сервере для UI представления
• Сложнее масштабировать решение
• При разработке виджетов требуется разрабатывать Java API

Исходя из этих минусов и плюсов Vaadin FW плотно поселился именно в enterprise разработке, где нагрузки предсказуемы, а скорость и простота разработки гораздо важнее стоимости железа и памяти.

Что случилось с Google Web Toolkit

Всё то время, что Vaadin знаком широкой публике, клиентская часть Vaadin FW была неразрывно связана с другим известным продуктом — Google Web Toolkit (GWT). Этот тандем позволял писать сами UI компоненты и серверный API для них на одном языке — Java, что было довольно удобно.

Последние годы Google Web Toolkit не развивался и мы с 2015 года всё ждём появления GWT 3.0 / J2CL, анонсированного на GWT.Create 2015:

• https://www.youtube.com/watch?v=XJYNCohpxU0
• https://groups.google.com/forum/#!topic/google-web-toolkit-contributors/s_kX17Xs1S4
• https://groups.google.com/forum/#!topic/Google-Web-Toolkit-Contributors/9Zi4-C5gpxQ

В этот застойный период (2015-2017) случилось важное событие: появилась спецификация Web Components и другой фреймворк от Google — Polymer. Видимо, это и послужило началом конца GWT.

Стоит отметить, что GWT 3 разрабатывается как внутренний фреймворк Google и его разработка ведется внутри компании. А значит, коммьюнити никак не может влиять на процесс или хотя бы видеть, что процесс идёт.

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

Web Components

Web Components — это набор стандартов. Его предложили и активно продвигают ребята из Google, но инициативу уже поддержали в Mozilla. По сути, это технологии для создания UI компонентов для web, так, чтобы в них поддерживалась инкапсуляция поведения и представления. А главный плюс — возможность повторного использования.

• Custom Elements — API для создания своих HTML элементов
• Shadow DOM — инструмент инкапсуляции HTML компонентов и изоляция их визуального представления от глобальных правил CSS. Если коротко, то вы можете сделать компонент, например, форму заказа и не бояться, что её стили сломаются на какой-то из страниц сайта из-за CSS правил этой страницы.
• HTML Templates — возможность размещения в HTML документе пассивных блоков, содержащих DOM элементы-заготовки. Такие блоки парсятся браузером, но не отрисовываются и не исполняют свой код. Их предлагается использовать в качестве шаблонов для рендеринга данных.
• HTML Imports — возможность импортировать HTML документ как модуль со всей его версткой, стилями и JS

Например, если сейчас заглянуть в DOM дерево YouTube, то вы обнаружите использование Custom Elements и Shadow DOM:

Все эти штуки и позволяют писать новые модные UI компоненты для web.

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

Polymer

Polymer — это небольшая библиотека поверх стандартов Web Components, призванная упростить их использование. Пример:

// Import corresponding components import '@polymer/paper-checkbox/paper-checkbox.js'; import from '@polymer/polymer'; // Determine new class class LikeableElement extends PolymerElement < // Here will be the component’s public features static get properties( ) < return < liked: Boolean >> // That’s how the DOM tree will look inside, CSS influences only the component itself static get template( ) < return html`  checked="">I like web components. 
"[[!liked]]" class="response">Web components like you, too.
 `; > >

По сути, Polymer делает всё то, что раньше делал GWT, но при этом он совместим с любыми JS компонентами и другими фреймворками, например, React и Angular.

Vaadin Components

Вернёмся к Vaadin. Довольно давно компания Vaadin делает продукт под названием Vaadin Components — UI компоненты для фронтенд разработчиков, которые могут встраиваться в любые JS приложения.

Эти компоненты базируются на Web Components и Polymer!

Как мы теперь видим, это был запасной аэродром для Vaadin Framework, позволивший уйти от Google Web Toolkit и разработать новый фреймворк, для которого еще не существовало компонентов. Проблема курицы и яйца решена и Vaadin Components стали фронтендом грядущего Vaadin 10.

Vaadin Flow

Vaadin 8 включал в себя механизм синхронизации состояния UI и поддержку двустороннего RPC протокола (удаленного вызова процедур). Это было возможно благодаря GWT, поскольку общие интерфейсы и классы сервера и клиента писались на Java.

Вместе с отказом от GWT потребовалось реализовать новый механизм, который бы позволил прозрачно интегрироваться с JS фронтендом и Java бэкендом. Этим механизмом стал Vaadin Flow (а ещё это имя долгое время использовали для обозначения всего Vaadin 10).

В документации по Flow есть такая схема:

Основной её смысл в следующем:

• поддерживается синхронизация состояния UI с сервера на клиент
• серверная часть может подписываться на события UI компонентов, при этом будет выполнен AJAX запрос
• бизнес-логика выполняется на сервере, в веб-браузер загружаются только данные, отображающиеся в UI
• серверная часть использует Java
• клиентская часть может использовать HTML, CSS, JS и шаблоны Polymer

Для меня это означает, что в Vaadin станет больше фронтенд технологий, а теперь одной Java явно недостаточно (для Vaadin 8 вам хватило бы Java и не требовались HTML/CSS). С другой стороны, теперь возможна легкая интеграция JS кода.

Vaadin Platform

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

Это немного пугает, особенно если заглянуть в зависимости минимального проекта:

Чтобы хоть как-то управлять этим хаосом появился проект BOM (bill of materials) под названием Vaadin Platform.

Это не какой то самостоятельный продукт, а всего лишь список совместимых версий компонентов и инструментов оформленный в формате Maven BOM:
https://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.html

dependencyManagement> dependencies> dependency> groupId>com.vaadin groupId> artifactId>vaadin-bom artifactId> version>$ version> type>pom type> scope>import scope> dependency> dependencies> dependencyManagement>

Миграция с Vaadin FW 8

Опции миграции с Vaadin 8 описаны в документе:

Тут у меня для вас плохая новость: если вы написали огромный проект на Vaadin 8, то вам потребуется его полностью переписать при переходе на Vaadin 10. Пути миграции нет, от слова совсем!

Vaadin 10 и Vaadin 8 похожи в нескольких аспектах:

• Server-side подход
• Java для разработки логики UI
• Одинаковый подход к биндингу данных

В сухом остатке: Vaadin 10 это новый фреймворк написанный с нуля.

Как обещают разработчики, Vaadin 8 будет поддерживаться до 2022 года, возможно появятся подходы к миграции.

Заключение

Считаю важным тот факт, что новый веб-сайт компании Vaadin написан на Vaadin Flow, что становится де-факто стандартом для фронтенд технологий, как в своё время зрелость языка программирования определялась тем, написан ли его компилятор на этом же языке.

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