Различные фреймворки для разработки появляются один за другим, каждый обладает своими сильными сторонами. Какие из них наиболее подходят разработчикам? Основываясь на популярности на GitHub, эта статья отбирает 6 самых популярных фреймворков для фронтенд-разработки 2014 года и дает сравнительное описание, надеясь помочь нуждающимся друзьям выбрать подходящий им фреймворк.

В наши дни различные фреймворки для разработки появляются один за другим, каждый по-своему хорош. Какие из них привлекли больше внимания разработчиков в прошлом году? Недавно Yunshipei составил 6 самых популярных фреймворков для фронтенд-разработки 2014 года на основе популярности на GitHub и предоставил сравнительное описание, надеясь помочь нуждающимся друзьям выбрать подходящий фреймворк.

1. Bootstrap

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

• Создатели: Mark Otto и Jacob Thornton
• Выпущен: 2011
• Текущая версия: 3.3.1
• Популярность: 75,000+ звёзд на GitHub
• «Bootstrap — самый популярный фреймворк HTML, CSS и JavaScript для разработки адаптивных проектов с приоритетом мобильных устройств в вебе.»
• Основная концепция/принцип: RWD и mobile-first
• Размер фреймворка: 145 KB
• Препроцессор: Less и Sass
• Адаптивность: Да
• Модульность: Да
• Стартовый шаблон/каркас: Да
• Набор иконок: Glyphicons
• Другие плагины: Встроенных плагинов нет; доступны сторонние плагины
• Уникальные компоненты: Jumbotron
• Документация: Хорошая
• Настройка: Базовая настройка через GUI, но требуется ручное изменение, так как нет инструмента выбора цвета.
• Поддержка браузеров: Firefox, Chrome, Safari, IE8+ (для IE8 требуется Respond.js)
• Лицензия: MIT

2. Foundation от ZURB

По сравнению с Bootstrap, Foundation занимает второе место, но это не значит, что он непопулярен. Благодаря мощной поддержке ZURB, стоящей за ним, Foundation становится ещё мощнее! Foundation используется крупными сайтами, такими как Facebook, Mozilla, eBay, Yahoo, National Geographic и другими.

• Создатель: ZURB
• Выпущен: 2011
• Текущая версия: 5.4.7
• Популярность: 18,000+ звёзд на GitHub
• "Самый продвинутый адаптивный фронтенд-фреймворк в мире"
• Основная концепция/принцип: RWD, Mobile First, Semantic
• Размер фреймворка: 326 KB
• Препроцессор: Sass
• Адаптивность: Да
• Модульность: Да
• Стартовый шаблон/макет: Да
• Набор иконок: Foundation Icon Fonts
• Другие компоненты: Да
• Уникальные компоненты: Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• Документация: Хорошая. Есть много ресурсов для справки.
• Кастомизация: нет настройки через GUI, но вы можете написать свою.
• Поддержка браузеров: Chrome, Firefox, Safari, IE9+, iOS, Android, Windows Phone 7+
• Лицензия: MIT
• Что отличает его: для таких отраслей, как деловые перевозки, образование и обучение, а также консалтинг, Foundation — это профессиональный фреймворк. Он также предоставляет множество ресурсов, чтобы вы могли быстро научиться.

3.Semantic UI

Semantic UI прилагает неустанные усилия, чтобы сделать веб-разработку более семантичной. Правила естественного языка делают код более простым для чтения и понимания.

• Создатель: Jack Lukic
• Выпущен: 2013
• Текущая версия: 1.2.0
• Популярность: 12,900+ звёзд на GitHub
• "Фреймворк UI-компонентов, основанный на полезных принципах из естественного языка."
• Основная концепция/принцип: Семантичность, амбивалентность тегов, адаптивность
• Размер фреймворка: 552 KB
• Препроцессор: Less
• Адаптивность: Да
• Модульность: Да
• Стартовый шаблон/макет: Нет
• Набор иконок: Font Awesome
• Другие компоненты: Нет
• Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape
• Документация: Очень подробная. Semantic предоставляет документацию на нескольких структурных уровнях, с отдельным сайтом для начинающих, а также другие руководства по настройке и т. д.
• Кастомизация: нет настройки через GUI, но вы можете написать свою.
• Что отличает его: Semantic можно назвать самым инновационным и наиболее функционально полным фреймворком среди обсуждаемых сегодня. Его общая архитектура и правила именования имеют ясную логику и семантику, превосходя другие фреймворки.

4. Pure от Yahoo!

Pure — это легковесный модульный фреймворк на чистом CSS, включающий различные интегрированные и автономные компоненты.

