Топ JavaScript инструментов для изучения в 2017 году

Советы профессионала о том, какие инструменты JavaScript использовать в следующем году.

Популярность JavaScript привела к созданию динамичной экосистемы технологий, структур и библиотек. Это разнообразие многих приводит в замешательство. С какими технологиями следует разбираться в первую очередь?

Чем заниматься, чтобы получить максимальную отдачу? Знание каких технологий требуют компании? Какие из них имеют наибольший потенциал роста?

Какие наиболее полезные технологии стоит изучать? В этой статье собрано всё, что нужно знать, чтобы добиться успеха вместе с JavaScript.

Не бойтесь экспериментировать с кодом. Например, CodePen позволяет наблюдать за изменениями во время написания кода. Тем, кто всё ещё изучает ES6, можно использовать Babel.

Ниже собран объёмный список, но здесь действительно всё, что вам нужно знать, чтобы создавать современные приложения. Когда нужен будет заряд мотивации, прочитайте статью "Почему я благодарен JavaScript, несмотря на то, как он достал меня".

Обратите внимание на материалы со звёздочкой

Материалы, отмеченные * не обязательны, если можете, изучите.

Со всем остальным вам следует ознакомиться. Хотя бы поверхностно.

JavaScript & Основы DOM

Основы JavaScript:

ES6: Последняя версия JS - ES2016 (ES7), но многие разработчики до сих пор нормально не изучили ES6. А пора.

Встроенные методы: Узнайте о методах для стандартных типов данных (особенно массивов, объектов, строк и чисел).

Функции & Чистые функции: Необходимо для того, чтобы научиться функциональному программированию.

Замыкания: Поймите, как работают замыкания в JS.

Обратный вызов: Функция, которая подаёт сигнал, когда готов результат. Можно сказать, "Эй, работай, а как закончишь - сообщи".

Обещания: Предоставляют удобный способ организации асинхронного кода.

Ajax & API: Наиболее интересным приложениям, как правило, требуется подключение к интернету. Поэтому следует знать, как работать с API.

Классы: (примечание: Избегайте наследование классов. Советую прочесть статью.)

Основы функционального программирования: Функциональное программирование нужно для того, чтобы создавать программы с помощью математических функций.

Генераторы & Async/Await: Лучше всего писать асинхронный код, который будет выглядеть синхронным. Научиться этому непросто, но чтение кода будет проще.

Прогрессивные веб-приложения: Советую прочесть статью "Нативные приложения обречены" и её продолжение.

Node & Express: Node позволит использовать JavaScript в облаке. Express - самый популярный фреймворк для Node.js.

Lodash: популярная библиотека, набор утилит JavaScript.

Механическая обработка

Инструменты разработчика Chrome: DOM инспектор & JS отладчик: ИМХО, лучший отладчик. Хотя у Firefox тоже достойный.

NPM: пакетный менеджер для JavaScript.

Yarn*: Аналог NPM, немного отличается функционалом.

Git & GitHub: Позволяют отслеживать обновления исходных кодов.

Babel: Используется для работы ES6 в старых браузерах.

Webpack: Для работы с пакетными модулями.

Atom, VSCode, or WebStorm + Vim: Atom и VSCode самые популярные редакторы JavaScript. Webstorm менее популярен, но также очень удобен. Кроме того, рекомендую почитать про Vim, или хотя бы держать в закладках.

ESLint: Помогает обнаружить ошибки на ранней стадии.

Tern.js: Автономный механизм анализа кода JavaScript.

TypeScript*: Типизированный язык программирования на основе JavaScript. Рекомендую почитать "Секреты статистических типов" & "Почему вам не нужен JavaScript"

Flow*: Статистический анализатор кода.

React

React - JavaScript библиотека для создания пользовательских интерфейсов.

Метод является более оптимальным для работы с DOM и логикой программы. При его использовании, отрисовка и прослушивание событий выполняются поочередно, и события нужно обрабатывать вручную - для каждого события писать свой прослушиватель.

Ещё о React - "Изучайте архитектуру приложений создавая их".

Создайте React приложение*: Самый быстрый способ познакомиться с React.

React Router*: Узнайте о рутинге.

Velocity.js*: Библиотека для React анимации.

Redux

Redux - предсказуемый контейнер состояния для JavaScript приложений. Позволяет создавать приложения, которые ведут себя одинаково в различных окружениях (клиент, сервер и нативные приложения), а также просто тестируются. Кроме того, это обеспечивает большой опыт отладки, например редактирование кода в реальном времени в сочетании с time traveling.

Еще о Redux.

Angular 2*

Angular 2 - обновленная JavaScript библиотека от Google.

Изучать не обязательно, но будет плюсом в резюме. Для справки, на обучение в среднем уходит от 6 до 12 месяцев.

RxJS*

RxJS - набор утилит для реактивного программирования. Если будет интересно - погуглите, информации немерено.

Дополнительно

Vue.js* - ещё один фреймворк для создания пользовательских интерфейсов. Стремительно набирает популярность, на GitHub куча информации.

MobX* - управление состоянием приложения, альтернатива Redux

Что выбрать

Список создавался на основе Google Trends. Кроме того, понять, что лучше изучать, можно, посмотрев интересующие вас вакансии на биржах.

Почему я рекомендую изучать React в первую очередь

• React изучает больше людей.
• React удовлетворяет пользователей больше, чем Angular.
• React имеет большой потенциал.

Когда всё будет изучено, можете приступать к прочтению этой статьи.