Рекомендации по изучению JavaScript

Изучение обширной экосистемы современного JavaScript представляет собой непростую задачу. Она состоит из широкого спектра фронтенд-фреймворков, нескольких сборщиков модулей, тысяч библиотек утилит, а также модулей Node.js, работающих как на компьютере, так и на сервере. С чего стоит начать? Каким темам стоит уделить время?

Рассмотрим пять рекомендаций по изучению JavaScript.

1. Освоение асинхронного JavaScript

Если заглянуть в историю JavaScript (или веб-разработки в целом), то можно обнаружить, что асинхронный JavaScript полностью изменил ход событий. С его помощью веб-сайты перешли от статических страниц с действиями только на стороне клиента к полнофункциональным приложениям в браузере. Возможность сделать HTTP-запрос и ждать ответа без перезагрузки страницы перевернула всемирную паутину.

Можно с уверенностью сказать, что асинхронное программирование является основным принципом веб-разработки. Именно этой теме стоит уделить больше времени на ранней стадии изучения JavaScript, поскольку она включает в себя такие принципы разработки, как обратные вызовы, промисы, конструкцию async/await, а также метод fetch.

2. Изучение основ TypeScript

Эта рекомендация скорее относится к освоению лучших практик программирования. JavaScript — это слабо типизированный динамический язык программирования. При необходимости передать переменные и объекты данных, у которых отсутствуют контракты типов и неизменность, написание уязвимого к побочному воздействию кода не составляет труда. В TypeScript эти проблемы устранены благодаря сильной типизации и возможности создавать свойства readonly.

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

Также стоит уделить время рассмотрению сообщений об ошибках от TypeScript. Это поможет значительно улучшить код.

Рекомендуемые ресурсы:

• TypeScript за 5 минут из официальной документации TypeScript
• Поэкспериментируйте в online TypeScript REPL

3. Для чего нужны фреймворки JavaScript

Фреймворки JavaScript существуют с далекого 2012 года. В то время AngularJS занимал главенствующую позицию, Backbone.js обладал приличной долей рынка, а Ember был подающим надежды новичком. Однако, несмотря на то, что эти фреймворки ушли в прошлое (их заменили React и Vue), проблемы, связанные с ними, сохранили актуальность. Например:

• Данные, привязывающие представление к контроллеру. Это одна из самых важных проблем. Синхронизация представления пользовательского интерфейса с состоянием фронтенд-приложения является основной целью для всех фронтенд-фреймворков. Независимо от того, является ли фреймворк полностью MVC, MVVM или покрывает только уровень представления, все они обладают возможностью привязки состояния к представлению и поддержки их синхронизации.
• Повторно используемые компоненты. Компонентная композиция фронтенд-представлений вместе с JS, компилирующим шаблоны в HTML, лежит в основе современных фреймворков, таких как React и Vue. Однако она существует уже со времен появления AngularJS. Динамические повторно используемые компоненты невозможно создать без существующего фреймворка или создания собственного, поскольку API веб-компонента сильно ограничен и не обрабатывает привязку данных.

Инструменты меняются, а технологии развиваются, однако понимание основных болевых точек веб-разработки (причин, по которым были разработаны инструменты), поможет разобраться в том, как правильно использовать любой фреймворк.

4. Изучение двух схожих фреймворков одновременно

Поскольку основные проблемы, которые решают фреймворки, остаются актуальными до сих пор, рекомендуется изучать два фронтенд-фреймворка одновременно (например, Vue и React).

При использовании одного фреймворка можно заметить, что его синтаксис и шаблоны являются частью лежащего в основе языка (в данном случае JavaScript). Как говорится, если у вас есть молоток, то все предметы вокруг кажутся гвоздями. С точки зрения программирования это высказывание означает, что при использовании только одного фреймворка принятие решений будет зависеть исключительно от него. В конечном счете он станет костылем, а не источником силы.

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

5. Понимание процесса сборки

Написание современного JavaScript требует большого количества инструментов и фреймворков, и единственное, что связывает их вместе, — это процесс сборки.

Инструменты сборки постоянно меняются, увеличивая производительность и размеры ассетов. Веб-компании и open-source сообщество разработчиков регулярно вносят усовершенствования в процесс сборки, что приводит к постоянному изменению набора инструментов и процессов.

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

Понимание работы инструментов играет большую роль. Постарайтесь разобраться в порядке преобразования кода и в сборке модулей, чтобы максимально оптимизировать их. Изучите все параметры конфигурации, так как они влияют на производительность и размер файла.

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

Перевод статьи