Как стать full stack разработчиком

Итак, вы решили начать путешествие в мир веб-разработки. Но с чего начать обучение начинающему программисту? В интернете огромное количество информации о разных технологиях, которые могут пригодиться веб-разработчику.

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

Что нужно знать

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

• Управление версиями кода/Git. Любой хороший разработчик, особенно работающий в команде, должен знать, как использовать Git. Нужно знать, как клонировать репозитории, делать коммиты, создавать ветви и проводить слияние кода;

• Отладка. Баги будут всегда, работаете вы над фронтендом или бэкендом. Освойтесь с отладочными инструментами вашей IDE. Кстати, об IDE…
• IDE. Из множества интегрированных сред разработки выберите себе одну и изучите её. IDE — ваш лучший друг, знание её инструментов и горячих клавиш прокачает вас как разработчика. Автор гайда рекомендует VS Code;

• Методы управления разработкой (Agile/SCRUM/Kanban). Вполне вероятно, что, работая в команде, вы столкнётесь с методами управления разработкой, поэтому постарайтесь ознакомиться с их принципами работы.

Фронтенд

Фронтенд разработчик обычно выполняет следующие задачи:

• Реализация дизайна с помощью HTML/CSS;
• Работа с DOM посредством JavaScript;
• Взаимодействие с API с помощью Fetch API или подобных средств.

Рассмотрим каждый пункт подробнее.

HTML/CSS

Это основа основ фронтенд разработки. HTML используется для размещения элементов на странице, а CSS для оформления этих элементов. От начинающего разработчика ожидают, что он хорошо знаком с этими инструментами. Вот что важно знать:

• Создание сайта с помощью HTML;
• Применение стилей посредством CSS;
• Различные способы применения CSS в HTML: шаблоны, inline-стили и тому подобное.

Познакомившись с основами, обратите внимание и на продвинутые практики.

• CSS Grid и Flexbox для вёрстки и более удобного размещения элементов;
• SCSS для более удобной работы с CSS.

На сайте css-tricks.com можно найти всеобъемлющий гайд по CSS.

Чтобы попрактиковаться, создайте несколько проектов с помощью CSS/HTML. Не обращайте внимания на JavaScript или API, сосредоточьтесь исключительно на работе со стилями и гипертекстовой разметкой.

Фреймворки

Следующий шаг — знакомство с CSS-фреймворками. По сути это готовые элементы и стили, которые можно использовать в своём проекте. Большинство компаний использует их, чтобы сберечь время своих разработчиков и не изобретать велосипед. Фреймворков огромное количество, подберите себе один по вкусу и изучите его. Обычно они довольно похожи, и, познакомившись с одним, можно легко освоиться и с остальными.

Bootstrap

Автор гайда рекомендует использовать фреймворк Bootstrap. Этот инструмент весьма распространён среди разработчиков.

С таким разнообразием фреймворков может показаться, что нет нужды изучать основы CSS/HTML. Однако вполне возможно, что когда-нибудь вам потребуется подправить что-то с учётом особенностей проекта. В этом случае и пригодится знание основ.

Адаптивный дизайн

Важно принимать в расчёт многообразие мобильных устройств. К счастью, использование названных ранее инструментов (Bootstrap, CSS Grid, Flexbox и других) серьёзно облегчает адаптацию проектов.

• Медиа-запросы. Необходимо понимать, как использовать CSS для создания адаптивного дизайна, а также как работать с медиа-запросами. Это позволяет определить, как будут выглядеть элементы на экранах разного размера;
• Не стоит указывать размер в пикселях. Изображение размером в 100 пикселей всегда будет изображением в 100 пикселей. Для соответствия стандартам адаптивного дизайна следует использовать rem, vh, и vw.

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

JavaScript

JavaScript — язык программирования, используемый в веб-разработке. Если вы хотите успешно работать с фронтендом, вам придётся его хорошо изучить. Конечно, фреймворки есть и здесь, причина для изучения основ та же, что и в случае с CSS/HTML. В перспективе это знание положительно отразится на вашей работе. Фреймворки приходят и уходят, а базовые элементы языка не меняются.

Вот тот минимум, который должен знать начинающий JavaScript разработчик:

