Краткое изложение того, что меня смутило, когда я впервые начал писать код
Мотивация
Подход к широкой теме веб-разработки поначалу может обескураживать. Поиск в Google по запросу «Учебник по веб-разработке» дает около 476 миллионов результатов. Множество вариантов наряду с, казалось бы, бесконечным списком технического жаргона часто оставляют новичков разочарованными в состоянии паралича.
Вспоминая начальные этапы моего пути к программированию, когда я часто обучаю переходил между случайными темами, было чрезвычайно сложно усвоить информацию всесторонне. В этой статье моя цель - познакомить вас с некоторыми фундаментальными темами, которые мне хотелось бы, чтобы кто-нибудь объяснил мне, когда я впервые начал изучать веб-разработку.
Основные концепции, которые необходимо знать
1. Языки программирования
Компьютерное программирование - это процесс создания инструкций для компьютера для выполнения определенных задач. Подобно тому, как мы передаем наши мысли друг другу с помощью вербального языка, мы передаем инструкции компьютерам с помощью языков программирования.
В последние годы некоторые из самых популярных языков программирования включают JavaScript, Python, Java, C #, C ++ и Go.
Поскольку у каждого языка есть свой уникальный стиль, цель и даже философия, споры о том, «какой из них лучше», - бессмысленная кроличья нора, которых следует избегать.
Однако JavaScript обычно считается языком программирования де-факто в Интернете. Если вы заинтересованы в изучении веб-разработки, вам определенно стоит подумать о том, чтобы изучить JavaScript.
Вы можете ознакомиться с опросом разработчиков Stack Overflow 2020 здесь.
2. Рамки программирования
Frameworks, с другой стороны, представляет собой функциональный уровень абстракции, построенный на основе языков программирования, используемых для облегчения разработки для программистов. Фреймворки обычно зависят от предметной области и предназначены для того, чтобы позволить программистам повторно использовать код при решении аналогичных проблем. Например, React и Express - популярные JavaScript-фреймворки, используемые для фронтенд-разработки и бэкэнд-разработки соответственно.
Хотя фреймворки полезны и значительно сокращают время разработки, они часто жертвуют гибкостью ради удобства.
3) Фронтенд, бэкэнд и полный стек
Разделение проблем (SoC) - это принцип разработки программного обеспечения, который гласит, что программное обеспечение должно быть разделено на отдельные разделы, которые решают отдельные проблемы. В веб-разработке этому принципу обычно следует разделение приложения на интерфейс и бэкэнд.
интерфейс относится к пользовательской части приложения. Будь то мобильное или веб-приложение - все, с чем взаимодействует пользователь, относится к категории внешнего интерфейса.
С другой стороны, backend обрабатывает всю бизнес-логику за кулисами и обрабатывает запросы, сделанные клиентом. Бэкэнд обычно состоит из сервера и базы данных. База данных - это место, где сервер хранит и извлекает данные.
Разработка полного стека, наконец, относится к разработке как внешнего, так и внутреннего интерфейса.
Возвращаясь к модели клиент / сервер, которую мы обсуждали в предыдущей статье, взаимоотношения клиент-серверной части часто отражают отношения клиент-серверной модели.
Основные инструменты
Системы контроля версий (VCS)
Контроль версий - это класс программных инструментов, используемых для управления изменениями в кодовой базе с течением времени. Git, о котором вы, вероятно, уже слышали, на сегодняшний день является самой популярной системой контроля версий.
Системы контроля версий чрезвычайно полезны по нескольким причинам (которые я могу придумать):
- Это позволяет вам вернуть базу кода обратно в определенное состояние в определенный момент времени. (Ctrl-Z- не требуется).
- Он организует командный рабочий процесс и облегчает управление конфликтами (когда члены команды редактируют один и тот же файл по-разному)
- Модульная разработка функций
Когда вы начнете программировать, вы скоро начнете понимать, что он играет важную роль в вашем рабочем процессе.
Текстовые редакторы или IDE
Текстовые редакторы буквально соответствуют названию - текстовые редакторы. В отличие от того, как большинство людей, не являющихся разработчиками, думают, что для написания кода необходимо какое-то специальное программное обеспечение, технически вы можете начать писать код прямо сейчас, используя такие программы, как Google Docs или Microsoft Word. Это было бы болезненно, но вы могли бы. Для кодирования созданы специальные текстовые редакторы. Популярные варианты включают Sublime Text, Atom, Vim и т. Д. Мне лично нравится VS Code за его настраиваемость.
Между тем , IDE или интегрированные среды разработки похожи на более громоздкую расширенную версию текстовых редакторов. Помимо функций редактирования кода, они включают встроенные инструменты автоматизации сборки, отладчик и другие надстройки, которые могут вам понадобиться, а могут и не понадобиться.
Выбор между текстовыми редакторами и IDE - дело личных предпочтений. IDE, как правило, зависят от языка или фреймворка, тогда как текстовые редакторы обычно более легкие и настраиваемые.
Командная строка
Когда вы нажимаете Finder (или Мой компьютер для пользователей Windows) и перемещаетесь по папкам, вы взаимодействуете с компьютером через так называемый графический интерфейс пользователя (GUI). Вместо использования мыши и щелчка по экрану для взаимодействия с компьютером вы можете использовать текстовый инструмент командной строки (например, Терминал для macOS или Командную строку для Windows) для непосредственной отправки команд. к компьютеру.
Умение взаимодействовать с компьютером через командную строку - важный навык, который значительно повысит эффективность любого программиста.
План
Для новичков список тем для изучения может быть огромным. Тем не менее, имея четко составленный план, вы можете управлять своим прогрессом в обучении и сосредоточиться на главном, что приведет вас туда, где вы хотите быть.
Шаг 1. Изучите JavaScript - Как уже упоминалось, JavaScript считается де-факто языком программирования в Интернете. На мой взгляд, JavaScript - отличный язык для начинающих, потому что он не только учит вас основам программирования, но и знакомит с концепциями объектно-ориентированного программирования, а также функционального программирования. .
Воздержитесь от слишком быстрого перехода к фреймворкам, прежде чем по-настоящему поймете язык, на котором они построены. Целостное понимание базовой грамматики освобождает вас от необходимости превращаться в пони с одним трюком, привязанным к определенной структуре. Это особенно важно, учитывая, насколько быстро в наши дни развиваются фреймворки.
Шаг 2. Изучите HTML и CSS. HTML и CSS - это визуальные строительные блоки для любой веб-страницы в Интернете. В отличие от JavaScript, HTML и CSS не имеют функций обработки логики и, следовательно, не считаются настоящими языками программирования. Для меня было чрезвычайно полезно изучить HTML и CSS, поскольку мгновенная визуальная обратная связь заставила меня почувствовать, что я создаю настоящий продукт.
Шаг 3. Создайте простую веб-страницу с помощью Vanilla JS, HTML и CSS - Теперь у вас есть инструменты, чтобы начать что-то создавать! Используя только JavaScript, HTML и CSS, вы уже можете создавать довольно классные веб-страницы и даже приложения. Неизбежно и естественно, что вам придется начать использовать командную строку и Git (или любую VCS), поскольку ваш проект продолжает расти. Этот шаг будет самой сложной, но самой полезной частью пути. Наслаждайтесь этим.
Шаг 4. Изучите некоторые фреймворки, а затем перестройте / расширьте свою веб-страницу с помощью этих фреймворков. Когда основы изложены, пора изучить фреймворки и применить их в контексте вашего проекта. Хотя этот шаг кажется избыточным, он позволяет вам обнаружить разницу, которую фреймворки привносят в ваш процесс разработки и мышления.
Шаг 5. Промыть, повторить - Продолжайте создавать новые проекты, изучать новые веб-технологии, оптимизировать среду программирования ... что бы это ни было, никогда не прекращайте совершенствовать свои навыки разработчика!
