Junior full stack веб-разработчик: полный план развития

Кто же такой full stack веб-разработчик, и с чем его едят? Понятные ответы на непонятные вопросы, обязательные к прочтению.

Маст хэв!

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

• Изучите, как использовать Git (особенно в командной среде), клонировать репозитории, делать коммиты, создавать ветки и мержить код.
• Отладка. Frontend или backend – везде могут быть ошибки. Ознакомьтесь с инструментами отладки для вашей IDE.
• Существует много сред разработки, которые вы можете использовать, но выберите одну и досконально изучите ее (знание горячих клавиш и инструментов сделает вас лучшим разработчиком).
• Методологии (Agile / SCRUM / Kanban) – при работе в команде, скорее всего, вы будете использовать какую-либо методологию разработки продукта, поэтому убедитесь, что вы знакомы с тем, как они работают.

Frontend

Чем занимается Full stack веб-разработчик? Этим:

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

Разберем подробнее каждое из направлений.

HTML / CSS

Ожидается, что младший full stack веб-разработчик будет хорошо ориентироваться в таких темах:

• использование HTML для создания веб-страницы;
• стилизация элементов с использованием CSS;
• способы применения CSS к HTML – встроенные стили, таблица стилей, etc.

После того, как у вас появятся базовые знания, рассмотрите более продвинутые вещи:

• CSS Grid и Flexbox для разметки и более удобного позиционирования элементов.
• SCSS сделает обычный CSS более управляемым с помощью переменных.

Фреймворки

Следующий этап – знакомство с CSS-фреймворками. В основном это элементы и стили "из коробки", которые вы могли уже использовать в проектах. Это сильно экономит время. Не распыляйтесь, весь мир не объять: выберите один фреймворк и хорошо его изучите. Как только овладеете одним – другие будет легче познать.

Bootstrap

Bootstrap популярен и используется во многих компаниях.

Ну и зачем изучать CSS / HTML с нуля, если можно использовать фреймворк?

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

Отзывчивый дизайн

Важно учитывать множество мобильных устройств при создании проектов интерфейсов. К счастью, CSS-фреймворки делают создание "отзывчивости" простым.

• Media Queries. Зная, как использовать CSS для создания адаптивных конструкций, нужно понять, как использовать media queries. Так вы определите, как элементы должны выглядеть на разных размерах экранов.
• Избегайте использования пикселей для указания размеров. Изображение с шириной 100px, всегда будет иметь ширину 100 пикселей, независимо от размера экрана. Попытайтесь использовать rem, vh и vw для достижения отзывчивости.

JavaScript

Да, это прекрасный язык программирования JavaScript. Для успешного развития в среде front-end вам нужно знать язык JavaScript, и знать хорошо. По мере того, как фреймворки приходят и уходят, основные элементы ЯП остаются прежними.

Вот минимум знаний для Джуна:

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

Повышения навыка программирования на JavaScript:

1. Создайте игру Super Mario (вы узнаете JavaScript, манипулируя DOM и используя события).
2. Создайте админку, показывающую статистику, которая извлекается из API. Например, панель мониторинга Twitter, GitHub и т. д. (вы научитесь работать с API и JSON).
3. Не беспокойтесь о внешнем виде. Сосредоточьтесь на изучении JavaScript, а не CSS/HTML. Вы всегда сможете сделать его красивым позже, если хотите.

JavaScript фреймворки

Самые популярные на данный момент: Angular.js, React.js и Vue.js.

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

React

Он имеет постоянную поддержку от Facebook, массу тематических онлайн-сообществ и является самым популярным в отрасли на данный момент.

Если вы выполнили описанные выше шаги и немного познали язык JavaScript, изучение React не должно составить труда. Младший full stack веб-разработчик должен знать:

• о React-компонентах и том, как они работают;
• как использовать State и Props в компонентах;
• JSX и как использовать его для отображения HTML элементов на веб-странице;
• как и когда компоненты повторно визуализируются;
• React hooks;
• NPM, Webpack и Babel.

Оттачивание скилов:

1. Переделайте любой из ваших предыдущих проектов JavaScript под React.
2. Создайте калькулятор (хороший способ потренировать state management и React Hooks).
3. Создайте собственный Twitter, GitHub или ленту новостей. Используйте общедоступные API для получения данных и отображения их в приложении.
4. Не беспокойтесь об идеальном внешнем виде, а сосредоточьтесь на том, чтобы заставить его работать, а также на изучении концепций React.

Redux

Redux – это стейт менеджмент фреймворк, полезно дополняющий React. Если грубо, то это front-end БД, хранящая состояние веб-приложения.

В Redux много подводных камней, поэтому не волнуйтесь, если вы не сразу все "схватываете". Сосредоточьтесь на понимании основ и управлении состоянием с React.

Есть ряд доступных инструментов, способных помочь вам с отладкой React / Redux:

• React Dev Tools
• Redux Dev Tools

Браузеры

Full stack веб-разработчик должен знать все о браузерах: Chrome, Firefox и Edge являются основными. Разберитесь с такими направлениями:

• отладка (например, Chrome Developer Tools);
• работа с хранилищем (локальное хранилище, сессионное хранилище, куки);
• особенности браузера – самая большая проблема веб-разработки.

Развертывание и хостинг

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

• GitHub Pages
• Heruko
• Netlify
• Digital Ocean
• AWS
• Firebase

Back-end

Full stack веб-разработчик обычно делает это:

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

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

Основные языки программирования:

• Java
• C#
• Python
• js
• Go
• PHP

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

• процесс создания API
• основы языка
• как подключиться к БД
• как сделать запрос
• управление пакетами
• написание тестов

REST API и JSON

Создание хорошего REST API является одной из основных задач бекенд-разработчика. Вам придется знать:

• как создать хороший ответ;
• как обрабатывать запросы;
• запрос аутентификации;
• документирование API.

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

JSON нужен для передачи данных через REST API. Данные в нем представлены в виде объектов и массивов.

БД, DevOps и full stack веб-разработчик

Это сложная отрасль, необходимая, если вы захотите углубиться в DevOps. Будет большим плюсом знать:

• управление БД;
• платформы для хостинга (AWS, Azure, Google и т. д);
• CI / CD (Jenkins, GitLab и т. д.);
• журналирование и мониторинг.

Продвинутые темы

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

Аутентификация на JWT / OAuth

Это основной метод проверки подлинности, разрешающий пользователям войти в систему.

Шаблоны проектирования

Изучение шаблонов проектирования облегчит решение распространенных проблем и поможет стать лучшим разработчиком.

Прогрессивные веб-приложения и мобильная разработка

Прогрессивные веб-приложения – это приложения, работающие как нативные на телефоне пользователя. Изучите этот вопрос, если появится дополнительное время.

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

Flutter – инструмент похож на React Native, только использует Dart.

Командная строка

Вам нужно знать:

• как подключиться к серверу по SSH;
• как перемещаться по файловой системе (cd, ls и т. д.);
• редактирование файлов с помощью Vim или аналогичного.

Оригинал

Другие материалы по теме:

• ТОП-6 рецептов на чистом HTML и CSS без использования JS
• Дорожная карта web-разработчика Java в 2019 году

Мы что-то упустили? Обязательно напишите об этом.