Заблудились в JavaScript? Это совсем неудивительно. Вам нужен гид, который расскажет, что на самом деле важно. У нас как раз есть такой.
Посмотрите налево – тут рынок фреймворков, которые наперебой расхваливают свои возможности. Посмотрите направо – здесь супермаркет npm-модулей. Впереди вы можете видеть огромные мастерские бандлеров и таск-раннеров и офисные небоскребы Node-приложений.
Улицы города JavaScript длинные и извилистые, с десятками магазинчиков и торговцев разных мастей, мечтающих продать вам очередную полезную библиотеку. И с сотнями растерянных разработчиков, которые не знают, куда идти и что покупать. Некоторые набирают целые сумки товаров, которые потом никогда не будут использовать.
Если вы один из этих заблудившихся туристов, наш путеводитель по JavaScript для начинающих поможет вам превратиться в уверенного JS-горожанина. Он подскажет, с чем разобраться в первую очередь, чтобы ориентироваться в этом шумном, но интересном месте.
Предполагается, что с основами языка вы уже знакомы – иначе как вы вообще попали в этот город?
Асинхронность в основе всего
Когда-то в вебе были только скучные статичные страницы, а любое действие требовало перезагрузки. Та эпоха осталась в прошлом, на смену ей пришли крутые отзывчивые приложения, которые умеют общаться с сервером в фоновом режиме, не мешая пользователю.
Асинхронность радикально изменила язык JavaScript и стала главным принципом веб-разработки. Поэтому наш путеводитель настойчиво рекомендует туристам как следует разобраться с этой концепцией. Время, потраченное на изучение коллбэков, промисов и асинхронных функций, точно не пропадет зря.
- История и будущее асинхронного JavaScript
- You Don't Know JS: Коллбэки
- You Don't Know JS: Промисы
- Руководство по Async/Await
Следующий шаг в этом направлении – изучение функции fetch, удобной альтернативы классическому XMLHttpRequest.
Зачем нужны фреймворки
Фреймворки стали такой важной составляющей современного JavaScript, что кажется, что они были всегда.
Почему так получилось, почему js-фреймворки вообще существуют?
Потому что в веб-разработке есть некоторые важные вещи, которые не имеют прямой нативной реализации в языке. Они нужны в той или иной степени почти в каждом проекте. Приходится писать собственную реализацию с нуля или использовать уже готовый фреймворк.
Привязка данных
Привязка данных (data binding) между представлением и контроллером – важная часть современных приложений. Необходимо синхронизировать пользовательский интерфейс с реальными изменениями данных. Все фреймворки имеют какой-то способ сделать это, независимо от того, являются ли они полным воплощением модели MVC, MVVM или просто слоем представления.
Повторно используемые компоненты
Самое большое достижение AngularJS – введение моды на компонентную структуру приложения, которую быстро подхватили и Vue, и React. Эта идея оказалась настолько удачной, что в самом языке появился специальный интерфейс веб-компонентов. К сожалению, он не имеет механизма привязки данных, поэтому фреймворки по-прежнему незаменимы.
Правильное изучение JavaScript фреймворков
Выбрав фреймворк для изучения, помните – это лишь инструмент для увеличения возможностей разработчика. Вы должны точно понимать, какие проблемы языка решаете таким способом. Фреймворки будут меняться, но с подобным пониманием вы легко разберетесь в любом из них.
Часто бывает так, что Junior JavaScript разработчик, не имея еще достаточного опыта, с головой ныряет в какой-нибудь фреймворк и начинает считать его способ работы единственно правильным. Решение этой проблемы довольно интересное. Чтобы понять, что фреймворки не являются самоцелью, нужно… больше фреймворков!
В лингвистике давно известно, что полезно изучать похожие языки одновременно. Это позволяет лучше разобраться в их структуре, отмечая сходства и различия. Знание двух JS-фреймворков работает аналогичным образом.
Если вам доступны несколько путей решения одной и той же проблемы, вы начинаете лучше понимать саму проблему.
- Я выбираю тебя! Кто лучший покемон из JavaScript-фреймворков?
- Фреймворк или библиотека? А в чем, собственно, разница?
- 7 лучших JavaScript фреймворков и библиотек для изучения
Под капотом сборщика
Программирование на JavaScript в настоящее время – дело довольно комплексное и сильно выходит за пределы ванильного JS. Мы используем множество различных инструментов для выполнения рутинных задач и сборщики для объединения их в единый слаженный механизм.
Сборка – один из самых "черномагических" процессов. Не каждый опытный JavaScript разработчик понимает, каким образом из простенького конфига и кучи несвязанных модулей получается один файл с обработанным и оптимизированным кодом.
Сборка – самая быстро развивающаяся область в JS. Производительность стремительно растет, размеры бандла так же стремительно уменьшаются. Разработчики выжимают из процесса все, что возможно. Именно поэтому вы должны разобраться в этом волшебстве.
Невероятно важно понимать, что делают инструменты, которыми вы пользуетесь. Как именно они преобразуют ваш код и в каком порядке. Как упаковываются ваши модули и как можно влиять на процесс сборки. Не отдавайте вашу программу в полное распоряжение сборщика, продолжайте контролировать ее.
TypeScript – новый JavaScript
TypeScript – суперсет языка JavaScript со статической типизацией и классической ООП-моделью. Классическому JS порой очень не хватает этих фич, но не только они обусловили популярность TypeScript. Его главное достоинство – аккуратный и надежный код.
TypeScript не только сам проверяет программу за разработчиком, но и стимулирует его лучше следить за собой, поощряет выработку хороших привычек кодирования.
Начинающему разработчику нет необходимости досконально изучать TypeScript (хотя там много интересного). На первых порах достаточно ознакомиться с основами: аннотациями типов для переменных, свойств классов и параметров функций. Понимание этих правил и следование им убережет вас от многих ошибок даже в классическом JS, вы станете гораздо более дисциплинированным разработчиком.
- TypeScript за 5 минут – официальная документация TypeScript
- Онлайн-компилятор
Забавно, что среди самых важных тем для изучения в современном JavaScript только одна относится к ванильному языку. Но такова реальность. Сейчас освоить инфраструктуру языка даже важнее для успеха, чем разобраться в его тонкостях.
Комментарии