18114

Учи JavaScript правильно. Путеводитель для растерявшихся

Заблудились в JavaScript? Это совсем неудивительно. Вам нужен гид, который расскажет, что на самом деле важно. У нас как раз есть такой.

Учи JavaScript правильно. Путеводитель для растерявшихся

Посмотрите налево – тут рынок фреймворков, которые наперебой расхваливают свои возможности. Посмотрите направо – здесь супермаркет npm-модулей. Впереди вы можете видеть огромные мастерские бандлеров и таск-раннеров и офисные небоскребы Node-приложений.

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

Если вы один из этих заблудившихся туристов, наш путеводитель по JavaScript для начинающих поможет вам превратиться в уверенного JS-горожанина. Он подскажет, с чем разобраться в первую очередь, чтобы ориентироваться в этом шумном, но интересном месте.

Предполагается, что с основами языка вы уже знакомы – иначе как вы вообще попали в этот город?

Асинхронность в основе всего

Когда-то в вебе были только скучные статичные страницы, а любое действие требовало перезагрузки. Та эпоха осталась в прошлом, на смену ей пришли крутые отзывчивые приложения, которые умеют общаться с сервером в фоновом режиме, не мешая пользователю.

Учи JavaScript правильно. Путеводитель для растерявшихся

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

Следующий шаг в этом направлении – изучение функции fetch, удобной альтернативы классическому XMLHttpRequest.

Зачем нужны фреймворки

Фреймворки стали такой важной составляющей современного JavaScript, что кажется, что они были всегда.

Почему так получилось, почему js-фреймворки вообще существуют?

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

Учи JavaScript правильно. Путеводитель для растерявшихся

Привязка данных

Привязка данных (data binding) между представлением и контроллером – важная часть современных приложений. Необходимо синхронизировать пользовательский интерфейс с реальными изменениями данных. Все фреймворки имеют какой-то способ сделать это, независимо от того, являются ли они полным воплощением модели MVC, MVVM или просто слоем представления.

Повторно используемые компоненты

Самое большое достижение AngularJS – введение моды на компонентную структуру приложения, которую быстро подхватили и Vue, и React. Эта идея оказалась настолько удачной, что в самом языке появился специальный интерфейс веб-компонентов. К сожалению, он не имеет механизма привязки данных, поэтому фреймворки по-прежнему незаменимы.

Правильное изучение JavaScript фреймворков

Выбрав фреймворк для изучения, помните – это лишь инструмент для увеличения возможностей разработчика. Вы должны точно понимать, какие проблемы языка решаете таким способом. Фреймворки будут меняться, но с подобным пониманием вы легко разберетесь в любом из них.

Часто бывает так, что Junior JavaScript разработчик, не имея еще достаточного опыта, с головой ныряет в какой-нибудь фреймворк и начинает считать его способ работы единственно правильным. Решение этой проблемы довольно интересное. Чтобы понять, что фреймворки не являются самоцелью, нужно… больше фреймворков!

В лингвистике давно известно, что полезно изучать похожие языки одновременно. Это позволяет лучше разобраться в их структуре, отмечая сходства и различия. Знание двух JS-фреймворков работает аналогичным образом.

Если вам доступны несколько путей решения одной и той же проблемы, вы начинаете лучше понимать саму проблему.

Под капотом сборщика

Программирование на JavaScript в настоящее время – дело довольно комплексное и сильно выходит за пределы ванильного JS. Мы используем множество различных инструментов для выполнения рутинных задач и сборщики для объединения их в единый слаженный механизм.

Учи JavaScript правильно. Путеводитель для растерявшихся

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

Сборка – самая быстро развивающаяся область в JS. Производительность стремительно растет, размеры бандла так же стремительно уменьшаются. Разработчики выжимают из процесса все, что возможно. Именно поэтому вы должны разобраться в этом волшебстве.

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

TypeScript – новый JavaScript

TypeScript – суперсет языка JavaScript со статической типизацией и классической ООП-моделью. Классическому JS порой очень не хватает этих фич, но не только они обусловили популярность TypeScript. Его главное достоинство – аккуратный и надежный код.

Учи JavaScript правильно. Путеводитель для растерявшихся

TypeScript не только сам проверяет программу за разработчиком, но и стимулирует его лучше следить за собой, поощряет выработку хороших привычек кодирования.

Начинающему разработчику нет необходимости досконально изучать TypeScript (хотя там много интересного). На первых порах достаточно ознакомиться с основами: аннотациями типов для переменных, свойств классов и параметров функций. Понимание этих правил и следование им убережет вас от многих ошибок даже в классическом JS, вы станете гораздо более дисциплинированным разработчиком.


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

Что вы считаете главным в современном JavaScript?

РУБРИКИ В СТАТЬЕ

Комментарии

BUG
LIVE