Лучшие 5 frontend-фреймворков 2014 года

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

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

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

1. Bootstrap

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

bootstrap

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

Основная сила Bootstrap — его огромная популярность. Технически он не во всем лучше конкурентов, зато по нему есть большое количество материалов, руководств и форумов, а так же, плагинов в сети. Проще говоря, Bootstrap — везде. И это основная причина его популярности.

2. Foundation от ZURB

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

foundation

  • Авторы: ZURB
  • Год выпуска: 2011
  • Текущая версия: 5.4.7
  • Популярность: 18,000+ звезд на GitHub
  • Описание: “Самый продвинутый адаптивный frontend-фреймворк в мире”
  • Основная идея: RWD, ориентация на мобильные, семантический.
  • Размер: 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 призван помочь создавать веб-сайты, более понятные человеку. Он использует принципы человеческого языка, чем делает код более читаемым и понятным.

semantic ui

  • Авторы: Jack Lukic
  • Год выпуска: 2013
  • Текущая версия: 1.2.0
  • Популярность: 12,900+ звезд на GitHub
  • Описание: “Фреймворк для пользовательского интерфейса, построенный на принципах человеческого языка.”
  • Основная идея: Семантический, адаптивный.
  • Размер: 552 KB
  • Препроцессор: Less
  • Адаптивный: Да
  • Модульный: Да
  • Стартовые шаблоны: Нет
  • Набор иконок: Font Awesome
  • Расширения: Нет
  • Уникальные компоненты: Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape.
  • Документация: Очень хорошая. Semantic располагает очень удобно структурированной документацией, плюс отдельный сайт, предлагающий руководство по началу работы, кастомизации и созданию тем.
  • Кастомизация: Нет кастомизатора GUI, только ручная кастомизация.
  • Поддержка браузерами: Firefox, Chrome, Safari, IE10+ (IE9 только с префиксами), Android 4, Blackberry 10
  • Лицензия: MIT

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

4. Pure by Yahoo!

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

pure

  • Авторы: Yahoo
  • Год выпуска: 2013
  • Текущая версия: 0.5.0
  • Популярность: 9,900+ звезд на GitHub
  • Описание: “Набор небольших адаптивных css-модулей, которые можно использовать в каждом веб-проекте.”
  • Основная идея: SMACSS (масштабируемая модульная архитектура css), минимализм.
  • Размер: 18 KB
  • Препроцессор: Нет
  • Адаптивный: Да
  • Модульный: Да
  • Стартовые шаблоны: Есть
  • Набор иконок: Нет. Можно использовать Font Awesome.
  • Расширения: Нет
  • Уникальные компоненты: Нет
  • Документация: Хорошая
  • Кастомизация: Basic GUI Skin Builder
  • Поддержка браузерами: Latest versions of Firefox, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
  • Лицензия: Yahoo! Inc. BSD

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

5. UIkit by YOOtheme

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

uikit

  • Авторы: YOOtheme
  • Год выпуска: 2013
  • Текущая версия: 2.13.1
  • Популярность: 3,800+ звезд на GitHub
  • Описание: “Легковесный модульный frontend-фреймворк для разработки быстрых и функциональных веб-интерфейсов.”
  • Основная идея: RWD, ориентация на мобильные устройства
  • Размер: 118 KB
  • Препроцессор: Less, Sass
  • Адаптивный: Да
  • Модульный: Да
  • Стартовые шаблоны: Да
  • Набор иконок: Font Awesome
  • Расширения: Да
  • Уникальные компоненты: Article, Flex, Cover, HTML Editor
  • Документация: Хорошая
  • Кастомизация: Advanced GUI Customizer
  • Поддержка браузерами: Chrome, Firefox, Safari, IE9+
  • Лицензия: MIT

UIkit с успехом используется в большом количестве тем WordPress. Он предлагает гибкий и мощный механизм настройки в ручном режиме либо с помощью GUI customizer.

 

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

Давайте определимся, по каким параметрам будем выбирать фреймворк:

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *