Привет и добро пожаловать в первую часть моей серии статей о Дорожной карте для разработчиков интерфейсов! Для тех из вас, кто не знает, дорожная карта — это фантастический учебный ресурс, разработанный и поддерживаемый Камран Ахмед. Пожалуйста, зайдите на сайт и на страницу Камрана! Если вы не найдете мой контент полезным, вы можете проверить все удивительные ресурсы, доступные на его сайте!

И для тех, кто задается вопросом, почему я создаю эту серию, когда ресурсы уже есть:

  1. Я хочу вернуться ко всем этим темам, чтобы укрепить свои знания.
  2. Я хотел бы предоставить некоторую значимую или полезную информацию другим

Большая часть начального контента будет предназначена для начинающих, однако я ожидаю, что по мере того, как мы достигнем некоторых из более сложных тем, мы можем перейти на более средний/продвинутый уровень. Итак, без лишних слов — начнем!

Как работает Интернет?

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

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

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

Что такое HTTP?

HTTP означает Протокол передачи гипертекста. Это протокол для передачи данных через Интернет, который является основой Всемирной паутины. Давайте по-быстрому прокачаем тормоза и разберем это немного подробнее, потому что здесь есть важное различие.

Всемирная паутина и Интернет обычно рассматриваются как одно и то же, и многие люди считают, что эти термины являются синонимами. Однако на самом деле это две разные вещи. Интернет — это название обширной сети устройств, которую мы обсуждали ранее. Все эти устройства обмениваются данными, используя группу протоколов, называемую TCP/IP, которая включает в себя протокол управления передачей (TCP), протокол пользовательских дейтаграмм (UDP) и Интернет-протокол (IP). Именно на основе этих основополагающих протоколов и существует Всемирная паутина, как система в Интернете. Если вам интересно узнать о происхождении Интернета и о том, как появилась каждая из этих технологий, я предлагаю вам прочитать об ARPANET, которая финансировалась Министерством обороны США в попытке узнать, как компьютеры могут удаленно и эффективно совместно использовать ресурсы.

С этим покончено, давайте вернемся в нужное русло. Точно так же, как Интернет имеет свой собственный набор правил и норм, известных как протоколы, так же и Сеть. В протоколы Интернета инкапсулирован другой набор протоколов, установленных Всемирной паутиной. Самый известный из них — HTTP. Если вы посмотрите на URL-адрес в своем браузере, когда читаете это, вы увидите, что перед ним стоит «https://», который также известен как Защищенный протокол передачи гипертекста или просто HTTPS. . Они практически одинаковы с одной оговоркой: «Безопасный» в HTTPS относится к шифрованию, которое используется при его реализации. Мы вернемся к этому более подробно позже, но сейчас мы можем думать о них как об одном и том же.

Первая версия HTTP, известная как HTTP/0.9, была создана Тимом Бернерсом-Ли. С момента своего создания он претерпел множество изменений и обновлений, самым последним из которых является HTTP/3.0, выпущенный в 2022 году. В HTTP/0.9 Бернерс-Ли описал протокол, в котором клиент и сервер могут общаться, используя что-то известное. как метод GET. Клиент и сервер договариваются (на основе HTTP), что они могут отправлять друг другу запрос GET, чтобы запросить часть данных.

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Accept-Language: en-US,en;q=0.5

Вот простой пример запроса GET, использующего HTTP/1.1. Запрос просит сервер получить файл index.html с веб-сайта www.example.com. Обратите внимание, что последние три строки начинаются с имени, затем двоеточия и, наконец, фрагмента данных. Эти три строки называются Заголовки, и их цель — описать получаемый запрос.

Заголовок «Host» указывает доменное имя сервера, а заголовок «User-Agent» определяет клиентское программное обеспечение и операционную систему. Заголовок Accept-Language указывает предпочтительный язык для ответа.

Именно так, в простейшей форме, мы взаимодействуем с большинством веб-страниц! Когда вы попали на эту статью, ваш компьютер отправил запрос на «www.medium.com» с запросом ресурсов, составляющих этот пост, и после прохождения соответствующих каналов и линий связи сервер получил, обработал и вернул этот запрос на вашего браузера в виде HTML, JavaScript и CSS.

В дополнение к методу запроса GET в более новых версиях HTTP у нас также есть доступ к HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE и >PATCH методы запроса, каждый из которых служит своей цели. Мы коснемся их позже и углубимся в то, что они делают, но сейчас все, что вам нужно знать, это то, что эти HTTP-запросы — это то, как данные перемещаются с серверов в ваш браузер! Если вы нашли этот раздел особенно интересным и хотели бы потратить некоторое время на изучение различных методов, посетите эту страницу документации Mozilla о методах HTTP-запросов.

Как работают браузеры?

Браузеры, такие как Firefox и Chrome, работают, обрабатывая эти методы HTTP-запросов за кулисами. Как указывалось ранее, метод GET является наиболее распространенным, поскольку он позволяет пользователю (в данном случае веб-браузеру) запрашивать определенный набор ресурсов (т. е. веб-страницу и ее активы), которые затем визуализируется и, возможно, выполняется браузером.

Для самых простых сайтов запросы GET обычно возвращают только HTML и простой CSS. На более продвинутых сайтах JavaScript также может быть отправлен в браузер. JavaScript — это язык сценариев, который позволяет разработчикам создавать динамический контент для конечных пользователей и их браузеров. Другими словами, JavaScript берет то, что в противном случае было бы статичным и простым веб-сайтом, и позволяет нам кодировать определенные действия и поведение, которые раньше были невозможны с помощью чистого HTML и CSS. Это еще одна функция современных веб-браузеров — действовать как своего рода интерпретатор любого JavaScript, который сервер может возвращать вместе с веб-страницей.

Простой способ думать о веб-браузерах на данный момент состоит в том, что они в основном являются переводчиками. Они получают язык (HTML, CSS и JavaScript), который непонятен обычному человеку, и превращают его в красивый веб-сайт для обычного потребителя.

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