Наверняка вы знаете, что язык можно использовать как во front-end, так и в back-end. Может вы даже задумывались о таком варианте или уже активно им пользуетесь. Как бы то ни было, есть еще много вещей, которые необходимо узнать каждому, кто собирается стать JS веб-разработчиком.
1. Фундаментальное понимание языка
Конечно же, нереально стать разработчиком JS Full Stack без хорошего владения JavaScript. Причем асом быть не обязательно: хватит и среднего хорошего понимания.
Многие ошибочно считают простым языком, но это не совсем так. JS имеет множество своих особенностей и странностей. Но привыкнув к ним, вы найдете его очень интересным и удобным. Первое время примеры кода при запуске часто будут оказываться нестабильными. Тем не менее, научившись применять JavaScript правильно, вы станете писать весьма выразительно.
Обладателям объектно-ориентированной базы будет сложно воспринять тот факт, что JS является динамическим и прототипным одновременно. На первых порах работу может сильно облегчить один маленький нюанс, который, к сожалению, я сам узнал слишком поздно.
В целом язык имеет 2 типа данных: примитивы (их 5) и объекты (все остальное, в том числе функции, массивы). Некоторые примитивы вдобавок содержат объектные дубликаты – их JS автоматически приводит во время выполнения определенных операций.
Рассмотрим пример: «hello».length создаст обертку объекта String для примитива string. Если изучать объекты на фундаментальном уровне, их можно представить в виде пары ключ (string) и значение (что угодно: один из примитивов или любой объект).
Наверное, следующим важным аспектом языка можно назвать его акцент на асинхронную разработку, что дает возможность продолжать главный поток выполнения кода параллельно с ожиданием завершения прочих методов. Делается это с помощью таких основных способов как колбэк и промисы.
2. Frontend-фреймворк
Благодаря высокой производительности одностраничные приложения сейчас стали очень популярными. Чтобы создавать их, желательно изучить любой Frontend-фреймворк. Самые востребованные – это , и , но никто не запрещает вам выбрать какой-нибудь другой.
В мире JS постоянно ведутся споры о том, какой фреймворк самый лучший. Попробуйте загуглить обзоры и сравнения: вы найдете сотни статей, в которых детально разбираются плюсы и минусы каждого из них.
3. /
Вы в любом случае захотите использовать свои стили и немного изменять применяемые фронтенд-библиотеки. Большинство из тех действий, которые касаются CSS, можно просто загуглить. Но если вам нравится заниматься дизайном тщательно, и вы хотите сделать сайт “живым”, придется познакомиться с CSS поближе.
Например, желательно изучить импортирование шрифтов пользователя, их стилизацию, установка свойств в зависимости от ширины экрана (здесь не помогут Bootstrap-сетки) и применение селекторов.
И HTML, и CSS не обязательно учить заранее – это лучше делать в процессе работы над проектом. Но до того как приступать к своим шаблонам, все-таки разберитесь с разницей между строчными и блочными элементами. Это спасет вас от лишней головной боли в процессе написания CSS-кода.
4.
В наши дни каждое приложение должно корректно смотреться на всех устройствах. А чтобы написать для этой цели весь требующийся CSS-код, придется потратить слишком много времени и усилий.
Кроме того, Frontend содержит много фич, призванных улучшить пользовательский опыт (popovers, элементы навигации, popups и т.д.). Чтобы реализовать их вручную, придется создать громадный бойлерплейт-код, на разработку и дальнейшую поддержку которого уйдет целая вечность.
Вот почему вам нужно изучить Bootstrap – библиотеку для фронтенда от компании Twitter. Она предоставляет широкий функционал, содержащий в том числе стили и интерактивность. С ее помощью вам не грозит начинать с нуля.
Конечно, никто не заставляет вас постигать все функции и возможности Bootstrap сразу. Мы советуем первым делом обратить внимание на rid-макет. Также, еще до работы над первым проектом, освойте панели навигации, которые сейчас используются абсолютно везде благодаря тому, что делают веб-страницы дружественными ко всем мобильным устройствам. Если вы пользуетесь Angular или React, то можете не переживать о совместимости с ними функций Bootstrap: в этих фреймворках предусмотрены библиотеки для интегрирования.
5. , а также Backend-фреймворк
Как и любому другому языку программирования, JavaScript нужна специальная среда для запуска на сервере. NodeJS работает на движке V8, как и браузер, хотя разница между ними все-таки есть. Главное отличие заключается вот в чем: API браузером добавляется для получения доступа к DOM, тогда как Node делает это для взаимодействия с ОС. Каждый JS веб-разработчик должен знать NodeJS, чтобы не пришлось учить дополнительный язык.
Выбирая backend-фреймворк (как и front-end), вы можете остановиться на любом варианте. Чаще всего используют ExpressJS, который разгоняет сервер и помогает приступить к написанию APIs. Желающим попробовать что-то другое, мы все-таки советуем вам для начала изучить Express, а уже потом экспериментировать с прочими имеющимися бэкенд-фреймворками.
6. TypeScript
По правде говоря, в JavaScript есть много проблем, например, с межбраузерной совместимостью, разными версиями NodeJS, сложным масштабированием из-за отсутствия типобезопасности и др.
TypeScript позволяет транспилировать в чистый ES5, что решает массу проблемы с совместимостью. Кроме того, вы сможете писать на JS как и на C# или Java, т.е. более привычным традиционным ОО-способом.
7. Инструмент для вызова API
Одна из самых распространенных ошибок начинающих разработчиков полного цикла – во время разработки Backend-а запускать APIs front-end-а. Из-за этого реализация кода требует гораздо больше времени. Приходится после каждого обновления страницы указывать значения по-новой и переходить к части front-end-а, в которой происходит вызов APIs.
Для ускорения процесса необходимо заниматься front-end-ом и backend-ом отдельно друг от друга. Существуют такие полезные инструменты для вызова API, как Postman и SoapUI. С их помощью вы сможете вызывать APIs без обращения к фронтенду и использовать их для работы с аутентифицированными маршрутами.
8. Основы
Реляционные БД по-прежнему остаются самыми подходящими для многих веб-приложений, даже несмотря на шумиху вокруг NoSQL и MongoDB. Не имеет значения, станете ли вы применять JS для backend-а: все разработчики должны хорошо знать SQL. Первым делом обратите внимание на базовые понятия, например, создание таблиц и заполнение их данными.
Большая часть реляционных БД, в том числе MySQL или PostgreSQL, великолепно комбинируются с NodeJS. Обращаться к ним можно так же просто, как к NoSQL и всем другим СУБД. Нам кажется, что SQL-запросы гораздо более интуитивно понятны, чем тех БД, которые используют JSONs. К тому же MySQL и PostgreSQL позволяют хранить данные в виде объектов JavaScript.
9. Сквозное и блочное (или модульное) тестирование
Никогда не пренебрегайте тестами. Тем более во front-end, где многие сильно недооценивают важность модульного тестирования. А ведь оно не только позволяет предотвратить появление багов, но и повышает надежность кода, принуждая вас совершать code review. Фреймворки вроде Angular обладают встроенными инструментами для проведения тестов, поэтому вам не грозит долгая возня с настройками: сразу начнете писать тесты.
Блочным тестированием должны проверяться все элементы, для которых предусмотрено изменение поведения после определенных действий пользователя. Что касается backend-а, в нем тестированию подлежат все маршруты, а также публичные методы, запускаемые пользователями.
Сквозное тестирование рекомендуется для всех действий пользователя, затрагивающих больше одной страницы и обращающихся к backend-у. К примеру, e2e-тестированию нужно подвергать вход в аккаунт, после которого предусмотрено перенаправление (чаще всего на пользовательскую страницу).
10. Аутентификация пользователя
Безопасность сайта обеспечивается многими способами: identity-токены и access-токены, пользовательские хранилища для сессии или использование сторонних инструментов вроде Active Directory от Microsoft. Вы не должны знать каждый из них, но общее представление о существующих вариантах у вас должно быть. Поверхностно познакомившись со всеми, выберите наиболее простой способ и начните углубляться конкретно в него.
Также не помешает иметь базовые знания о распространенных формах хакерских атак. Это не значит, что вы должны стать экспертом в сфере кибербезопасности, просто вам стоит знать, каким видам атак может подвергаться ваш сайт.
Начать работу над безопасностью APIs backend-а мы рекомендуем с JWT. NodeJS имеет несколько отличных сторонних библиотек, которые используются с Express и весьма просты в применении.
JSON Web Token – это разновидность аутентификации в клиент-серверных приложениях, с помощью которой вы можете только валидным пользователям позволять отправлять запросы к backend-у. JWTs к тому же могут содержать зашифрованные JSON-данные, поэтому у вас появится возможность вычислять тех, кто отправляет защищенные запросы.