Перейдем к списку.
Angular.JS
AngularJS является популярным фреймворком, который широко используется для создания и поддержания сложных веб-приложений. Популярность AngularJS огромна и компании, использующие его, столь же разнообразны: Domino’s Pizza, Ryanair, ITunes Connect, PayPal, Google Checkout. AngularJS имеет открытый исходный код при поддержке Google. AngularJS позиционируется как расширение HTML для создания сложных веб-приложений.
Angular — MVC-фреймворк. Он имеет двусторонний дата-биндинг между моделями и представлениями (view). Эта привязка данных позволяет проводить автоматическое обновление с обеих сторон всякий раз, когда происходит изменение данных. Это позволяет создавать многократно используемые компоненты представления, что обеспечивает легкий обмен данными между серверной и клиентской частью. И, в конце концов, это просто JavaScript. Используйте AngularJS при построении сложного веб-приложения, когда есть нужда в едином модульном фреймворке, который справится со всем.
GitHub
Офсайт
Материалы
React.JS
ReactJS является топовым JavaScript проектом этого года! ReactJS имеет открытый исходный код и развивается в основном с помощью Facebook при участии других крупных технологических компаний. React описывает себя как JavaScript библиотека для создания пользовательских интерфейсов.
В известном паттерне Model-View-Controller React ближе всего к пользователю. Он отвечает за представление данных, получение и обработку ввода пользователя. Где и в каком виде вы храните данные, как вы общаетесь с хранилищем, дело ваше. React — это всего лишь View вашего приложения. React построен на парадигме реактивного программирования. Этот декларативный подход предлагает описывать данные в виде набора утверждений или формул. Изменение одного из параметров ведёт за собой автоматический пересчёт всех зависимостей. ReactJS — это отличный GOTO-фреймворк для создания простых веб-приложений.
GitHub
Офсайт
Материалы
Backbone.js
Backbone — это простой фреймворк, который вписывается в один JavaScript файл. Backbone был разработан Джереми Ашкенасом с помощью CoffeeScript. Backbone особенно популярен среди команд, которые ищут простую структуру для небольших веб-приложений, без применения больших фремворков как Angular или Ember.
Backbone основан на шаблоне проектирования Model-View-Presenter. Модели позволяют связать ключ-значение и события для обработки изменения данных. Поддерживает RESTful JSON интерфейс. Backbone включает в себя все, что вам нужно для построения одностраничных приложений без лишней сложности. Backbone лучше всего использовать при построении простых одностраничных приложений.
GitHub
Офсайт
Материалы
Ember
В этом достаточно популярном фреймворке упор делается на повышение производительности программиста. Одним из ключевых разработчиков Ember является Йехуда Кац (Yehuda Katz), принимавший активнейшее участие в создании Ruby on Rails и jQuery. Ember позиционируется как «фреймворк для создания амбициозных веб-приложений», который не будет попусту тратить ваше время. Он ведёт себя очень своевольно и многие вещи решает самостоятельно, ставя разработчика перед фактом.
Ember тоже относится к MVC-фреймворкам. В нём используется шаблонизация и встроенный view engine, который автоматически обновляет данные так же, как и Angular, Backbone и React. Ember поддерживает технологию веб-компонентов, позволяющую расширять HTML с помощью собственных тэгов (как и Angular). Также во фреймворк встроен движок маршрутизации и модели, умеющие работать с вашим RESTful API.
Используйте Ember если вам нужен фреймворк, который просто работает. Также Ember будет полезен тем, кто не нуждается в гибкости из-за ограниченного бюджета или жёсткого дедлайна.
GitHub
Офсайт
Материалы
Meteor
Meteor проделал долгий путь от простой идеи до полнофункционального и хорошо финансируемого проекта, ставшего смыслом жизни для тысяч разработчиков-энтузиастов. Он во многом совершил революцию в сфере разработки мобильных и веб-приложений реального времени, созданных с помощью особенного интерфейса разработки. Любое веб-приложение на Meteor полностью совместимо с мобильными устройствами — вы даже можете преобразовать существующее веб-приложение в мобильное и опубликовать его в магазине мобильных приложений.
С появлением Galaxy, облачного хостинга специально для Meteor-приложений, Meteor сделал фронтэнд и бекэнд неразрывными компонентами, для работы с которыми не нужен огромный опыт. Meteor — full-stack фреймворк, который поможет вам на одном JS создать современное, хорошо масштабируемое приложение для веба и мобильных устройств. Публичный репозиторий Atmosphere хранит тысячи пакетов, которые помогут вам создавать такие приложения буквально на лету.
GitHub
Офсайт
Материалы
Express.js
Express — один из самых развитых фреймворков для Node.js на данный момент. Он во многом основан на Sinatra, веб-фреймворке для Ruby. Большая часть функционала Express содержится в плагинах. Views поддерживает рендеринг страниц и отдельных элементов, а также использование разных шаблонизаторов. Общее впечатление от фреймворка — очень хорошее. Логичная и простая структура, неплохо документированные возможности, расширяемость — очень хороший задел на будущее.
GitHub
Офсайт
Материалы
Knockout.js
Knockout – это JavaScript библиотека, которая позволяет создавать сложные пользовательские интерфейсы и при этом оставляет код «чистым», расширяемым и хорошо читабельным. Основная задача, которую выполняет эта чудо-коробка – это автоматическое обновление пользовательского интерфейса при обновлении свойства в JavaScript модели.
Библиотеку knockout.js, весом 29Kb, можно совмещать с любой существующей библиотекой, но лучше всего она работает с jQuery, и в качестве системы шаблонов использует jQuery.tmpl. Для тех, кто хочет оживить интерфейс, сделать его динамичным, включить возможность сортировки данных и многое другое.
GitHub
Офсайт
Материалы
D3.js
Одним из стандартных требований для веб-приложений является визуализация данных и построение графиков. И в этой сфере стандартом де-факто является D3.js. Это один из самых популярных проектов на Github, он используется во множестве компаний. D3 лежит в основе кучи библиотек для построения диаграмм, графиков и прочих видов визуализации.
D3 позволяет брать данные из любых источников и преобразовать в DOM/SVG/CSS. Проект поддерживает современные веб-стандарты, поэтому не беспокойтесь о возможности столкнуться с какими-то проприетарными форматами наподобие Flash или Silverlight.
GitHub
Офсайт
Материалы
Polymer
Polymer — это проект Google, который не просто облегчает вам использование Material Design. Этот очаровательный фреймворк — воплощение скорости и удобства в работе над веб-дизайном, позволяющий создавать и повторно использовать веб-компоненты. Проект много времени провел в стадии бета-теста, но сразу после выхода его популярность начала расти подобно снежному кому.
Пока кто-то пытается понять, в чем же разница между Polymer и Angular (они и правда очень схожи, особенно в плане синтаксиса и особенностей организации), мы скажем точно: Polymer — новый этап разработки, который осуществляет переход к разработке на основе современных веб-компонентов.
GitHub
Офсайт
Underscore и lodash
Иногда стандартные возможности JavaScript не позволяют нам работать с полной отдачей. Всегда не хватает какой-нибудь вспомогательной функции, или функции, позволившей бы упростить код. Underscore и lodash — это JS-библиотеки, предлагающие свыше 100 вспомогательных функций и прочих «вкусностей» без необходимости делать monkey patching для встроенных JS-объектов. В частности, вам будут доступны такие вещи, как map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone и многое другое. Используйте Underscore: если вам нужен один единственный JS-файл, который немедленно облегчит вашу жизнь как программиста. lodash: если вам нужна модульная и чуть более быстрая версия Underscore, с улучшенной поддержкой AMD и плагинов, созданных сообществом.
GitHub
Офсайт
GitHub
Офсайт
Источники: www.sitepoint.com, www.colorlib.com
Комментарии (26)
coh
11.07.2016 21:44-2ExtJS и ему подобные не вошли даже в топ 10… очень странно.
PerlPower
11.07.2016 22:42Если не секрет какую нишу он сейчас занимает? Не занята ли сейчас это ниша компонентным подходом React Js?
dos
11.07.2016 22:59+1Пока не появится возможность написать достаточно крупное SPA-приложение с довольно качественным дизайном и функционалом без единой строчки в CSS и HTML, да и почти без знаний JavaScript, то ниша ExtJS не будет занята.
coh
11.07.2016 23:31Ниша ExtJS — корпоративный софт. Чаще всего это не про сайты.
React JS не может занять нишу ExtJS / Kendo UI / DOJO и т.п. так как он совсем о другом. Простыми словами это целые экосистемы, подробнее можно почитать на оф. сайтах этих фреймворков.
Применение широчайшее:
- торговые площадки (типа этп ММВБ, этп ГПБ)
- околобанковский софт
- системы автоматизированного контроля и мониторинга
- системы автоматизации гос управления
- системы удаленного управления оборудованием
- системы управления складами и закупками
- CRM и ERP системы
и многое другое.
Бесспорно ExtJS подобные фреймворки достаточно сложны из-за обилия возможностей и компонент, но их архитектура грамотна и лаконична, а решаемый спектр задач огромен.
GreenBee
11.07.2016 21:58+22Во-первых, что полезного в этой статье? Подобных «топов» сотни, если не тысячи.
Во-вторых, мне кажется, что стоило разделить клиентские javascript-фреймворки и серверные (Express.js).
Такое чувство, что автор просто вбил в гугл «javascript фреймворк» и сделал реферат, особо не разобравшись о чем пишет.
flancer
12.07.2016 09:50+1Мнение автора субъективно, как и мнение сотен, если не тысяч других авторов. Суперпозиция всех субъективностей — есть объективность. Кстати, ваше мнение по поводу разделения клиентских и серверных framework'ов весьма интересное — вы могли бы реализовать его в виде статьи на Habr'е, заодно у вас в профиле появилась бы первая статья.
movl
12.07.2016 11:14Мне кажется, уже достаточно подобный статей на хабре, и ничего полезного эти статьи не несут. А если хочется объективности, можно воспользоваться поиском гитхаба. Это, конечно, не абсолют объективности, но как минимум отображение мнения нескольких сотен тысяч пользователей, если не миллионов.
flancer
12.07.2016 12:22У статьи очень хороший и понятный заголовок — "ТОП 10 JavaScript фреймворков и библиотек" Если вам не интересно мнение автора статьи по этому вопросу вы можете не читать текст статьи. Автор дает вам такую возможность. Если вы сразу не разобрались, что это "еще один обзор из сотен или тысяч подобных", то это не проблемы автора, это просто вы сами не смогли отделить интересную и полезную для вас информацию от неинтересной вам и бесполезной для вас. Автор провел свое собственное исследование (разложил у себя в голове информацию "по полочкам") и опубликовал его результаты (поделился с вами). Он, в основном, решал свои проблемы. А насчет "ничего полезного". Смотря для кого. Возможно, через 5-10 лет эта статья станет одной из многих, на основании которых сделают обзор, "как менялась популярность JS framework'ов за последние 10 лет". Еще раз, если вы потратили время на прочтение и не смогли извлечь ничего полезного из статьи автора, то это не его вина.
movl
12.07.2016 13:38А Вам не кажется, что система комментирования и оценок статей именно для того и создана, чтобы сообщество имело возможность регулировать "полезность" и "интересность" контента.
Я не захотел игнорировать эту статью, потому что считаю, что подобный контент не подходит для данного ресурса. Это только мое мнение, но судя по рейтингу статьи, оно совпадает с большинством проголосовавших пользователей.
Вы же сами говорили про суперпозицию мнений, и что в этом заключается суть объективности. Однако если игнорировать статью, то мое мнение не будет учитываться или будет трактовано не верно. И я не понимаю, что делаю не так в данной ситуации.
flancer
12.07.2016 19:00Игнор статьи — это тоже оценка. Но вы все делаете правильно — вы высказали публично свое мнение, я — свое. Именно для этого и создана система комментирования и оценок. На данный момент на 3.6К просмотров 123 человека добавили статью в favorites, при общей оценки статьи -8 (11 в плюс, 19 в минус). Около 123 человек посчитали эту статью в чем-то полезной для себя. Это много или мало?
GreenBee
12.07.2016 19:10+1Проблема в том, что это неправильный ТОП 10.
Для того, чтобы получить ТОП10, нам нужно отсортировать определенное множество по определенному критерию и взять верхние 10.
Ни критерия ни множества ни методологии выбора в статье нет.
Уже не говоря о том, что множество выбрано неоднородное.
Это все равно что сделать «ТОП 10 книг, в которых есть герой с именем Джон». Или «Топ 10 книг на арабском языке». Будут ли подобные статьи полезны или хотя бы интересны?
Если бы это был «ТОП 10 Javascript библиотек для создания чего-то там», то это было бы полезно.
ИТОГО: под достаточно общим заголовком имеется достаточно некачественная статья, которая за счет заголовка и траста Хабра может попасть в выдачу поисковых систем и будет выдаваться людям, которые ищут что-то полезное. Хорошо это или плохо?flancer
12.07.2016 22:09"Это неправильные пчелы, и они делают неправильный мед." (с)
Уже 132 добавления в "избранное"на 3.8к просмотров. Я вас уверяю, на хабре есть статьи и с меньшей популярностью.
GreenBee
12.07.2016 19:14«Сначала добейся»(с) Другие аргументы есть?
Зачем мне писать такую статью, если в ней будет ровно 0 полезности? Только ради того, чтобы у меня была статья на Хабре?
Мне нравится этот сайт. Я прочитал здесь тысячи полезных статей. По вашему я хочу добавить сюда что-то малополезное, только ради того, чтобы потешить свое самолюбие?
bromzh
12.07.2016 12:10+1Вместо Underscore/lodash лучше использовать стандартные функции/методы, т.к. стандарт.
А если целевая платформа пока не поддерживает что-то, то взять всё можно из отличного проекта core-js.
k12th
12.07.2016 12:23+1Юзать _.map/_.filter/_.bind в 2016 году действительно глупость несусветная, но lodash/underscore этим не исчерпывается. Где в стандарте debounce/throttle, например? isFunction, isString, isDate? Целочисленный random, shuffle?
bromzh
12.07.2016 13:14isFunction, isString
typeof
isDate
instanceof
Безусловно, там есть полезные функции. И то, что lodash можно подключать по кускам — тоже хорошо.
Но на текущий момент, большинство функций дублируют стандарт, а остальное же легче самому написать/скопипастить, чем добавлять модуль размеров в 10 строк (а то и меньше) в зависимости к проекту.
KhodeN
12.07.2016 15:14Lodash — это не только кучка функций-утилит. Там есть поддержка цепочек функций (в функциональном стиле), что очень удобно для обработки коллекций.
Вообще автор lodash явный фанат функционального подхода, это четко прослеживается в принципах заложенных в архитектуру lodash и, разумеется, lodash-fp.
Также цепочки выполняются лениво, чего из-коробки в JS нет (генераторы не в счет, при трансляции в es3-5 они ужасны)
oxidmod
не смотря на его возраст, мне до сих пор нравится Backbone
k12th
Он построен на простых и понятных концепциях, но в то же время его уже достаточно, чтобы структурировать приложение. Плюс маленький размер и хорошая расширяемость. Да, в нем нет некоторых приятных фич, но зато нет и черной магии.
aleks_raiden
еще можно посмотреть на Марионетт — как расширение и большее структурирование именно высокоуровневое
Aries_ua
Из Marrionette я взял идею Region, CollectionView и ui property для View. Реализовать их не так уж и сложно, хотя не скрою идея с регионами в марионетках очень годная. Что в марионетках не пошло — объект Application и Module. Так как если использовать RequireJS, то идея модульности на уровне марионеток — отпадает сама собой.
После работы с ангуляром и немного с реактом — остановился на Backbone. Да, пришлось немного допилить. Но зато сейчас имею все что нужно для создания больших и сложный web приложений.
Еще нравится идея полимера. Возможно в будущем покручу его более плотно.
aen
Module давно уже deprecated и из 3 версии его удалят полностью. Без Application тоже можно легко обойтись, тем более что есть Object.