понедельник, 29 мая 2017 г.

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, которые имеют хорошую поддержку в большинстве браузеров, стало проще создавать сложные лейауты. Этот факт может сподвигнуть разработчиков перестать использовать сторонние фреймворки вообще и вместо этого создавать все самостоятельно с чистого листа.
Какие у вас мысли? Есть ли у рассмотреных фреймворков прочие сильные или слабые стороны которые не были упомянуты в данной статье? Или может какой-то фреймворк не был рассмотрен хотя имел на это право? Пишите свои коментарии.

Комментариев нет: