Оглавление

П еди ловие 1
По ему написал ту книгу 2
К а ка и о и веба 3
Как ее итат ? 6
Глава 0. Ф ндамен ал н е кон е ии 8
Терминологи 8
Две модели е ев иложений 9
Клиен -Се ве на а и ек а 10
Client-Side (Клиентска аст ) 11
Веб-страни 12
Мобил н е веб-приложени 13
Server-Side (Серверна аст ) 14
TCP/IP 14
Канал н й уровен 15
Сетевой уровен 15
Транспортн й уровен 16
Прикладной уровен 17
HTTP-сервер 18
Протокол HTTP 19
Анатоми HTTP сооб ений 19
HTTP Метод (Methods) 21
HTTP Заголовки (Headers) 21
HTTP статус код (Status Codes) 21
URI и URL 21
URL Query / Query string 22
HTTP Cookie 22
HTTP(S) 23
Изу аем HTTP запрос на практике 23
API 25
Домен и DNS 26
Хостинг 26
Что стоит за простой загрузкой веб-страни в браузере? 26
В вводите запрос в адресну строку 26
Поиск IP-адреса 26
TCP соединение и HTTP запрос 27
 1

Обработка запроса на веб-сервере 27

Обработка ответа ва им браузером 27
Рез ме 28
 2

Предисловие

По ему написал ту книгу

В современном мире изу ат нову информа и стало про е ем когда либо. В сети
можно найти огромное коли ество материала л бого уровн сложности на л бу
интересу е вас тему.

Однако проблема современного образовани закл аетс в том то при бол ом обилии
информа ии становитс трудно в строит план обу ени и структурировано подойти к
освоени какой либо тем .

Ли но программист самоу ка, у мен нету профил ного образовани и никогда не

проходил спе иализированн х курсов. В 2017 поступил на факул тет
кибербезопасности в один из киевских ВУЗов, однако пар по ти не посе ал, а в на але
трет его курса и вовсе забрал документ . Программирование мне при лос изу ат
самосто тел но е е со кол , собира по крупи ам информа и из разли н х статей,
видео и книг.

Последних 3 года занима с коммер еской разработкой. За то врем мне удалос

поработат над созданием в соконагруженной платформ , котора ежедневно
обрабат вает миллион запросов и попаст в крупн й стартап FigLeaf с бол им
отделом разработки.

До окон ани 2020-го работал Backend инженером в компании Medstar Solutions, где м
с командой разрабат вали интересн е в сокотехнологи н е продукт в области
здравоохранени . Закон ив работу над последним проектом ре ил вз т небол у
паузу тоб дописат ту книгу, записат много образовател ного контента дл YouTube
и вернутс к Fullstack разработке.

Дополнител но у мен ест оп т по создани веб-приложений на заказ и организа ии

команд из 2-3 разработ иков. А до всего того е е в коле брал де ев е заказ на
фриланс-бирже Freelancehunt по доработкам веб-сайтов и разработке парсеров.

Последних нескол ко мес ев проводил онлайн-консул та ии со спе иалистами

разного уровн , и увидел какие пробел в знани х ест у многих на ина их Backend
разработ иков или спе иалистов из других областей, как например Frontend.
 3

Я не понасл ке зна , как может б т трудно в строит план обу ени , особенно в
на але своего пути. По той при ине многие на ина ие программист могут тратит
сли ком много времени на написание примитивн х Hello World, кал кул торов и
подобн х программ, не продвига с вперед к более важн м и практи еским нав кам.

Именно по тому ре ил делит с своим оп том и помогат другим спе иалистам в

изу ении данной сфер .

Несмотр на то, то за последних нескол ко лет в мире Backend и Frontend разработки

по вилос много нов х технологий, фреймворков и подходов: Docker, Kubernetes, React,
Angular, CI/CD, микросервис и т.д. - основополага ие прин ип оста тс
неизменн ми.

Цел данной книги - структурироват все ти фундаментал н е кон еп ии в разработке

веб- и серверн х приложений и задат вектор дл ва его дал ней его
самосто тел ного развити .

Она будет интересна как на ина им разработ икам, котор е тол ко на ина т свой
пут так и более оп тн м спе иалистам, котор е хот т прока ат свои нав ки в
проектировании веб-приложений.

На собеседовани х асто зада т вопрос по темам, затронут м в книге. Она может стат
ва им настол н м путеводителем при подготовке к собеседовани м на Junior/Middle
пози ии.

Современн е технологии, интернет и возможност разработки ифров х продуктов

сил но изменили на мир. Рассматриват архитектуру веб-приложений в вакууме, не
обсудив их рол в жизни современного еловека будет сли ком сухо. По тому перед тем
как приступит к разбору главной тем данной книги, хо у сделат лири еское
отступление и кратко разобрат истори становлени интернета таким, котор м м его
знаем сегодн .

Кратка истори веба

Интернет изменил о ен много сфер на ей жизни. Нам с вами повезло застат один из
переломн х моментов в истории елове ества.

Я помн как в 2009 зарегистрировал свой перв й аккаунт в ВК (или “Вконтакте” как он
тогда наз валс ) и добавилс в друз к парн из России, с котор м м познакомилис
на отд хе летом в Кр му. Нас раздел ли т с и километров, но м могли с ним без
проблем об ат с . Уже тогда тот факт мне сносил кр у.

Никогда ранее у л дей не б ло таких возможностей как сей ас. М можем найти л бу
интересу у нас информа и по ел ку пал а. Об ат с по видеосв зи с л д ми,
 4

котор е наход тс на других континентах и в других асов х по сах, котор х м могли

даже никогда вживу не встре ат .

У каждого из нас в кармане лежит карта л бого города планет , сама бол а
библиотека книг, аудиозаписей и фил мов из когда-либо ранее су ествовав их.

Интернет переосм слил то, как м взаимодействуем с вне ним миром и окружа ими
нас л д ми. Он дал возможност л д м работат и строит собственн й бизнес не
в ход из дому. Он переосм слил ел е индустрии, изменил подход в рекламе и
маркетинге, сопутствовал создани кардинал но нов х идей в мире кономики.

Интернет дал возможност совер ат покупки не в ход из дому. Он позвол ет

