Кажется, что JavaScript-фреймворков, библиотек и инструментов больше, чем разработчиков. В конце 2018 года быстрый поиск на GitHub выявил 2,3 миллиона JavaScript-проектов. npmкрупнейшей в мире модульной системой с 700 000 используемых пакетов на npmjs.com и миллиардами загрузок в месяц.
2018.12.06: статья была обновлена, чтобы отразить текущее состояние экосистемы JavaScript. Обновление этого года было спонсировано Сенчей . Спасибо за поддержку партнеров, которые делают возможным SitePoint!
Эта статья пытается объяснить основы и элементарные различия между наиболее популярными клиентскими JavaScript-фреймворками, библиотеками и инструментами. Являются ли они «лучшими» для вас — это другой вопрос. Выберите что-нибудь и придерживайтесь этого некоторое время. Просто знайте, что ваш любимый вариант будет заменен чем-то «лучшим», независимо от того, что вы выберете!
Содержание
- Содержание
- Хитрая терминология
- Библиотеки
- Каркасы
- инструменты
- Не называйте меня!
- Фреймворки и библиотеки JavaScript
- JQuery
- реагировать
- AngularJS 1.x
- Угловой 2+ (сейчас 7.х)
- Vue.js
- Sencha Ext JS
- Лодаш и Подчеркивание
- Backbone.js
- ember.js
- Knockout.js
- Известные упоминания
- Инструменты: Универсальные исполнители задач
- Webpack
- Gulp.js
- НПМ
- хрюкать
- Инструменты: модульные комплекты
- Browserify
- RequireJS
- Инструменты: Linting
- ESLint
- JSHint
- JSLint
- Инструменты: Test Suites
- Шутка
- кофе мокко
- жасмин
- Инструменты: Разное
- Резюме и рекомендации
- Комментарии
Пожалуйста, примите следующие условия, прежде чем читать эту статью!…
- JavaScript-ландшафт меняется ежедневно. Эта статья будет устаревшей в момент публикации!
- Под «лучшими» я подразумеваю «самые популярные / используемые / раскрученные проекты общего назначения» . У всех есть бесплатные / открытые опции, но в список могут не входить ваши избранные.
- Снятые с производства проекты, такие как YUI , не включены, даже если они все еще широко используются в Интернете.
- Только клиентские проекты упоминаются. Некоторые могут работать на стороне сервера, но в список не входят чисто серверные платформы, такие как Express.js или Hapi .
- Информация о каждом проекте преднамеренно краткая, чтобы предоставить обзор для дальнейших исследований.
- Каждый проект предоставляет индикатор популярности использования, но статистические данные, как известно, трудно сопоставить и могут вводить в заблуждение.
- Я предвзятый Вы предвзяты. Все остальные предвзяты! Я не пробовал каждый инструмент здесь и объявлю мои любимые, но вы должны сделать свою собственную оценку на основе ваших требований.
- Ни я, ни SitePoint не несем ответственности за любые катастрофические решения, которые вы принимаете!
Хитрая терминология
Термины «каркас», «библиотека» и «инструмент» могут означать разные вещи для разных людей в разное время в зависимости от контекста. Общие определения, используемые здесь:
Библиотеки
Библиотека — это организованная коллекция полезных функций. Типичная библиотека может включать функции для обработки строк, дат, элементов HTML DOM, событий, файлов cookie, анимации, сетевых запросов и многого другого. Каждая функция возвращает значения вызывающему приложению, которое может быть реализовано по вашему выбору. Думайте об этом как о выборе автомобильных компонентов: вы можете использовать любой из них, чтобы помочь создать рабочий автомобиль, но вы должны создать двигатель самостоятельно.
Библиотеки обычно обеспечивают более высокий уровень абстракции, который сглаживает детали реализации и несоответствия. Например, Ajax может быть реализован с использованием API XMLHttpRequest, но для этого требуется несколько строк кода, и между браузерами есть небольшие различия. Библиотека может предоставлять более простую функцию ajax()
Библиотека может сократить время разработки на 20%, потому что вам не нужно беспокоиться о мелких деталях. Недостатки:
- ошибка в библиотеке может быть трудно найти и исправить
- нет никаких гарантий, что команда разработчиков выпустит патч быстро
- патч может изменить API и привести к значительным изменениям в вашем коде.
Каркасы
Фреймворк — это скелет приложения. Это требует, чтобы вы подходили к разработке программного обеспечения особым образом и вставляли свою логику в определенные моменты. Такие функции, как события, хранилище и привязка данных, обычно предоставляются для вас. Используя аналогию с автомобилем, каркас обеспечивает рабочее шасси, кузов и двигатель. Вы можете добавить, удалить или повозиться с некоторыми компонентами, предполагая, что автомобиль остается в рабочем состоянии.
Фреймворк обычно обеспечивает более высокий уровень абстракции, чем библиотека, и может помочь вам быстро построить первые 80% вашего проекта. Недостатки:
- последние 20% могут быть непростыми, если ваше приложение выходит за рамки
- Обновление или миграция фреймворка может быть затруднено — если не невозможно
- основной структурный код и концепции редко стареют. Разработчики всегда найдут лучший способ сделать то же самое.
инструменты
Инструмент помогает развитию, но не является неотъемлемой частью вашего проекта. Инструменты включают в себя системы сборки, компиляторы, транспортеры, минификаторы кода, компрессоры изображений, механизмы развертывания и многое другое.
Инструменты должны обеспечивать более легкий процесс разработки. Например, многие кодеры предпочитают Sass CSS, потому что он обеспечивает разделение кода, вложение, переменные времени рендеринга, циклы и функции. Браузеры не понимают синтаксис Sass / SCSS, поэтому код должен быть скомпилирован в CSS с использованием соответствующего инструмента перед тестированием и развертыванием.
Не называйте меня!
Различие между библиотеками, фреймворками и инструментами редко бывает ясным. Фреймворк может включать в себя библиотеку. Библиотека может реализовывать методы, подобные фреймворку. Инструменты могут быть важны для обоих. Я пытался пометить каждый проект, но объем может варьироваться.
Если это звучит слишком сложно, вы можете подумать о кодировании ванильного JavaScript . Это хорошо, но вы неизбежно напишите свою собственную библиотеку и / или фреймворк, который необходимо поддерживать. Сам JavaScript — это абстракция на башне абстракций браузера и ОС!
Фреймворки и библиотеки JavaScript
Проекты в приблизительном порядке использования / популярности / рекламы…
JQuery
| JQuery | описание |
|---|---|
| тип | библиотека |
| интернет сайт | jquery.com |
| хранилище | github.com/jquery/jquery |
| Звезды GitHub | 50.000+ |
| текущая версия | 3.3.1 |
| разработчик | команда jQuery |
| Дата запуска | Август 2006 |
| типичный размер | 30 КБ мин |
| типичное использование | общее назначение |
| использование | 73,5% всех сайтов |
jQuery остается наиболее используемой библиотекой JavaScript, когда-либо созданной, и распространяется с WordPress, ASP.NET и несколькими другими фреймворками. Он революционизировал разработку на стороне клиента, внедрив селектор CSS для извлечения узла DOM и цепочки для применения обработчиков событий, анимации и вызовов Ajax.
В последние годы jQuery не пользуется популярностью у разработчиков, но уровень использования остается высоким. Это остается жизнеспособным вариантом для проектов, которые требуют небольшого количества функций JavaScript.
Плюсы:
- небольшой размер дистрибутива
- мелкая кривая обучения, значительная онлайн помощь
- краткий синтаксис
- легко продлить
Минусы:
- добавляет накладные расходы на скорость к собственным API
- менее важно теперь, когда улучшена совместимость браузера
- использование имеет плоскую линию
- некоторая отраслевая реакция против ненужного использования.
реагировать
| реагировать | описание |
|---|---|
| тип | библиотека |
| интернет сайт | facebook.github.io/react/ |
| хранилище | github.com/facebook/react |
| Звезды GitHub | 115,000+ |
| текущая версия | 16.6.3 |
| разработчик | Facebook и вкладчики |
| Дата запуска | Март 2013 |
| типичный размер | 21 КБ мин |
| типичное использование | одностраничные приложения |
| использование | низкий |
Пожалуй, самая обсуждаемая библиотека за последние несколько лет, React претендует на звание библиотеки JavaScript для создания пользовательских интерфейсов. Он сфокусирован на части «View» разработки Model-View-Controller (MVC) и позволяет легко создавать компоненты пользовательского интерфейса, которые сохраняют состояние. Это была одна из первых библиотек, которая реализовала виртуальный DOM; структура в памяти вычисляет различия и эффективно обновляет страницу.
Реактивное использование кажется низким в статистике, возможно, потому что оно используется в приложениях, а не на веб-сайтах. Почти 70% разработчиков утверждают, что имеют некоторый опыт использования библиотеки .
Плюсы:
- маленький, эффективный, быстрый и гибкий
- простая компонентная модель
- хорошая документация и онлайн ресурсы
- возможен рендеринг на стороне сервера
- по-прежнему популярны и быстро растут
- множество вакансий для разработчиков React
Минусы:
- новые концепции и синтаксисы для изучения
- инструменты сборки необходимы
- может потребовать, чтобы другие библиотеки или платформы обеспечивали аспекты модели и контроллера
- может быть несовместимо с кодом и другими библиотеками, которые модифицируют DOM
AngularJS 1.x
| AngularJS | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | angularjs.org |
| хранилище | github.com/angular/angular.js |
| Звезды GitHub | 60,000+ |
| текущая версия | 1.7.5 |
| разработчик | |
| Дата запуска | Октябрь 2010 |
| типичный размер | 144Kb |
| типичное использование | одностраничные приложения |
| использование | низкий |
Angular — это первый фреймворк — или фреймворк приложения MVC — который появится в этом списке. Самым популярным изданием остается версия 1.x, которая расширила HTML с помощью двусторонней привязки данных, отделив манипуляцию DOM от логики приложения.
Angular 1.x все еще находится в разработке, несмотря на выпуск версии 2 (которая сейчас является версией 4!) См. ниже…
Плюсы:
- популярная структура, принятая несколькими крупными компаниями
- единое решение для создания современных веб-приложений
- часть «стандартного» стека MEAN (MongoDB, Express.JS, AngularJS, NodeJS), поэтому доступно множество статей и руководств
Минусы:
- более крутая кривая обучения, чем некоторые альтернативы
- большая кодовая база
- невозможно обновить до Angular 2.x
- несмотря на то, что Google является проектом, Google, кажется, не использует его?
Угловой 2+ (сейчас 7.х)
| угловатый | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | angular.io |
| хранилище | github.com/angular/angular |
| Звезды GitHub | 43,000+ |
| текущая версия | 7,1 |
| разработчик | |
| Дата запуска | Сентябрь 2016 |
| типичный размер | 450 КБ мин |
| типичное использование | одностраничные приложения |
| использование | низкий |
Angular 2.0 был выпущен в сентябре 2016 года. Это было полное переписывание, в котором была представлена модульная модель на основе компонентов, созданная с помощью TypeScript (которая скомпилирована для JavaScript). Чтобы добавить к путанице, версия 4.0 была выпущена в марте 2017 года (v3 был пропущен, чтобы избежать проблем семантической версии).
Angular 2+ радикально отличается от v1. Ни один из них не совместим с другим — возможно, Google должен был дать проекту другое имя ?!
Плюсы:
- единое решение для создания современных веб-приложений
- по-прежнему является частью стека MEAN, хотя доступно меньше руководств по Angular 2+
- TypeScript предоставляет некоторые преимущества для тех, кто знаком со статически типизированными языками, такими как C # и Java.
Минусы:
- более крутая кривая обучения, чем некоторые альтернативы
- большая кодовая база
- невозможно обновить с Angular 1.x
- Angular 2.x испытал относительно низкое поглощение по сравнению с 1.x
- несмотря на то, что Google является проектом, Google, кажется, не использует его?
Vue.js
| Vue.js | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | vuejs.org |
| хранилище | github.com/vuejs/vue |
| Звезды GitHub | 120,000+ |
| текущая версия | 2.5.17 |
| разработчик | Эван Ю |
| Дата запуска | Февраль 2014 |
| типичный размер | 19кб мин |
| типичное использование | компоненты и одностраничные приложения |
| использование | низкий |
Vue.js — это легкая прогрессивная среда для создания пользовательских интерфейсов. Ядро предлагает виртуальный слой представлений на основе DOM, подобный React, который может быть интегрирован с другими библиотеками, но также способен поддерживать одностраничные приложения. Фреймворк был создан Эван Ю, который ранее работал над AngularJS, но хотел извлечь понравившиеся части.
Vue.js использует синтаксис шаблона HTML для привязки DOM к данным экземпляра. Модели — это простые объекты JavaScript, которые обновляют представление при изменении данных. Дополнительные инструменты предоставляют средства для создания лесов, маршрутизации, управления состоянием, анимации и многого другого.
Плюсы:
- быстрое принятие и растущая популярность
- просто начать с высокого уровня удовлетворенности разработчиков
- легкий вес, небольшая зависимость и хорошая производительность
Минусы:
- может быть омрачен React
- некоторая зависимость от одного разработчика для обновлений
- меньше ресурсов, чем альтернатив
Sencha Ext JS
| Ext JS | описание |
|---|---|
| тип | библиотека фреймворков и компонентов |
| интернет сайт | sencha.com/products/extjs/ |
| текущая версия | 6.6.0 |
| разработчик | Сенча |
| Дата запуска | Декабрь 2007 |
| типичный размер | зависит от требований: 85 — 500кб |
| типичное использование | компоненты и одностраничные приложения |
| использование | низкий |
Ext JS произошел от YUI-Ext и имеет одну из самых длинных историй в этом списке. Ext JS, хотя и известен своим широким набором настраиваемых, доступных, кросс-браузерных компонентов пользовательского интерфейса и инструментов визуализации данных , также предоставляет платформу для создания полнофункциональных приложений. Кроме того, вы можете использовать библиотеку компонентов с React или Angular.
Ext JS — единственная платформа, предлагающая коммерческое обучение и поддержку. Есть также варианты, чтобы команда Sencha помогла проанализировать ваш код, автоматизировать тестирование и перейти на другие платформы.
Плюсы:
- широкий спектр используемых компонентов
- содержит все необходимое для создания веб-приложений и мобильных приложений
- настройка скриптов, инструменты дизайна и быстрые прототипы
- предоставляет инструменты для визуального построения и стилизации веб-приложений
- коммерческая поддержка и отличная документация
- 30-дневная бесплатная пробная и общественная версия для небольших приложений (доход до 10 000 долларов в год)
Минусы:
- на данный момент интеграция с каркасами, отличными от React и Angular, может быть непрактичной — см. планы дорожной карты для Ext JS 7
- глубокие изменения пользовательского интерфейса могут быть затруднены
Лодаш и Подчеркивание
| Lodash | описание |
|---|---|
| тип | библиотека |
| интернет сайт | lodash.com/ |
| хранилище | github.com/lodash/lodash/ |
| Звезды GitHub | 35,000+ |
| текущая версия | 4.17.11 |
| разработчик | Джон-Дэвид Далтон |
| Дата запуска | Апрель 2012 |
| типичный размер | 4kb — 24kb min |
| типичное использование | общее назначение |
| использование | низкий |
| Подчеркивать | описание |
|---|---|
| тип | библиотека |
| интернет сайт | underscorejs.org/ |
| хранилище | github.com/jashkenas/underscore |
| Звезды GitHub | 24,000+ |
| текущая версия | 1.8.3 |
| разработчик | Джереми Ашкенас |
| Дата запуска | Октябрь 2009 |
| типичный размер | 6 КБ мин |
| типичное использование | общее назначение |
| использование | низкий |
Lodash и Underscore объединяются в этом разделе, поскольку они предоставляют сотни функциональных утилит JavaScript для дополнения собственных методов обработки строк, чисел, массивов и других примитивных объектов. Существует некоторое совпадение, поэтому вам вряд ли понадобятся обе библиотеки в одном проекте.
Использование на стороне клиента низкое, но любая из этих библиотек может быть адаптирована для серверных приложений Node.js.
Плюсы:
- маленький и простой
- легко учиться с хорошей документацией
- совместим с большинством библиотек и фреймворков
- не расширяет встроенные объекты
- может использоваться на клиенте или сервере
Минусы:
- некоторые методы доступны в ES2015 и более поздних выпусках JavaScript.
Backbone.js
| Backbone.js | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | backbonejs.org |
| хранилище | github.com/jashkenas/backbone/ |
| Звезды GitHub | 37,000+ |
| текущая версия | 1.3.3 |
| разработчик | Джереми Ашкенас |
| Дата запуска | Октябрь 2010 |
| типичный размер | 8 КБ мин |
| типичное использование | одностраничные приложения |
| использование | низкий |
Backbone.js был одним из самых ранних вариантов на стороне клиента, чтобы обеспечить структуру MVC, обычно встречающуюся в инфраструктуре на стороне сервера. Его единственной зависимостью является Underscore.js, созданный тем же разработчиком.
Backbone.js претендует на звание библиотеки, поскольку может быть интегрирован с другими проектами. Я подозреваю, что большинство разработчиков считают, что это фреймворк, хотя и менее самоуверенный, чем некоторые другие.
Плюсы:
- маленький, легкий и менее сложный
- не добавляет логику в HTML
- отличная документация
- принят для многих приложений, включая Trello, WordPress.com, LinkedIn и Groupon
Минусы:
- более низкий уровень абстракции, чем у таких альтернатив, как AngularJS (хотя это можно считать преимуществом)
- требуются дополнительные компоненты для реализации таких функций, как привязка данных
- более поздние фреймворки отошли от архитектур MVC
ember.js
| ember.js | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | emberjs.com |
| хранилище | github.com/emberjs/ember.js |
| Звезды GitHub | 20000 |
| текущая версия | 3.6.0 |
| разработчик | Ember team |
| Дата запуска | Декабрь 2011 |
| типичный размер | 95 КБ мин |
| типичное использование | одностраничные приложения |
| использование | низкий |
Ember.js — это одна из самых масштабных фреймворков, основанная на шаблоне Model-View-ViewModel (MVVM). Он реализует шаблоны, привязку данных и библиотеки в одном пакете. Концепции соглашения о конфигурации будут немедленно знакомы тем, кто имеет опыт работы с Ruby on Rails.
Плюсы:
- предоставляет единое решение для клиентских приложений
- разработчики могут быть мгновенно продуктивными — он использует jQuery
- хорошая обратная совместимость и возможности обновления
- принял современные стандарты веб-разработки
Минусы:
- большой распространяемый
- считается монолитным по сравнению с другими каркасами, которые движутся к меньшим компонентным структурам
- крутая кривая обучения — путь Эмбер или нет
Knockout.js
| Knockout.js | описание |
|---|---|
| тип | фреймворк |
| интернет сайт | knockoutjs.com |
| хранилище | github.com/knockout/knockout |
| Звезды GitHub | 9,000+ |
| текущая версия | 3.5.0 |
| разработчик | Стив Сандерсон |
| Дата запуска | Июль 2010 |
| типичный размер | 59 КБ мин |
| типичное использование | одностраничные приложения |
| использование | низкий |
Knockout.js, одна из более старых платформ MVVM, использует наблюдатели для обеспечения синхронизации пользовательского интерфейса с основными данными. Он имеет шаблоны и отслеживание зависимостей.
Плюсы:
- маленький и легкий без каких-либо зависимостей
- отличная поддержка браузера, возвращаясь к IE6
- хорошая документация
Минусы:
- большие проекты могут стать сложными
- развитие замедлилось
- использование кажется на спад
Известные упоминания
Хотите больше? Следующие проекты менее популярны, но стоят
принимая во внимание:
- Polymer — библиотека, которая поддерживает кросс-браузерную поддержку веб-компонентов HTML5
- Meteor — полнофункциональная платформа для веб-приложений.
- Aurelia — легкий кроссплатформенный каркас
- Svelte — довольно новый проект, который превращает исходный код фреймворка в ванильный JavaScript
- Conditioner.js — новая библиотека, которая автоматически загружает и выгружает модули в зависимости от состояния.
Инструменты: Универсальные исполнители задач
Инструменты сборки автоматизируют различные задачи веб-разработки, такие как предварительная обработка, компиляция, объединение модулей, оптимизация изображений, минимизация кода, распечатывание и запуск тестов. Задачи обычно управляются вместе в одном исполняемом пакете. Самые популярные варианты:
Webpack
| Webpack | описание |
|---|---|
| интернет сайт | webpack.js.org |
| хранилище | github.com/webpack/webpack |
| Звезды GitHub | 45,000+ |
| текущая версия | 4.25.1 |
| еженедельные загрузки | 4 миллиона |
Webpack поддерживает все популярные опции модулей и стал синонимом разработки React. Несмотря на то, что Webpack претендует на звание связующего модуля, его можно использовать как средство выполнения задач общего назначения. Конфигурация JavaScript на основе объектов может быть немного неудобной. Генераторы доступны, но некоторые пользователи Webpack переходят на Parcel для упрощения настройки и сокращения времени компиляции.
Gulp.js
| Gulp.js | описание |
|---|---|
| интернет сайт | gulpjs.com |
| хранилище | github.com/gulpjs/gulp |
| Звезды GitHub | 30,000+ |
| текущая версия | 4.0.0 (3.9.1 все еще активен) |
| еженедельные загрузки | 750,000+ |
Хотя это был не первый участник, Гулп быстро стал одним из самых популярных и стал моим личным фаворитом . Gulp использует легко читаемый код JavaScript, который загружает исходные файлы в поток и передает данные через различные плагины перед тем, как они выводятся в папку сборки. Это просто, быстро и весело, но разработчики переходят на Webpack.
НПМ
| НПМ | описание |
|---|---|
| интернет сайт | npmjs.com |
| хранилище | github.com/npm/npm |
| Звезды GitHub | 17,000+ |
| текущая версия | 6.4.1 |
| еженедельные загрузки | 1 миллион |
npm — менеджер пакетов Node.js, но его сценарии можно использовать для выполнения задач общего назначения . Это привлекательный вариант для простых проектов с небольшим количеством зависимостей. Однако более сложные задачи могут быстро стать непрактичными.
хрюкать
| хрюкать | описание |
|---|---|
| интернет сайт | gruntjs.com |
| хранилище | github.com/gruntjs/grunt |
| Звезды GitHub | 17,000+ |
| текущая версия | 1.0.3 |
| еженедельные загрузки | 425000 |
Грант был одним из первых исполнителей задач JavaScript, который получил массовое внедрение, но скорость и сложная конфигурация JSON привели к росту Gulp. Худшие проблемы были решены, и Grunt остается популярным вариантом.
Инструменты: модульные комплекты
Управление несколькими файлами JavaScript может стать рутиной. Если вы не можете принять относительно новый синтаксис импорта модуля ES6 изначально, зависимости JavaScript в браузере должны быть загружены или объединены в соответствующем порядке. Пакет модулей можно использовать, если вам нужно поддерживать старые браузеры (все, что было выпущено до 2018 года), но необходимость использовать эти инструменты со временем уменьшится.
Browserify
| Browserify | описание |
|---|---|
| интернет сайт | browserify.org |
| хранилище | github.com/browserify/browserify |
| Звезды GitHub | 12,000+ |
| текущая версия | 16.2.3 |
| еженедельные загрузки | 480000 |
Browserify поддерживает модули CommonJS, используемые Node.js для компиляции всех модулей в один совместимый с браузером файл.
RequireJS
| RequireJS | описание |
|---|---|
| интернет сайт | requirejs.org |
| хранилище | github.com/requirejs/r.js |
| Звезды GitHub | 2,500+ |
| текущая версия | 2.3.6 |
| еженедельные загрузки | 230000 |
RequireJS запустил в жизнь загрузчик модулей в браузере, хотя его также можно использовать в Node.js. Поддерживает синтаксис AMD.
Инструменты: Linting
Linting анализирует ваш код на предмет возможных ошибок или отклонений от синтаксических стандартов. Вы никогда не пропустите закрывающую скобку или необъявленную переменную снова!
ESLint
| ESLint | описание |
|---|---|
| интернет сайт | eslint.org |
| хранилище | github.com/eslint/eslint |
| Звезды GitHub | 12,000+ |
| текущая версия | 5.9.0 |
| еженедельные загрузки | 4 миллиона |
ESLint — самый популярный инструмент для рисования, поддерживаемый большинством сред IDE, редакторов, сборщиков и исполнителей задач. Каждое правило — это плагин, поэтому его можно настроить по своему вкусу.
JSHint
| JSHint | описание |
|---|---|
| интернет сайт | jshint.com |
| хранилище | github.com/jshint/jshint |
| Звезды GitHub | 8000 + |
| текущая версия | 2.9.6 |
| еженедельные загрузки | 390000 |
Гибкий JavaScript-линтер, который менее настраиваем, чем ESLint, но обеспечивает хороший баланс между подлинными ошибками и педантичными синтаксическими требованиями.
JSLint
| JSLint | описание |
|---|---|
| интернет сайт | jslint.com |
| хранилище | github.com/reid/node-jslint |
| Звезды GitHub | 8000 + |
| текущая версия | 0.12.0 |
| еженедельные загрузки | 11500 |
Один из первых линтеров и он реализует строгий набор правил по умолчанию. Разработка замедлилась, и это может быть немного бескомпромиссным для некоторых разработчиков.
Инструменты: Test Suites
Test-Driven-Development требует от вас написания кода для тестирования вашего кода, прежде чем вы начнете его писать. Вы также можете написать код для тестирования своего тестового кода!
Есть много вариантов, включая Ava , Tape и Jasmine, но три самых популярных варианта в настоящее время …
Шутка
| Шутка | описание |
|---|---|
| интернет сайт | https://jestjs.io/ |
| хранилище | github.com/kof/node-qunit |
| Звезды GitHub | 21,000+ |
| текущая версия | 23.6.0 |
| еженедельные загрузки | 2 миллиона |
Платформа тестирования от Facebook, популярность которой возросла благодаря тесным связям с React и Webpack.
кофе мокко
| кофе мокко | описание |
|---|---|
| интернет сайт | mochajs.org |
| хранилище | github.com/mochajs/mocha |
| Звезды GitHub | 16,500+ |
| текущая версия | 5.2.0 |
| еженедельные загрузки | 1,8 миллиона |
Mocha может запускать тесты в Node.js и браузере. Он поддерживает асинхронное тестирование и часто соединяется с Chai, чтобы тестовый код мог быть представлен в удобочитаемом стиле. Это был самый популярный вариант за несколько лет.
жасмин
| жасмин | описание |
|---|---|
| интернет сайт | jasmine.github.io |
| хранилище | github.com/jasmine/jasmine-npm |
| Звезды GitHub | 300+ |
| текущая версия | 3.3.0 |
| еженедельные загрузки | 750000 |
Jasmine — это набор тестов на основе поведения, который может автоматизировать тестирование вашего пользовательского интерфейса и взаимодействия в браузере.
Инструменты: Разное
Несмотря на все мои усилия, я принимаю, что не все любят JavaScript! Компиляторы, такие как TypeScript , LiveScript и CoffeeScript, могут сделать вашу жизнь разработки более приятной. В качестве альтернативы рассмотрите возможность преобразования Babel в современный краткий исходный код ES2015 в кросс-браузер-совместимый код ES5.
Существуют десятки движков шаблонов HTML на основе JavaScript, включая Mustache , Handlebars , Pug (Jade) и EJS . Я предпочитаю легкие опции, которые сохраняют синтаксис JavaScript, такие как EJS и doT .
Наконец, зачем писать свою документацию, если вы можете ее автоматизировать? ES2015-совместимые генераторы документации включают в себя ESDoc , JSDoc , YUIdoc , documentation.js и Transcription .
Резюме и рекомендации
Если вы следуете мудрости толпы, импульс в настоящее время позади React, и другие библиотеки движутся в аналогичном техническом направлении. Это безопасный выбор карьеры, но вы также должны рассмотреть Vue.js или React-совместимый, но меньший Preact .
Монолитные фреймворки перестали пользоваться популярностью, но, если вам требуется строгая структура для крупных проектов, AngularJS остается популярным вариантом. Большинство разработчиков придерживаются версии 1.0, но это возможно из-за необходимости, чем выбор. В долгосрочной перспективе вариант 2+ может быть более безопасным, но вам необходимо изучить TypeScript.
Ext JS от Sencha — отличный вариант для компаний (от малых предприятий до предприятий), которые ищут вариант, который включает в себя как инфраструктуру, так и готовые, интегрированные компоненты и инструменты, включая доступ к коммерческой поддержке. Ext JS также легко интегрирует свою надежную библиотеку компонентов с React и Angular для разработчиков, желающих реализовать предварительно созданные компоненты, а не создавать их самостоятельно.
Не сбрасывайте со счетов JQuery . Это не модно и редко упоминается в технической прессе, но активно развивается и более чем способно для веб-сайтов и приложений. jQuery имеет небольшую кривую обучения и понятна многим разработчикам по всему миру.
Если вы любите приключения, новые опции транспортера, такие как Svelte и Rawact, преобразуют код фреймворка в ванильный JavaScript. Зависимость фреймворка удалена, код значительно меньше и работает быстрее.
Выбор инструментов менее важен и может варьироваться от проекта к проекту. Большинство сценариев WebPack , Gulp или npm. Вы не можете ошибиться с ESLint и Jest для тестирования, но есть много альтернатив, чтобы попробовать.
Тем не менее, каждый проект, команда и набор навыков отличается. У вас есть ограниченное время для оценки, поэтому заманчиво использовать то, что вы знаете. Эта статья будет получать комментарии, рекомендующие FrameworkX, но все выглядит как гвоздь, когда у вас есть молоток.
Наконец, никогда не забывайте, что библиотеки, фреймворки и инструменты не являются обязательными! Разработка JavaScript была революционизирована за последнее десятилетие; мы перешли от нескольких элементарных вспомогательных библиотек к огромному выбору. Легко попасть в ловушку все возрастающей сложности или переходить на новейшую горячую среду каждые несколько месяцев. Всегда рассматривайте ванильный JavaScript — особенно для небольших и личных. Полученные знания не могут быть датированы и станут неоценимыми при оценке основ для других проектов.
Я пропустил, отклонил или не оценил преимущества ваших любимых библиотек JavaScript, фреймворков и инструментов? Конечно, у меня есть! Комментарии приветствуются …