Веб-разработка сегодня является одним из самых востребованных отраслевых навыков. Если мы посмотрим на загрузки популярных пакетов, таких как express, react или jquery, то вы увидите, что за последние 5 лет общее между ними состоит в том, что их использование быстро растет с каждым годом.

Фактически, опрос stackoverflow за 2020 год включает «полный стек» и «интерфейс» как две из трех ведущих профессий разработчиков в мире на данный момент.

Таким образом, очевидно, что сегодня веб-разработка — это отличный навык. В этой статье посмотрим, что именно вам нужно сделать, чтобы стать веб-разработчиком в 2021 году и далее на перспективу.

Эта проблема

Проблема с сетью сейчас — это информационная перегрузка и шум. jQuery, Angular, Ember, Vue, React, Next.js, Nuxt.js, TypeScript, Sass, Webpack, NPM, Yarn, ESbuild, snowpack, …! Есть так много вещей, так много инструментов, так многому вы можете научиться — что часто становится обескураживающим даже начинать.

Тогда есть смысл того, что актуально сегодня, что будет актуально через 3 года и т. д. Давайте проясним несколько вещей в этом блоге:

Вам не нужно все учить

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

1. У вас должен быть «полный» технический стек. Полный технический стек — это стек, с помощью которого вы можете создать практически любой проект, который захотите.
2. Вам нужно знать большинство, если не все популярные инструменты в экосистеме. Обратите внимание, это не означает, что вам нужно знать, как с ними работать. Но вы должны знать, что они существуют.

Вам нужно сделать ставку на стек

Angular vs React vs Vue vs Svelte vs xyz. Это обсуждение никогда не закончится. По правде говоря, все популярные фреймворки/библиотеки популярны, потому что люди их используют и хорошо умеют делать то, что делают.

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

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

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

Фреймворк для изучения веб-разработки в 2021 году

Хорошо. Теперь большой вопрос. Чему вы на самом деле научились из всего шума в мире? Давайте разделим вопрос на две части — (Что и как), чтобы изучить интерфейс веб-разработки. Оба вопроса одинаково важны, так как в зависимости от принятого решения вы можете сэкономить или потратить впустую много времени. Давайте начнем.

Что нужно узнать о веб-разработке?

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

Основы Интернета

Для многих это может стать неожиданностью. Большинство сайтов рекомендуют начинать с HTML/CSS, но я чувствую, что даже раньше вы должны понимать, как Интернет и сеть работают на высоком уровне. Что такое HTML-документы, как они отправляются с внутреннего сервера, что такое DNS, что именно происходит, когда вы вводите google.com в браузере и т. д.

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

HTML5/CSS3

HTML и CSS — фундаментальные строительные блоки Интернета. Несомненно, это должно быть первое, чему вы должны научиться что бы быть специалистом во фронтенд-разработке.

Некоторые очень важные моменты:

1. Обязательно изучите современный синтаксис HTML5.
2. Попробуйте узнать о семантических тегах в HTML5 вместо того, чтобы вставлять все в div.
3. Узнайте о современных методах макета в CSS (flexbox, grid)
4. Узнайте о современном синтаксисе CSS и получите ясное представление о селекторах, медиа-запросах, свойствах, значениях и т. д. — основах.
5. Не придерживайтесь старого и устаревшего синтаксиса ( centerтег marqueeи т. д.)
6. Не тратьте много времени на изучение старых методов компоновки в CSS с плавающей точкой и т. д.
7. Не пробуйте каждую передовую функцию CSS3/4. Многие из них могут еще не поддерживаться в браузерах. По большей части придерживайтесь широко поддерживаемых функций CSS3.

JavaScript

JavaScript очень важен для интерактивности и всего, что вы делаете, кроме простой статической целевой страницы HTML/CSS. Его можно широко использовать и за пределами внешнего интерфейса (в Node.js/Deno/TypeScript), поэтому важно, чтобы вы правильно понимали свои основы с помощью JavaScript.

Некоторые очень важные моменты:

1. Обязательно изучите синтаксис ES6 +. Не используйте их varи даже не следуйте инструкциям. В большинстве случаев они не нужны. Один из способов проверить это — попробовать следовать руководствам, созданным после 2017 года.
2. У JavaScript есть некоторые особенности поведения, которые могут застать вас врасплох. Например, почему 0,1 + 0,2 не равно 0,3 или почему null == undefined верно в JS. Помните, что у такого поведения всегда есть причины. Чтобы понять такие вещи, нужно выполнить поиск в Google.
3. JavaScript — это, по сути, язык асинхронного и неблокирующего ввода-вывода. Это означает, что вы должны понимать, как некоторые основные части асинхронных вещей, такие как промисы, работают в JavaScript.
4. Узнайте о DOM API и поймите, что это API, предоставляемый вашим браузером вашему JS-коду для взаимодействия с вашим HTML/CSS.

Продолжение:

• Полное руководство, как стать веб-разработчиком в 2021 году. Часть 2

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

В это время вам также следует начать изучение того, как работать с инструментами разработчика в вашем браузере. Мы предпочитаем инструменты разработчика Chrome, потому что они отлично подходят для отладки и работы с JavaScript и DOM. Независимо от вашего выбора, мы бы предпочли создавать проекты и отлаживать любые проблемы, с которыми вы сталкиваетесь, с помощью инструментов разработчика, вместо того, чтобы часами смотреть на ваш код.

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

