Краткое руководство для новичков, желающих стать комплексными (full stack) веб-разработчиками

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

Основы (HTML/CSS/JS)

Один из лучших способов изучения основ — пройти онлайн-курс. Например, The Web Developer Bootcamp на Udemy. Здесь вы пройдёте через весь процесс создания своего первого сайта, после чего вам будет понятнее, куда двигаться дальше.

Фреймворки

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

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

Лучше всего начать изучать Bootstrap и jQuery. Сегодня это самые популярные фреймворки, используемые при создании подавляющего большинства сайтов.

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

jQuery — JavaScript-фреймворк, значительно упрощающий манипулирование элементами веб-страницы. Под него создана масса плагинов для любой мыслимой задачи, так что когда вам понадобится какой-то интерактивный элемент, то можете быть уверены, что найдёте способ создать его с помощью jQuery. И это будет очень легко сделать, потому что на StackOverflow уже есть решение 95% проблем, с которыми вы столкнётесь.

Начать изучение можно с этой замечательной лекции:

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

WordPress

WordPress — самая популярная в мире CMS (content management system), система управления контентом. Если вы просто хотите узнать, как можно просто кастомизировать свой сайт, то установите и изучите WordPress. Этого достаточно, больше вам ничего учить не придётся. Для WordPress доступно астрономическое количество графических тем и плагинов, которые покроют не менее 90% ваших потребностей.

Доменные имена и хостинг

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

Для покупки доменных имён за пределами Рунета используйте Namecheap. Как подсказывает название сервиса, там очень хорошие цены, да к тому же замечательное обслуживание.

Для хостинга можете воспользоваться Bluehost, это дешёвый, очень простой в использовании сервис, с прекрасной документацией и многочисленными инструментами автоматизации. Здесь крайне просто развернуть WordPress или захостить простенькие HTML-страницы, так что если хотите быстро начать — самое оно.

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

Бэкенд-фреймворки

Итак, вы создали несколько простых сайтов с помощью вышеупомянутых инструментов, и готовы идти дальше, чтобы стать профессиональным строителем кастомных проектов.
В этом случае лучше всего изучить один из бэкенд-фреймворков. Эти фреймворки работают на сервере и динамически генерируют HTML для сайта каждый раз, когда пользователь обращается к URL.
Как обычно, есть куча доступных продуктов, но я рекомендую сразу обратиться к  Django, Ruby on Rails и Node/Express.

Вы можете услышать разные мнения, какой из этих фреймворков нужно изучить в первую очередь, но я очень рекомендую начать с Django, а затем перейти к Node/Express.

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

Сам по себе Django простой, мощный, гибкий, прекрасно документированный фреймворк. Он содержит все инструменты, которые вам понадобятся для создания 95% ваших сайтов. Что ещё важнее, он даст вам отличную основу для размышления о коде бэкенда, и его понимание — прекрасный способ изучить основы веб-разработки в целом.

Мой любимый курс для начинающих — Getting Started with Django, я для дальнейшего изучения рекомендую превосходную книгу Two Scoops of Django. Также не проходите мимо бесплатных видеоруководств Майка Хибберта.

Node и Express

Node и Express — очень мощные инструменты, которые я рекомендую изучить после Django. Для начинающих они могут показаться сложноватыми, но если вы уже знаете Django, то проблем у вас не возникнет.

У Node много преимуществ, и лучшего всего ощутить их на собственном опыте. Зачастую этот фреймворк позволяет создавать сайты гораздо быстрее Django. Вы глубже изучите многочисленные концепции программирования бэкенда, вам будет легче создавать API, работающие в реальном времени веб-приложения (например, чаты или игры), а также универсальные веб-приложения (вы столкнётесь с ними при изучении React). Лучший из известных мне онлайн-курсов по Node.

Фронтенд-фреймворки

Если вы освоили HTML/CSS/JS и какой-то бэкенд-фреймворк, то вы уже весьма умелый веб-разработчик, способный создавать многие виды сайтов. И если хотите стать комплексным (full-stack) разработчиком, то добро пожаловать в мир фронтенд-фреймворков.

Они позволяют создавать мощные одностраничные (single-page) приложения. На текущем этапе вы создаёте приложения, которые целиком выполняются в браузере, иногда обмениваясь данными с сервером (наподобие Gmail или Trello).

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

Не стану расписывать, как они работают или каковы их преимущества (это займёт много времени), но, к счастью, существует совершенно изумительный онлайн-курс, из которого вы почерпнёте всё, что нужно  — Modern React with Redux. А для изучения более продвинутой функциональности можете посмотреть вторую часть курса — Advanced React and Redux. Его автор, Стивен Грайдер, невероятный учитель. Он умеет очень хорошо и увлекательно объяснять, так что вам будет совсем не скучно изучать все премудрости этих инструментов.

Очень рекомендую создать сайт с помощью Node и React/Redux, потому что это поможет вам уловить, как создавать и использовать REST API, а также на базе набора технологий создавать мощное и полезное ПО.

DevOps

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

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

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

Лично я изучал Docker с помощью вот этого курса. Он короткий и довольно простой для понимания.

Заключение

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

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

Автор: Дмитрий Смиркин SmirkinDA

Краткое руководство для новичков, желающих стать комплексными (full stack) веб-разработчиками, опубликовано Вадим В. Костерин, лицензия — Creative Commons Attribution-ShareAlike 4.0 International.