• Создатель: Yahoo
• Выпущен: 2013
• Текущая версия: 0.5.0
• Популярность: 9,900+ звёзд на GitHub
• "Набор небольших адаптивных CSS-модулей, которые можно использовать в любом веб-проекте."
• Основная концепция/принцип: SMACSS, минимализм
• Размер фреймворка: 18 KB
• Препроцессор: Нет
• Адаптивность：Да
• Модульность: Да
• Стартовый шаблон/макет: Да
• Набор иконок: Нет. В качестве альтернативы можно использовать Font Awesome.
• Другие компоненты: Нет
• Уникальные компоненты: Нет
• Документация: Хорошая
• Настройка: базовый GUI Skin Builder
• Поддержка браузеров: последние версии Firefox, Chrome, Safari, IE7+, iOS 6.x, 7.x, Android 4.x.
• Лицензия: Yahoo! Inc. BSD
• Чем он отличается: Pure предоставляет чистый базовый фреймворк для вашего проекта. Для разработчиков, которым не нужен полнофункциональный фреймворк и нужны только определённые компоненты, Pure — хороший выбор.

5. UIkit от YOOtheme

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

• Создатель: YOOtheme
• Выпущен: 2013
• Текущая версия: 2.13.1
• Популярность: 3,800+ звёзд на GitHub
• «Лёгкий и модульный фронтенд-фреймворк для разработки быстрых и мощных веб-интерфейсов.»
• Ключевая концепция/принцип: RWD, Mobile First
• Размер фреймворка: 118 KB
• Препроцессор: Less, Sass
• Адаптивность: Да
• Модульность: Да
• Стартовый шаблон/макет: Да
• Набор иконок: Font Awesome
• Другие компоненты: Да
• Уникальные компоненты: Article, Flex, Cover, HTML Editor
• Документация: Хорошая
• Кастомизация: Продвинутая настройка через GUI
• Поддержка браузеров: Chrome, Firefox, Safari, IE9+
• Лицензия: MIT
• Чем он отличается: UIkit используется во многих темах WordPress. Благодаря GUI-редактору и ручному редактированию он обеспечивает гибкий и мощный механизм настройки.

6.Amaze UI

Amaze UI построен на философии Mobile First. По сравнению с зарубежными фреймворками он уделяет больше внимания китайской типографике и ценится фронтенд-разработчиками как фреймворк, который лучше всех понимает китайский. Всего через четыре месяца после официального запуска он уже набрал более 1,500 звёзд на GitHub, что свидетельствует о его стремительном росте.

• Создатель: Yunshipei
• Выпущен: 2014
• Текущая версия: 2.0.0
• Популярность: 1500+ звёзд на GitHub
• Описание: Amaze UI — это mobile-first кросс-экранный фронтенд-фреймворк с богатым набором компонентов, позволяющих быстро создавать кросс-экранные страницы с превосходными интерфейсами и пользовательским опытом, значительно повышая эффективность разработки.
• Ключевые концепции/принципы: адаптивность, Web Components
• Размер фреймворка: CSS 40KB, JS 48KB (в сжатом виде gzip)
• Препроцессор: Less
• Адаптивность: Да
• Модульность: Да
• Стартовые шаблоны/макеты: Да
• Набор иконок: Font Awesome
• Другие компоненты: Да
• Уникальные компоненты: индикатор загрузки, боковая панель, карусель изображений, фиксированные элементы, постраничная навигация, сворачиваемые панели, галерея изображений и т. д.
• Документация: документация Amaze UI очень полная и подходит разработчикам на всех этапах. Она предоставляет документацию на нескольких структурных уровнях, с продуманным дизайном API, который легко изучать и использовать. Обратная связь по ошибкам осуществляется через GitHub, официальную группу QQ, комментарии Duoshuo и т. д., что позволяет пользователям своевременно сообщать о проблемах.
• Кастомизация: в настоящее время нет кастомизации через GUI. Чтобы настроить, нужно скачать файл конфигурации кастомизации. Скачайте исходный код Amaze UI и используйте инструмент сборки gulp, чтобы скомпилировать его с пользовательскими конфигурациями.
• Поддержка браузеров: разработан для современных браузеров, с ограниченной поддержкой IE 8.
• Что отличает его: Amaze UI добавляет больше элементов, подходящих для китайского рынка: оптимизированную китайскую типографику, совместимость с основными местными браузерами Китая и веб-компоненты, реализованные в соответствии с шаблоном Web Components, разделяя распространённые компоненты для мобильной разработки на отдельные части, что значительно повышает эффективность разработки.

Какой фреймворк вам подходит?В завершение приведём несколько рекомендаций, которые помогут выбрать наиболее подходящий вам фреймворк:

• Достаточно ли популярен фреймворк?

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

• Находится ли фреймворк в постоянной разработке?

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

• Является ли фреймворк зрелым?

Если фреймворк не проверен в реальных проектах, его можно спокойно использовать для практики. Но если вам нужно использовать его в конкретном проекте, безопаснее выбрать относительно зрелый фреймворк.

• Предоставляет ли он полную документацию?

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

• Насколько он специализирован?

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

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