па иентам всегда б т под присмотром вра ей с помо телемеди ин .

Он откр л нов е горизонт дл твор еской самореализа ии в л бой сфере

де тел ности.

М имеем уникал ну возможност смотрет лек ии из лу их университетов мира,

котор е наход тс в откр том доступе, и дл того не нужн огромн е ден ги дл
оплат за обу ение или смена места жител ства.

Работу над данной книгой на ал в кон е но бр 2020-го, увидит свет она в 2021.
Забавно, то как раз в том году будет ровно 50 лет с момента отправки первого E-Mail.
Про ло пол столети , а интернет успел плотно укоренитс в на и жизни.

Сама иде интернета зародилас в середине 60- х годов XX столети в армии США.
Изна ал ной ел интернета б ла возможност об единит комп тер , разбросан
по всей территории стран в едину сет , в которой можно б ло обмениват с разн ми
данн ми и файлами.

Так по вилас сет ARPANET, котора одна из перв х реализовала стек протоколов
TCP/IP и положила на ало современному интернету.

Как уже сказал, в 1971 году по вилас возможност обмениват с пис мами по сети.
Однако интернет тогда б л сложной технологией, котора б ла доступна немногим. На
тот момент е е не б ло прив н х нам браузеров, веб-сайтов, Telegram и Skype.

В кон е 80- х, на але 90- х, Тим Бернерс Ли увидел в интернете гораздо бол е
потен иал н х возможностей, ем б ло доступно на тот момент. Так на алас работа
над так наз ваем м WWW (World Wide Web).

По сути веб (World Wide Web) - то распределенна система, котора работает поверх
самого интернета и дает возможност полу ат доступ к разли н м документам и
страни ам, испол зу URL-адрес (Uniform Resource Locator).
 5

В кон е 1990 года (ровно 30 лет назад на момент написани данной глав ), Тим
опубликовал перву веб-страни у и разработал перв й веб-браузер. Самой страни
уже нету, но ее копи можно посмотрет ​тут​.

С того времени на алос активное развитие всемирной сети. В 1992 году б ла загружена
перва фотографи . В 1994 по вилс перва поискова система WebCrawler и ​перв й
ли н й блог​.

В 1996 компани Nokia в пустила перв й сотов й телефон с доступом к интернету

N9000 Communicator.

В 1998 б ла разработана перва верси поискового движка Google.

В 2003 произо ел перв й онлайн-звонок по скайпу. В 2004 б л зарегистрирован перв й

профил на Facebook. В 2005 один из создателей YouTube загрузил на платформу ​первое
видео​.

В 2006 соу редител твиттера Джек Дорси сделал перв й твит. В том же году, 14 лет
назад, по вилс перв й профил в со иал ной сети ВК с ID 1 (страни а Павла Дурова).

В 2010 в Instagram б ло опубликовано первое фото.

Как развива тс данн е технологии последних 10 лет м с вами набл даем

собственн ми глазами.

Со иал н е сети плотно проникли в на у жизн . На таких платформах как Instagram,

YouTube и TikTok зарегистрировано уже более миллиарда пол зователей, а Facebook
подкрадаетс к отметке в 3 миллиарда.

Когда м хотим найти каку нибуд информа и , м перв м делом идем в Google. Все
а е нам про е написат сооб ение в мессенджере, ем позвонит .

10 лет назад один парен заказал пи у​1​ за 10 000 биткоинов. Сегодн та сумма равна
~ $ 190 000 000.

У нас, разработ иков веб-приложений, по вилас возможност испол зоват

иннова ионн е технологии дл создани интересн х и полезн х систем, котор е могут
создават нову енност , помогат окружа им и оказ ват благопри тное вли ние на
их жизни и со иум в елом.

Однако с ростом коли ества доступн х технологий и по влением все бол его
коли ества пол зователей, систем с кажд м годом станов тс все сложнее и сложнее.
1
https://vc.ru/crypto/2385-million-dollar-pizza
 6

Приложени , котор е уме т обрабат ват миллион и сотни миллионов запросов в

секунду станов тс новой нормой. Разработка современн х веб-приложений зна ител но
отли аетс от разработки веб-сайтов 15 лет назад.

Эта книга призвана структурироват все основн е аспект и дат отли н й фундамент
дл дал ней его, более глубокого изу ени данной сфер .

Как ее итат ?
Одна из при ин бол ой скорости прогресса вл етс возможност работат на в соких
уровн х абстрак ии. Дл того тоб написат простен ку программу сегодн не нужно
понимат устройство транзистора и про ессора, оперативной пам ти и даже
опера ионной систем .

Современн й комп тер и з ки программировани скр ва т от нас огромное

коли ество низкоуровнев х деталей, то дает возможност фокусироват с
искл ител но на создании продуктов и ре ении бизнес зада .

Мо философи закл аетс в том, то обу ение необходимо на инат с пон тного дл
вас, в сокого уровн абстрак ии, и уже по необходимости копат глубже дл более
об ирного понимани .

Если б в на али изу ат программирование с Assembly​2​, или разбират с в том как

про ессор склад вает исла, уверен в б б стро потер ли интерес из-за огромного
уровн сложности.

По тому в книге не вда с в низкоуровнев е детали, не углубл с в то, как некотор е

ве и работа т “под капотом”, а да елостну и об ирну картину дл понимани
архитектур современн х веб-приложений.

В всегда можете пойти дал е. И насто тел но рекоменду вам углубл т с в более
низкоуровнев е ве и, поскол ку то необходимо дл ва его профессионал ного
развити . А данна книга вам даст еткое понимание куда именно стоит копат .

По ходу изложени оставл разн е сс лки на дополнител н й материал по

затронутой теме. Смело углубл йтес в отдел н е тем по про тени данной книги.

Чтоб стат хоро им разработ иком не достато но ли итат книги и проходит курс .
Хоро ими разработ иками становит с тол ко при посто нной и усердной практике,
регул рному написани кода и разработке приложений.

2
Низкоуровнев й з к программировани , в котором программист пи ет инструк ии
непосредственно под конкретн й набор аппаратного обеспе ени .
 7

Это та сфера в которой у атс на пробах и о ибках, а мастерство приходит с оп том. Я

