Лучший способ изучения frontend веб-разработки

Почему именно веб-разработка?

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

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

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

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

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

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

Веб огромен - начните с малого и держите его маленьким.

Вы, вероятно, видели большое количество JavaScript фреймворков и библиотек, таких как React, Angular, Vue, Ember, jQuery, XYZ и так далее.

Некоторые очень распространенные вопросы, которые люди постоянно спрашивают:

• Должен ли я выучить X?
• Лучше ли X, чем Y?
• Какова область применения Z?

Всегда помните две вещи о технологиях, особенно о веб:

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

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

Я не боюсь того, кто изучает 10,000 различных ударов. Я боюсь того, кто изучает один удар 10,000 раз.
— Брюс Ли, 87 цитат

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

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

Начните с HTML и CSS

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

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

С прогрессом в веб-стандартах, так многого можно достичь только с помощью CSS. Для многих вещей JavaScript даже не требуется.

Анимация? Изи. Drag-and-drop? HTML может справиться с этим. Макеты? Зацените Flexbox или Grid CSS API!

Есть так много вещей, которые вы можете узнать о HTML и CSS! Не торопитесь с JavaScript, потому что все крутые ребята в Angular (а порог вхождения для его изучения достаточно высок). Все эти библиотеки и фреймворки никуда не денутся. Не торопитесь.

Изучать вширь, или вглубь?

Когда вы обучаетесь веб-разработке, существует два подхода - глубокое изучение или широкое.

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

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

Так какое же решение? Ответ, на удивление, в том, чтобы не делать ни того, ни другого. Выберите небольшой стек технологий, такой как HTML/CSS/JavaScript, и погрузитесь вглубь всех трех. Это имеет пару преимуществ:

• Вы не заскучаете, так как все три имеют относительно разные цели и написаны по-разному.
• Вы можете объединить все три технологии, и быстро создать что-то простое, и увидеть результат без многомесячных усилий (что обычно требуется другим языкам, таким как C/C++). Это сохранит у вас мотивацию к продолжению работы.

Не выбирайте React, или Angular, или Vue.

Когда люди начинают работать с JavaScript, возникает желание взять библиотеку типа React, систему пользовательского интерфейса типа Material UI, и погрузиться в создание потрясающих вещей.

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

Обратите внимание, что в предыдущем предложении я использовал слово "применение", а не "изучение". Есть огромная разница между изучением чего-то и применением чего-то, чему вы научились.

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

Создайте небольшой, но работающий проект с HTML/CSS/JavaScript. И когда вы это сделаете, создайте ещё один, а затем создайте ещё один проект.

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

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

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

Мастер одной профессии

Теперь, когда вы хорошо владеете HTML/CSS/JavaScript, пришло время перейти на нишевые стандарты. Правда в том, что каким бы хорошим разработчиком JavaScript вы ни были, вам часто придется работать с современными фреймворками типа React - и только благодаря своим знаниям JavaScript вы не сможете сразу освоить его.

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

Как выбрать фреймворк, спросите вы? Ответ прост - решите сами. Создайте простой проект на каждом из фреймворков (Angular, Vue и React), и посмотрите, какой из них резонирует в вас больше всего. Выберите один и не оглядывайтесь назад, просто изучайте, делайте проекты и наращивайте мясо.

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

Но не забывайте о другом.

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

Это может включать в себя несколько вещей - например, Unit-тестирование с помощью Jest, end-to-end тестирование с помощью Cypress, Webpack, Babel или Parcel, немного devops, написание shell-скриптов для Linux, развёртывание серверов и так далее.

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

Не останавливайтесь в изучении

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

Веб огромен.

Так что если вы закончили с HTML/CSS/JavaScript/React/Angular/Vue, переходите к серверам. Узнайте о развертывании серверов, NGiNX, HAProxy, балансировке нагрузки, настройке облачной инфраструктуры, брандмауэрах и автомасштабировании.

Вы уже этим занимаетесь? Переходите к WebAssembly, языку следующей итерации WebAssembly.

Закончили изучение WebAssembly? Тогда не знаю. Может быть, перейдем к другим областям программирования или к кулинарии? :)

Заключение

В современном мире так легко не повторять ошибок, которые я совершил, изучая веб-разработки самостоятельно. Потому что все эти ошибки теперь доступны для всеобщего обозрения! Благодаря этому плану для изучения веб разработки, у вас должно всё получиться.

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

Мир!