10 вещей, которые должен знать full-stack JavaScript разработчик
Хочешь проверить свои знания по фронтенду?
Подпишись на наш канал с тестами по HTML/CSS/JS в Telegram!
Перевод статьи Шона Максвелла «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, вы все равно захотите применять собственные стили и вносить легкие изменения в какие-то фронтенд-библиотеки, которые будете использовать.
Если мы с вами похожи, то вы тоже можете считать 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, большинство этих навыков сделает вас более продуктивным программистом с хорошим кругозором.
Строим свой full-stack на JavaScript: Основы
В мире JavaScript очень легко набрать свой стек технологий, используя набор небольших пакетов, каждый из которых решают свою конкретную проблему. И это хорошо, c одной стороны, а с другой стороны, у вас особо нет выбора — фреймворки которые выполняют широкий спектр задач в JavaScript не популярны.
В этом цикле статей я хочу поделиться своим практическим опытом построения JS стека.
Для того, чтобы всегда иметь под рукой пример использования базовых технологий, был написан Contoso Express, пример full-stack приложения на JS. В нашей команде, используем этот проект, как стартовый шаблон для других проектов, поэтому он будет поддерживаться и обновляться в дальнейшем.
Для многих частей стека, сложно остановиться на одной альтернативе. Поэтому для некоторых технологий есть альтернативные имплементации. Смотри ветки ALT в Contoso Express repository.
Эти статьи для тех, кто уже знает основы, если вам нужно восполнить знания в какой-то области, поищите нужное в списке дополнительных ресурсов.
Почему JavaScript
Причин может быть много, вот мой топ лист:
Простота: В основном, библиотеки в Node имеют простые API с которыми легко разобраться и которые работают интуитивно понятным образом. Если не получилось с одной библиотекой, как правило, несложно найти хорошую альтернативу.
Контроль: Программист сам строит инфраструктуру проекта, выбирая и объединяя небольшие модули для конкретных задач. Это требует больше времени, но результат стоит того. Разобравшись один раз, полученный опыт легко применять в дальнейшем.
Универсальность: JavaScript изначально работал только на клиенте. Вначале вместе с Node он перебрался на сервер, а совсем недавно на нем стало можно успешно писать десктопные (Eletctron) и мобильные приложения. Причем, для мобильных приложений есть опция гибридных приложений (используется обертка над браузером (Cordova)) или приложений с нативным интерфейсом (ReactNative, NativeScript). Для Node существует огромное множество библиотек и его легко интегрировать с другими технологиями, базы данных, облачные технологии, различные форматы и протоколы, найдется все.
Производительность: Node асинхронен и не блокирует процесс выполнения во время длительных операций, таких как вычитка файла или обращение к базе данных. Это позволяет достичь высокого уровня производительности при использовании единственного потока (single threaded environment). C другой стороны, вычисления в JavaScript медленнее чем в статически типизированных языках. Для большинства проектов это не проблема. Если нужны вычисления, а не просто преобразования данных, то лучше написать отдельный сервис на чем-то другом.
Один язык на сервере и клиенте: Это удобно, так как позволяет, без усилий переносить код между клиентом и сервером, легче в разработке и поддержке.
И это далеко не полный список.
Варианты языка JS
Современный JavaScript можно писать в нескольких вариантах:
Стандарты JavaScript
ES5 — версия JavaScript от 2009 года, полностью поддерживаемая всеми современными браузерами и Node.
ES6 — недавнее утвержденное обновление языка. Разработка поддержки стандарта всех JS движках пока еще в процессе разработки.
Взглянуть на текущее состояние поддержки ES6 можно на
Kangax ES6.
Таким образом, в ближайшее время разрабатывать клиентскую часть сразу на ES6 нельзя, потому что поддержки во всех браузерах еще нет.
Для Node используется V8 движок, текущая стабильная LTS версия которого (4.x) не поддерживает все новые особенности ES6.
LTS (long term support) это версия NodeJs, рекомендуемая для использования на продакшeне. Следующая LTS Node ожидается в октябре 2016 и в ней уже есть поддержка большинства возможностей ES6.
Транспайлинг (transpiling)
Для того чтоб бы использовать фичи ES6/ES7 существует несколько транспайлеров которые преобразуют код написанный на ES6 в ES5.
Обратите внимание на разницу между транспиляцией и компиляцией: тут.
Babel самый популярный транспайлер из ES6/Next в ES5.
TypeScript
TypeScript это язык расширение JavaScript, которое добавляет возможность статической типизации. Типы в TypeScript используются для проверки корректности кода и дополнительных возможностей рефакторинга и авто-подсказок. Когда TypeScript транспилируется в JS, все определения типов опускаются.
TypeScript поддерживает многие ES6/ESNext возможности и может использоваться как Транспайлер (вместо Babel).
Кроме того в TypeScript существуют дополнительные конструкции, которых нет в JS — энумы, наследование и полиморфизм в классах и прочее. Они транспилируются в JS с помощью вспомогательного JS кода.
Не все возможности TypeScript одинаково полезны перечислю основные категории:
Транспиляция ES6/ESNext — TS отлично с этим справляется, хотя и уступает Babel в некоторых моментах, например async/await в TypeScript пока только доступно если транпилировать в ES6 версию. Больше об этом в следующей статье.
Статическая типизация в коде приложения — это основная причина использовать TS, типы в TS опциональны, если тип не указан, предполагается тип «any», что значит в этот тип можно записать и прочитать из него любые поля, это делает перевод существующего кода JS на TS, гораздо легче, не нужно добавлять типы везде, а только там где это имеет смысл. При этом даже если вы не описываете типы в TS, у вас появляется много дополнительных проверок, которые помогают обнаруживать тривиальные ошибки-опечатки, еще до того, как вы запускаете приложение. Дополнительно у вас хорошо работают подсказки в коде и не нужно лишний раз смотреть какие методы есть у модуля и какие у них сигнатуры.
Типизация сторонних библиотек — TS позволяет описывать структуру сторонних библиотек (например lodash иди express), это позволяет контролировать, что вы вызываете методы с правильными параметрами и позволяет видеть методы и их сигнатуры без использования документации. К сожалению качество таких описаний часто оставляет желать лучшего и когда в описании нет нужной сигнатуры ее нужно добавлять вручную. Иногда легче не использовать сторонние описания (работать с библиотекой как с типом «any»). Проблема в том, что сейчас описания библиотек в TS и сами библиотеки чаще всего пишут разные люди. Скорее всего ситуация будет улучшаться с ростом популярности TS.
Что выбрать
Я бы рекомендовал выбирать между ES6 и TypeScript. ES6 имеет очень много полезных дополнений, которые делают разработку легче и приятнее и это стоит того, чтобы потратить больше времени на первоначальную настройку. На своих проектах я перешел на TypeScript, потому что это действительно серьезно улучшает процесс разработки, хотя и требует гораздо больших усилий по настройке и интеграции. Что бы вы не выбрали, хорошо если вы делаете осознанный выбор, поработав и с тем и с другим.
Среда разработки
WebStorm — умная среда разработки со множеством встроенных функций. Хорошая поддержка для TypeScript. Платная. Подробности настройки для contoso express на wiki-странице проекта. WebStorm основная IDE в нашей команде.
Visual Studio Code — бесплатная среда от Microsoft. Наилучшая поддержка для TypeScript, появилась недавно, нет некоторых привычных функций. Быстро развивается, полностью сделана и поддерживает плагины на JavaScript.
Другие — можно пользоваться и другими JavaScript IDE, такими как Atom, Sublime, Brackets. TypeScript в той или иной степени поддерживается везде.
Подбираем npm пакеты
Работать с npm очень просто. Просто устанавливать и просто публиковать свои пакеты. Вследствии этого пакетов на npm великое множество (на текущий момент 330.000+).
Подобрать правильный пакет достаточно сложно. По любому запросу на npmjs.com найдется множество пакетов, при этом не факт, что там будут предоставлены основные пакеты для решения нужной задачи.
Выбирая пакет стоит обратить внимание на: количество закачек (популярность) и как часто пакет обновляется (коммиты в гитхаб репозитории). Найдя нужный пакет, можно поискать информацию в интернете, так можно найти другие пакеты выполняющие схожие задачи.
Есть сайт с альтернативным поиском по npm npms.io, там сразу просчитываются такие характеристики, как популярность и регулярность поддержки.
В дальнейших статьях я буду описывать основные опции по пакетам для базовых задач разработки. Если имя пакета в кавычках (например «bluebird»), это значит это имя с которым пакет зарегистрирован в npm и его можно посмотреть по ссылке https://www.npmjs.com/package/
Базы данных
SQL или NoSQL?
На этот вопрос нельзя ответить однозначно, зависит от конкретной ситуации. Самыми популярными опциями для SQL/NoSql являются PostgreSQL/MongoDb. Недавнее добавление JSON полей в PostgreSQL, делает его очень привлекательным вариантом соединяющим в себе лучшее из миров SQL/NoSql. Но, несмотря на это, MongoDb по-прежнему самая популярная база данных для Node, и может быть легче для работы, особенно для тех, у кого не было предыдущего опыта работы с SQL базами данных.
Доступ к базе данных
Работая с базой данных вы можете использовать доступ напрямую с помощью драйвера базы данных или каккую-то ORM абстракцию более высокого уровня. Если у вас не много взаимодействий с базой данных, то лучше использовать доступ напрямую или абстракцию низкого уровня, такую как Knex (для SQL баз данных).
Sequelize — самая популярная ORM для SQL баз данных. Она предоставляет высокий уровень абстракции над БД схемой и поддерживает основные SQL диалекты (PostgreSQL, MySQL, SQLite and MSSQL). Используется в Contoso Express.
Knex — это абстракция более низкого уровня. Больше как конструктор запросов, чем полоценная ORM. Поддерживает большее количество диалектов и дает больше контроля над генерируемым SQL. Имеются функции построения схемы БД и ее миграций.
Bookshelf — eще одна популярная ORM основанная на Knex, уровень абстракции ниже чем в Sequelize и многие вещи нужно определять вручную.
Mongoose — Самая популярная ORM для самой популярной в JS базы данных MongoDB
Прямое подключение
Для всех основных баз данных существуют драйверы хорошего качества, для прямого соединения. Для Postgres используйте «pg» или «pg-promise» пакеты.
Что дальше
В следующей статье я расскажу про работу с JS на сервере. Она будет более практичной и покроет такие вещи, как выбор веб фреймворка, организация структуры проекта, работа с конфигами, авторизация, логирование, обработка ошибок и другое.
Буду рад замечаниям комментариям, особенно, непосредственно, по коду проекта Contoso Express 🙂
Спасибо всем кто дочитал до конца! Stay tuned!