• Объекты, функции, условия, циклы и операторы;
• Модули;
• Массивы (включая методы работы с ними);
• Получение данных от программных интерфейсов посредством Fetch API;
• Работа с DOM и использование событий;
• Async/Await (это не обязательно, но весьма полезно);
• JSON;
• ES6+;
• Тестирование (Jest, Enzyme, Chai и т.д.).

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

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

• Eloquent JavaScript;
• freeCodeCamp;
• You Don’t Know JS.

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

Некоторые идеи для проектов:

• создать клон игры Супер Марио (вы изучите JavaScript, работу с DOM, использование событий);
• создать приборную панель, выводящую полученные через API данные, например, для Twitter, GitHub или любого другого ресурса по желанию (вы научитесь работать с API и JSON).

Не беспокойтесь о том, как это будет выглядеть, сосредоточьтесь на работе с JavaScript, не уделяя особого внимания CSS/HTML. Внешний вид всегда можно поправить позже.

Фреймворки

Существует множество фреймворков для JS, выберите один и хорошенько изучите. Самые популярные на сегодняшний момент — Angular.js, React.js и Vue.js. Все перечисленные инструменты — хороший выбор, и в ближайшее время их разработку сворачивать не намерены.

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

React

Этот инструмент может похвастаться мощным бэкграундом от Facebook, многочисленным сообществом, и в настоящее время является самым распространённым в индустрии.

Если вы последовали приведённым выше рекомендациям и ознакомились с JavaScript, изучение React должно показаться не слишком сложным. Как начинающему разработчику, вам нужно освоить основные концепции этого инструмента:

• Понимание принципов взаимодействия компонентов React;
• Использование State & Props внутри компонентов;
• Концепция JSX и её использование для рендеринга HTML-элементов на веб-странице;
• Обновление компонентов: как и когда это происходит;
• Использование hooks в React;
• NPM, Webpack и Babel.

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

• Переделать некоторые из своих старых разработок с использованием React;
• Создать приложение-калькулятор (хороший способ отработать управление состояниями, так как многие из действий пользователя потребуют обновления состояния. Попробуйте использовать React Hooks);
• Разработать собственные приложения для работы с Twitter, GitHub или новостными лентами. Данные можно получить через публичный API и вывести внутри собственного приложения;
• Как и раньше, не уделяйте большого внимания внешнему виду, сконцентрируйтесь на работоспособности приложения, обращая внимание на изучение основных концепций React.

Управление состоянием (Redux)

После базовых концепций React изучите Redux. Это фреймворк, предназначенный в основном для управления состояниями и тесно связанный с React. Можете рассматривать его как базу данных, которая содержит в одном месте все состояния вашего веб-приложения и позволяет легко ими управлять.

Это сложная система с большим количеством компонентов, поэтому поначалу работа с ней может несколько озадачить. Однако Redux понадобится вам только для работы с большими коммерческими приложениями. Сфокусируйтесь на понимании основ и управлении состояниями с помощью React.

Инструменты разработки

Это инструменты, которые помогут с отладкой React/Redux.

• React Dev Tools;
• Redux Dev Tools.

Веб-браузеры

Фронтенд разработчику важно разбираться в веб-браузерах. Самые распространённые — Chrome, Firefox и Microsoft Edge. Вам нужно разбираться в следующих аспектах:

• Инструменты отладки (например Chrome DevTools);
• Работа с хранилищами (локальные, сессионные, куки);
• Особенности браузеров. Самая серьёзная проблема веб-разработки — поддержка всех браузеров. Просматривайте whatwebcando.today, если хотите быть уверенным, что ваш код будет работать во всех нужных браузерах.

Развёртывание и размещение

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

• GitHub Pages;
• Heroku;
• Netlify;
• Digital Ocean;
• AWS;
• Firebase.

Каждый из этих сервисов предоставляет базовый бесплатный доступ. Отрицательная сторона их использования в том, что они не предоставляют полный доступ к некоторым функциям, которые могут понадобиться некоторым разработчикам. Например, к службе электронной почты, SSH или FTP. Если вы не понимаете, о чём речь, вероятно, они вам и не понадобятся, и базового доступа будет вполне достаточно.

Если вы хотите использовать для проекта домен типа <ваше_имя>.com, можно найти провайдеров, предоставляющих доменные имена с удобным доступом и невысокой ценой.

