От автора: Front-end фреймворки позволяют довольно сильно ускорить процесс разработки сайта. Из-за большой популярности их стало очень много, и каждый день появляются все новые.
Выбор слишком велик, а выделить правильный фреймворк стало довольно проблематично. Как и у множества других разработчиков, ваш взгляд может пасть на популярные, проверенные и надежные фреймворки Bootstrap и Foundation. Однако новые, но не такие известные фреймворки могут намного больше подходить под ваши нужды. В таких условиях вам просто необходимо разобраться в самых популярных фреймворках на сегодня.
На что нужно смотреть при выборе front-end фреймворка
Перед поиском front-end фреймворка под ваш следующий проект очень важно ознакомиться с самыми крутыми функциями. Зная их, вы сможете намного быстрее взвешивать все плюсы и минусы самых популярных front-end фреймворков:
Ваш уровень – учитывайте уровень своих знаний при выборе front-end фреймворка. Если вы новичок, возможно, вам подойдет надежный фреймворк Bootstrap, в котором есть множество встроенных виджетов, и который потребует от вас минимальных навыков программирования. Если же вы более продвинутый разработчик, тогда вам подойдет более простой фреймворк, который даст вам больше пространства для кастомизации. Такие фреймворки компактнее и в них меньше кода, что будет только плюсом.
Адаптивный дизайн – любой разрабатываемый вами сайт должен хорошо отображаться на всех устройствах, так как все больше людей заходят в интернет через мобильные устройства. Сайт Similar Web выпустил отчет состояние мобильного интернета в США за 2015 год, в котором говорится, что 56 процентов потребителей трафика ведущих сайтов в США заходят в интернет с мобильных устройств. Ищите front-end фреймворки с поддержкой адаптивного дизайна, тогда у вас будет на одну проблему меньше.
CSS препроцессоры – если вы используете CSS препроцессоры, к примеру, Sass или LESS, проверьте, чтобы они были совместимы с фреймворком.
Внешний вид – выбирайте тот фреймворк, с помощью которого вы можете добиться отличного внешнего вида с наименьшими усилиями.
Прототипы – идеальный front-end фреймворк позволяет быстро создавать вайрфреймы и прототипы для ускорения процесса дизайна и разработки.
И самое главное: хороший front-end фреймворк упрощает, модернизирует и ускоряет процесс дизайна и разработки сайта и в то же время обеспечивает вас гибкостью и функциональностью для создания уникального продукта.
ТОП-10 front-end фреймворков в 2016
Без лишних слов представляю вам восьмой по популярности front-end фреймворк в 2016 году.
Bootstrap
ТОП был бы неполным без очень популярного front-end фреймворка Bootstrap. Авторами фреймворка являются создатели Twitter, которые выпустили его в 2011 году. Самый используемый open-source фреймворк в мире.
Как и в любой другой эффективный front-end фреймворк, в Bootstrap входят компоненты HTML, CSS и JS. Фреймворк придерживается стандартов адаптивного веб-дизайна, позволяя вам создавать адаптивные сайты любой сложности и размеров.
Постоянные обновления Bootstrap гарантируют, что вы получите самые новые и лучшие функции. К примеру, почти сразу в фреймворк были добавлены темы, отвечающие стандартам material design от Google. Темы были улучшены для поддержки Sass.
Плюсы:
поддержка адаптивного веб-дизайна (можно отключить по желанию);
обширная документация.
Минусы:
редко используемые стили увеличивают вес стандартного фреймворка до 276 Кб;
слишком много HTML классов и DOM элементов, что загрязняет код и путает пользователя.
Подходит для новичков и тех, кто предпочитает надежные front-end фреймворки.
Semantic-UI – новичок среди фреймворков, выделяющийся среди других, и у которого есть все шансы стать самым популярным front-end фреймворком.
Фреймворк ценят за его простоту. В коде используются понятные выражения. Здесь чувствовать себя как дома будет даже те, кто почти не знаком с программированием.
Еще одна заметная особенность Semantic-UI в том, что он интегрируется с огромным количеством сторонних библиотек. Их столько, что вам, скорее всего, не понадобятся какие-то другие библиотеки. Все это делает процесс разработки проще и удобнее.
Плюсы:
семантические названия классов позволяют даже новичкам быстро освоиться;
маленький размер файлов и минимальное время загрузки, так как можно загружать только необходимые компоненты, у каждого из которых есть свой JS файл и стили;
универсальные элементы упрощают кастомизацию.
Минусы:
очень большие пакеты по сравнению с Foundation и Bootstrap;
фреймворк скудноват и мало подходит для создания сложных дизайнов.
Подходит новичкам и тем, кому нужен легковесный и шустрый фреймворк.
Foundation
Foundation от компании Zurb – это высоко продвинутый front-end фреймворк корпоративного класса, который идеально подходит для создания гибких и адаптивных веб-сайтов. Фреймворк используется на сайтах Facebook*, eBay и Mozilla и из-за своей сложности может не подойти новичкам.
Этот богатый на возможности фреймворк поддерживает аппаратное ускорение для создания плавной, молниеносной анимации. Для рендеринга на мобильных устройствах в фреймворк включена библиотека Fastclick.js. Фреймворк написан на Sass и включает в себя специально разработанный атрибут для обмена данными, с помощью которого можно загружать легковесные HTML секции для мобильных экранов и секции потяжелее для больших экранов. О сравнении Foundation и Bootstrap можете прочитать в нашей статье Bootstrap против Foundation.
Плюсы:
нет заблокированных стилей, что дает вам больше гибкости;
вместо пикселей используются единицы измерения REM, что позволяет явно не задавать ширину, высоту и другие атрибуты под каждое устройство.
Минусы:
довольно большой вес файлов по умолчанию;
немного сложноват для новичков.
Подойдет разработчикам с приличным опытом, чья основная задача – быстрая разработка, привлекательные и адаптивные сайты.
Materialize
Materialize – адаптивный front-end фреймворк, отвечающий спецификации Google по дизайну material design. В комплекте вы найдете готовые наборы кнопок, иконок, карточек, форм и других компонентов. Есть стандартная версия и версия под управлением Sass.
В Materialize есть удобная сетка, с помощью которой можно создавать макеты. Также в стандартном комплекте уже присутствуют стили материал дизайна для теней, шрифтов, цветов и т.д.
Среди других возможностей: анимация с эффектом пульсации, выезжающее меню для мобильных устройств, SASS миксины и многое другое.
Плюсы:
огромный выбор компонентов;
адаптивность гарантирует, что сайты будут поддерживаться на всех устройствах.
Минусы:
большой размер файлов делает работу с фреймворком неудобной;
не поддерживается модель flexbox.
Подходит менее опытным разработчикам, которые хотят изучить материал дизайн от Google.
Material UI
Если вы ищите front-end фреймворк, который будет отвечать требованиям Google по материал дизайну, тогда Material UI для вас. Фреймворк Material UI – наиболее всеобъемлющая структура по реализации этих принципов, но есть один нюанс. Он не предназначен для создания дизайнов абсолютно новых сайтов.
Material UI работает под управлением препроцессора LESS, а в комплекте идут готовые стили и компоненты под материал дизайн. Фреймворк также использует компоненты React, что также плюс.
Material UI – фреймворк с высокой кастомизацией, а его стили разделены по отдельным файлам. То есть вы можете переписать LESS CSS переменные, не влияя на компоненты фреймворка.
Плюсы:
самый простой способ среди фреймворков для работы с материал дизайн от Google;
высокая кастомизация.
Минусы:
не предназначен для создания дизайнов с нуля;
требует хорошего понимания React.
Подходит для разработчиков, понимающих и работавших с React, и для тех, кто хочет придерживаться принципов материал дизайна без лишних сложностей.
Pure
Фреймворк Pure создан командой разработчиков Yahoo. В комплекте идет легкий массив CSS модулей, которые подходят под любой проект. С Pure вы с легкость сможете создавать адаптивные кнопки, меню, сетки, таблицы и т.д. Фреймворк написан на чистом CSS и не поддерживает JS или JQuery плагины.
После минификации и сжатия через Gzip фреймворк Pure сжимается до 4.5Кб, что делает его одним из самых легких и проворных front-end фреймворков. Pure идеально подходит для мобильной разработки, из-за чего он приглянулся множеству разработчиков.
Плюсы:
очень легкий, что обеспечивает быструю загрузку даже на мобильных устройствах;
гибкий массив CSS модулей можно использовать в абсолютно любом дизайне и проекте.
Минусы:
написан на CSS без поддержки JS или JQuery плагинов.
Подходит разработчикам, которые основной упор делают на создании адаптивных и быстрых мобильных сайтов.
Skeleton
Skeleton – легковесный адаптивный шаблон всего лишь из 400 строк кода. Фреймворк включает минимально необходимый функционал для старта разработки. В отличие от описанных выше фреймворков, это не комплексное решение.
Skeleton – адаптивный фреймворк, в основе которого лежит 12-ти колоночная сетка. В комплекте только необходимые элементы: кнопки, списки, таблицы, формы и т.д.
Плюсы:
очень легкий;
простота и удобство для написания маленьких проектов.
Минусы:
отсутствие широкого выбора компонентов, в отличие от больших фреймворков.
Подходит тем, кто создает небольшие проекты, где не нужны все стилевые компоненты, которые можно найти в больших фреймворках.
UIKit
UIKit – высокомодульный front-end фреймворк, выделяющийся среди большинства по множеству причин. Главная причина – наличие двух препроцессоров, LESS и Sass.
Благодаря своим гибким и адаптивным компонентам с понятными именами, UIKit стал одним из самых популярных front-end фреймворков.
Еще большую универсальной фреймворку придают 30 модульных компонентов. Среди компонентов: меню, HTML формы и таблицы, JS компоненты, например, выезжающие вкладки и модальные окна, общие элементы, такие как кнопки, знаки и перекрывающие слои, а также компоненты макета, такие как жидкие, адаптивные системы сеток.
Плюсы:
высокая кастомизация;
уникальная модульная структура, позволяющая добавлять компоненты к стилям, не оказывая влияния на общие стили;
возможность создавать сложные интерфейсы, благодаря компонентам наподобие вложенных списков.
Минусы:
фреймворк еще новый, в сети по нему очень мало ресурсов.
Подходит достаточно опытным разработчикам, так как на данный момент про фреймворк очень мало информации. Отлично подходит для создания как простых, так и сложных проектов.
Milligram
Milligram – еще один легковесный фреймворк, похожий на Skeleton. После сжатия через Gzip размер файла достигает 2Кб, что обеспечивает разработчикам простой и удобный старт.
Система сеток в Milligram отличается от большинства, так как она использует стандарт CSS Flexible Box Layout Module. Также в комплекте есть пара ключевых компонентов, которые помогут вам начать работу, среди которых шрифты, кнопки, формы, списки, таблицы, цитаты и т.д.
Плюсы:
очень легкий, всего 2Кб после сжатия через Gzip;
использует систему сеток Flexbox.
Минусы:
фреймворк довольно новый, про него очень мало информации;
минимальное количество компонентов стилей по сравнению с более крупными фреймворками.
Подходит для разработчиков, создающих небольшие проекты, где не нужно много стилевых компонентов, а также для разработчиков, которые хотят использовать Flexbox.
Susy
Некоторые скажут, что Susy – не совсем front-end фреймворк, так как он решает сложные задачи по макетированию. По факту, множество людей расценивают Susy, как систему сеток, но она может стать незаменимым инструментом для людей, работающих с макетами.
Susy вооружает вас миксинами, с помощью которых можно создавать сетки. Фреймворк выполняет все вычисления за вас, что экономит много времени и сил.
Susy позволяет создавать сетки любой сложности. Если вы пытались решить проблему с созданием сложной системы сеток, вам поможет Susy.
Плюсы:
повышенная гибкость позволяет создавать сетки любой сложности;
автоматические вычисления.
Минусы:
не покрывает все вопросы дизайна сайта, что потребует еще одного фреймворка;
нет встроенных сеток.
Подходит разработчикам с уникальными задачами по созданию макетов.
Статистика по front-end фреймворкам
Ваше решение не должно основываться на популярности фреймворка. Фреймворк необходимо выбирать, исходя из потребностей в разработке. И все же интересно, как расположатся все эти фреймворки в рейтинге. Список ниже показывает, сколько звезд получил каждый проект на GitGub на момент написания статьи (от самых популярных до менее популярных).
Bootstrap: 101,433 звезд
Semantic-UI: 28,170 звезд
Foundation: 24,127 звезд
Materialize: 21,515 звезд
Material UI: 19,631 звезд
Pure: 14,967 звезд
Skeleton: 12,622 звезд
UIKit: 7,433 звезд
Milligram: 4,195 звезд
Susy: 3,506 звезд
Кроме того, в сравнении ТОП-5 front-end фреймворков на Google Trends видно, что Bootstrap все еще на голову опережает своих конкурентов по числу упоминаний.
Заключение
Как видно, разные front-end фреймворки имеют свои преимущества. Что подходит одному разработчика или проекту, не подходит другому. Поэтому крайне важно провести анализ множества вариантов, прежде чем выбрать что-то конкретное.
Перед выбором front-end фреймворка определите свой уровень знаний, а также базовые требования вашего проекта. Скорее всего, один или несколько продуктов из списка идеально подойдут вам.
Автор: Cody Arsenault
Источник: //www.keycdn.com/blog/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
Комментарии (1)