Некоторые важные моменты:

1. Мы рекомендуем придерживаться инструментов разработчика Chrome, потому что они очень мощные.
2. Узнайте о манипуляциях с DOM, отладке сетевых запросов, установке точек останова для событий, переходе по источникам, поиске кода в ресурсах вашего веб-сайта, регулировании скорости сети и многом другом.
3. Это будет постоянное обучение, как и все другие технологии. Вы не должны стремиться изучать инструменты разработчика сразу, просто изучите небольшие, но важные вещи и двигайтесь дальше. Вы узнаете намного больше, работая с проектами и т. д.

Git

Вам нужно изучить систему управления версиями (VCS), и это должно быть git. Git — это широко используемая VCS, используемая командами и компаниями для управления своими кодовыми базами среди сотрудников. Git может быть очень сложным для изучения, но изначально ваш пример использования git будет заключаться в развертывании вашего кода на GitHub или аналогичном сайте.

Это необходимо, потому что, когда вы изучаете git, вы можете нажать на github. Когда вы можете нажать на github, вы можете интегрироваться со многими сервисами, такими как страницы GitHub, Vercel, Netlify и т. д., Чтобы создать предварительный просмотр вашего веб-сайта/проекта в реальном времени. Этим предварительным просмотром в реальном времени можно поделиться с друзьями, семьей и даже добавить в свое резюме.

Когда вы устроитесь на работу или будете работать с командой из 2+ разработчиков, вам все равно понадобятся знания git. Но даже для индивидуального разработчика это имеет первостепенное значение, так как значительно упрощает цикл развертывания на действующем веб-сайте.

Некоторые важные моменты:

1. Git может очень быстро стать сложным. Не запутайтесь с большим количеством команд git. Как индивидуальный разработчик, вам вряд ли понадобится что-либо, кроме 5-7 часто используемых команд.
2. Хотя пункт 1 верен, вы все равно должны понимать общую архитектуру того, как работает git, какие есть ветки, что подразумевается под удаленными репозиториями и т. д. Это снова прочная основа понимания, которую вы должны иметь.

NPM/Yarn

NPM и Yarn — два самых популярных менеджера пакетов для JavaScript. Оба они существуют для одной цели — управления зависимостями в вашей кодовой базе. Зависимость — это пакет/программное обеспечение, которое обычно не разрабатывается вами/вашей командой, но вы все равно можете использовать и интегрировать его в свое приложение. Например, система дизайна, такая как бутстрап или попутный CSS, является зависимостью.

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

Некоторые важные моменты:

1. NPM и пряжа — очень близкие понятия. Когда вы узнаете о npm, вы также узнаете о package.json, о том, зачем они нужны, и многом другом. Все это также можно перенести на yarn v1 в качестве менеджера пакетов.
2. Поэтому не стоит особо задумываться о том, какой менеджер пакетов вам следует изучить. Изучите любой (например, Yarn), и вы можете автоматически переключиться на другой, если этого требует ваш проект.

React

React — библиотека, пользующаяся огромной поддержкой сообщества. Любая проблема/ошибка, с которой вы столкнулись с React — скорее всего, кто-то уже сделал эту ошибку и задал вопрос на 1000 веб-сайтах. Поэтому, если вы хороший гуглер, у вас не должно возникнуть проблем при работе с React.

Некоторые важные моменты:

1. На первый взгляд React выглядит просто, но для масштабной работы требуется разработка ментальной модели. Речь идет не только о концепциях и хуках, но и о том, как спроектировать ваше приложение, сделать его поддерживаемым, выбрать правильные библиотеки для экосистемы и т. д.
2. React не применяет никаких стандартных практик для общих задач, таких как сетевые запросы или пользовательский интерфейс. Но мы рекомендуем следующие варианты — react-query для сетевых запросов, попутный CSS или материальный UI для библиотеки UI.
3. Не изучайте подробно компоненты на основе классов, если вам не нужно работать с устаревшей кодовой базой, которая требует от вас глубокого изучения. Компоненты на основе классов — это не будущее React. Убегайте от руководств, которые учат вас компонентам на основе классов. Вместо этого узнайте о функциональных компонентах и ​​хуках.

Сборщики модулей

Webpack — один из самых популярных сборщиков модулей, который React использует прямо сейчас из коробки. Опять же, вам не обязательно глубоко изучать webpack, но вы должны знать, что это за файл webpack.config.js.

ESBuild также является еще одним относительно очень быстрым сборщиком модулей на данный момент, но поддержка плагинов для него пока невелика. Как новичку, вам пока не нужно беспокоиться о ESBuild.

Тестирование кода

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

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

Упражняться! Упражняться! Упражняться!

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

Как научиться фронтенд-разработке?

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

Вам нужен бесплатный подход к обучению

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

1. Часто используйте Google для обучения и выяснения сомнений.
2. Смотрите видео на YouTube, но убедитесь, что они относительно новые, особенно по таким темам, как JavaScript и React.
3. Практикуйтесь самостоятельно, создавайте проекты и развертывайте их в Интернете, чтобы люди могли их увидеть.
4. Пройдите бесплатные курсы.

Вывод

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

Начало:

• Полное руководство, как стать веб-разработчиком в 2021 году. Часть 1