Бэкенд

Грубо говоря, это место, где хранятся данные, полученные через фронтенд. Например, когда пользователь создаёт твит, тот проходит через сервер и сохраняется в базе данных.

Бэкенд разработчики обычно выполняют следующие задачи:

• Создание API для фронтенда (обычно с помощью JSON);
• Разработка проверочной и бизнес-логики;
• Интеграция со сторонними API;
• Работа с базой данных.

Языки программирования

Существует несколько сотен языков программирования, но не волнуйтесь, основных не так много:

• Java;
• Ruby;
• Python;
• JavaScript (Node.js);
• Go;
• PHP.

Стоит выбрать один из них и хорошо его изучить. Если вы уже работали с JavaScript, вам может подойти Node.js. С его помощью вы сможете легко разрабатывать REST API, а это одна из тех задач, которые обычно поручают младшему разработчику.

Какой бы язык вы ни выбрали, вам нужно будет освоить следующие навыки:

• Разработка API;
• Основы языка (создание функций, использование условий, операторы, переменные и т. д.);
• Подключение к базе данных;
• Создание запросов к базе данных;
• Управление пакетами;
• Написание тестов.

Если вы решили изучить Node.js, то со многим из этого списка вы уже знакомы. Не пытайтесь выучить всё это сразу, начинающему разработчику это не нужно. Выберите язык, который лучше всего соответствует вашим целям (для веб-разработки подойдут все перечисленные), сконцентрируйтесь на нём и изучите его досконально. Естественно, если вам интересны другие языки (JavaScript довольно сильно отличается от Python), не стесняйтесь удовлетворить своё любопытство и поэкспериментировать с ними.

REST API и JSON

Одна из основных задач бэкенд разработчика — создание качественного REST API. Вам нужно знать:

• Что означают различные глаголы и как их применять;
• Как установить надёжную обратную связь;
• Как обрабатывать запросы;
• Как работать с авторизационными запросами;
• Как создавать документацию к API.

REST API — мостик между бэкендом и фронтендом, поэтому для вас очень важно понимать, как он работает.

JSON — основной язык, используемый для передачи данных посредством REST API. Данные представлены Объектами и Массивами. Если вы уже освоили JavaScript, эта работа покажется вам знакомой.

Базы данных и DevOps

Эти два аспекта относятся к инфраструктуре разработки. Нельзя сказать, что начинающему веб-разработчику понадобятся углубленные знания в этой области, разве что если вы собираетесь заниматься именно вопросами DevOps. Вот базовые знания, которые вам потребуются:

• Управление базой данных;
• Работа с различными платформами для хостинга (AWS, Azure, Google и т.д.);
• Использование CI/CD (continuous integration and continuous delivery, непрерывная интеграция и непрерывная доставка) и таких инструментов, как Jenkins, GitLab и т.д.;
• Наблюдение и журналирование.

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

Продвинутые навыки

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

Авторизация с помощью JWT/OAuth

Это стандартный подход, используемый в индустрии для авторизации и аутентификации пользователей.

Шаблоны разработки

Шаблоны разработки — стандартные решения стандартных проблем. Изучение этих шаблонов облегчит вам решение возникающих в процессе работы задач и повысит ваш профессиональный уровень.

Примеры на языке Java и аналогичные примеры на JavaScript.

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

Progressive Web App и мобильная разработка

Progressive web apps (PWA) — это веб-приложения, которые запускаются на мобильных устройствах, подобно нативным приложениям. Можете изучить этот вопрос в свободное время.

Более подробно: developers.google.com/web/progressive-web-apps/

Другие возможности:

React Native — вы можете писать код, который будет компилироваться под Android/IOS.

Flutter — фреймворк с открытым исходным кодом для создания мобильных приложений от компании Google, похожий на React Native, но на языке Dart.

Рендеринг на стороне сервера

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

Больше почитать можно здесь: Demystifying server-side rendering in React.

Использование командной строки (SSH/Bash и т.д.)

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

• Подключение к серверу через SSH;
• Перемещение по директориям с помощью команд (cd, ls, и прочее);
• Редактирование файлов с помощью vim (или похожих инструментов. Вот несколько подсказок: vim.rtorr.com).