Я хочу стать веб-разработчиком, но с чего начать?

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

Этот рост спроса делает позиции веб-разработчиков более привлекательными. Вы получаете лучшую зарплату и лучшие условия на рабочем месте.

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

Я сам FullStack-разработчик. Я преодолела те самые испытания, которые предстояли вашему путешествию. Мой процесс становления веб-разработчиком был утомительным. Я потратил бессчетное количество часов на изучение всех веб-технологий, с которыми сталкивался. Лишь годы спустя я узнал, что несколько простых правил могли бы значительно сократить и облегчить мое путешествие.

Чтобы научить вас, эти простые правила станут предметом этого поста.

Оглавление

• В чем разница между Frontend-/Backend-разработчиками и FullStack-разработчиками?

• Какой набор навыков веб-разработчика вам следует разработать?

• Сравнение навыков разработчика в форме «Т» и «И».

• Демократизация архитектуры программного обеспечения, как вы можете выделиться?

• Концепции программирования и технологии

• Как быстро изучить любую технологию

• Баланс концептуального обучения и практики

• Перечень базовых и продвинутых концепций и технологий, которые вы должны изучить

Frontend, Backend и FullStack Developer

Фотография Скотта Блейка на Unsplash

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

• Frontend-разработчик

• Бэкенд-разработчик

• FullStack-разработчик

Frontend-разработчик

Frontend-разработчики работают над внешним видом веб-приложения, над пользовательским интерфейсом.

Работа разработчиком программного обеспечения обычно включает в себя работу со святой троицей веб-технологий JavaScript, HTML и CSS.

Бэкенд-разработчик

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

Бэкенд-разработчики также работают с такими базами данных, как MySQL или MongoDB.

Базы данных недоступны напрямую через внешний интерфейс (пользовательский интерфейс). Вместо этого интерфейс должен запрашивать данные через серверную часть. Таким образом, ваша работа как Backend-разработчика также заключается в создании этого моста, также называемого API.

API расшифровывается как Application Programming Interface и является термином, используемым в программировании за рубежом. Вы можете думать об API как о мостах. Они соединяют две технические системы, в нашем случае Пользовательский интерфейс (Frontend) и Сервер (Backend).

FullStack-разработчик

Разработчики FullStack сочетают в себе набор навыков Front-end и Backend-разработчика.

Вот почему мы называем их FullStack. Они могут использовать весь стек технологий от Frontend до Backend.

Распространенным заблуждением является то, что FullStack Developer должен знать все технологические стеки в веб-разработке. Но идея разработчика FullStack заключается не в том, чтобы знать все, а в том, чтобы знать технологии, которые одинаково относятся к категории Frontend и Backend.

Каким веб-разработчиком мне следует стать?

Вот мой взгляд на это.

Вы должны сначала стать FullStack-разработчиком, а затем сосредоточиться на том, что вам больше нравится в разработке Frontend или Backend. Говоря «сначала станьте разработчиком FullStack», я имею в виду, что вы должны изучить основы Frontend и Backend разработки, прежде чем специализироваться.

Стать сначала разработчиком FullStack имеет много преимуществ.

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

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

• Вас легче нанять. Потенциальные работодатели могут применить ваши навыки как в области внешнего, так и внутреннего интерфейса. Это делает вас более привлекательным в качестве кандидата.

• У вас лучше развиты коммуникативные навыки. Вы можете обсуждать и анализировать проблемы как с Frontend, так и с Backend разработчиками.

• У вас более высокая гарантия занятости. Работодатели могут перевести вас с Backend на Frontend или наоборот, если у них есть изобилие ресурсов. Менее вероятно, что вас уволят, если вашей компании нужно сократить одного разработчика Front-end или Backend.

• У вас есть возможность изучить весь стек технологий. Сейчас вы еще не знаете, предпочитаете ли вы работать с технологиями Frontend или Backend. Сначала станьте разработчиком FullStack, и у вас будет возможность изучить обе стороны веб-разработки.

К настоящему времени вы рады стать разработчиком FullStack. Итак, вы проходите через Интернет и изучаете каждую технологию, связанную с разработкой Frontend и Backend. И все, вы FullStack-разработчик, верно?

Нет, это было бы ужасно неэффективно. Вместо этого мы сосредоточимся на создании Т-образного набора навыков веб-разработки.

Быть Т-образным разработчиком

Вы когда-нибудь слышали о Т-образных навыках?

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

Перенося это в веб-разработку, горизонтальная черта в букве «Т» означает ваши фундаментальные знания FullStack. Как только у вас будет прочная основа FullStack, вы можете двигаться дальше и глубже специализироваться на Frontend или Backend разработке («I» в вашем «T»).

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

Разработчик в форме «Я»

Напротив, разработчики с набором навыков веб-разработки в форме буквы «I» сразу же концентрируются на разработке Front-end или Backend.

Этим разработчикам часто не хватает фундаментальных знаний ни в отделе Front-end, ни в отделе Backend. Это делает их менее привлекательными для найма и дает вам конкурентное преимущество.

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

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

