5 самых популярных фронт-енд фреймворков в 2017 году

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

В наши дни существует бесчисленное множество фронт-енд CSS фреймворков. Но число действительно хороших немного меньше.

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

Фреймворки о которых я собираюсь говорить, представлены на основе популярности в GitHub, начиная с самых популярных, которым естественно является Bootstrap.

(Примечание: Некоторые сведения описанные ниже устареют в ближайшие месяцы или даже недели, например количество звезд GitHub, номера версий – поэтому имейте это ввиду, если вы читаете эту статью спустя какоето время после публикации. Также обратите внимание, что размер фреймворка указан для минимизированной версии CSS и JavaScript файлов.)

1.    Bootstrap

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

·         Создатели: Mark Otto и Jacob Thornton.

·         Создание: 2011

·         Текущая версия: 3.3.7

·         Популярность: 111,000 звезд на GitHub

·         Описание: “Bootstrap самый популярный HTML, CSS, и JavaScript фреймворк для создания отзывчивых, мобильных проектов на Web.”

·         Основная концепция: RWD и сначала мобильный.

·         Размер: 154 KB

·         Препроцессоры: Less and Sass

·         Отзывчивый: Да

·         Модулярный: Да

·         Создание темплейтов/лейаутов: Да

·         Набор иконок: Glyphicons Halflings set

·         Расширения: Встроеных нет, но доступно много сторонних плагинов.

·         Уникальный компонент: Jumbotron

·         Документация: Хорошая

·         Возможность настройки: Базовая настройка GUI. К сожалению нужно задавать цвета вручную, потому что нет встроеного контрола для выбора цвета.

·         Поддержка браузеров: Firefox, Chrome, Safari, IE8+ (нужен Respond.js для IE8)

·         Лицензия: MIT

Коментарии к Bootstrap

Главным преимуществом фреймворка является его популярность. Технически, он не лучше чем конкуренты, но он предлагает намного большее количество ресурсов (статей, руководств, сторонних плагинов и расширений, тем, и так далее) чем все остальные фреймворки вместе взятые. Вкраце, Bootstrap есть везде. И это глваная причина почему его выбирают для использования.

(Замечание: говоря о «Уникальном компоненте», я рассматриваю только список фреймворков из моего списка)

2. Foundation by ZURB

Foundation это второй по величине игрок в нашем сравнении. Имея за спиной такого серьезного родителя как ZURB, фреймворк действительно стоящий. Помимо всего Foundation используется многими крупными веб-сайтами включая Facebook, Mozilla, Ebay, Yahoo! и National Geographic.

·         Создатели: ZURB

·         Создание: 2011

·         Текущая версия:6.3.1

·         Популярность: 25,400 звезд на GitHub

·         Описание: “Самый продвинутый отзывчивый фронт-енд фреймворк в мире”

·         Основные принципы: RWD, сначала мобильный, семантик.

·         Размер: 197.5 KB

·         Препроцессоры: Sass

·         Отызвчивый: Да

·         Модулярный: Да

·         Создание темплейтов/лейаутов: Да

·         Набор иконок: Foundation Icon Fonts

·         Расширения: Да

·         Уникальные компоненты: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables

·         Документация: Хорошая, много дополнительных ресурсов.

·         Возможность настройки: Базовая настройка GUI похожая на Bootstrap Customizer tool.

·         Поддержка браузеров: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+

·         Лицензия: MIT

Коментации к Foundation

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

3. Semantic UI

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

·         Создатель: Jack Lukic

·         Создание: 2013

·         Текущая версия: 2.2

·         Популярность: 34,762 звезд на GitHub

·         Описание: “UI фреймворк, построеный на принципах натуральных языков”

·         Основные принципы: Семанитический, амбивалентный к типам, отзывчивый.

·         Размер: 806 KB

·         Препроцессоры: Less

·         Отзывчивый: Да

·         Модулярный: Да

·         Создание теймплейтов/лейаутов: Да, изначально предлагаются некоторые базовые темплейты

·         Набор иконок: Font Awesome

·         Расширения: Нет

·         Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.

·         Документация: Очень хорошая. Semantic предлагает очень хорошо организованную документацию, плюч отдельный сайт которые предлагает руководства для знакомста.

·         Возможность настройки: Нет средств кастомизации, только вручную.

·         Поддержка браузеров: Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10

·         Лицензия: MIT

Коментарии к Semantic UI

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

4. Pure от Yahoo!

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

