Как начать изучать бэкенд-разработку: Определяющее руководство
Как начать изучать бэкенд-разработку: Определяющее руководство
Adobe Stock / Shopping King Louie
- 6 мая 2022 года
Это руководство предназначено для подробного, но доступного введения в разработку бэкенда, как в теоретическую часть, так и в практическое кодирование. Оно ориентировано в первую очередь на читателей, знакомых с frontend веб-разработкой и рассматривающих возможность расширения своих навыков, но любой человек должен быть в состоянии следовать ему.
Наша статья состоит из четырех частей.
Часть 1 будет посвящена теории. Мы рассмотрим, что такое “бэкенд” и чем он отличается от фронтенда, изложим его основные понятия и ключевую терминологию.
Часть 2 служит кратким предисловием к технологиям и языкам, которые мы будем использовать в части 3.
Часть 3 представляет собой практическое введение в создание бэкенда. Мы получим программу бэкенда, которая будет печатать “Hello world!”.
В части 4 мы закончим с некоторыми заключительными указаниями и советами по продолжению обучения.
Это руководство по конкретной теме, а не по программированию в целом – именно поэтому, если вы заметили, учебные планы наших буткампов по веб-разработке и разработке приложений выглядят по-разному!
Новые темы программирования могут сбить с толку. Если вы совсем новичок в “бэкенде”, сделайте себе одолжение, уделите этой статье немного времени и, возможно, прочитайте ее не один раз. И, конечно, много гуглите!
Часть 1 – Давайте рассмотрим некоторые идеи и запутанные слова.
Я хотел бы начать с того, что попытаюсь провести некоторые границы между различными идеями и терминологией. Весь этот технический язык может сбить с толку, и даже опытные разработчики могут путать эти термины.
Как front-end разработчики мы обычно находимся в коробке… в этой коробке. Браузер. Мы пишем наши HTML-файлы, и они отображаются здесь.
Однако существуют и другие “коробки”, не так ли?
Есть приложения для Android, iOS, Windows и т.д., и у всех них тоже есть фронтенды.
Adobe Stock / mast3r
Хотя разработчики приложений для Windows или Android могут использовать разные языки программирования в разных блоках, а не писать на HTML и CSS, они все равно являются фронтендами.
Итак, фронтенд: “То, что пользователь может видеть, слышать и с чем он может взаимодействовать”.
Я посчитал нужным прояснить этот момент. Фронтенд – это не только веб-вещь.
Чаще всего фронтенду требуется что-то еще, какая-то дополнительная информация, будь то загрузка видео или новые непрочитанные сообщения пользователя (и даже подтверждение того, что пользователь авторизован для чтения сообщений).
Все это происходит в другом месте. Обычно мы называем это другое место “бэкендом” (или API, или сервером, мы разберемся с этой путаницей позже).
В самом широком смысле бэкенд – это то, что мы не видим непосредственно как пользователи. Данные и логика, лежащие в основе визуального восприятия. Это может быть получение данных от метеорологической службы для виджета погоды.
Adobe Stock / Andrey Popov
Сам телефон не имеет возможности узнать текущую погоду, поэтому он обращается к “бэкенду”, чтобы получить эти данные и показать их пользователю.
Когда вы загружаете компьютерную игру, и она запоминает ваше имя и уровень, на котором вы сейчас играете, она считывает эти данные из файла, сохраненного на вашем компьютере, который содержит всю эту информацию.
Когда вы нажимаете control+P в браузере, появляется небольшое окно “frontend”, и это окно может общаться с принтером, подключенным к вашему компьютеру, за кулисами (backend!).
Это все примеры того, как фронтенды работают с бэкендами, чтобы предоставить пользователю полезную услугу или опыт.
Итак, бэкенд: “Программа (или файл), с которой может взаимодействовать фронтенд-программа для получения дополнительной информации или функциональности для пользователя”.
Давайте подробнее рассмотрим, что это означает на практике и конкретно для веб-разработчика. Бэкэнд веб-сайта обычно представляет собой “сервер”, с которым мы общаемся через его “API”.
Когда вы заходите на сайт youtube.com, ваш браузер связывается с сервером YouTube, который затем отправляет обратно файл index.html, представляющий собой веб-сайт YouTube. Затем ваш браузер отобразит этот html-файл на экране.
Затем, когда вы нажмете на видео на сайте, веб-страница отправит запрос в “API” YouTube с просьбой начать отправку видео на вашу веб-страницу.
API – или интерфейс прикладного программирования – похож на “меню” серверной программы, это то, как одна компьютерная программа делает определенные запросы к другой. По-другому об API можно сказать, что это “дверь” в сервер.
API представляют собой довольно простой код – сервер YouTube.com выглядит следующим образом:
/ -> “I’ll send them the index.html file” /about -> “I’ll send them the about.html file” /watch?v=dQw4w9WgXcQ -> “Я отправлю им видео с ID dQw4w9WgXcQ”.
Вы постоянно видите такое использование API, верно? Это URL!
URL – это универсальный язык, который используется повсюду, в настольных приложениях, в интернете, в сети, в играх, в блокчейне, чтобы сделать четкие запросы от одной программы к другой, чтобы найти ресурсы и попросить что-то.
Этот просит API wikipedia.org вернуть нам HTML-файл с информацией о циклоне: https://en.wikipedia.org/wiki/Cyclone_Batsirai.
А этот URL запрашивает API поиска Google, чтобы он выдал нам совпадения по нашему запросу “идеи простых рецептов”! https://www.google.com/search?q=easy+recipe+ideas.
API состоят из маршрутов, таких как “/wiki/” и “/search” выше, которые похожи на маленькие URL-адреса, ведущие в разные места сервера с различными функциями. Именно так организованы API. Немного подробнее об этом позже.
(Вы можете увидеть, как веб-страница, на которой вы находитесь, выполняет все эти API-запросы, набрав CTRL-SHIFT-J и перейдя на вкладку “Сеть”. Если вы перезагрузите страницу, то увидите все различные ресурсы для запрашиваемой страницы).
Итак, бэкенд обычно взаимодействует со своим “API”, который похож на меню, состоящее из “маршрутов”. Но где практически существует бэкенд? Обычно на “сервере”.
Интернет и многие приложения, которые вы используете ежедневно, следуют так называемой архитектуре “клиент-сервер”.
Давайте попробуем разобраться, как связаны эти слова. Вы можете услышать, как люди смешивают вместе “клиент/фронтенд” и “сервер/бэкенд”, поскольку их значения довольно похожи.
Фронтенд – это ссылка на HTML-приложение, которое вы сделали, но может также использоваться в более общем смысле для ссылки на ваш HTML, или браузер, который показывает ваш HTML, или даже ваш компьютер.
Бэкэнд – это “серверная” часть. Слово “сервер” может использоваться для обозначения компьютерной программы, “передающей” html/данные на ваш frontend через Интернет, но слово “сервер” также относится к физическому объекту.
Таким образом, “бэкэнд” – это скорее зонтичный термин для одного/многих серверов в целом.
Итак, еще раз, потому что это запутанная вещь…
API – это система, через которую ваша программа общается с сервером. API – это то, как компьютерные программы делают запросы друг к другу.
Сервер – это компьютерная программа, которая обычно работает круглосуточно, ожидая запросов от клиентских приложений. Вы общаетесь с серверами через их API.
Бэкэнд – это все, что находится за внешним приложением (например, веб-страницей) и помогает функционировать внешнему приложению. Бэкэнд может состоять из одного сервера или 25 различных серверов!
Например, в случае с youtube.com фронтенд (веб-страница), вероятно, взаимодействует с API аутентификации для входа в систему, API поиска для поиска по всем видео в базе данных, API потокового видео для начала потоковой передачи видео в ваш браузер и т.д. Все эти API, скорее всего, работают на своих собственных специальных серверах.
Не превращая эту статью в статью о базах данных, база данных также является частью бэкенда, и обычно один конкретный сервер отвечает за связь с базой данных, прося ее найти / создать / обновить / удалить документы от имени клиента.
Хорошо! Достаточно запутанной теории и новых слов. Часть 1 завершена!
Adobe Stock / Andrey
Часть 2 – Заметки о языках и технологиях
Какой язык?
Какой язык программирования использовать? Их существуют буквально сотни, но для большинства новичков выбор не должен быть очень сложным.
Я бы рекомендовал обратить внимание только на JavaScript или Python, которые, поверьте мне, помогут вам обойти многие другие крутые кривые изучения других языков. Эти два языка легкие и не будут мешать вам так сильно, как другие.
(Распространенное заблуждение заключается в том, что язык сервера имеет значение по отношению к фронт-энду. Это не так. Ваш фронтенд может посылать сообщения на JavaScript на сервер, написанный на C#, Swift, Rust и так далее. Сами запросы обычно пишутся на HTTP, URL и JSON, которые могут быть понятны большинству языков программирования).
Если вы уже являетесь фронтенд веб-разработчиком или заинтересованы в изучении веб-разработки, я настоятельно рекомендую просто сосредоточиться на использовании JavaScript во фронтенде и бэкенде. На этом этапе нет причин делить свой мозг пополам между языками. И, говоря по собственному опыту (я регулярно работаю на куче разных языков, что может быть неприятно), ни один другой язык не сравнится с гибкостью и практичностью использования очень современного некомпилируемого языка, позволяющего писать как на фронтенде, так и на бэкенде.
Старик трясет кулаком над облаком
Для выполнения кода JavaScript вне браузера мы используем программу под названием “NodeJS”.
Горячий дубль: Люди неоправданно придают слишком большое значение NodeJS, как будто это какая-то волшебная вещь, но правда в том, что каждый язык программирования имеет некоторый инструмент для запуска своего кода.
Например, чтобы запустить код Python, вы набираете “python filename.py”, “python” – это инструмент, который запускает файлы python!
Для программ Clojure вы набираете “lein filename.clj”, “lein” – это инструмент, который запускает файлы Clojure.
Для JavaScript вы набираете “node filename.js”, и “node” запустит ваш Javascript-файл.
NodeJS – это не “сервер”, не “фреймворк” или как там его называют в наши дни, и очень жаль, что люди называют его так, потому что это сбивает всех с толку в отношении JavaScript. NodeJS – это просто инструмент для запуска ваших файлов JavaScript, как и в любом другом языке программирования. На мой взгляд, это самый полезный способ думать об этом.
Часть 3 – Давайте сделаем серверную программу
Adobe Stock / Mykola Mazuryk
Давайте сначала сделаем серверную программу на JavaScript.
Проверьте, установлен ли на вашем компьютере NodeJS, открыв “Git Bash” / “Command Prompt” на Windows или “Terminal” на Mac/Linux, и введите “nod e-v”.
Если у вас не высвечивается номер версии node, скачайте и установите NodeJS для вашего компьютера: https://nodejs.org/en/download/.
Если вы сохраните этот файл JavaScript под именем “index.js”…
Вы можете запустить его из терминала (сначала перейдите в нужную папку командой “cd”) с помощью команды “node index.js”. Круто! Теперь вы можете общаться с этой серверной программой из любой другой программы на вашем компьютере, например, из браузера. Перейдите на http://localhost:8080/.
В вашем браузере должно появиться сообщение “Hello, World!”.
Для развлечения давайте сделаем такой же сервер на языке Python.
Давайте попробуем сделать то же самое в Python. Вполне вероятно, что на вашем компьютере установлен Python, но если команда “pytho n-v” не выдает номер версии Python, скачайте и установите его отсюда: .
Тот же простой сервер на Python, сохраните его как index.py :
Затем вы можете запустить его из терминала (сначала перейдите в нужную папку с помощью команды “cd”) с помощью команды “python index.py”. Теперь, если вы перейдете на http://localhost:8081/, вы должны увидеть “Hello, World!”.
Вау, это было быстро! Теперь вы бэкенд-разработчик на JavaScript и Python! Больше нет никаких “скрытых знаний”, никаких секретных рукопожатий… Просто продолжайте практиковаться!
Эти серверы теоретически могут обслуживать файлы (html, png, css и т.д.) или предоставлять данные из базы данных, позволять пользователям входить и выходить из системы, предоставлять информацию о календаре пользователя – все, что делает сервер.
Фреймворки – для более структурированных API.
Как правило, разработчики стараются избежать “изобретения колеса”. Если вы выпускаете 2-3 новых продукта в год или в месяц, то вы не хотите писать все с нуля. Вы потратите много времени и, вероятно, сделаете много ненужных ошибок, если каждый раз будете писать все с нуля.
Для людей, создающих API, существуют API-фреймворки! Эти API-фреймворки позволяют легко создавать и управлять множеством различных API-маршрутов, обрабатывать ошибки, работать с разрешениями и т.д.
ExpressJS является самым популярным API-фреймворком JavaScript.
Ваша следующая задача – установить express и сделать с его помощью простой API.
“404 sorry this resource does not exist”
Наберите в Google “как установить expressJS”, “expressJS пример”, “express send JSON”, “express send HTML file” или “express serve static”, чтобы начать разбираться с тем, что он может делать.
(Если вы хотите сделать этот шаг на языке Python, то самым простым фреймворком Python для использования будет Flask . Посмотрите, как далеко вы продвинетесь!)
Please make an API with these routes and return values: / -> serves an index.html file /about -> serves an about.html file /users/1 -> sends back some JSON Every other route ->Я намеренно не даю вам код для этого последнего шага с фреймворком.
Если вы не слышали этого раньше, реальность программирования заключается в том, что 90% времени вы тратите на поиск ключевых слов, поиск и исправление странных ошибок или просто пытаетесь получить четкое представление о поставленной задаче или проблеме.
Ваша задача – не заучивать и писать код весь день, а стать адаптивным и находчивым человеком, способным находить полезные ответы и хорошие решения проблем.
Идеальное запоминание всего, что касается предпочитаемого языка / фреймворка, может стать побочным эффектом опыта, но я бы никогда не сказал, что это цель.
Так что приступайте! Начните практиковать свои навыки решения проблем и сделайте маршрутизатор с 4 маршрутами, как описано выше, используя expressJS (или Flask для Python). Это на 99% будет связано с поиском примеров в гугле и попытками исправить ошибки!
На этом практическая часть статьи завершена! Поздравляем.
Часть 4 – Несколько заключительных заметок и указаний
Adobe Stock / auremar
Это было длинное руководство. Чтобы не писать бесконечно длинную статью, я оставлю несколько заключительных заметок и указаний.
Вам не обязательно сразу же читать этот раздел, но если у вас есть энергия, действуйте!
Попробуйте погуглить эти фразы, чтобы составить свой обзор технологий!
“Коды состояния HTTP”
“Динамическая маршрутизация экспресс”
“Что такое экспресс-сессии”
- “Микросервисная архитектура против монолита”
- “Как использовать mongoDB с express”
- “Что такое Postman”
- “Что такое netlify”
- “Что такое AWS S3”
- Создайте реальное приложение!
- У вас есть основные инструменты и знания для создания сервера, так что продолжайте! Поскольку бэкенд пересекается с другими областями программирования, ваш выбор того, что создавать, довольно широк.
- Если вы ищете идеи о том, какие бэкенды вы можете создать, вот список полезных примеров от Кори Альтхоффа.
Следуйте своим собственным интересам, думайте о тех проектах, которые привлекли вас в бэкенд в первую очередь, и не бойтесь экспериментировать. Если вам не хватает идей, мы недавно опубликовали статью о том, где их искать.
Размещение вашей серверной программы в Интернете
В конечном итоге вы захотите разместить свой сервер в Интернете, чтобы другие люди и программы могли с ним общаться (мы называем это “развертыванием”). Для начала я бы рекомендовал Heroku. Heroku – это “хостинг” для запуска приложений в Интернете. Вы можете загрузить код своего сервера, и он может работать там бесплатно (мы называем это “хостингом”. Heroku “разместит” вашу программу).
Приложение “бэкенд” VS обычное приложение
То, что программа не является фронтендом, не делает ее сервером или бэкендом.
“Бэкенд” подразумевает связь с фронтендом, который будет потреблять данные и общаться с бэкендом. “Сервер” подразумевает, что вы передаете данные какой-то другой программе.
Вы можете просто писать программы, которые выполняются, производят вычисления, передают файлы по компьютеру, очищают жесткий диск, которые вообще не имеют внешнего аналога. Имейте это в виду.
Не все API основаны на URL
Существуют и другие типы API. Например, localStorage в браузере – это API, встроенный прямо в браузер, к которому вы можете обращаться с помощью кода javascript. Вы не используете URL для связи с ним, но это все равно служба, с которой вы общаетесь определенным образом. localStorage.setItem(“username”, “bob”) запрашивает службу localStorage браузера для хранения некоторой информации. Мы бы назвали это также API.
Веб-разработчики, не забывайте о CORS!
В современной веб-разработке принято размещать свой сайт(ы) и сервер(ы) отдельно, вместо того, чтобы передавать HTML-файл
Для браузеров серверы обычно применяют политику безопасности под названием Same Origin Policy . Это означает, что если вы пытаетесь обратиться к API сервера на http://localhost:8080 с вашей веб-страницы, которая находится на http://localhost:3000, то сервер, скорее всего, отклонит любое сообщение, которое вы ему отправите.
Эта политика одинакового происхождения предназначена для защиты потребителей и компаний от мошенников, которые могут скопировать HTML-файлы веб-сайта банка, разместить его в Интернете на другом сервере, а затем обманом заставить людей войти на настоящий сервер банка с поддельного веб-сайта!
SOP означает, что маршрут API может быть использован только с HTML-страницы, которая также обслуживалась с того же “источника”, с . Это очень хорошее поведение по умолчанию, я бы сказал.
Чтобы позволить вашему сайту общаться, если он находится на другом сервере (aka origin), чем ваш фактический “внутренний сервер”, вам нужно включить CORS (Cross-Origin Resource Sharing) на вашем сервере, чтобы сайт мог общаться с внутренним API.
Чтобы решить эту проблему в Express, просто добавьте 2 строки!
На этом мы закончим наше погружение в тему “бэкенд”. Я очень надеюсь, что это помогло нарисовать картину в вашем сознании, где находятся все части и что означают некоторые из различных терминов.
Приятного кодинга! А теперь прочитайте статью еще раз!
Кристофер Шелли – старший инструктор буткемпа Web & App Development. Если вам понравилась его статья о разработке бэкенда, ознакомьтесь также с нашим введением в Data Science или посмотрите наш список буткемпов!
Молодая счастливая женщина в белой футболке сидит за ноутбуком и празднует победу и успех на желтом фоне
смесь расы веб-разработчиков создание программного кода разработка программного обеспечения и программирования концепция портрет горизонтальный копирование пространство векторная иллюстрация
абстрактные линии с точками на темном фоне. концепция соединения или больших данных