JavaScript существует уже более 20 лет, и это один из тех языков, которые никогда не прекращают развиваться. В последнее время язык переживает стремительный рост, что заставляет меня задуматься о том, будут ли современные интерфейсные JavaScript-технологии, хорошо известные сегодня, актуальными пару лет спустя.
Тем не менее, важно быть впереди игры, работая с новейшими инструментами и средами для лучшего рабочего процесса разработки. В этой статье рассматриваются различные библиотеки JavaScript, фреймворки и инструменты, которые вы должны изучить прямо сейчас.
Вступление
Среда JavaScript стала огромной. Он имеет собственную экосистему библиотек, фреймворков, инструментов, менеджеров пакетов и новых языков, которые компилируются в JavaScript. Интересно, что npm, который является де-факто диспетчером пакетов для JavaScript, также является крупнейшим программным реестром в мире. Вот выдержка из поста, опубликованного на Linux.com в январе 2017 года.
В более чем 350 000 пакетов реестр npm содержит более чем в два раза больше следующего по заполненности реестра пакетов (это хранилище Apache Maven). Фактически, это в настоящее время самый большой реестр пакетов в мире.
Перенесемся на восемь месяцев, и в настоящее время в реестре npm содержится около 500 000 пакетов. Это огромный рост по сравнению с другими репозиториями пакетов.
Как разработчик внешнего интерфейса JavaScript, важно не отставать от современных инструментов и библиотек JavaScript. Когда технология становится популярной, спрос на нее становится высоким, что, в свою очередь, означает больше рабочих мест в области кодирования, которые платят самую высокую зарплату в отрасли. Итак, я собрал список популярных технологий JavaScript, которые, я думаю, вы должны знать.
Библиотеки
Библиотека — это многократно используемый фрагмент кода, который предлагает определенную функциональность. Это набор функций, объектов и классов, которые вы можете использовать в своем приложении. Библиотека абстрагирует различные слои, так что вам не нужно беспокоиться об их деталях реализации.
Вы можете вызвать библиотечную функцию и передать ей некоторые параметры, и библиотека выполнит ее и вернет вам управление. Тем не менее, он не накладывает никаких структурных ограничений, которые ограничивают использование библиотеки. Популярные библиотеки JavaScript включают в себя:
реагировать
React — это библиотека JavaScript, созданная разработчиками Facebook и Instagram. Согласно исследованию Stack Overflow Survey 2017, React был признан самой популярной технологией среди разработчиков. React также считает себя самым популярным JavaScript-проектом, основанным на подсчете звезд GitHub.
Так почему же React привлекает все внимание? С помощью React можно создать интерактивный пользовательский интерфейс, используя декларативный подход, при котором вы можете контролировать состояние приложения, говоря «представление должно выглядеть так». Он использует модель на основе компонентов, где компоненты являются элементами пользовательского интерфейса многократного использования, и каждый компонент имеет свое собственное состояние.
React использует Virtual DOM, поэтому вам не нужно беспокоиться о непосредственном манипулировании DOM. Другие примечательные особенности React включают односторонний поток данных, необязательный синтаксис JSX и инструмент командной строки для создания проекта React с нулевой конфигурацией сборки.
Если вы считаете, что React — следующая лучшая вещь и хотели бы изучить React, ознакомьтесь с нашей учебной серией React Crash Course для начинающих .
JQuery
jQuery — это библиотека, которая делает JavaScript более доступным и упрощает манипулирование DOM, чем раньше. Мягкая кривая обучения jQuery и простой синтаксис породили поколение новых разработчиков на стороне клиента. Несколько лет назад jQuery считался надежным решением для создания надежных веб-сайтов с кросс-браузерной поддержкой. Основные функции jQuery, такие как манипулирование DOM на основе селекторов CSS, обработка событий и выполнение вызовов AJAX, способствовали его популярности.
Однако все изменилось, и среда JavaScript постоянно развивалась. Некоторые функции jQuery были включены в более новую спецификацию ECMAScript. Более того, новые библиотеки и фреймворки, используемые сегодня, имеют собственный способ связывания DOM, и, следовательно, простые манипуляции с DOM больше не требуются. Популярность jQuery падает, но я не вижу, чтобы он исчез в ближайшее время.
D3: Управляемые данными документы
D3 (или D3.js) — это мощная библиотека JavaScript для создания интерактивных визуализаций с использованием веб-стандартов, таких как SVG, HTML и CSS. В отличие от других библиотек визуализации, D3 предлагает лучший контроль над конечным визуальным результатом.
D3 работает, связывая данные с DOM и затем преобразовывая документ. Он также имеет собственную экосистему, которая состоит из плагинов и библиотек, которые расширяют его основные функциональные возможности. Библиотека существует с 2011 года, и в ней содержится множество документации и учебных пособий, которые могут помочь вам начать работу.
Если вы хотите создать простую визуализацию, не тратя на это слишком много времени, вам следует проверить Chart.js . У нас есть вводная серия по Chart.js, которая охватывает большинство визуализаций, которые вы можете создать с помощью Chart.js.
Каркасы
Фреймворк имеет архитектуру, которая определяет поток управления в вашем приложении. Каркас описывает скелет и рассказывает, как все должно быть организовано. Вам также предоставляется основная функциональность, необходимая для запуска и запуска приложения. Более того, вы обязаны следовать принципам и шаблонам проектирования фреймворка. Разница между фреймворком и библиотекой заключается в том, что вы называете библиотеку, тогда как фреймворк вызывает вас.
Фреймворк часто состоит из множества библиотек и имеет более высокий уровень абстракции. Такие функциональные возможности, как обработка событий, выполнение вызовов AJAX, привязка шаблонов и данных, а также тестирование, встроены в платформу.
угловатый
AngularJS когда-то была самой популярной технологией JavaScript среди разработчиков. Это было поддержано Google и сообществом людей и корпораций. Несмотря на популярность, AngularJS имела свою долю недостатков. Команда Angular провела два года, работая над новой версией Angular, которая была выпущена в сентябре 2016 года.
Выпуск Angular 2 был переписан AngularJS. Некоторые из особенностей Angular 2 включают в себя:
- TypeScript поверх JavaScript в качестве языка по умолчанию
- компонентная архитектура
- улучшена производительность как на мобильных, так и на веб-платформах.
- лучшие инструменты и варианты строительных лесов
Однако обновление с Angular 1.x до Angular 2 стоит дорого, потому что Angular 2 — это совершенно другой зверь. Это одна из причин, почему Angular 2 не испытал такой же темп принятия, как у его предшественника. Однако, согласно данным Stack Overflow (2017), Angular и AngularJS продолжают оставаться одними из наиболее часто используемых технологий. Проект Angular имеет около 28 000 звезд на GitHub.
Vue.js
Vue.js — это легковесная инфраструктура JavaScript, которая стала популярной в этом году. Это самая популярная среда JavaScript на GitHub с точки зрения количества звезд GitHub. Vue претендует на то, чтобы быть менее самоуверенным фреймворком, и поэтому разработчикам было легко его догнать. Синтаксис шаблона Vue на основе HTML связывает визуализированный DOM с данными экземпляра.
Фреймворк предлагает опыт, подобный React, с его Virtual DOM и повторно используемыми компонентами, которые можно использовать для создания как виджетов, так и целых веб-приложений. Кроме того, вы также можете использовать синтаксис JSX для непосредственного написания функций рендеринга. Когда состояние изменяется, Vue.js использует систему реактивности, чтобы определить, что изменилось, и воспроизводит минимальное количество компонентов. Vue.js также поддерживает интеграцию других библиотек в среду без особых хлопот.
ember.js
Ember.js — это интерфейсная структура, основанная на шаблоне Model-View-ViewModel (MVVM). Он следует соглашению о конфигурации, которое популярно среди серверных сред, таких как Ruby on Rails и Laravel. Ember.js включает в себя общие идиомы и лучшие практики, чтобы вы могли без особых усилий запустить и запустить приложение.
Стек Ember обычно включает в себя:
- Ember CLI: предоставляет базовые параметры лесов и поддерживает сотни дополнений.
- Ember Data: библиотека постоянных данных, которую можно настроить для работы с любым серверным сервером.
- Ember Inspector: расширение доступно для Chrome и Firefox.
- Liquid Fire: дополнение для переходов и анимации.
инструменты
Инструмент представляет собой набор процедур, которые помогут вам в процессе разработки. В отличие от библиотеки, инструмент обычно выполняет задачу на клиентском коде. Он принимает ваш код в качестве входных данных, выполняет на нем задачу, а затем возвращает выходные данные. Обычно используемые инструменты включают в себя транспортеры и инструменты сборки, минификаторы активов, связки модулей и инструменты строительных лесов.
Инструменты: Универсальные исполнители задач
Обозреватели задач общего назначения — это инструменты, используемые для автоматизации некоторых повторяющихся задач. Популярные бегуны задач общего назначения включают в себя:
Глоток
Gulp — это JavaScript-инструментарий, используемый как средство выполнения задач и система сборки в веб-разработке. Компиляция, минимизация кода, оптимизация изображений, модульное тестирование, линтинг и т. Д. — это повторяющиеся задачи, которые должны быть автоматизированы. Gulp облегчает процесс написания задач даже для людей, которые менее знакомы с JavaScript.
Gulp использует конвейеры для потоковой передачи данных из одного плагина в другой, и окончательный результат выводится в папку назначения. Gulp работает лучше, чем Grunt, потому что он не создает временных файлов для хранения промежуточных результатов, что приводит к меньшему количеству вызовов ввода-вывода.
хрюкать
Grunt — это инструмент для выполнения задач и инструмент автоматизации JavaScript. Grunt имеет интерфейс командной строки, который позволяет запускать пользовательские задачи, определенные в файле, называемом Gruntfile. У Grunt есть тысячи плагинов на выбор, которые должны охватывать большинство распространенных повторяющихся задач, с которыми вы столкнетесь. С Grunt вы можете запускать все задачи под одной командой, делая вашу жизнь проще.
НПМ
Gulp и Grunt требуют, чтобы вы потратили время на изучение и освоение нового инструмента, который требует времени. Внедрения дополнительных зависимостей в ваш проект можно избежать, выбрав альтернативу, которая уже включена в Node.js. Хотя npm более известен как менеджер пакетов, сценарии npm могут использоваться для выполнения большей части вышеупомянутых задач.
Инструменты: Тестирование
Тестирование — это процесс проверки и подтверждения того, что приложение соответствует ожидаемым деловым и техническим требованиям. Подход, основанный на тестировании, также помогает обнаруживать ошибки и, следовательно, должен рассматриваться как неотъемлемая часть современного стека разработки.
Шутка
Jest — это относительно новая среда тестирования, созданная Facebook и хорошо принятая сообществом React. Существует распространенное заблуждение, что Jest специально разработан для работы с React; однако, согласно документации Jest:
Хотя Jest можно считать специфичным для React средством для выполнения тестов, на самом деле это универсальная платформа для тестирования с возможностью адаптации к любой библиотеке или среде JavaScript. Вы можете использовать Jest для тестирования любого кода JavaScript.
Самое большое преимущество использования Jest над другими наборами тестов состоит в том, что вам требуется нулевая или минимальная конфигурация, чтобы начать писать тесты. Фреймворк имеет встроенную библиотеку утверждений и поддерживает использование фиктивных функций или шпионов.
Jest имеет функцию, называемую тестированием снимков, которая позволяет вам гарантировать, что пользовательский интерфейс приложения не изменится неожиданно. Разработчики из Facebook и другие участники недавно вложили много усилий в этот проект, поэтому неудивительно, если Jest окажется самой популярной средой тестирования JavaScript в ближайшие годы.
кофе мокко
Mocha — это среда тестирования JavaScript, которая включает поддержку браузера, асинхронную поддержку, включая обещания, отчеты о покрытии тестов и JavaScript API для выполнения тестов. Mocha часто соединяется с библиотекой утверждений, такой как Chai, should.js, hope.js или better-assert, потому что у него нет собственной библиотеки утверждений.
жасмин
Jasmine — это основанная на поведении среда тестирования JavaScript. Jasmine стремится быть независимым от браузера, платформы и фреймворка. Jasmine имеет свою собственную библиотеку утверждений, называемую matchers, которая дает ей простой и понятный синтаксис. У Jasmine нет встроенного тестера, и вам, возможно, придется использовать универсальный тестер, например, Karma.
Резюме
JavaScript, язык Интернета, сохраняет свою актуальность со времени своего появления в 1995 году. Вероятно, он останется таким до тех пор, пока браузеры не решат перевести его на другой язык. Хотя существует множество других языков, которые компилируются в JavaScript, нет другого языка сценариев, который заменил бы JavaScript в обозримом будущем. Почему? Потому что JavaScript стал слишком популярным, чтобы его можно было заменить.
Язык не без кривых обучения, и есть множество фреймворков и библиотек, которые также могут вас занять. Если вы ищете дополнительные ресурсы для обучения или использования в своей работе, посмотрите, что у нас есть на Envato Market .
Среда JavaScript определенно развивается, что видно из современных тенденций в веб-разработке. Старые библиотеки и фреймворки были заменены новыми технологиями. В jQuery, который когда-то был самой популярной библиотекой JavaScript, наблюдается снижение привлекательности, использования и популярности. Новое поколение интерфейсных библиотек, фреймворков и инструментов набирает силу и получает всеобщее признание.
Адаптация к новым тенденциям в технологии также имеет свои преимущества. Работа в области кодирования, для которой требуется React, имеет одни из самых высоких зарплат в отрасли, при этом средняя зарплата в США составляет 105 000 долларов, согласно данным Stack Overflow (2016). Поэтому вам нужно продолжать изучать и экспериментировать с новейшими инструментами и средами, чтобы извлечь максимальную пользу из JavaScript.
Если вы думаете, что я пропустил среду JavaScript, библиотеку или инструмент, о которых стоит упомянуть, сообщите мне об этом в комментариях.