10-минутная дорожная карта для того, чтобы стать Junior Full Stack Web Developer

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

Нетрудно понять, насколько это сбивает с толку. Я как бывший junior developer  знаю борьбу.

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

Здесь много информации - так что выпейте, почувствуйте себя комфортно, и начнем!

Должны знать

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

• Контроль Git / Source - Каждый хороший разработчик должен знать, как использовать Git, особенно в командной среде. Так что научитесь клонировать репозитории, делать коммиты, создавать ветки и объединять код
• Debugging - во Frontend или Backend будут ошибки. Ознакомьтесь с инструментами отладки для вашей IDE.
• IDE - Есть много IDE, которые вы можете использовать, поэтому выберите один и узнайте об этом. Ваша IDE - ваш лучший друг, а знание ярлыков и инструментов сделает вас лучшим разработчиком. Лично я рекомендую использовать VS Code.
• Методологии (Agile / SCRUM / Kanban) - при работе в команде, скорее всего, вы будете использовать методологию разработки продукта, поэтому убедитесь, что вы знакомы с тем, как они работают

Внешний интерфейс

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

• Реализуйте дизайн, используя HTML / CSS
• Взаимодействовать с DOM, используя JavaScript
• Взаимодействовать с API, используя FETCH API или аналогичный

Давайте углубимся в это немного подробнее.

HTML / CSS

Это хлеб с маслом развития веб-интерфейса. HTML используется для позиционирования и размещения элементов на веб-странице, в то время как CSS используется для стилизации этих элементов.

Ожидается, что начинающий веб-разработчик хорошо знает этот материал. Важно знать:

• Использование HTML для создания веб-страницы
• Стилизация элементов с использованием CSS
• Различные способы применения CSS к HTML - встроенные стили, таблицы стилей и т. Д.

Как только вы ознакомитесь с основами, взгляните на более сложные функции:

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

Проверьте css-tricks.com для всестороннего руководства по CSS. Это один из лучших ресурсов.

БОНУСНЫЙ СОВЕТ - Создайте несколько проектов на CSS / HTML для практики. Пока не беспокойтесь об использовании JavaScript или API, сосредоточьтесь только на элементах CSS / HTML.

Теперь мы превращаемся в экспертов CSS / HTML!

Frameworks

Следующий этап - знакомство с CSS-фреймворками. В основном это «готовые» элементы и стили, которые вы можете использовать в своих проектах. 

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

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

Bootstrap

Мое личное предложение - изучить Bootstrap ( getbootstrap.com ). Он очень популярен и используется многими компаниями.

«Подождите, почему я должен изучать CSS / HTML с нуля, если я могу просто использовать фреймворк ?!»

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

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

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

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

БОНУСНЫЙ СОВЕТ. Зачастую вам необходимо разработать приложение, которое использует мобильные и большие экраны. При создании дизайнов в первую очередь сосредоточьтесь на мобильных устройствах, а затем добавьте медиа-запросы для больших экранов.

JavaScript

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

 Да, есть фреймворки, но так же, как мы изучили основы HTML и CSS, прежде чем перейти к фреймворкам, мы сделаем то же самое здесь. Это сделает вас лучшим разработчиком в долгосрочной перспективе.

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

По крайней мере, как младший разработчик, вам нужно знать:

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

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

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

eloquentjavascript.net

freeCodeCamp.org

github.com/getify/You-Dont-Know-JS

Эти ресурсы не только научат вас JavaScript, но и узнают много нового о концепциях программирования в целом. Серьезно, если вы изучите ресурсы в вышеприведенных ресурсах, вы станете действительно офигенным младшим разработчиком - некоторые старшеклассники, о которых я говорил, не знают этого!

Некоторые идеи проекта:

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

Frameworks

Существует множество JS-фреймворков, выберите один и хорошо его изучите.

Популярные из них на данный момент являются Angular.js , React.js и Vue.js. 

Все это солидный выбор, и скоро он никуда не денется. Лично я рекомендую React.js, но вы можете попробовать другие и посмотреть, что вы предпочитаете.

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

Вам не нужно знать их все, это выглядит более впечатляюще, если вы ДЕЙСТВИТЕЛЬНО хорошо знаете одну инфраструктуру, в отличие от незначительного знания нескольких различных структур.

React

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

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

• Поймите, что React основан на компонентах, и как компоненты работают
• Использование State & Props в ваших компонентах
• JSX и как использовать его для отображения HTML-элементов на веб-странице
• Как и когда компоненты перерисовываются
• Использование React-хуков
• NPM, Webpack и Babel