буду безумно рад, если данна книга вас сподвигнет на создание собственного
pet-проекта дл закреплени полу енн х знаний на практике!

Наде с , в уже знаком со мной в со . сет х. Если нет, то подпис вайтес на мои
канал в ​YouTube​ и ​Telegram​, где регул рно публику образовател н й материал и
дел с собственн м оп том.

Е , -
, ​ hashkevychmaksim@gmail.com​.
z

Т , ​ ​
.

Ну а тепер , после небол ого лири еского отступление, давайте приступим к изу ени
интересного мира современн х веб-приложений!
 8

Глава 0. Фундаментал н е кон еп ии

«М .И
, , - »

Т.С. Э

Коли ество разнообразн х веб-сайтов, приложений и онлайн-игр уже не сос итат . В

мире веб-разработки су ествует огромное коли ество систем разного уровн сложности:
от прост х однострани н х веб-сайтов и ли н х блогов до стримингов х сервисов,
бол их международн х маркетплейсов, мул типлеерн х онлайн игр, сервисов поиска
такси и со иал н х сетей, котор е обрабат ва т миллиард запросов ежедневно.

Хот и данн е приложени могут кардинал но отли ат с сложност архитектур ,

об емами написанного кода, размером команд разработ иков, испол зуем ми
технологи ми и стоимост инфраструктур , все они построен следу
фундаментал н м кон еп и м и подходам, о котор х пойдет ре в данной книге.

Если в уже разработ ик с оп том, некотор е ве и в той главе вам покажутс

банал н ми. Однако дл формировани елостной картин не могу опустит данн е
детали.

Терминологи
Дл сности давайте разберем нескол ко терминов, котор е асто будут испол зоват с
по ходу изложени материала в данной книге.

На нем с двух основн х пон тий, котор е асто испол зу тс взаимозамен емо ( то не
совсем корректно): веб-сайт и веб-приложение.

Веб- ай ​ то одна или нескол ко логи ески св занн х между собой веб-страни , котор е
доступн по об ему доменному имени и разме ен хот б на одном веб-сервере.
Доступ к сайту осу ествл етс с помо веб-браузера.

В сво о еред ​веб- иложение​ - то программное обеспе ение, которое работает по

сети, испол зу протокол HTTP (далее в той главе м его разберем).

Веб-сайт, по сути, то один из видов веб-приложени . Но веб-приложени - то не

об зател но тол ко ли веб-сайт.
 9

В можете зайти на сайт youtube.com испол зу браузер. Однако в также можете

пол зоват с сервисом YouTube испол зу мобил ное приложени на смартфоне или
план ете. Т.е. страни а в браузере по сс лке youtube.com - то веб-сайт, однако сам
сервис YouTube - веб-приложение.

Се ев е иложени ​ работа т по сети, в том исле и сети Интернет.

Сетев е приложени - не об зател но веб-приложени , однако все веб-приложени
работа т по сети. Примерами таких приложений вл тс e-mail клиент или
мул типлеерна онлайн-игра.

Ра еделенна и ема​ - набор независим х компонентов (устройств), котор е

об а тс по сети. Сетев е приложени запуска тс поверх распределенн х систем.

Клиен ​ - устройство или программное обеспе ение, которое делает запрос на сервер.

Се ве ​ - устройство или программное обеспе ение, которое принимает и обрабат вает

запрос от клиента.

Возможно, дл многих то банал н е ве и, однако стоит сразу уто нит данну

терминологи перед тем как двигат с дал е.

Две модели сетев х приложений

В дел т два подхода к проектировани сетев х приложений:

● Модел “клиент-сервер”
● P2P (Peer-to-peer) сет

Разни а между ними закл аетс в том, то перва модел - ентрализованна , а втора
- де ентрализованна .

Если в ска ивали игр , программ и фил м с торрент-трекеров в свое врем , то с P2P
сет в уже знаком . Торрент работа т по данной модели. Технологи блок ейн
также испол зует тот подход.

В моделе P2P ест отдел н е узл (нод ), котор е абсол тно равноправн между
собой и могут одновременно в ступат как в роли клиента, так и сервера. Все узл
коллективно испол зу т свои ресурс и об а тс друг с другом напр му .

Сам е попул рн е области применени P2P - пирингов й обмен файлами,

распределенн е в ислени и де ентрализованн е платежн е систем (криптовал та).
 10

Однако все веб-сайт , десктопн е и мобил н е веб-приложени построен по модели

клиент-сервер, о которой м сей ас поговорим.

Р . 1.1

Клиент-Серверна архитектура
Клиент-серверна архитектура испол зует иной подход. Сервер предоставл ет одному
или нескол ким клиентам сервис. Сервис в данном контексте - предоставл ем й
сервером набор функ ионала.

Клиент, при необходимости запросит данн е от сервера или сооб ит ему об

изменени х данн х, делает к нему запрос. Сервер же обрабат вает данн й запрос, и
отправл ет ответ на клиент. Данн й паттерн наз ваетс ​«​за о - о ве ​»​ (​request -
response)​ .

Ини иатором об ени всегда в ступает клиент, производ запрос на сервер. Клиент
не могут об ат с между собой и не зна т о су ествовании друг друга.

Например, когда вам нужно найти каку -то информа и в интернете в пи ете
поисков й запрос в строку поиска google. По нажати на нтер, ва комп тер делает
запрос на сервер google.com, а тот в сво о еред прис лает вам ответ с резул татами
поисковой в да и.

Возможност поиска материалов в сети по кл евому запросу - сервис, предоставл ем й

поисков м движком. Текст из строки поиска - ва запрос, а резул тат поисковой в да и
- ответ от сервера.
 11

Р . 1.2

Коне но в той схеме все намного сложнее, однако наде с сут подхода “запрос - ответ”
в уловили.

Все веб-приложени основан на клиент-серверной архитектуре, по тому именно ее м

будем подробно разбират далее.

В ,
.

Client-Side (Клиентска аст )

Клиентска аст предоставл ет коне ному пол зовател интерфейс, котор й умеет
отправл т на сервер запрос и обрабат ват ответ .

