Как стать веб-разработчиком: 9 основных шагов

От /

Перевод статьи «9 Generic steps to becoming JS web developer».

Как стать веб-разработчиком

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

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

Сегодня мы узнаем, какие 9 шагов нужно предпринять, чтобы стать веб-разработчиком (с упором на JavaScript). Как говорится, с полного нуля и до уровня профессионального фронтенд-программиста. «Упор на JS» подразумевает, что данный список действий ориентирован именно на этот язык программирования, поэтому некоторые шаги лишь упоминаются вскользь, а друге рассматриваются более детально. Вы, конечно, можете заниматься веб-разработкой на PHP, Ruby и некоторых других языках. Но эти варианты я не буду рассматривать в своей статье.

Замечу, что когда я самостоятельно учился программированию, я придерживался именно этого пути. Поэтому могу гарантировать, что проверка боем состоялась.

1. HTML

Давайте сразу сделаем шаг назад и изучим некоторые основы. HTML это хорошее начало пути для любого веб-разработчика.

HTML это язык разметки, главным образом используемый для создания вебсайтов. Его последняя версия (5) стала стандартом еще в 2012 году. Чтобы изучить HTML, нужно лишь разобраться в его основных тегах, элементах, атрибутах и их правильном расположении. Поскольку в большинстве современных IDE есть функция автодополнения, перечисленные мною вещи это единственное, что вам потребуется для начала.

2. CSS

Следующим шагом на пути начинающего веб-разработчика будет CSS (cascading style sheets — каскадные таблицы стилей). Это язык, позволяющий вам задавать стиль вашим HTML-элементам и придавать им более привлекательный вид.

CSS 3 (текущая реализация языка) дает вам возможность создавать различные макеты, стилизованные элементы, создавать mobile-first вебсайты, анимировать элементы и делать много всего другого!

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

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

Основы веб-разработки

3. Основы программирования

Здесь мы немного притормозим. Изучение JavaScript – вашего первого языка программирования и самого важного инструмента всей JS-ориентированной веб-разработки (что очевидно) – это, пожалуй, один из самых важных пунктов нашего списка.

В отличие от HTML и CSS, JS это настоящий язык программирования (скриптовый язык). Изучая его, вы познакомитесь с такими понятиями как переменные, функции, классы, API и т.д. Но я вас успокою: JS действительно очень дружественный к новичкам язык. По крайней мере, он таким кажется. По мере углубления в его изучение вам будут попадаться все более сложные вещи. Но, как обычно, основы довольно просты. Только позже все начнет становиться немного более… сложным.

В целом, я могу вам гарантировать, что изучение синтаксиса любого языка программирования это самая легкая задача. Гораздо тяжелее исследовать его экосистему (мы вернемся этой теме чуть позже), а также научиться использовать этот язык для решения проблем. Это вообще самая сложная часть в программировании. Это нечто, чему довольно проблемно научить: вы должны разобраться с этим самостоятельно. Вам нужно будет понять, как конкретно все это работает вместе. Как создавать продукты с помощью набора переменных, функций и прочих структур. Могу лишь сказать, что на эту тему можно написать отдельную статью, и даже не одну, – и все равно будет мало! Но для начала я просто советую вам писать как можно больше кода и пытаться самостоятельно, с нуля, решать все более сложные проблемы.

4. Выберите себе инструменты

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

Основные вещи, определяющие вашу среду для веб-разработки, это операционная система, редактор кода, браузер и опциональные инструменты.

Начнем с ОС. У вас есть три варианта на выбор: Windows, Linux и MacOS. Я знаю, что это дело вкуса, но я любому веб-разработчику посоветовал бы остановить свой выбор на Linux.

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

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

Что касается редактора кода, вам нужно определиться, хотите ли вы работать в полноценной IDE, простом текстовом редакторе или чем-то среднем между ними. Естественно, вы можете выбирать как среди платных, так и среди свободно распространяемых программ. Самые популярные из них – VS Code (его очень часто рекомендуют) и Atom. Оба имеют хорошую систему расширений, так что вы с легкостью сможете добавить необходимый вам функционал. Что касается платных вариантов, у нас есть Sublime Text и WebStorm (полная IDE). Выбор за вами!

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

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

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

