Что должен знать каждый Full Stack разработчик?

Умеете ли вы видеть в простоте красоту? Для разработчика это значит везде применять только один инструмент. В статье мы поговорим про 10 вещей, что должен знать каждый Full Stack.

Наверняка вы знаете, что язык JavaScript можно использовать как во front-end, так и в back-end. Может вы даже задумывались о таком варианте или уже активно им пользуетесь. Как бы то ни было, есть еще много вещей, которые необходимо узнать каждому, кто собирается стать Full-Stack JS веб-разработчиком.

1. Фундаментальное понимание языка

Конечно же, нереально стать разработчиком JS Full Stack без хорошего владения JavaScript. Причем асом быть не обязательно: хватит и среднего хорошего понимания. Многие ошибочно считают JavaScript простым языком, но это не совсем так. JS имеет множество своих особенностей и странностей. Но привыкнув к ним, вы найдете его очень интересным и удобным. Первое время примеры кода при запуске часто будут оказываться нестабильными. Тем не менее, научившись применять JavaScript правильно, вы станете писать весьма выразительно.

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

В целом язык имеет 2 типа данных: примитивы (их 5) и объекты (все остальное, в том числе функции, массивы). Некоторые примитивы вдобавок содержат объектные дубликаты – их JS автоматически приводит во время выполнения определенных операций.

Рассмотрим пример: «hello».length создаст обертку объекта String для примитива string. Если изучать объекты на фундаментальном уровне, их можно представить в виде пары ключ (string) и значение (что угодно: один из примитивов или любой объект).

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

2. Frontend-фреймворк

Благодаря высокой производительности одностраничные приложения сейчас стали очень популярными. Чтобы создавать их, желательно изучить любой Frontend-фреймворк. Самые востребованные – это Angular, Vue и React, но никто не запрещает вам выбрать какой-нибудь другой.

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

3. HTML/CSS

Вы в любом случае захотите использовать свои стили CSS и немного изменять применяемые фронтенд-библиотеки. Большинство из тех действий, которые касаются CSS, можно просто загуглить. Но если вам нравится заниматься дизайном тщательно, и вы хотите сделать сайт “живым”, придется познакомиться с CSS поближе.

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

И HTML, и CSS не обязательно учить заранее – это лучше делать в процессе работы над проектом. Но до того как приступать к своим шаблонам, все-таки разберитесь с разницей между строчными и блочными элементами. Это спасет вас от лишней головной боли в процессе написания CSS-кода.

4. Bootstrap 4

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

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

Вот почему вам нужно изучить Bootstrap – библиотеку для фронтенда от компании Twitter. Она предоставляет широкий функционал, содержащий в том числе стили и интерактивность. С ее помощью вам не грозит начинать с нуля.

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

5. NodeJS, а также Backend-фреймворк

Как и любому другому языку программирования, JavaScript нужна специальная среда для запуска на сервере. NodeJS работает на движке V8, как и браузер, хотя разница между ними все-таки есть. Главное отличие заключается вот в чем: API браузером добавляется для получения доступа к DOM, тогда как Node делает это для взаимодействия с ОС. Каждый Full-Stack 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. Основы SQL

Реляционные БД по-прежнему остаются самыми подходящими для многих веб-приложений, даже несмотря на шумиху вокруг NoSQL и MongoDB. Не имеет значения, станете ли вы применять JS для backend-а: все Full-stack разработчики должны хорошо знать 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-данные, поэтому у вас появится возможность вычислять тех, кто отправляет защищенные запросы.