Браузер, мобил н е и десктоп приложени , онлайн-игра на ва ем комп тере -

класси еские пример клиентской асти.

В дел т 2 типа клиентов:

● “Тонкий” клиент (Thin client)

● “Толст й” клиент (Thick client)
 12

“Тонкий” клиент предоставл ет пол зовател ский интерфейс дл взаимодействи с

сервером, однако в полнение всей бизнес-логики​3​ происходит на сервере. Такие клиент
по ти то бесполезн без подкл ени к интернету. Веб-браузер вл етс тонким
клиентом - без интернета он бесполезен (разве то можно поиграт в “динозаврика” в
Google Chrome), а основна его зада а сводит с к запросу и отображени данн х с
веб-сервера.

“Толст й” клиент же реализует бол у аст логики приложени на своей стороне,

изредка об а с с сервером, в основном ли дл полу ени и сохранени данн х.
Толст ми клиентами можно назват комп терн е онлайн-игр , котор е запуска тс на
самом ПК. Игровой движок запускаетс на комп тере тоб обеспе ит в сокое
ка ество рендеринга и скорости отклика игр , и в можете играт в такие игр без
интернета. Но дл обеспе ени онлайн-мул типлеера ему необходимо подкл ение к
серверу.

Толст е клиент , в отли ии от тонких, могут в полн т бол инство логики приложени
при слабом интернете или полном его отсутствии.

Возможно в сл али о Google Stadia​4​ - платформе, котора предоставл ет услуги

игрового стриминга. Данн й сервис дает возможност играт в огромное коли ество
современн х игр на слабом комп тере, ноутбуке или смартфоне при условии хоро его
подкл ени к интернету. В данном слу ае девайс в ступает в роли тонкого клиента, так
как вес рендеринг и механика игрового движка обрабат ваетс серверами платформ .

Веб-страни
Сам й распространенн й формат веб-приложений - то веб-сайт, к которому
пол зовател полу ает доступ испол зу браузер на своем комп тере, смартфоне,
план ете, Smart TV, ​микроволновке​ и тд.

Отображаем е в браузере веб-страни - то не более ем набор файлов разн х

форматов, котор е переда тс пол зовател по сети с веб-сервера. Когда браузер
запра ивает доступ к сайту, веб-сервер возвра ает набор файлов с рас ирением .html,
.css и .js, котор е движок браузера “отрисов вает” в своем окне​5​. Данн й про есс
отрисовки наз ваетс рендерингом (от англ. ​rendering)​ .

Абсол тно все веб-страни в сети испол зу т об еприн т й з к гипертекстовой

разметки HTML, а вместе с ним каскадн й з к стилей CSS.

3
Бизнес-логика - набор функ ионал н х требований к программному продукту, его поведени и
пол зовател ских с енариев.
4
https://stadia.google.com/
5
Более подробно про браузерн й рендеринг: https://habr.com/ru/post/484900/
 13

HTML и CSS опис ва т наполнение и вне ний вид страни , однако “умной” она
становитс благодар скриптовому з ку JavaScript, котор й также вл етс стандартом
разработки веб-сайтов.

В наверн ка знаете, или хот б сл али о таком пон тии как Frontend разработка.
Верстка веб-страни и написание логики веб-сайтов, котора в полн етс в браузере -
то и ест Frontend. Данн й термин асто испол зуетс в ка естве синонима клиентской
асти.

За последних 10 лет та сфера разработки на ала развиват с семимил н ми агами,

по тому знат ли HTML, CSS или JS сегодн недостато но.
Дл CSS сей ас испол зу т разн е препро ессор (Sass / Less). На истом (как е е
говор т “ванил ном”) JS уже мало кто пи ет. Ран е все испол зовали библиотеку
jQuery, сей ас же в основном то такие SPA​6​ фреймворки как React, Angular или Vue. А
дл сборки всего того в едину ку у подкл а т какой-нибуд Webpack или Babel.

Несмотр на бол ое обилие нов х инструментов в мире Frontend разработки,

фундаментал н е прин ип построени веб-страни все такие же как б ли 20 лет назад.
По тому л бому Frontend разработ ику необходимо понимат фундаментал н е
прин ип , котор е сто т за всем современн м инструментарием.

Мобил н е веб-приложени
Е е один о ен распространенн й формат клиентской асти - мобил н е приложени ,
котор е запуска тс под iOS или Android.

Мобил ное приложение можно назват аналогом браузера, котор й зато ен

искл ител но под логику конкретного веб-приложени . Оно также об аетс с
веб-сервером, отправл ет запрос и рендерит интерфейс в зависимости от данн х,
котор е прислал сервер.

Дл создани мобил н х приложений испол зу тс разли н е технологии и з ки

программировани . Можно в делит два основн х подхода:

● Нативн й
● Кроссплатформенн й

Нативн й подход подразумевает, то приложени разрабат ва тс под конкретну

платформу испол зу спе иал н е инструмент разработки, котор е под нее зато ен .

6
Single Page Application. Подробнее об том в следу ей главе.
 14

Android-приложени в основном пи ут на Java или Kotlin, испол зу спе иал н й SDK​7​.

Дл разработки iOS-приложений о ен долго испол зовалс з к Objective-C, но сей ас
все нов е программ пи ут на Swift, котор й разрабат вает компани Apple.

При нативной разработке, клиентску аст разрабат ва т отдел но под Android и

отдел но под iOS, то требует разного набора знаний и кспертиз от разработ иков.

Кроссплатформенн й подход разработки позвол ет писат един й код, котор й может

запускат с как на iOS так и на Android. Сам е попул рн е технологии дл
кроссплатформенной разработки то Flutter, React Native и PWA (Progressive Web Apps).

Это имеет место, когда у компании нету достато н х ресурсов нан т отдел н х
спе иалистов под кажду платформу. По тому нанима т кроссплатформенн х
разработ иков, котор е могут создат приложени сразу под все нужн е платформ .

Однако данн й подход не пана е , поскол ку наклад вает определенн е техни еские
ограни ени .

Server-Side (Серверна аст )

Фундаментал но, сервер - то комп тер, котор й предоставл ет данн е другим
комп терам.