5. Node.js и NPM

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

Со времени выпуска в 2009 году эта технология сыграла большую роль в эволюции JS-программирования. Основанный на V8 (JavaScript-движке, используемом в браузерах Chromium), Node.js позволяет использовать JS даже для очень трудных задач, при этом не забывая о производительности.

Конечно, при изучении бэкенд-программирования вы столкнетесь и с другими новыми для себя вещами. Базы данных, микросервисы, APIs и SSR – это лишь несколько из них. В общем, тут есть что изучать. Особенно, если речь заходит о новых фреймворках и библиотеках, т. е., коде, который можно использовать повторно. Для более простого распространения такого кода в Node.js есть собственный менеджер пакетов – NPM (Node Package Manager).

Благодаря NPM вы с помощью очень простых команд можете получить доступ к миллионам пакетов библиотек и фреймворков. По мере развития JS и Node.js NPM стал крупнейшим реестром пакетов, а веб-разработка на основе NPM стала своего рода стандартом.

6. JS-фреймворки

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

Самые популярные варианты – React, Vue и Angular. Стоит «поиграться» с каждым из них, чтобы немного их «прочувствовать» и разобраться, что к чему. А затем можно выбрать тот, что больше по вкусу, и изучить его получше. if(haveTime) loop()

Если вы заинтересовались бэкенд-разработкой, здесь тоже есть достаточно инструментов для изучения! Самые примечательные и стоящие упоминания это Express, Feathers и Koa. С их помощью вы можете гораздо быстрее и проще создавать различные веб-приложения и APIs.

Конечно, библиотек существует огромное множество. Скорее всего у вас получится найти подходящий инструмент практически для любого отдельного use-case. И кроме того, различные инструменты можно использовать совместно! Комбинация UI-библиотеки фронтенда (например, React) с бэкенд-фреймворком (например, Express) позволяет создавать невероятные вещи, о которых раньше и помыслить было нельзя.

7. Принципы и концепции программирования

Изучение JS-фреймворков может стать для вас введением в мир принципов и концепций программирования. Самое время изучить их подробнее.

Такие термины как объектно-ориентированное программирование (OOP), функциональное программирование (FP), неизменяемые данные, разработка на основе тестирования (TDD) это просто must-have! Вы могли уже сталкиваться с ними, изучая основы JS. Но этого недостаточно. Лучшее, что вы можете сделать, это испытать каждый из подходов на реальном коде. И, конечно, не стоит забывать, что есть и другие подходы!

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

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

Веб-разработка

8. Изучение мира программирования в целом

Пожалуй, это один из самых общих пунктов списка. Формулировка этого пункта уже достаточно поясняет его суть. Исследуйте невероятный мир программирования! Изучите Node.js, фреймворки, концепции и принципы и, чтобы убедиться, что ничего не пропустили, – пройдитесь по ним еще несколько раз. Поверьте мне: это будет интересное путешествие! Убедитесь, что знаете достаточно, прежде чем делать следующий шаг.

9. Open source

Теперь, когда вы столько всего знаете и можете, пора явить все это миру. Лучший способ сделать это – создать собственный проект с открытым исходным кодом! Это будет настоящая проверка для ваших навыков! Начните с идеи. Но старайтесь создавать нечто такое, чем захотят пользоваться и другие люди. Затем проделайте все нужные шаги: решение проблем, планирование архитектуры, прототипирование, написание кода, тестирование и запуск.

Ваш проект может открыть вам мир, полный возможностей для вашего будущего. А если он достаточно вырастет, то вы можете рассчитывать и на большее! Только помните, что идея и ее исполнение это самые важные шаги. И даже если ваш проект не «выстрелит», – не огорчайтесь. Идите дальше, создавайте что-то новое.

Никогда не останавливайтесь

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

Итак, никогда не останавливайтесь и продолжайте копать! Есть еще бесчисленное множество инструментов, концепций и других вещей для изучения!

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

Ресурсы

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Прокрутить вверх