Пожаловаться

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

19991
Пожаловаться

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

Маст хэв!

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

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

Frontend

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

Чем занимается 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:

Браузеры

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

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

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

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

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

Back-end

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

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 веб-разработчик

Junior 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 или аналогичного.

Оригинал

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

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

19991

Комментарии

Рекомендуем

BUG!