Ест разн е тип серверов: веб-сервер , по тов е, файлов е, игров е сервер и тд.
Тип определ етс программн м обеспе ением, которое на нем установлено.

Разн е тип серверов испол зу т разн е протокол прикладного уровн 8​​ стека TCP/IP,
про котор й м поговорим далее.

TCP/IP
TCP/IP - стек протоколов, на котором построен современн й интернет. Название состоит
из двух основн х протоколов семейства, а именно:

● TCP - протокол переда и данн х транспортного уровн , котор й отве ает за

отправку так наз ваем х пакетов по сети
● IP - протокол сетевого уровн , главна зада а которого - адреса и узлов в сети.

Ст к имеет имеет 4 уровн : прикладной, транспортн й, сетевой и канал н й. Кажд й

нов й уровен основан поверх пред ду его. В то врем как сетевой и канал н й по
бол ей асти работа т на уровне “железа”, прикладной и транспортн й уже
реализу тс программн м обеспе ением.

7
Software Development Kit - набор средств разработки под конкретну платформу.
8
https://en.wikipedia.org/wiki/Application_layer
 15

Канал н й уровен
Канал н й уровен опис вает, как кодиру тс данн е дл переда и пакетов​9​ на слое
“железа”. Основн е протокол тут то Ethernet (тот сам й нур котор й в подкл аете
к модему или напр му в ПК) и WLAN (всем прив н й Wi-Fi или мобил на св з ).

Эти протокол определ т, как данн е от ва его устройства будут передан на

следу ее устройство в сети. О евидно, то переда а пакетов по подкл енному
кабел или по беспроводной сети требует разн х стандартов кодировани информа ии.

Сетевой уровен
Протокол сетевого уровн уже отве а т за то, как происходит коммуника и между
двум разн ми сет ми. Грубо говор , здес ре аетс зада а мар рутиза ии пакетов по
сети от одного комп тера к другому. На том уровне работает протокол IP.

Р 1.3

Стоит понимат , то IP в данном слу ае - то протокол, набор правил и стандартов

котор е опис ва т модел переда и данн х от одного комп тера другому по сети.

Не путайте название протокола с IP-адресом, уникал н м адресом спе иал ного

формата, котор й испол зуетс в протоколе IP.

9
При сетевой коммуника ии, передаваем е сооб ени разбива тс на более мелкие пакет .
Это​ позвол ет поп тат с заново отправит небол ой кусо ек сооб ени при о ибках, вместо
повторной отправки елого сооб ени . Это также позвол ет вам смотрет видео на YouTube е е
до того, как оно полност передалос по сети на ва е устройство.
 16

IP-адрес можно воспринимат как об н й физи еский адрес. Когда в в з ваете такси
в указ ваете адрес приб ти . Адрес определ ет территориал ное расположение
коне ного пункта назна ени .

Также в происходит в интернете, IP-адрес определ ет месторасположение коне ного

устройства. Чтоб отправит запрос на сервер, клиенту необходимо знат IP-адрес того
сервера.

Транспортн й уровен
Транспортн й уровен отве ает непосредственно за переда у данн х по сети. На том
уровне су ествует свой набор протоколов, главн ми вл тс TCP и UDP. Основна
разни а между ними закл аетс в том, то TCP гарантирует доставку сооб ени
адресату, а также сохран ет правил ну последовател ност отправл ем х пакетов (в
TCP они наз ва тс сегментами). Это достигаетс за с ет предварител ного
установлени соединени с адресатом.

UDP же не гарантирует доставки сооб ений (в данном протоколе пакет имену тс

датаграммами) и может измен т их последовател ност , но за с ет того данн й
протокол гораздо б стрее ем TCP. Благодар тому UDP асто примен етс в
стримингов х сервисах, аудио- и видеозвонках, онлайн играх.

Современн е комп тер уме т запускат множество программ одновременно. В

опера ионн х системах, кажда программа запускаетс в так наз ваемом про ессе. Так
вот, сервер могут также запускат множество сетев х приложений одновременно, в
отдел н х про ессах.

Возникает вопрос, а как раздел т доступ к тим про ессам?

Протокол сетевого уровн отве ает за мар рутиза и по IP-адресу. А как тепер по
тому адресу определит конкретн й про есс, к которому м хотим обратит с ?

Тут нам в помо приходит так наз ваем й “Порт” - елое неотри ател ное исло,
которое запис ваетс в заголовках сооб ений протоколов транспортного уровн (TCP,
UDP и тд.). Порт отве ает за полу ение пакета в пределах одного про есса.

Из-за того, то в заголовках протоколов, дл пол хранени номера порта в делено 16

бит, порт могут б т в диапазоне 1 - 65535.

Дл TCP и UDP составлен стандартизированн й список портов и соответству их им

протоколов​10​.

10
https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers
 17

Прикладной уровен
Сам й в сокий, прикладной уровен , обеспе ивает взаимодействие пол зовател с
прикладн м софтом котор й работает по сети, предоставл протокол дл приложений
разного типа.

Например, на том уровне су ествует протокол HTTP (про него м поговорим далее) дл
работ с веб-сайтами, FTP дл переда и файлов, SMTP дл работ с лектронной
по той и много других.

Данн е протокол работа т поверх TCP/UDP и приложени в полн тс на отдел ном,

спе иал но в деленном порте.

Благодар портам и разн м протоколам прикладного уровн , один физи еский сервер
может без проблем в ступат в ка естве HTTP-сервера на 80-м порту, FTP-сервера на
20-м, SMTP на 25 или 587 порту и игров м сервером на л бом другом порту.

Р . 1.4

Как в можете увидет на рисунке 1.4, зна IP-адрес и нужн й порт, клиент может
пос лат запрос на сервер, испол зу формат <протокол>://<IP-адрес>:<порт>/
 18

К , ​http​://google.com/ ,
80,
HTTP. А ​ ttps​://google.com (П
h HTTPS) - 443
.

Это о ен бегл й разбор стека TCP/IP. Однако дл освоени разработки веб-приложений

вам будет достато но кон ептуал ного понимани данной модели и ее 4-х уровней.
Более глубокое понимание понадобит с сетев м инженерам и другим спе иалистам,
котор е непосредственно работа т с сет ми.