Вы не убеждены? Тогда взгляните на перспективные и популярные технологии, такие как NextJS. По сути, NextJS — это технология Front-end. Но NextJS также поставляется с сервером и делает то, что мы называем рендерингом на стороне сервера (сервер предварительно оценивает JavaScript и отправляет статический контент клиенту).

Звучит запутанно?

Да, но только потому, что вы не изучили основы FullStack. ¯(ツ)/¯

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

Уровни абстракции скрывают детали реализации от пользователя и делают API для фреймворка или библиотеки более доступным.

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

Архитектура — это не улица с односторонним движением

Есть еще одна причина, по которой вы должны привнести навыки как в Frontend, так и в Backend разработку.

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

Концептуальные решения, которые вы принимаете во внешнем интерфейсе, влияют на серверную часть, и наоборот.

Пример #1: Frontend влияет на Backend — кнопка сброса пароля в вашей форме входа (пользовательский интерфейс, Frontend) означает, что у вас есть Backend логика, которая отправляет ссылки для восстановления пароля на электронную почту пользователя. И это подразумевает, что вы в первую очередь сохраняете электронную почту пользователя.

Пример №2: Бэкенд влияет на Фронтенд — приложение панели мониторинга может визуализировать только те показатели, для которых Бэкэнд может вычислить графические данные. Вычисление этих данных является дорогостоящим и часто использует ограничения возможностей вашей серверной системы.

Но почему вас это должно волновать? Архитектурные решения принимаются архитекторами.

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

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

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

Как эффективно освоить новые навыки?

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

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

• Сколько (предыдущей) практики программирования у вас есть.

• Сколько времени вы можете посвящать каждому дню обучению?

• Насколько эффективно вы учитесь?

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

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

Итак, мы отказываемся от всех форм записанных знаний в виде книг, онлайн-курсов и сообщений в блогах? Конечно нет, иначе как мне заставить кого-то читать мои сообщения в блоге? ( ͡° ͜ʖ ͡°)

Вместо этого мы разделим наши будущие усилия по обучению на две категории.

• Концепции — теоретические знания о технологиях и вещах, которые мы хотим построить. Мы получаем новые концепции из книг, видео и сообщений в блогах.

• Практика — расширяем наши навыки программирования, работая над нашими проектами.

Изучайте новые технологии быстро

Чтобы стать хорошим программистом, важно быстро освоить новые технологии.

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

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

Но как мы это делаем?

Мы много кодируем. Мы придумываем проекты и строим их с использованием технологий, которые хотим изучить.

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

Учиться в пути — это мощно. Он берет идею или концепцию новой технологии и применяет ее к реальным вещам. А самое приятное то, что вам есть что (свои проекты) показать потенциальным работодателям в будущем.

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

Но имейте в виду, обучение в процессе создания ваших проектов не означает, что вы открываете редактор кода и подключаете интернет-соединение. Вам придется прочитать статьи в Интернете о том, «как сделать X и Y». Google — самый острый инструмент в арсенале разработчика.

Но в чем тогда разница между прохождением курса Udemy и работой над своим проектом?

Все просто, первый научит вас технологии от А до Я, а второй научит именно тому, что вам нужно знать. И именно поэтому эффективнее учиться, создавая проекты.

Изучите концепции

За каждой технологической революцией стоит концепция.

Ты мне не веришь? Взгляните на новые фреймворки JavaScript, такие как VueJS, ReactJS и AngularJS.

Веб-фреймворки, такие как Ruby on Rails или Django, используются для преобразования HTML, CSS и JavaScript в статические шаблоны. И это по-прежнему отлично подходит для определенных веб-сайтов или приложений.

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

И это то место, где сияют ReactJS, VueJs и AngularJS.

Новые фреймворки JavaScript представляют новую концепцию под названием Virtual Dom. И это склоняет чашу весов в их пользу.

Virtual DOM (объектная модель виртуального домена) копирует реальную DOM (состояние нашей HTML-страницы в вашем браузере) в память вашего приложения JavaScript. React и компания могут выполнять частичный повторный рендеринг вашего приложения с DOM в памяти (виртуальный DOM). Таким образом, вам не нужно выполнять полную перезагрузку страницы (обновление всего DOM браузера), чтобы изменить небольшую часть пользовательского интерфейса.

Прочитайте [Документацию по React Virtual DOM] для получения дополнительной информации по этой теме.

Почему мы выбрали пример Virtual DOM?

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

Концепция Virtual DOM принесла такое мощное преимущество. Это значительно улучшило отзывчивость веб-сайтов.

Суть в том, что концепции имеют значение, и вы должны изучать концепции.

Сохраняйте баланс

Но сколько времени вы должны тратить на работу над своими проектами (практику) и сколько времени на изучение концепций?

Это субъективный спор, который во многом зависит от ваших личных целей.

Я придерживаюсь баланса 60%:40%. Это 60% практики и 40% изучения концепций.

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

Резюме

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

