Перевод статьи Шона Максвелла «10 things to learn for becoming a solid full-stack JavaScript developer».
В мире программирования «находить красоту в простоте» означает желание использовать по возможности повсюду один и тот же инструмент/язык, а также избегать бойлерплейт-кода. Если вы веб-разработчик, то наверняка знаете, что JavaScript может использоваться и во фронтенде, и в бэкенде. Возможно, вы уже подумывали использовать этот язык в обоих вариантах, а может, уже используете. В любом случае, представляем вам список из 10 вещей, которые нужно изучить, чтобы стать full-stack JavaScript разработчиком.
Примечание: быть full-stack разработчиком означает уметь писать код бэкенда, который запускается на OS, извлекает данные из базы данных и отображает их в веб-браузере (фронтенд).
1. У вас должно быть фундаментальное понимание JavaScript
Естественно, вы не сможете заниматься full-stack разработкой на JavaScript (да и вообще любой full-stack веб-разработкой) без знания самого JavaScript. Чтобы начать, вам не нужно быть великим мастером, но базовое понимание обязательно.
Вопреки утверждениям многих людей, JavaScript это не сложный язык. У него есть своя законная доля странностей, но когда вы к ним привыкнете, вы поймете, что с этим языком действительно интересно работать. Многие запускаемые вами примеры кода могут быть нестабильными, но при правильном использовании на JavaScript можно писать очень выразительный код.
То, что этот язык является одновременно и динамическим, и прототипным, может раздражать тех, кто имеет объектно-ориентированный бэкграунд. Но есть небольшой нюанс, который может облегчить начало работы с этим языком (жаль, что сам я раньше не знал об этом).
В JavaScript в целом есть 2 типа: объекты и примитивы. Пятью примитивами являются: boolean, number, string, null и undefined. Все остальное – объекты. Функции, классы в ES6 и массивы – все они являются объектами (если заглянуть им под капот). boolean, number и string также имеют объектные дубликаты, которые JavaScript будет автоматически приводить в ходе определенных операций.
Например, «how are you».length обернет объект String вокруг примитива string. На самом базовом уровне объекты можно рассматривать как набор пар ключ/значение, где ключом всегда будет string, а значением будет… ну, что угодно: примитив, другой объект, функция, массив и т. д.
Пожалуй, следующим по важности аспектом JavaScript является его большой упор на асинхронное программирование. Это позволяет основному потоку выполнения вашей программы продолжаться, одновременно ожидая окончания каких-то других методов. Это достигается двумя основными способами, с помощью callbacks и promises. Эта статья на medium будет отличным вступлением в асинхронное и синхронное программирование, а вот здесь вы найдете хороший обзор promises.
2. Фронтенд-фреймворк
Одностраничные приложения в силу своих преимуществ в производительности очень популярны сегодня. Для их создания лучше всего изучить какой-нибудь фронтенд-фреймворк. Три самых значительных – Angular, React и Vue, но, конечно, выбор ими не ограничивается.
В мире JavaScript происходит что-то вроде междоусобицы по поводу того, какой из фреймворков лучший. Если вы загуглите «Angular vs React», то найдете много статей, где разбираются преимущества и недостатки каждого.
По причинам, описанным здесь, я отношусь к поклонникам Angular. Но я вполне допускаю, что могут быть ситуации, когда лучше подойдет React или Vue. Я бы порекомендовал вам почитать несколько статей со сравнительным анализом этих фреймворков, чтобы понять разницу, а затем выбрать тот, который вам лучше всего подойдет.
3. Bootstrap 4
Сегодня, когда практически все веб-приложения должны хорошо выглядеть на любом устройстве, у вас не будет времени писать весь необходимый для этого CSS-код самостоятельно.
Также во фронтенд-разработке есть много фич, которые могут улучшить опыт пользователя, например, popovers, popups, панели навигации, алерты и т. п. Если вы попытаетесь реализовать все эти вещи своими силами, то в результате получите огромное количество бойлерплейт-кода, разработка и поддержка которого займет целую вечность.
Bootstrap это фронтенд-библиотека, созданная Twitter и предоставляющая обширный функционал, от стилей до интерактивности. Эта библиотека позволит вам не писать всё с нуля.
Конечно, вам не нужно немедленно овладеть всеми функциями Bootstrap, но я настоятельно советую вам освоить grid-макет и панели навигации до того, как возьметесь за свое первое веб-приложение. Они используются повсеместно и просто необходимы, чтобы сделать ваш сайт дружественным к мобильным устройствам. Два упомянутых выше фронтенд-фреймворка (Angular и React) имеют библиотеки для интеграции с Bootstrap, так что вам не придется беспокоиться о совместимости его функций с этими фреймворками.
4. HTML/CSS
Хотя Bootstrap может позаботиться о многом из вашего CSS, вы все равно захотите применять собственные стили и вносить легкие изменения в какие-то фронтенд-библиотеки, которые будете использовать.
Большинство вещей, которые вам нужно будет делать в CSS, можно легко загуглить. Но если вы действительно хотите оживить свой сайт и, как и я, любите дизайн, то вам нужно хорошо разбираться в CSS. Сюда входят такие задачи как импорт и стилизация пользовательских шрифтов, установка свойств на основе ширины экрана (Bootstrap-сетки могут с этим не справиться) и использование CSS-селекторов вроде :nth-child(). Как и в случае с HTML, не нужно пытаться выучить все одномоментно, вы можете учиться по мере работы. Но прежде чем браться за свои первые шаблоны, стоит узнать разницу между in-line элементами, такими как <span>, и блочными, такими как <div>. Это избавит вас от значительной части головной боли, связанной с вашим CSS-кодом.
Если мы с вами похожи, то вы тоже можете считать HTML со всеми его тегами и CSS со всеми его селекторами немного раздутыми. Хорошо, что есть препроцессоры, которые могут сделать эти языки шаблонов более лаконичными.
Для HTML у нас есть такие инструменты как Pug и HAML, но HTML-препроцессоры используются реже, чем в случае с CSS.
Для CSS есть много вариантов, например, Stylus, LESS, SASS и PostCSS.
Командная строка Angular имеет плагины для ряда встроенных в него модулей. Также есть отдельные плагины для React. Я предпочитаю Pug и Stylus, поскольку у них богатый функционал.
5. NodeJS и бэкенд-фреймворк
NodeJS это среда, необходимая, чтобы запускать JavaScript на сервере, как любой другой язык. Конечно, в десктопной версии все будет немножко иначе, чем при запуске JavaScript в браузере. И браузер, и Node выполняют JavaScript, и оба при этом используют движок V8. Главное их отличие в том, что браузер добавляет дополнительный API для доступа к DOM, а Node добавляет API для взаимодействия с операционной системой. Если вы хотите стать full-stack JavaScript разработчиком, NodeJS придется изучить. Зато вам не надо будет изучать еще один язык.
Как и в случае с фронтендом, при выборе бэкенд-фреймворка у вас есть варианты. Но стандартом фактически является ExpressJS. Express помогает разогнать веб-сервер и начать писать APIs. Если хотите поиграться с разными бэкенд-фреймворками, я бы посоветовал начать с Express, а с другими экспериментировать потом, когда разберетесь с JavaScript в бэкенде.
6. Изучите TypeScript
JavaScript имеет бессчетное количество проблем. Межбраузерная совместимость, различные версии NodeJS, отсутствие типобезопасности, из-за чего усложняется масштабирование, и только половинная объектно-ориентированность с ключевым словом class в ES6.
TypeScript служит для транспиляции в чистый ES5-код, а это устраняет многие проблемы совместимости. Это также позволяет вам писать код на JavaScript более традиционным объектно-ориентированным способом, как на C#/Java.
Использование TypeScript сделало меня гораздо лучшим программистом и помогло мне глубже понять такие концепции как интерфейсы, наследование, контроль доступа (публичный, приватный и т. д.), а также абстракции.
Если у вас, как и у меня, бэкграунд в ООП, то TypeScript будет вам казаться более естественным, чем обычный JavaScript. А еще он может использоваться с lint-файлом, который будет приводить ваш код к определенным стандартам написания кода.
7. Освойте какой-нибудь инструмент вызовов API
Начинающие full-stack разработчики (и я в их числе) допускают большую ошибку, запуская APIs фронтенда при разработке бэкенда. Это сильно увеличивает количество времени, необходимого для реализации вашего кода. Вам придется вводить заново ваши значения каждый раз после обновления страницы и перемещаться к части фронтенда, где вызываются APIs.
Чтобы ускорить этот процесс, нужно разрабатывать фронтенд и бэкенд по отдельности. Познакомьтесь с инструментами вызова API, например, Postman или SoapUI, чтобы вы могли вызывать ваши APIs, не затрагивая фронтенд. Научитесь так же успешно пользоваться ими для аутентифицированных маршрутов, как и для вызовов API без необходимости входа в приложение.
8. Изучите основы SQL
Несмотря на весь хайп вокруг баз данных NoSQL и популярность MongoDB среди NodeJS-разработчиков, реляционные базы данных все еще самый практичный выбор для многих приложений. Не важно, будете ли вы использовать JavaScript для бэкенда: достойное знание SQL должно быть необходимым условием для каждого, кто хочет называться full-stack веб-разработчиком. Как и с JavaScript, вам не нужно быть экспертом в SQL. Но для начала следует знать, как делаются базовые вещи вроде создания/обновления таблиц и вставки данных.
Большинство реляционных баз данных, особенно MySQL и PostgreSQL, прекрасно интегрируются с NodeJS. Вы можете обращаться к ним так же легко, как к MongoDB или любой другой NoSQL базе данных. Лично я считаю, что стандартные запросы SQL немного более интуитивны, чем у некоторых баз данных, использующих JSONs (объекты JavaScript). Если вы хотите хранить свои данные в качестве JSONs, PostgreSQL и MySQL также дадут вам такую возможность.
9. Модульное и сквозное тестирование
Не стоит недооценивать (и я на этом настаиваю!) важность тестирования. Я заметил, что в реальном мире есть тенденция пренебрегать модульным тестированием, особенно во фронтенде. Тестирование не только предотвращает обнаружение багов пользователями, но и делает ваш код гораздо надежнее, а также заставляет вас делать ревью кода. Некоторые фреймворки, например Angular, имеют встроенные инструменты тестирования, так что вам не придется долго возиться с настройками, вы можете просто начать писать тесты.
Любой элемент на странице, поведение которого меняется в зависимости от действий пользователя, должен проходить модульное тестирование. В бэекенде все маршруты и публичные методы, которые могут запускаться пользователем, также должны тестироваться.
Сквозное тестирование (интеграционное или e2e-тестирование) должно выполняться для любого пользовательского действия, которое затрагивает несколько веб-страниц и обращается к бэкенду. Например, вход в систему с перенаправлением должны проходить e2e-тестирование. Если пользователь после успешного входа в свой аккаунт перенаправляется, скажем, на страницу профиля, это тоже должно проходить e2e-тест.
10. Основы аутентификации пользователя
Есть много способов обеспечения безопасности сайта: токены клиента, хранилище сессии, передача аутентификации стороннему инструменту, например MS Active Directory. Вам не нужно знать их все, но нужно иметь представление о том, что вам доступно в этом плане. Когда ознакомитесь, выберите самый простой вариант и начните наращивать свои знания с этой точки.
Также стоит получить общее представление об основных формах атак, которые могут предпринять хакеры в отношении вашего сайта. Вам не нужно быть экспертом по интернет-безопасности, просто нужно знать основные виды атак, которым подвержен ваш сайт. Сюда могут входить такие вещи как межсайтовый скриптинг и внедрение SQL-кода. Есть хорошая статья, раскрывающая основы интернет-безопасности.
Для безопасности APIs вашего бэкенда я советую начать с JSON веб-токенов (JWT). В NodeJS есть несколько хороших сторонних библиотек для использования их с Express. С ними достаточно просто работать.
JWT это форма аутентификации на стороне клиента, которую вы можете использовать для того чтобы только валидным (вошедшим в систему) юзерам разрешалось делать запросы к вашему бэкенду. JWTs также могут хранить зашифрованные JSON-объекты, так что вы можете определять, кто делает защищенный запрос.
Если же вы хотите наладить постоянное хранение информации для пользователей (например, сохранять корзину покупателя, когда он покинул сайт), вам в конечном итоге придется изучить тему сессий.
Как вам этот список? Если считаете, что здесь чего-то не хватает, поделитесь в комментариях своими идеями. Имейте в виду, что мир JavaScript огромен и тем для изучения в нем очень много. Я отобрал те из них, которые мне самому нужно было изучить для создания своего первого сайта. Даже если вы начинающий веб-разработчик и не уверены, что в конечном итоге будете когда-нибудь использовать full-stack JavaScript, большинство этих навыков сделает вас более продуктивным программистом с хорошим кругозором.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]