В зависимости от зада , например при разработке собственного сервиса видеозвонков,

вам скорее всего придетс углубит с в протокол UDP и разобрат с как то работает.
Однако в бол инстве слу аев в будете разрабат ват приложени на прикладом, 4-м
уровне стека TCP/IP испол зу протокол HTTP.

HTTP-сервер
Дл класси еских веб-сайтов и приложений испол зуетс протокол HTTP.

HTTP-сервер - приложение или набор программного обеспе ени , которое запу ено на
сервере и обрабат вает вход ие запрос на 80 порту.

На самом деле, вас никто не ограни ивает запустит его и на другом порту, например
8000. В разработке так асто дела т дл тестов х, или так наз ваем х “стейджинг”
серверов, на котор х происходит тестирование приложений или веб-сайтом перед их
релизом в продак н (рабо у среду, котора доступна коне н м пол зовател м).

Дл запуска HTTP сервера су еству т уже готов е ре ени , например NGINX, Apache
HTTP Server или Caddy. Однако вам никто не запре ает написат собственн й
HTTP-сервер, испол зу ва л бим й з к программировани .

HTTP-сервер могут б т стати еские и динами еские. Стати еские просто отда т
файл браузеру, котор й их отрисов вает. Например, однострани н е лендинги
(посадо н е страни ) могут б т прост м набором HTML, CSS и JS файлов, котор е
лежат на удаленном сервере.

Динами еские сервер за асту работа т с базой данн х или другими веб-сервисами, и
наполнение страни или тело ответа динами ески определ етс на сервере при
запросе в соответствии с данн ми из вне них исто ников.

В
- .
 19

Также, как и Frontend то синоним клиента, термин Backend - синоним серверной асти
приложени . В следу их главах книги м будем рассматриват разли н е лемент
серверн х приложений, такие как баз данн х, о ереди сооб ений и тд. Все то входит
в област Backend разработки.

А сей ас самое врем более детал но посмотрет на протокол HTTP.

Протокол HTTP
HTTP (HyperText Transfer Protocol) - об еприн т й протокол переда и данн х и вл етс
основн м протоколом дл коммуника ии веб-приложений.

Изна ал но протокол б л спроектирован дл переда и гипертекстов х документов, то

можно заметит по словосо етани HyperText из аббревиатур . Однако сей ас он
испол зуетс дл переда и данн х разн х форматов и не ограни иваетс одним ли
гипертекстом.

HTTP работает поверх протокола TCP - одного из основн х протоколов переда и данн х
по сети.

Перва верси протокола HTTP по вилас в 1991 году, ем положила на ало

современному вебу. С тех пор протокол активно развивалс , в 1999 году прин ли
утвердили верси HTTP/1.1, котора до сих пор испол зуетс повсеместно.

В 2015 анонсировали HTTP/2, котор й на данн й момент уже поддерживаетс

половинной из 10 млн сам х попул рн х интернет-сайтов​11​.

Анатоми HTTP сооб ений

HTTP сооб ение - то не более ем текстовое сооб ение, которое должно
соответствоват структуре, диктуемой самим протоколом.

Сооб ение состоит из 3х астей, котор е переда тс в указанном пор дке:

1. Стартова строка (​Starting line​)

2. Заголовки (​Headers​)
3. Тело сооб ени (​Message Body)​

Перв х две асти об зател н , в то врем как тело сооб ени может б т пуст м.

Стартова строка разли аетс дл запросов и ответов. При запросе указ ваетс метод,
URI запроса и верси протокола. При ответе же отправл етс верси протокола, статус
код и его текстовое по снение.

11
https://ru.wikipedia.org/wiki/HTTP/2
 20

Давайте разберем пример. Допустим, в пи ите в адресной строке браузера

youtube.com. Браузер формирует HTTP-запрос, в котором стартова строка имеет
следу ий вид:

GET / HTTP/ .

Где:

● GET - метод HTTP запроса

● / - URI запроса
● HTTP/1.1 - верси протокола

Далее на следу ей строке указ ва тс так наз ваем е хедер (заголовки). В на ем

слу ае то будет в гл дет так:

GET / HTTP/ .
Host: youtube.com

У , youtube.com, HTTP ,
, .

Н , User-Agent,
, - ОС.

Обработав запрос, сервер прис лает ответ, стартова строка которого имеет следу ий
вид:

HTTP/ . OK

Где:

● HTTP/1.1 - верси протокола

● 200 - Статус код
● OK - краткое текстовое об снение кода ответа.

М затронули такие пон ти как метод , заголовки, URI и статус код . Давайте разберем
каждое из них подробнее.
 21

HTTP Метод (Methods)

Метод определ т запра иваемое действие. Протокол не ограни ивает зна ение дл
методов, однако дл стандартиза ии испол зуетс об еприн т й​12​ набор глаголов:

● GET​ - полу ение ресурса

● POST​ - создание ресурса
● PUT​ - обновление ресурса
● DELETE​ - удаление ресурса
● TRACE, OPTIONS, CONNECT, PATCH, HEAD ​- менее попул рн е метод , котор е
испол зу тс достато но редко.

HTTP Заголовки (Headers)

Испол зу тс дл переда и дополнител ной информа ии между сервером и клиентом.
Заголовки указ ва тс в формате​ <И >: < >​ и их может б т скол ко угодно.
Кажд й заголовок определ етс с новой строки.

Заголовки могут имет какие-угодно имена и зна ени , но по аналогии с методами,

су ествует определенн й набор об еприн т х стандартов​13​.

HTTP статус код (Status Codes)

Код указ вает на статус обработки запроса сервером. Зна ение статус кодов не
ограни ено протоколом, однако они также име т об еприн ту классифика и 14​ ​ :

1. Информа ионн е (100 - 199)

2. Успе н е (200 - 299)
3. Перенаправлени (300 - 399)
4. Клиентские о ибки (400 - 499)
5. Серверн е о ибки (500 - 599)

Однажд мне приходилос работат со сторонним сервисом, котор й вместо

стандартн х статус кодов отправл л 1ххх, кажд й из котор х имел собственное
зна ение, описанное в их документа ии. Про у, не надо так, просто не надо.

