Изучение обширной экосистемы современного 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 достигает огромных размеров и сложна для изучения. Однако, сосредоточившись на этих пяти советах, вы пойдете по правильному пути.
Читайте также:
- 10 лучших фреймворков Node.js
- Какие языки программирования лучше учить в 2019 году
- Советы по разработке больших приложений JavaScript
Перевод статьи Jim Rottinger: Learning How to Learn JavaScript
