Детальный список инструментов для JavaScript — Разработка на vc.ru
Перед началом статьи хочу сказать, что еще больше полезной и нужной информации вы найдете в нашем Телеграм-канале по ссылке: https://t.me/metsolution (Огромная просьба подписаться, ведь именно Телеграм-канал является моей мотивацией <3)
10 892 просмотров
Введение
В январе 2017 года сообщество Stack Overflow провело опрос, в котором приняли участие 64 000 разработчиков из разных стран мира. Результаты для первого места остаются без изменений в течение пяти последних лет. JavaScript остаётся несменяемым лидером в гонке популярности языков программирования.
На изображении представлены результаты опроса на Stack Overflow
JavaScript служит мощной и стабильной основой для многих продвинутых современных веб-приложений и веб-сайтов. В умелых руках опытного разработчика с помощью JavaScript можно продвинуть UX приложения на новый уровень и добавить богатый набор функций и разные высоко функциональные компоненты.
Можно выбирать инструменты, основываясь на рейтинге и популярности. Если инструмент популярен и имеет хорошие отзывы и большое сообщество, то повышается вероятность того, что вы столкнётесь с меньшим количеством проблем во время работы с ним. Вы можете также посмотреть на лучшие фреймворки и библиотеки для JavaScript, по мнению некоторых программистов. Также при выборе инструмента нужно со всех сторон изучить свой проект, чтобы не было проблем с масштабируемостью и совместимостью с разными браузерами и их версиями.
Инструменты сборки и автоматизации
Инструменты сборки для кросс-платформенных языков вроде .Net или Java — обычное дело. Но что насчёт JavaScript? Когда разработчики начали использовать этот язык программирования для крупномасштабных проектов, то они столкнулись с проблемами масштабируемости, безопасности, производительности и обслуживания. Поэтому пришло время использовать инструменты сборки для работы с JavaScript.
- Webpack — одна из последних новинок в мире фронтенда. Он представляет собой модульный упаковщик, который создаёт граф зависимостей со всеми модулями для приложения на JavaScript. Webpack упаковывает модули в один или несколько маленьких пакетов для загрузки браузером. Кроме того, Webpack может использоваться в качестве средства запуска задач, так как он анализирует зависимости между модулями и образовывает ресурсы (ассеты).
- Grunt — таск раннер, предназначенный для автоматизации повторяющихся и трудоёмких задач, которые отнимают много времени. В его программной экосистеме существует огромное количество плагинов (более 6000).
- Gulp — не очередной диспетчер запуска задач, а инструмент с интересным подходом: он определяет задачи в JavaScript как функции, также GUl автоматизирует «болезненные» задачи, предлагая обширную программную экосистему (более 2700 плагинов), также он обеспечивает лучшую прозрачность и контроль над процессом.
- Browserify позволяет разработчикам программного обеспечения использовать модули стиля NodeJS в браузерах. Вы определяете зависимости, а Broweserify упаковывает всё это в аккуратный JS-файл.
- Brunch.io — инструмент, основными идеями которого являются скорость и простота. Он поставляется с простой конфигурацией и подробной документацией для быстрого запуска. Brunch автоматически создаёт карту JS-файлов вместе с таблицами стилей CSS, что упрощает процесс отладки на стороне клиента.
- Yeoman — универсальный инструмент, который может использоваться с почти любым языком программирования (JavaScript, Python, C#, Java и прочие). Эта базовая система кодогенерации с богатой программной экосистемой (более 6200 плагинов) служит для разработки веб-приложений. Благодаря Yeoman вы можете быстро создавать новые проекты, не забывая об обслуживании и улучшении уже существующих.
IDE и редакторы кода
- WebStorm — мощная IDE для продвинутой разработки веб-приложений на JavaScript.
- Atom — бесплатный продукт от GitHub и выбор №1 для многих разработчиков. Он представляет собой легко настраиваемый редактор кода, который поставляется с некоторыми интересными функциями «прямо из коробки». В Atom имеется встроенный менеджер пакетов, интеллектуальное автоматическое завершение кода и прочие полезные функции. Также Atom является кросс-платформенным редактором кода.
- Visual Studio Code — поддерживается компанией Microsoft и полностью поддерживает TypeScript «прямо из коробки». В Visual Studio Code есть интеллектуальное завершение кода и подсветка синтаксиса с помощью технологии автодополнения IntelliSense, также есть встроенный инструмент отладки, встроенная поддержка команд Git, контроль версий и многое другое. Более того, вы можете расширить функциональность редактора путём подключения широкого спектра расширений
- Brackets — это лёгкий редактор кода с открытым исходным кодом. В основном он ориентирован на визуальные инструменты и поддержку процессора для упрощения работы в браузере. Brackets поставляется с удобной функцией предварительного просмотра в реальном времени.
Инструменты документирования кода
Документирование кода превращает ваше приложение в «стеклянную коробку», показывая, как работает тот или иной фрагмент кода. Инструменты автоматического документирования кода описывают функции и их назначения, что позволяет экономить время на анализе и понимании кода в будущем.
- Swagger — это набор правил и инструментов для описания API. Инструмент представляет собой языково-независимую утилиту. Это значит, что Swagger создаёт чёткую документацию, которая читается одинаково хорошо как человеком, так и машиной, позволяя автоматизировать процессы зависящие от API.
- JSDoc — набор инструментов, автоматически создающий многостраничную текстовую документацию (HTML, JSON, XML и т. д.) из комментариев из исходного кода на JavaScript. Это приложение может пригодиться для управления крупномасштабными проектами.
- YUIDoc — приложение, написанное на NodeJS. Оно использует синтаксис, подобный тому, который применяется в Javadoc и Doxygen. Также инструмент может похвастаться поддержкой предварительного просмотра в реальном времени, расширенной поддержкой языка и продвинутой разметку.
- Docco — бесплатный инструмент для документации, написанный на «литературном» CoffeeScript.
Инструменты тестирования
Инструменты тестирования для JavaScript созданы для обнаружения ошибок на этапе производства, чтобы избежать в будущем ошибок у пользователей. С ростом сложности пользовательских приложений автоматические тесты не только повышают производительность приложения, но и помогают компаниям сохранить бюджет.
- Jasmine — BDD-фреймворк (Behavior-driven Development — разработка на основе поведений) служит для тестирования JS-кода. У него нет внешних зависимостей, и он не требует запуска DOM. Jasmine имеет чистый и понятный синтаксис, что позволяет ускорять и упрощать тестирование. Также фреймворк может использоваться для тестирования кода NodeJS, Python, Ruby.
- Mocha — это функциональная тестовая среда, работающая на Node. js в браузере. Она проводит тесты последовательно для обеспечения гибкой и точной отчётности, делая асинхронные тесты весёлыми и лёгкими. Mocha часто используется вместе с Chai для проверки результатов теста.
- Protractor — это сквозной тестовый фреймворк, написанный на Node.js для тестирования приложений на AngularJS и Angular. Он был создан на основе WebDriverJS и проверяет приложения подобно конечному пользователю, используя специальные драйвера и встроенные события.
Инструменты отладки
Отладка кода — довольно трудоёмкий и поглощающий время процесс для JavaScript-разработчиков. Инструменты для отладки кода будут особенно полезны при работе с тысячами строк кода. Многие из инструментов отладки обеспечивают довольно точные результаты.
- JavaScript Debugger — инструмент от сообщества разработчиков Mozilla (MDN), который может быть использован как автономное веб-приложение для отладки кода в разных браузерах и коде на NodeJS. Firefox предлагает локальные и удалённые функциональные возможности, а также возможность отладки кода на Android-устройстве с помощью Firefox для Android.
- Chrome Dev Tools — набор инструментов, включающий в себя несколько утилит для отладки кода JavaScript, редактирования CSS и тестирования производительности приложений.
- ng-inspector — кросс-браузерное расширение, которое призвано помочь разработчикам с написанием, пониманием и отладкой приложений на AngularJS. Утилита поставляется с обновлениями в реальном времени, подсветкой DOM, прямым доступом к областям, моделям и прочим элементам приложения.
- Augury — расширение для браузера Google Chrome и отладки приложений на Angular 2. Оно позволяет разработчикам приложений на Angular 2 напрямую анализировать структуру приложения и рабочие характеристики, а также позволяет обнаружить изменения.
Инструменты безопасности
- Snyk — коммерческий инструмент для обнаружения, исправления и предотвращения известных уязвимостей в приложениях на JavaScript, Java и Ruby. Служба имеет собственную базу данных уязвимостей и берёт данные из NSP и NIST NVD. Патчи и обновления, которые предлагает компания, позволяют разработчикам предупредить риски, связанные с безопасностью.
- Node Security Project предлагает полезные инструменты для сканирования зависимостей и обнаружения уязвимостей. NSP использует свою собственную базу данных, построенную на сканировании модулей npm, а также данные из общих баз данных, таких как NIST NVD (National Vulnerability Database). Кроме того, NSP обеспечивает интеграцию с программным обеспечением GitHub Pull Request и CI. Также имеется проверка в реальном времени, предупреждения и рекомендации по устранению уязвимостей в приложениях на NodeJS.
- RetireJS — это средство проверки зависимостей с открытым исходным кодом. Включает в себя различные компоненты, такие как сканер командной строки, плагин Grunt, расширения Firefox и Chrome, плагины Burp и OWASP ZAP. Retirejs собирает информацию об уязвимостях из NIST NVD и других источников, таких как системы отслеживания ошибок, блоги и списки рассылки.
- Gemnasium — это коммерческий инструмент с бесплатной пробной версией. Он поддерживает различные технологии и пакеты, включая Ruby, PHP, Bower (JavaScript), Python и npm (JavaScript). Инструмент безопасности Gemnasium поставляется с полезными функциями, такими как автоматическое обновление, оповещения в реальном времени, уведомления о безопасности и интеграция с сервисом Slack.
- OSSIndex поддерживает различные экосистемы (Java, JavaScript и .NET / C #) и множество платформ, таких как NuGet, npm, Bower, Chocolatey, Maven, Composer, Drupal и MSI. Он собирает информацию об уязвимостях из Национальной базы данных уязвимостей (NVD) и отзывов. Также он обрабатывает информацию от членов сообщества.
Инструменты аналитики и оптимизации кода
Для проверки качества кода обычно обращаются к функциональному тестированию и юнит-тестированию. Однако существует еще один подход, который позволяет разработчикам проверять качество кода и его соответствие стандартам кодирования, а именно статический анализ кода.
В настоящее время в современном программном обеспечении объединяются инструменты анализа статического кода во время разработки, чтобы исключить попадание некачественного кода в продакшен.
- JSLint — это аналитический веб-инструмент для проверки качества кода JavaScript. Как только он обнаруживает проблему в источнике, он возвращает сообщение с описанием проблемы и приблизительным местоположением в коде. JSLint способен анализировать некоторые нормы стиля и раскрывать синтаксические ошибки и структурные проблемы.
- JSHint — гибкий инструмент, развивающийся сообществом, для обнаружения ошибок и потенциальных проблем в вашем JS-коде, кроме того, JSHint — форк от JSLint. Основная цель этого инструмента статического анализа кода — помощь разработчикам JavaScript, работающим над сложными программами. Он способен обнаруживать ошибки синтаксиса, неявное преобразование типов данных или отсутствие переменной. Однако он не может определить скорость и правильность работы вашего приложения, как и не сможет определить проблемы с памятью в вашем приложении. JSHint — форк от JSLint.
- ESLint – это линтер с открытым исходным кодом для веб-приложений JSX и JavaScript. Он помогает обнаруживать сомнительные шаблоны или находить код, который не соответствует конкретным стилям. Это позволяет разработчикам обнаруживать ошибки в JS-коде без его выполнения, тем самым экономя время. Будучи написанным на NodeJS, инструмент предлагает оперативную среду выполнения и плавную установку через npm.
- Flow — статический контролёр кода для JavaScript, разработанный компанией Facebook. Он использует аннотации статического типа для проверки кода на предмет ошибок. Типы — параметры, установленные разработчиками, а Flow проверяет ваше программное обеспечение на соответствие требованиям.
Инструменты управления версиями
Системы управления версиями JavaScript необходимы для плавного взаимодействия внутри команды, поскольку они обеспечивают лучшее обслуживание различных версий и помогают отслеживать изменения. С инструментами управления версиями разработчики могут работать над одним и тем же проектом одновременно, без конфликтов и недоразумений. Кроме того, эти утилиты архивируют каждую версию со всеми изменениями, удалениями и добавлениями.
- В последние годы Git стала широко используемой системой контроля версий как для небольших, так и для крупных проектов. Эта бесплатная утилита обеспечивает отличную скорость работы и эффективность. Её популярность объясняется высокораспределенной системой и различными типами элементов управления, а также промежуточной областью, где версии могут быть просмотрены и отформатированы непосредственно перед завершением фиксации.
- Инструмент Subversion или SVN приобрёл огромную популярность, и он по-прежнему широко используется в проектах с открытым исходным кодом и такими платформами, как Python Apache или Ruby. Этот CVS поставляется со множеством функций, позволяющих управлять различными операциями (переименование, копирование, удаление и т. д.), слияниями, блокировкой файлов и многим другим.
Инструменты управления пакетами и зависимостями
Современное ПО хранится в виде пакетов в репозиториях. Такие пакеты предоставляют исходные компоненты операционной системы, такие как приложения, библиотеки, службы и документы. Системы управления пакетами отвечают за различные операции, такие как установка и обновление, тем самым помогают убедиться, что программное обеспечение было одобрено разработчиками.
- Bower — разработка Twitter, которая помогает управлять ресурсами, фреймворками, библиотеками и другими утилитами. Она предлагает доступ к большому количеству пакетов, помогая разработчикам JavaScript оптимизировать процесс разработки и улучшить результаты.
- Npm — диспетчер пакетов узлов. Пакеты могут использоваться как для фронтенда, так и для бэкенда. Npm является системой управления пакетами для JavaScript и самым большим реестром программного обеспечения в мире, насчитывающим более 475 000 модулей.
- Yarn — инструмент, который приобрёл популярность благодаря Google, Facebook, Tilde и Exponent. Основное внимание в нём уделено безопасности, скорости и быстродействию. Инструмент позволяет совместно использовать код через пакеты и модули вместе с файлом, описывающим пакет.
- Duo вобрал в себя лучшее из Browserify, Component и Go, превратив разработку фронтенда в быстрый и простой процесс. Основная идея Duo заключается в упрощении написания модульных компонентов и создания масштабных веб-приложений быстро и «безболезненно».
Список лучших инструментов для разработки на JavaScript может продолжаться до бесконечности. В этой статье вы увидели лишь популярные и надёжные инструменты, которые служат основой для качественных продуктов. Благодарим за внимание!
Оригинал — The ultimate list of JavaScript tools
Формат · Day.js
Получает отформатированную дату, исходя из переданных строковых знаков.
Чтобы отобразить зарезервированные символы, заключите их в квадратные скобки (например: [MM]
).
dayjs().format() // текущая дата в формате ISO 8601, без доли секунд. Например: '2020-04-02T08:02:17-05:00' dayjs('2019-01-25'). format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') // 'YYYYescape 2019-01-25T00:00:00-02:00Z' dayjs('2019-01-25').format('DD/MM/YYYY') // '25/01/2019'
Список всех доступных единиц измерения
Формат | Выходные данные | Описание |
---|---|---|
YY | 18 | Двухзначное значение года |
YYYY | 2018 | Четырехзначное значение года |
M | 1-12 | Месяц, начиная с 1 |
ММ | 01-12 | Месяц, двухзначное число |
МММ | Янв-Дек | Сокращенное название месяца |
ММММ | Январь-Декабрь | Полное название месяца |
D | 1-31 | День месяца |
DD | 01-31 | День месяца, двухзначное число |
d | 0-6 | День недели, где воскресенье — это 0 |
dd | Вс-Сб | Минимальное название дня недели |
ddd | Вскр-Сбт | Краткое наименование дня недели |
dddd | Воскресенье-Суббота | Название дня недели |
H | 0-23 | Час |
HH | 00-23 | Час, двухзначное число |
h | 1-12 | Час, 12-часовой формат времени |
hh | 01-12 | Час, 12-часовой формат времени, двухзначное число |
m | 0-59 | Минута |
mm | 00-59 | Минута, двухзначное число |
s | 0-59 | Секунда |
ss | 00-59 | Секунда, двухзначное число |
SSS | 000-999 | Миллисекунда, трехзначное число |
Z | +05:00 | Значение смещения от UTC, ±HH:mm |
ZZ | +0500 | Значение смещения от UTC, ±HHmm |
A | AM PM | |
a | am pm | |
. .. | … | Другие форматы (
зависящий AdvancedFormat plugin
) |
- Больше доступных форматов
Q Do k kk X x ...
содержатся в плагинеAdvancedFormat
Локализованные форматы
Поскольку предпочтительное форматирование базируется на локали, существует несколько локализованных форматируемых токенов, которые могут быть использованы в зависимости от значения (локали).
This requires the LocalizedFormat
для работы
dayjs.extend(LocalizedFormat) dayjs().format('L LT')
Список локализованных форматов
Формат | Английская локаль | Пример вывода |
---|---|---|
LT | h:mm A | 8:02 PM |
LTS | h:mm:ss A | 8:02:18 PM |
L | MM/DD/YYYY | 08/16/2018 |
LL | MMMM D, YYYY | August 16, 2018 |
LLL | MMMM D, YYYY h:mm A | August 16, 2018 8:02 PM |
LLLL | dddd, MMMM D, YYYY h:mm A | Thursday, August 16, 2018 8:02 PM |
l | M/D/YYYY | 8/16/2018 |
ll | MMM D, YYYY | Aug 16, 2018 |
lll | MMM D, YYYY h:mm A | Aug 16, 2018 8:02 PM |
llll | ddd, MMM D, YYYY h:mm A | Thu, Aug 16, 2018 8:02 PM |
← ОтображениеВремя от текущего момента →
TodoMVC
Помочь вам выбрать инфраструктуру MV*
Введение
В наши дни разработчики избалованы выбором, когда дело доходит до выбора инфраструктуры MV* для структурирования и организации своих веб-приложений JavaScript.
Backbone, Ember, AngularJS… список новых и стабильных решений продолжает расти, но как же решить, какое из них использовать в море вариантов?
Чтобы помочь решить эту проблему, мы создали TodoMVC — проект, предлагающий одно и то же приложение Todo, реализованное с использованием концепций MV* в большинстве популярных на сегодняшний день сред JavaScript MV*.
Примеры
JavaScriptCompile-to-JSLabsЭто примеры, написанные на чистом JavaScript.
- Backbone.js
- AngularJS
- Ember.js
- KnockoutJS
- Dojo
- Knockback.js
- CanJS
- Полимер
- Реакция
- Мифрил
- Vue.js
- Marionette.js
Это приложения, написанные на языке программирования языки, которые компилируются в JavaScript.
- Kotlin + React
- Spine
- Dart
- GWT
- Closure
- Elm
- AngularDart 9002 1 TypeScript
- TypeScript
+ AngularJS - TypeScript
+ React - Reagent
- Scala .js + React
- Scala.js + Binding.scala
- js_of_ocaml
- Humble + GopherJS
+ Backbone. js
Это примеры, написанные на JavaScript, которые мы все еще оцениваем.
- Backbone.js + RequireJS
- KnockoutJS + RequireJS
- AngularJS + RequireJS
- CanJS + RequireJS
- Lavaca + RequireJS 9002 1 cujoJS
- Sammy.js
- soma.js
- DUEL
- Кендо UI
- Dijon
- Enyo +
Backbone.js - SAPUI5
- Exoskeleton
- Ractive.js
- React + Alt
- React +
Backbone.js 9 0022 - Аурелия
- Угловой 2.0
- Riot
- JSBlocks
- R = приложение также демонстрирует маршрутизацию + AngularJS
Node.js
- Express + gcloud-node
Сравните их с реализацией без фреймворка
- Vanilla JS
- Vanilla ES6
- jQuery
Новое в версии 1.
3- Теперь у нас есть 64 заявки.
Новое с версии 1.3 ▼
- AngularDart
- Atma.js
- Exoskeleton
- ComponentJS
- Binding.scala
- Обновления был сделан для приложений, включая Vanilla, Angular, React, Backbone, Ember, jQuery и многих других.
- Приложение Knockoutjs_classBindingProvider удалено.
Выбор фреймворка
После того, как вы загрузили последнюю версию и поэкспериментировали с приложениями, вам нужно выбрать конкретный фреймворк, который вы хотите попробовать.
Изучите синтаксис, необходимый для определения моделей, представлений и (где это применимо) контроллеров и классов в интересующих вас фреймворках, и попробуйте свои силы в редактировании кода, чтобы увидеть, как он себя чувствует, используя его из первых рук.
Пожалуйста, убедитесь, что если вы довольны этим, вы тратите больше времени на изучение фреймворка (включая чтение официальной документации, исходного кода и полного списка его функций). Зачастую фреймворк намного шире того, что мы представляем в наших примерах.
Начало участия
Есть ли ошибка, которую мы не исправили, или фреймворк MV*, который, по вашему мнению, выиграет от включения в TodoMVC?
Если это так, не стесняйтесь разветвить репозиторий, прочитать наши правила участия и отправить запрос на включение — мы будем рады рассмотреть его для включения.
Убедитесь, что вы используете шаблон в качестве отправной точки и прочитайте спецификацию приложения.
Отправить запрос на вытягивание »
Предоставлено вам Эдди СиндреПаскальСтивенКолинАртурСэм
Список JavaScript — библиотека пользовательского интерфейса Webix на основе HTML5, CSS
Редактирование
Помимо упорядоченного просмотра некоторой информации, List позволяет пользователям редактировать существующие данные. Просто нажмите на нужный пункт списка и измените его значение по своему усмотрению.
Нажмите на любой элемент, чтобы открыть редактор
Проверка
Webix позволяет вам проверять одну запись или весь набор данных по предопределенным правилам проверки. Если есть недопустимое значение, соответствующий элемент будет выделен. Вы также можете отобразить предупреждающее сообщение на экране.
Попробуйте отредактировать элемент, окрашенный в розовый цвет.
Динамическая загрузка и ленивый рендеринг
С помощью одной настройки вы можете включить динамическую загрузку данных и ленивую визуализацию элементов списка. Динамическая загрузка позволяет загружать данные по мере необходимости, что значительно повышает производительность сервера. Отложенный рендеринг также повышает производительность приложений, поскольку элементы списка добавляются на страницу только при прокрутке.
Список групп
Список групп позволяет представить список элементов данных, сгруппированных по категориям. Группировка данных является иерархической, что означает, что любой элемент группы может начинать свою собственную группу. Кроме того, вы можете без труда сортировать и фильтровать все элементы группового списка.
Нажмите на элемент списка, чтобы увидеть его группу
Х-список
Этот список страниц JavaScript, связанный с пользовательским интерфейсом, представляет собой необычный способ представления данных. В то время как стандартные списки располагают элементы вертикально, X-список предлагает горизонтальное расположение, сохраняя при этом все функции списка.
Список с фиксированной шириной и пользовательским CSS для элементов
Юнитлист
Unitlist позволяет представлять данные в группах, полученных из исходных неиерархических наборов данных. С помощью этого виджета пользовательского интерфейса элементы данных сортируются, а затем объединяются по общим значениям. Unitlist поможет вам справиться с большим объемом беспорядочной информации, организовав ее в небольшие группы.
Возможность пейджинга в виджете списка JavaScript
Вы можете добавить анимацию страниц в список JavaScript Webix. Это поможет вашему конечному пользователю быстро найти важную информацию.
Нажмите кнопку «Далее»
Фильтрация
Вы можете легко фильтровать данные, содержащиеся в JS-виджете Webix List. Это также позволяет быстро находить важные предметы.
Введите в поля ввода, чтобы отфильтровать списки
Работа с буфером обмена
Этот виджет списка JavaScript позволяет легко копировать и вставлять элементы списка и другие объекты HTML с помощью знакомых горячих клавиш.