JavaScript является неотъемлемым компонентом инструментария любого веб-разработчика, но для того, чтобы извлечь максимальную выгоду из него, вам нужна команда больше, чем vanilla JS.
Если вы только начинаете работать с JavaScript, чистый объем доступных инструментов может показаться более чем пугающим. Вот почему мы собрали вместе 25 лучших, охватывающих все: от фреймворков и интерфейсов до кода качества и инструментов тестирования.
Читайте дальше, чтобы открыть для себя некоторые из лучших инструментов веб-дизайна, на которые вы можете положиться, и как они помогут вам стать лучшим разработчиком JavaScript.
Когда он компилируется, TypeScript может настраивать любую версию JavaScript, необходимую для каждого проекта
проблема для новых разработчиков JavaScript — это система динамического ввода. Тип переменной можно вывести во время выполнения, но не будет иметь никакого ограничения относительно того, какой тип может быть в будущем.
Динамическое типирование может быть полезно при создании шаблонов, но насколько полезной она зависит от t он проект. TypeScript стремится привнести декларативный стиль программирования, набрав переменные, где разработчики считают, что это имеет смысл.
Отображаются аннотации типов, где определена переменная. С объектами интерфейсы определяют структуру объекта, и тип становится ссылкой на этот интерфейс. Они могут быть расширены для создания легко настраиваемых объектов.
ТипScript использует экспериментальный синтаксис JavaScript как часть его системы. Например, декораторы — это функции, которые применяются к классу, методу или свойству, которые обеспечивают повторяемую функциональность. Они могут сохранить дублирование в проекте.
Он также компилирует существующий синтаксис, такой как классы, модули и функции стрелок, в действительные ES3 или ES5. Это можно настроить для браузеров, ориентированных на каждый проект. Когда браузеры могут поддерживать эти функции, TypeScript может быть проинструктирован о том, чтобы сохранить их, что делает полученный код более эффективным.
ТипScript является надмножеством JavaScript, поэтому предоставляет преимущества для языка без изменения его структуры. В результате любой JavaScript действителен для TypeScript, и любые его используемые функции являются полностью необязательными.
02. ESLint
Linting — это тип статического анализа кода, который может быть выполнен в проекте для проверки любого сценария, который может сломаться или не соответствует предпочитаемому стилю для проекта. ESLint может проверять JavaScript на наличие распространенных ошибок в дополнение к следующим популярным предопределенным наборам правил от таких компаний, как Google и Airbnb.
03. Prettier
. Как и ESLint, Prettier может определить форматирование причуд. Он также идет еще на один шаг и автоматически обновляет линии нарушения от имени разработчика. Хотя это не так настраивается, Prettier больше осведомлен о окружающих контекстах и будет применять только форматирование, где это имеет смысл. Он также может поддерживать другие форматы, такие как JSX.
04. Travis CI
Travis CI — инструмент непрерывной интеграции (CI). Он контролирует филиалы GitHub для любых новых коммитов и будет проводить тесты против него, чтобы убедиться, что в процессе ничего не было. Затем он может развернуть изменение или сообщить команде о любых проблемах. Travis CI является бесплатным для использования с проектами с открытым исходным кодом, где важна последовательность.
05. JSDoc
При написании сложных модулей может быть сложной задачей запомнить, как все работает. С помощью JSDoc методы могут иметь специальный код, который описывает, что они делают, любые параметры, которые они ожидают, и то, что они могут вернуть. Затем это можно обработать, чтобы создать документацию или включить редакторы, такие как VS Code, для предоставления подсказок в контексте для разработчиков.
Рамки
06. React
React Sight — это Chrome-плагин, который визуализирует иерархию компонентов наряду с состоянием и реквизитами
Создано Facebook, React является одной из самых популярных фреймворков JavaScript на данный момент. Он в основном создан для предоставления пользовательского интерфейса приложения.
Он построен на концепции компонентов — отдельных блоков контента, которые Расскажите, как повторно каждой части приложения. Когда что-то изменится, React выработает то, что нужно обновить на странице.
класс App расширяет React.Component {
render () {
вернуть (
)
}
}
Хотя это не существенно, в проектах JSX написано много проектов React. Это язык, который выглядит и работает аналогично HTML, но позволяет компонентам легко работать друг с другом.
Каждый компонент имеет специальный метод «render», который сообщает React, что отображать.
React использует однонаправленный поток данных, что означает, что данные хранятся в родительском объекте и передал его детям.
React Router - популярный пакет, который поставляет специальные компоненты для React для внутренней навигации. В зависимости от URL-адреса, React Router может обслуживать определенные компоненты для разных частей приложения.
Redux обычно сопряжен с React для управления состоянием приложения. Благодаря специальным связям React может связываться с большим объектом, который хранит все данные для приложения. Выберите части этого состояния, затем можно передать компонентам, чтобы определить, как они должны отображаться.
В целом, React - это относительно легкая структура, которая достаточно универсальна для множества разных проектов.
07. Хотя это не так полно, как «Угловое», возможно собрать все детали для каждого проекта. Угловой
08. Полимер
Полимер является основой Google, созданной для создания приложений с использованием веб-компонентов. Работая с официальной спецификацией, эти компоненты являются многоразовыми и могут работать вместе с собственными элементами и методами. Polymer 3 скоро появится и переключится на использование импорта модулей npm и ES2015 по мере развития потребностей разработчиков.
09. Svelte
Svelte разработан как легкая структура, которая исчезает в стандартизованном JavaScript после создания проекта. Компонентная логика, стиль и разметка все живут в одном файле и работают так же, как веб-компоненты с расширенными стилями и элементы для добавления контента. Набор функций преднамеренно ограничен, но может быть легко расширен по мере необходимости.
10. Vue
DevTools обеспечивают доступ к внутренней работе каждого компонента, включая внутреннее состояние и Vuex
Vue - это новая инфраструктура, но она быстро набирает обороты. Хотя она имеет сходство с другими, она также облегчает некоторые из общих точек боли. Она достаточно гибкая, чтобы использоваться либо как часть существующего приложения, либо как основная структура для сайта.
Весь HTML, CSS и JavaScript для компонента могут жить в одном файле. Стили имеют область видимости, что упрощает удаление компонентов в несколько проектов по мере необходимости. Vue также содержит собственную библиотеку управления состоянием Vuex. Подобно системам типа Redux, приложение имеет доступ к централизованному хранилищу данных. Корректировки выполняются с помощью мутаций в этом состоянии, которые вызывают обновление любого компонента, использующего эти данные.
Аналогичным образом, Vue также включает маршрутизатор для навигации между различными частями одностраничного приложения. Определив все доступные маршруты, Vue позаботится о навигации между ними.
11. Mocha
Mocha часто является разработчиком для написания целого ряда тестов в проекте, потому что его легко начать. Каждый тест может проходить через узел или в браузере, что позволяет легко увидеть, где возникают проблемы. Mocha также работает с любой библиотекой утверждений, что делает ее очень настраиваемой в соответствии с потребностями разных команд.
12. Puppeteer
Puppeteer обеспечивает способ управления Chrome с помощью Node, что делает повторимые тесты пользовательского интерфейса намного проще. Он может проверять визуальные элементы в браузере, такие как заголовок страницы, а также создавать скриншоты, чтобы отслеживать любые регрессии. Испытательные бегуны, такие как Jest или Mocha, могут запускать Puppeteer и могут терпеть неудачу на основе своих результатов.
13. Транспортир
Транспортир является специализированным инструментом тестирования для всех версий углового. Он использует Selenium для запуска сквозных тестов в реальных средах и браузерах. Транспортир выполнит всю необходимую настройку и может автоматически дождаться загрузки страницы, что помогает избежать хрупких испытаний и уменьшает количество, которое впоследствии необходимо записать.
14. Nightwatch
Для других проектов, требующих сквозного тестирования, Nightwatch предлагает фантастическую альтернативу. Он также запускает Selenium под капотом, что позволит вам проверить, что увидит конечный пользователь. Тесты записываются как модули, которые запускаются через узел, и это простая процедура для их расширения для подключения к платформам CI или для отправки их результатов на внешнее программное обеспечение.
Тестирование проекта
15 , Jest
Jest может генерировать отчеты о покрытии кода, чтобы помочь выявить пробелы в тестовых наборах
Jest - это тестовый бегун, созданный Facebook. Его главная цель - быть как можно более простой в настройке и использовании, без какой-либо конфигурации, необходимой для начала работы. Любые файлы внутри каталога «__tests__» или заканчивающиеся на «.spec.js» или «. test.js "будет автоматически поднята.
Тесты выполняются быстро и могут запускаться на eac h, чтобы убедиться, что все работает правильно. Jest может даже получить то, что обновлялось с момента последнего коммита, и будет запускать тесты только на элементы, которые были затронуты. Настраиваемые параметры командной строки гарантируют, что правильные тесты будут работать в нужное время, что идеально подходит для быстрого хранения инструментов непрерывной интеграции.
. Одна из лучших характеристик Jest - это моментальные снимки. Не тестируя конкретное значение, Jest будет отображать структуру тестируемого объекта и будет сравнивать его с будущими тестами. Если что-то изменилось, Jest выделит изменение, и оно может быть зафиксировано или подтверждено как намеренное. Это отлично работает для компонентов React, но также может использоваться для любого сериализованного значения.
JSDOM настроен по умолчанию, что упрощает тестирование проектов на основе браузера, позволяя им запускать Node. Jest также поставляется с базовыми функциями тестирования, которые включают в себя mocks, шпионы и утверждения. Хотя они будут работать, можно использовать другие инструменты, такие как Enzyme и Sinon, чтобы сделать письменные тесты более легкими.
Хотя Jest часто используется для тестирования приложений React, на самом деле его можно использовать для тестирования проекта который был написан для любых фреймворков или языков. [23]
Редактор плагинов
16. Quokka
Quokka выведет содержимое файла в окно, связанное с редактором
Несмотря на наши наилучшим образом, ни один разработчик не может получить все правильно в первый раз.Когда маленькая идея нуждается в проверке, создание проекта только для того, чтобы увидеть, работает ли оно, может быть слишком велико. При работе с незнакомыми инструментами и библиотеками лучше всего иметь изолированное рабочее пространство, точно показывает, что происходит на каждом шагу.
Quokka - это среда, которая живет внутри редактора. Он оценивает встроенный код и отображает результат по мере его использования. Это делает его превосходным для проверки блоков логики без необходимости создавать новый пакет и проверять его в браузере.
Цветные блоки рядом с каждым номером строки показывают, что он покрыт Quokka. Зеленый блок указывает, что проблем нет, а красный предупреждает, что есть проблема с этой линией. Комментарий в конце этой строки содержит дополнительную информацию.
В то время как Quokka работает с большинством настроек сразу, его настройки могут быть настроены в каждом файле или внутри package.json, если они используются с npm. Большинство языков на основе JavaScript уже поддерживаются, включая JSX и TypeScript, но плагины также доступны для работы с другими синтаксисами, такими как jQuery, без необходимости явно импортировать их.
Проект выполнен той же командой, что и wallaby.js, которая имеет аналогичную функциональность, но для тестовых наборов. Как неудачный тест, написанный, Wallaby сразу выделит проблему, что означает, что ошибки будут обнаружены раньше.
Quokka доступен в виде плагина для VSE, Atom или JetBrains IDE. Бесплатное издание Сообщества будет охватывать большинство случаев, но дополнительное издание Pro улучшает ситуацию, позволяя встроенный контроль кода для выявления медленных проблем с производительностью.
17. Emmet
Emmet - это набор плагинов, доступных для большинства редакторов кода, который позволяет разработчикам быстро программировать, удаляя все медленные повторяющиеся задачи. Когда разработчики вводят небольшое ключевое слово, он может обнаруживать и заменять его более крупным блоком контента. Emmet также понимает их намерения, анализирует синтаксис и даже автоматически расширяет код.
18. Стоимость импорта
Со временем приложения могут вскоре раздуваться с большими зависимостями, взвешивающими их. Стоимость импорта - простой плагин для VS-кода, который будет выделять размер любых импортных строк по мере их добавления и кодироваться цветом, чтобы сразу увидеть, что может быть завышено. Затем разработчик может решить, оправдан ли этот лишний вес или нет.
19. BracketHighlighter
Код часто может быть похоронен внутри вложенных объектов, функций или элементов. Иногда это может затруднить точное определение того, какая открытая скобка подходит к закрытой скобке. BracketHighlighter для Sublime Text выделяет одну скобку, когда другой выбирается, и будет работать даже с несколькими выборами и внутри строк.
20. Отладчик Chrome
Код VS может создавать точки останова и предоставлять обратную связь для запуска приложений узла уже, но как насчет браузера? Плагин Chrome Debugger подключит редактор к экземпляру DevTools, чтобы включить такое же поведение в браузере. Пошаговый код, приостановить выполнение и контролировать значения переменных в знакомой среде.
Интерфейсы
21. D3
В галерее представлен широкий спектр графических элементов, которые могут быть сделаны с помощью D3
Визуализация данных отличный способ сделать большие наборы данных более интересными. Подходя к информации с нового ракурса, данные легче понять и могут быть сделаны новые идеи. Сделать их проще, чем сделать, однако, и работа с SVG напрямую связана с его собственные причуды, пытаясь вывести на
D3 означает Data Driven Documents и предназначен для создания визуализации данных с использованием JavaScript с использованием SVG, HTML и CSS.
По сути, D3 связывает данные с элементами DOM, которые могут быть интерпретированы по-разному в зависимости от проекта. Например, может быть создана гистограмма с несколькими элементами
которые выглядят как бары. Каждое значение данных будет привязано к строке, которая в этом случае будет расширяться в зависимости от ее значения.
Сохраняя ссылку на выбранный элемент, диаграммы могут быть обновлены по мере необходимости. Методы «ввести» и «выйти» определяют, что должно произойти, когда элемент должен быть добавлен или удален из диаграммы на основе данных. Используя это, диаграммы могут быть переписаны и обновлены автоматически.
Где D3 действительно сияет - это сложные визуализации, такие как карты. Это достигается путем манипулирования SVG. Несмотря на отсутствие встроенных функций для создания карты, D3 может строить данные GeoJSON с использованием d3.geo.path.
Существует множество других инструментов и библиотек, построенных с использованием D3, которые предназначены для облегчения процесса. DataMaps предоставляет готовые данные карты по заданным проекциям, которые могут быть отброшены и настроены по мере необходимости.
Поскольку D3 будет отвечать за DOM, может быть трудно интегрироваться с современными веб-фреймворками, которые обновляются на основе состояния. Библиотеки, такие как React-D3, созданы для работы с обновлением реквизита и могут избавиться от интеграции.
22. Anime.js
Есть много примеров того, что возможно в Anime.js на CodePen
Больше сайтов обнимают тонкие анимации. Небольшая анимация - отличный способ поймать глаз пользователя и создать интерес. CSS-анимации идеально подходят для простых переходов, которые известны заранее, но что, если цели и значения меняются в зависимости от ввода пользователя ?
Anime.js - это инструмент, который делает анимацию e asier для работы. Все начинается с вызова «аниме», который определяет все об анимации, включая цель, продолжительность и любые применяемые переходы. Цели могут быть любыми: от узла DOM до объекта JavaScript, который может преобразовывать значения внутри себя.
Одной из замечательных особенностей Anime.js является возможность создания пути для элемента, который будет следовать на основе определенный в SVG. Вызывая anime.path (), он позволяет использовать этот путь как значение для позиционирования X / Y для других анимаций. Они могут быть сложены или нанизаны друг на друга, чтобы создать временную шкалу без необходимости в указанных значениях смещения.
23. Moment.js
Работа с датами и временем может быть сложной задачей. Свойство Date Date предоставляет небольшую функциональность, чтобы помочь форматировать и управлять часовыми поясами. Moment создает специальные объекты, которые позволяют разработчикам анализировать и форматировать даты и время любым способом, который требуется. Размер может быть небольшим, включая только локали, необходимые для каждого проекта.
24. Semantic UI
Семантический интерфейс - это набор общих компонентов, которые могут быть включены по мере необходимости в рамках любого проекта. Обычные шаблоны, такие как навигационные панели и переключающие кнопки, сначала создаются с семантическим HTML, который расширяет библиотека. Интеграции для таких фреймворков, как Vue и Angular, доступны для приложений, упрощающих создание интерфейса.
25. Pell
Ограничив набор функций, Pell может создавать семантический HTML, который можно использовать где угодно
A много проектов используют богатый текстовый редактор. Это может быть раздел комментариев, в котором параметры стиля ограничены, но важны времена загрузки или на CMS, где необходим большой набор функций. Хотя существует множество вариантов WYSIWYG там они могут быть большими, полагаться на устаревшие зависимости или производят не семантическую разметку.
Pell - это простой текстовый редактор, весом чуть более 3 кБ, уменьшенный, что делает его меньше, чем такие параметры, как TinyMCE или Draft.js Facebook.
В то время как другие могут предоставить более широкий набор функций, Пелл фокусируется на том, чтобы делать основы хорошо. Такие действия, как ссылки, списки и изображения, представлены отдельно, но пользовательские функции могут быть добавлены в соответствии с потребностями любого проекта.
Эта статья была первоначально опубликована в выпуске 306 из net самый продаваемый в мире журнал для веб-дизайнеров и разработчиков. Подпишитесь на сеть здесь .