URI и URL
URI (Uniform Resource Identifier) - набор символов, котор е идентифи иру т физи еский
или абстрактн й ресурс по лока ии или имени.

12
https://developer.mozilla.org/ru/docs/Web/HTTP/Methods
13
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
14
https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
 22

URL (Uniform Resource Locator) - набор символов, котор е идентифи иру т то ну

лока и ресурса в сети по адресу. Помимо идентифика ии ресурса, URL также помогает
найти его по конкретному адресу.

URL-адрес на инаетс с определени протокола (например​ https://, ftp://, mailto://​),

дал е самого адреса (испол зу доменное им или IP, например ​146.27.166.51​ или
google.com​) и идентификатора ресурса (например ​/​ или
/search?query=what%20is%20url​).

URL - то один из видов URI. Часто IT спе иалист испол зу т ти пон ти

взаимозамен емо, то не совсем корректно.

URL Query / Query string

В URL можно передават набор параметров, то наз ваетс URL Query (или Query string).
После самого адреса указ ваетс знак вопроса (?), котор й об вл ет на ало строки с
параметрами, далее параметр переда тс в формате:
имя_пе еменн й1=значение1&имя_пе еменн й2=значение2​ , раздел зна ени с
помо символа &.

https://www.example.com/search?query abcd

HTTP Cookie
HTTP cookie (куки) - то небол ой набор данн х, котор е сервер прис лает
веб-браузеру в спе иал ном заголовке при ответе. Браузер сохран ет их у себ в пам ти
и может испол зоват при дал ней их запросах на тот сервер.

Например, куки испол зу тс дл того, тоб пол зовател оставалс авторизованн м в

системе при каждом новом запросе. Они позвол т хранит информа и о состо нии
приложени .. Подробнее об том м поговорим в следу ей главе.

В основном, куки испол зу тс дл :

● Управление сесси ми (авториза и пол зовател , состо ние корзин в онлайн

магазине)
● Персонализа и (сохранение данн х о пол зовател ских настройках, темах и тд.)
● Мониторинг (отслеживание действий пол зовател )

Дл создани куки, сервер пос лает заголовок Set-Cookie в следу ем формате:

Set-Cookie: cookie_name cookie_value

 23

Когда браузер видит тот заголовок в ответе, он сохран ет зна ени в свое хранили е.
При последу их запросах на сервер, браузер будет добавл т к запросу заголовок:

Cookie: cookie_name cookie_value

HTTP(S)
Сегодн бол инство сайтов работа т по рас иренному HTTP протоколу - HTTPS.
Приставка S в кон е озна ает Secure (т.е. безопасн й). Данн й протокол по умол ани
испол зует 443-ий TCP-порт.

HTTPS работает ерез ифрованн й транспортн й механизм TLS​15​ (а до того SSL). TLS
то криптографи еский протокол, котор й обеспе ивает за и енну переда у данн х
по сети.

Протокол позвол ет безопасно передават конфиден иал н е данн е пол зователей,

например пароли, номера кредиток, документ и тд. Сей ас тот протокол стал
стандартом абсол тно дл всех сайтов, не важно, передает пол зовател каку либо
увствител ну информа и на сайте или нет.

Современн е браузер предупрежда т пол зователей о небезопасном подкл ении при

работе с сайтами без HTTPS.

Изу аем HTTP запрос на практике

На Mac OS X и бол инстве дистрибутивов Linux по умол ани установлена консол на
утилита curl. На Windows ее можно установит самосто тел но​16​.

С помо curl можно делат HTTP запрос пр мо из терминала и видет пример тела
запроса и ответа. Как в уже могли догадат с , приложение curl в терминале в данном
слу ае в ступает клиентом.

Да, клиент также могут б т в формате консол н х утилит! Однако такие инструмент
не предназна ен дл комфортного серфинга по сети и испол зу тс дл других елей.

Вот пример запроса youtube.com:

curl youtube.com -v
* Trying . . . ...
* TCP_NODELAY ​set
* Connected to youtube.com ( . . . ) port (​

15
​https://mnorin.com/tls-ssl-neobhodimy-j-minimum-znanij.html
16
​h ps://scoop.sh/
 24

GET / HTTP/ .
Host: youtube.com
User-Agent: curl/ . .
Accept: */*

HTTP/ . Moved Permanently

Content-Length:
Location: https://youtube.com/
Date: Sun, Nov : : GMT
Content-Type: text/html
Server: YouTube Frontend Proxy
X-XSS-Protection:

* Connection ​ to host youtube com left intact

* Closing connection

И zhashkevych.com:

curl zhashkevych.com -v
* Trying . . . ...
* TCP_NODELAY set
* Connected to zhashkevych.com ( . . . ) port ( )
GET / HTTP/ .
Host: zhashkevych.com
User-Agent: curl/ . .
Accept: */*

HTTP/ . Moved Permanently

Server: nginx
Date: Mon, Nov : : GMT
Content-Type: text/html; charset iso- -
Content-Length:
Connection: keep-alive
Keep-Alive: timeout
Location: https://zhashkevych.com/
X-Host: zhashkevych.com
cache-control: max-age
cache-control: public
X-VARITI-CCR: :
Set-Cookie: ipp_uid E JSqY dOurU eGj/Yy v Ts/jO rcBINLEIQ ;
expires Tue, Dec : : GMT; path /
Set-Cookie: ipp_uid ; expires Tue, Dec : :
 25

GMT; path /
Set-Cookie:
ipp_uid /E JSqY dOurU eGj/Yy v Ts/jO rcBINLEIQ ;
expires Tue, Dec : : GMT; path /
Set-Cookie: rerf AAAAAF gKFF xFxAw MAg ; expires Wed, -Dec-
: : GMT; path /
P P: policyref /w c/p p.xml , CP CUR ADM OUR NOR STA NID

!DOCTYPE HTML PUBLIC -//IETF//DTD HTML . //EN

html head
title Moved Permanently /title
/head body
h Moved Permanently /h
p The document has moved a href https://zhashkevych.com/ here /a . /p
/body /html
* Connection to host zhashkevych.com left intact
* Closing connection

В данн х примерах возвра аем й статус код 301, поскол ку при запросе на домен
youtube.com и zhashkevych.com сервера настроенн делат редирект клиентов на
https://youtube.com/​ и ​https://zhashkevych.com/​ соответственно.

Можете поиграт с с разли н ми веб-сайтами и самосто тел но изу ит пример

запросов / ответов, как в гл д т стартов е строки, заголовки и тд.

API
Поскол ку клиент об аетс с сервером с помо запросов, ему абсол тно не важно
какие технологии испол зу тс на сервере, также как серверу все равно как в гл дит
клиентска аст . Они об а тс на основании некоего формал ного договора, описани
набора предоставл ем х сервисом услуг.

Этот договор (его е е могут наз ват контрактом или спе ифика ией) наз ваетс API
(Application Programming Interface). Это достато но ирокое пон тие, которое
примен етс к многим аспектам разработки программного обеспе ени . API - то
описание способов, котор ми одна комп терна программа может взаимодействоват с
другой.

В контексте веб-приложений API - то описание доступн х HTTP методов, URI и

форматов тела запросов и ответов.

Сам й распространенн й архитектурн й стил проектировани API в веб-приложени -

так наз ваем й REST API. Про него м поговорим более подробно в следу ей главе.
 26

Домен и DNS
Домен - то символ ное определение адреса. Согласитес , б ло б неудобно вместо
google.com вбиват в адресну строку IP-адрес по типу 178.42.76.111.

DNS (Domain Name System) - распределенна система, котора хранит информа и о

доменах и прив занн х к ним IP-адресах. Грубо говор , то “контактна книга” в мире
веб-приложений.

Она позвол ет мар рутизироват пол зовател ские запрос по доменному имени на
IP-адрес. Когда в вбиваете в браузере google.com, ва комп тер делает запрос на
DNS сервер, полу ает IP-адрес нужного сервера и уже по нему обра аетс к сервису.

Хостинг
При желании, сервер можно развернут хот у себ дома. Дл того понадобит с
комп тер со спе иал но установленн м софтом и посто нн м доступом к сети 24/7.
Однако то далеко не практи но и требует от вас много административной работ и
посто нной поддержки.

Эту проблему ре а т хостинг-провайдер , котор е предоставл т вам в деленн е

удаленн е сервера, на котор х можно запускат собственн е веб-сайт и приложени .
Такие провайдер асто да т комплекс услуг и да т вам возможност покупат
доменн е имена, настраиват DNS, запускат собственн й по тов й сервер и тд.

Более подробно о хостинге и инфраструктуре м поговорим в следу их главах.

Что стоит за простой загрузкой веб-страни в браузере?

Разобрав все в еупом нут е кон еп ии, давайте разберем про есс, котор й стоит за
об ной загрузкой веб-страни в браузере.

В вводите запрос в адресну строку

Когда в вбиваете в адресну строку браузера адрес сайта (например google.com) и
нажимаете клави у “ нтер”, браузер провер ет формат адреса и при необходимости
формирует валидн й URL, добавив префикс с протоколом (http:// или https://) и указав
порт 80 или 443 соответственно, если они отсутству т.

Поиск IP-адреса
Поскол ку протокол HTTP работает поверх протоколов TCP и IP, дл установки
соединени с веб-сервером необходимо имет его IP-адрес. Дл того браузеру
необходимо найти DNS записи дл данного им хоста (google.com).
 27

Их можно найти на DNS-серверах, но перед тим браузер п таетс найти их в своем

локал ном ке е, ке е ОС и ке е роутера. Если нигде нету актуал н х записей, он
делает запрос по сети к DNS-серверу.

На самом деле DNS-серверов о ен много и они наход тс на разн х уровн х. В перву

о еред идет обра ение к серверам ва его интернет-провайдера. Если в его запис х
нету необходимой информа ии, запрос перенаправл тс уровнем “в е”, пока
соответству а запис не будет найдена.

TCP соединение и HTTP запрос

Когда у браузера ест необходим й IP-адрес, он отправл ет запрос на установление TCP
соединени . После того отправл етс сам HTTP запрос, тело которого б ло
сформировано следу формату протокола. Браузер генерирует стартову строку и
добавл ет необходим е заголовки, такие как Host, User-Agent, заголовки дл временн х
файлов, файлов-cookie и тд.

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

Веб-сервер принимает запрос на порту 80, если испол зуетс протокол HTTP или на 443
если HTTPS. В ка естве веб-сервера может б т запу ен NGINX, Apache, л бое другое
ре ение или самописн й http сервер.

Скорее всего, http сервер перенаправл ет запрос на приложение, запу енное в про ессе
ОС, которое реализует бизнес-логику и написано на каком-нибуд з ке
программировани по типу PHP, Python, Ruby, Go, JS, C#, Java, C++ и тд. Оно
обрабат вает запрос и формирует ответ.

Или же, в слу ае стати еского сервера, он просто собирает стати еские файл и
самосто тел но формирует ответ дл клиента.

Обработка ответа ва им браузером

После того сервер пос лает ответ обратно на клиент. Браузер полу ает HTTP-ответ и
дал е на основании его отрисов вает веб-страни у. Движок веб-браузера “парсит”
HTML, CSS, JS файл и рендерит вне ний вид веб-сайта в откр той вкладке.
 28

Р 1.5

Рез ме
В данной главе поп талс описат все фундаментал н е кон еп ии работ
веб-приложений. Современн е приложени могут отли ат с особой сложност
ре аем х проблем и техни еской реализа ией, однако в основу положен базов е
прин ип и об еприн т е протокол .

Главн е тем , на котор е нужно обратит внимание:

● Клиент-серверна архитектура
● Стек протоколов TCP/IP
● Протокол HTTP

Наде с в откр ли дл себ то-нибуд новое или освежили стар е знани , и тепер
готов двигат с дал е к более детал ному изу ени серверн х приложений.
 29

Спасибо то до итали до кон а демо-верси книги! Я буду вам о ен признателен, если

в пройдете небол ой ​опрос​. Обе а , он займет у вас не бол е минут .

Приобрести полну верси книги в можете на ​моем сайте​.

Если на момент про тени данной глав книги е е нету в продаже, следите за
обновлени ми в моем ​телеграмм-канале​.