·         Создатели: Yahoo

·         Создание: 2013

·         Текущая версия: 0.6.2

·         Популярность: 16,637 звезд на GitHub

·         Описание: “Набор маленьких отзывчивых модулей которые можно использовать в любом Веб проекте.”

·         Основные приницпы: SMACSS, минимализм.

·         Размер: 16 KB

·         Препроцессоры: Нет

·         Отзывчивый: Да

·         Модулярный: Да

·         Создание темплейтов/лейаутов: Yes

·         Набор иконок: Нет. Вы можете использовать Font Awesome.

·         Расширения: Нет

·         Уникальный компонент: Нет

·         Документация: Хорошая

·         Возможность настройки: Мастер базового UI скина

·         Поддерживаемые браузеры: Последние версии of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x

·         Лицензия: Yahoo! Inc. BSD

Коментарии к Pure

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

5. Ulkit от YOOtheme

UIkit это цельная коллекция компонентов которыми легко пользоваться и которые легко настроаивать. Несмортя на то что он не так популярен как конкуренты, у него та же функциональность и качество.

·         Создатели: YOOtheme

·         Создание: 2013

·         Текущая версия: 3.0.0

·         Популярность: 9,422 звезд на GitHub

·         Описание: Легковесный и модулярный фронт-енд фреймворк для разработки быстрых и мощных веб интерфейсов.”

·         Основные принципы: RWD, сначала мобильный

·         Размер: 326.9 KB (384.4 KB если вы включите uikit-icons.min.js для функциональности связанной с SVG иконками)

·         Препроцессор: Less, Sass

·         Отзывчивый: Да

·         Модулярный: Да

·         Создание темплейтов: Да

·         Набор иконок: UIkit содержит собственную систему SVG иконок и библиотеку с постоянно увеличивающимся количеством сторонних иконок.

·         Расширения: Да

·         Уникальный компонент: Article, Flex, Cover, HTML Editor

·         Документация: Хорошая

·         Возможность настройки: Продвинутый настройщик UI доступен только в предыдущей версии

·         Поддержка браузеров: Chrome, Firefox, Safari, IE9+

·         Лицензия: MIT

Коментарии к Ulkit

Ulkit успешно используется во многих темах WordPress. Он предлагает гибкий и мощный механизм ручной настройки (предыдущая версия фреймворка также предлагала продвинутый настойщик UI).

Какой фреймворк выбрать?

В конце, давайте дам вам некоторые советы по выбору фреймворка. Вот несколько наиболее важных моментов на которые следует обратить внимание:

 - Достаточно ли фреймворк популярен? Большая популярность – означает что больше людей пользуется фреймворком, и как следствие, можно найти больше руководств, статей общественности, больше живых примеров/вебсайтов, больше сторонних расширений, лучше интеграция с соответствующими продуктами веб разработки. Большая популярность также говорит о том, что у фреймворк более четкое будущее – если у фреймворка больше пользователей то шанс что фреймворк будет заброшен – меньше.

 - Находится ли фреймворк в активной разработке? Хороший фреймворк должен постоянно обновлятся в ногу с изменениями всего веб окружения, технологий, особенно это касатеся мобильной части.

 - Достиг ли фреймворк зрелости? Если конкретный фреймворк не используется в рельных приложениях, то вы конечно можете с ним поиграться но не стоит на него полагаться в реальных проектах.

- Предлагает ли фреймворк хорошую документацию? Хорошая документация всегда приветствуется для того что бы полностью разобраться с возможностями фреймворка.

- Какой у фреймворка уровень специфичности? Главный момент здесь – это то что более гибкий фреймворк будет более простым для использования, по сравнению с каким-то глубоко специфичным фреймворком. В большинстве случаев выгоднее использовать фреймворк с изначально минимальным набором стилей, потому что так можно занчительно упростить работу по кастомизации. Добавление нового стиля всегда проще чем перезапись существующего. Плюс, если вы добавляете новый стиль в дополнение к существующему, то вы будете иметь как минимум один неиспользуемый стиль, который негативно повлияет на размер CSS.

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

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

Какие у вас мысли? Есть ли у рассмотреных фреймворков прочие сильные или слабые стороны которые не были упомянуты в данной статье? Или может какой-то фреймворк не был рассмотрен хотя имел на это право? Пишите свои коментарии.

Источник: https://www.sitepoint.com/5-most-popular-frontend-frameworks-compared/