БОНУСНЫЙ СОВЕТ  - Опять же, как младший разработчик, вы не должны знать React наизнанку. Поэтому, чтобы попрактиковаться в навыках, описанных выше, попробуйте создать несколько проектов:

• Перестройте некоторые из ваших предыдущих проектов JavaScript, чтобы использовать React
• Создайте приложение калькулятора (хорошее для практики управления состоянием, так как для обновления состояния требуется много действий пользователя. СОВЕТ: попробуйте использовать React Hooks)
• Создайте свой собственный, Twitter , GitHub или ленту новостей . Используйте общедоступные API-интерфейсы для получения данных и отображения их в своем приложении.
• Опять же, не беспокойтесь о том, чтобы сделать ваше приложение идеальным или сделать его очень сексуальным. Сосредоточьтесь на том, чтобы заставить его работать, и сосредоточьтесь на изучении концепций React.

Государственное управление (например, Redux)

Как только вы ознакомитесь с основными понятиями React, следующим шагом будет понимание Redux .

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

В Redux много движущихся частей, так что не беспокойтесь, если вы чувствуете себя перегруженными (я все еще изучаю входы и выходы!). Вам нужно знать Redux только при работе с крупными корпоративными веб-приложениями. Сосредоточьтесь на понимании основ и управления состоянием с помощью React.

Dev Tools

Есть ряд инструментов, которые помогут вам отладить React / Redux (отчасти поэтому я люблю его)

• React Dev Tools
• Redux Dev Tools

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

Как разработчику веб-интерфейса, важно знать, как работать с веб-браузерами. Chrome, FireFox и MS Edge являются основными. Вам нужно иметь основную идею вокруг:

• Инструменты отладки (например, инструменты разработчика Chrome)
• Работа с методами хранения (локальное хранилище, хранилище сессий, куки)
• Функции браузера - самая большая проблема веб-разработки - это разработка с учетом поддержки браузера. Следите за Whatwebcando.today, чтобы убедиться, что ваш код поддерживает необходимые браузеры.

Разработка и хостинг

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

• GitHub Pages
• Heruko
• Netlify
• Цифровой океан
• AWS
• Firebase

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

Если вы решили заняться модными делами и разместить некоторые свои проекты в собственном домене (например, если бы вы размещали свое портфолио на <your-name> .com), я рекомендую NameCheap для доменных имен. Опять же, очень прост в использовании и домены, ну, дешево.

Backend

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

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

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

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

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

• Java
• C #
• Python
• Node.js (технически не язык, а скорее среда выполнения, позволяющая запускать JS на сервере)
• Go
• PHP (только если вы заинтересованы в разработке WordPress)

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

Node.js позволяет действительно легко создавать REST API's, что является одной из основных задач, которые должен выполнить младший разработчик.

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

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

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

Конечно, если вам интересно узнать о других языках (Node.js и Python совершенно разные), то не стесняйтесь удовлетворить свое любопытство и поиграть с ними.

REST API & JSON

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

• Различные глаголы и для чего они используются
• Как создать хороший ответ
• Как обрабатывать запросы
• Аутентификация запросов
• Как документировать свой API

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

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

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

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

• Как управлять базой данных
• Различные платформы для хостинга (AWS, Azure, Google и т. Д.)
• CICD и такие инструменты, как Jenkins, GitLab и т. Д.
• Регистрация и мониторинг

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

Доп. Материал

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

Аутентификация с использованием JWT / OAuth

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

Больше информации на: https://oauth.net/2/

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

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

Дополнительная информация (пример Java): github.com/iluwatar/java-design-patterns

Дополнительная информация (JavaScript): github.com/fbeline/Design-Patterns-JS

БОНУСНЫЙ СОВЕТ - Существует множество шаблонов проектирования, поэтому не пытайтесь изучать их все сразу. Вместо этого, ознакомьтесь с ними , и когда вы столкнетесь с проблемой в рамках проекта, посмотрите, какие шаблоны проектирования доступны для использования.

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

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

Дополнительная информация по адресу: developers.google.com/web/progressive-web-apps/

Другие варианты включают в себя:

React Native - давайте напишем код React, скомпилированный для Android / IOS

Flutter - похож на React Native, использует только язык программирования Dart

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

Это рендеринг кода веб-интерфейса на стороне сервера, который они возвращают и отображают в браузере. Усовершенствованная тема, которая имеет свои достоинства, такие как SEO и преимущества в скорости.

Более подробная информация по адресу: medium.freecodecamp.org/demystifying-reacts-server-side-render-de335d408fe4

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

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

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

Источник

Заметили ошибку или есть вопросы?Рассказывай нам о них,связаться с нами ты сможешь с помощью нашего чата или же с помощью бота обратной связь

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