Мы узнали, что Т-образный набор навыков для разработчиков очень желателен. Вы должны освоить основы веб-разработки, прежде чем сосредоточиться на Front-end или Backend-разработке.

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

• Изучение понятий

• Практика — работа над проектами

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

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

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

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

Концепции

• Протоколы

• 🔎 [Обзор HTTP — веб-документы MDN] (https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview)

• Уровень шифрования SSL-/TLS и HTTPS

• 🔎 Что такое HTTPS? — CloudFlare

• 🔎 [Безопасность транспортного уровня — веб-документы MDN] (https://developer.mozilla.org/en-US/docs/Web/Security/Transport_Layer_Security)

• 🔎 [Как работает шифрование с открытым ключом? — CloudFlare] (https://www.cloudflare.com/de-de/learning/ssl/how-does-public-key-encryption-work/)

• 🔎 [Основы HTML — веб-документы MDN] (https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)

• Архитектура программного обеспечения

• 🔎 Модель клиент-сервер — Википедия

• 🔎 [Что такое API? — Redhat] (https://www.redhat.com/de/topics/api/what-are-application-programming-interfaces)

• 🔎 Representational State Transfer, REST — Wikipedia

• 🔎 [MVC — Framework — Introduction — tutorialspoint] (https://www.tutorialspoint.com/mvc_framework/mvc_framework_introduction.htm)

• 🔎 Модель - вид - модель представления — Википедия

• 🔎 Модель - вид - ведущий — Википедия

• 🔎 [Шаблон Flux — Facebook] (https://facebook.github.io/flux/docs/in-depth-overview/)

• 🔎 Архитектура микросервисов — microservices.io

• 🔎 Клиент — Сторона против сервера — Сторонний рендеринг — freecodecamp.org

• 🔎 Что такое генератор статических сайтов? — cloudflare

• Службы данных

• 🔎 [Реляционные базы данных — IBM Cloud] (https://www.ibm.com/analytics/relational-database)

• 🔎 [Что такое база данных документов? — MongoDB] (https://www.mongodb.com/document-databases)

• 🔎 База данных ключей и значений — Википедия

• 🔎 [Что такое данные временных рядов? — Influxdata.com] (https://www.influxdata.com/what-is-time-series-data/)

• Аутентификация и авторизация

• 🔎 [Аутентификация и авторизация — Auth0] (https://auth0.com/docs/get-started/authentication-and-authorization)

• 🔎 [Что такое аутентификация на основе токенов? — окта] (https://www.okta.com/identity-101/what-is-token-based-authentication/)

• 🔎 Введение в веб-токены JSON — jwt.io

• 🔎 [Легкий протокол доступа к каталогам (LDAP) — Википедия] (https://en.wikipedia.org/wiki/Lightweight_Directory_Access_Protocol)

• 🔎 Что такое OAuth? — okta

• Языки

• 🔎 [Введение в JSON — w3shools] (https://www.w3schools.com/js/js_json_intro.asp)

• 🔎 [Введение в CSS — w3shools] (https://www.w3schools.com/css/css_intro.asp)

• Разное

• 🔎 [Что такое Git? — w3schools] (https://www.w3schools.in/git/intro/)

• 🔎 Что такое Scrum? — scrum.org

• Хостинг

• 🔎 Масштабирование по горизонтали и по вертикали — section.io

• 🔎 [Что такое обратный прокси — nginx] (https://www.nginx.com/resources/glossary/reverse-proxy-server/)

• 🔎 [Что такое балансировщик нагрузки — citrix] (https://www.citrix.com/solutions/application-delivery-controller/load-balancing/what-is-load-balancing.html)

Технологии

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

• 💪 [JavaScript — w3shools] (https://www.w3schools.com/js/)

• 💪 ReactJS — reactjs.org

• 💪 [CSS — w3shools] (https://www.w3schools.com/css/)

• 💪 [SCSS — sass-lang.com] (https://sass-lang.com)

• 💪 [Bootstrap — getbootstrap.com] (https://getbootstrap.com)

• 💪 [Redux — reduxjs.org] (https://redux.js.org)

• 💪 [NextJS — nextjs.org] (https://nextjs.org)

• Бэкэнд

• 💪 [ExpressJS — expressjs.com] (https://expressjs.com)

• 💪 Protobuf — developer.google.com

• 💪 [GRPC — grpc.io] (https://grpc.io)

• 💪 [GraphQL — graphql.org] (https://graphql.org)

• Базы данных

• 💪 [PostgreSQL — postgresql.org] (https://www.postgresql.org)

• 💪 Redis — redis.io

• 💪 [MongoDB — mongodb.com] (https://www.mongodb.com)

• 💪 Прометей — prometheus.io

Найди меня

• В Твиттере @gdennci

• В LinkedIn dennis-groß

• На Призраке https://gdenn.ghost.io

• Впервые опубликовано [здесь] (https://dev.to/gdenn/i-want-to-be-a-web-developer-but-where-do-i-start-no3)*