Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос нашим менторам. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Архитектура Веба

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

Современный веб несколько сложнее благодаря WebSocket, что существенно влияет на принципы разработки сайтов, которые активно его используют. Однако веб-сокеты не замена обычному способу взаимодействия, а дополнение, необходимое для некоторых ситуаций. К таким задачам относится любое взаимодействие в реальном времени (real-time), например, чаты или многопользовательские игры

http session

Принцип взаимодействия с любым сайтом сводится к следующим шагам (сам процесс сложнее, но нас интересует только взаимодействие с приложением):

  1. Пользователь запрашивает страницу сайта
  2. Браузер выполняет HTTP-запрос к веб-серверу
  3. Веб-сервер возвращает содержимое страницы в HTTP-ответе
  4. Браузер отрисовывает страницу сайта
  5. Пользователь кликает по ссылке на сайте и весь процесс повторяется снова.

Каждый такой цикл включает в себя HTTP-сессию: HTTP-запрос и HTTP-ответ. Проще всего увидеть HTTP-сессию, используя утилиту curl:

$ curl -v --head http://code-basics.ru
* Rebuilt URL to: http://code-basics.ru/
*   Trying 100.102.175.148...
* TCP_NODELAY set
* Connected to code-basics.ru (100.102.175.148) port 80 (#0)
# Ниже приведён запрос
> HEAD / HTTP/1.1
> Host: code-basics.ru
> User-Agent: curl/7.54.0
> Accept: */*
>
# А это ответ
< HTTP/1.1 200 OK
< Date: Wed, 04 Jul 2018 08:38:22 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 7902
< Connection: keep-alive
< Server: nginx/1.15.1

<
* Connection #0 to host code-basics.ru left intact

Как видно, принцип взаимодействия не зависит от того, на чём написан сайт. С точки зрения сайта, всегда есть запрос, который нужно обработать и вернуть ответ в виде, например, HTML. То, каким будет HTML для конкретного запроса, определяется самим запросом, то есть запрошенной страницей и различными параметрами HTTP (к примеру, заголовки). В конечном итоге, код сайта представляет из себя набор обработчиков разных страниц, которые принимают входящие запросы, формируют ответ и возвращают его. Ниже вы увидите примеры на разных языках. Даже не зная синтаксиса достаточно легко уловить общую структуру всех примеров кода: функция-обработчик, привязанная к конкретной странице.

PHP

<?php

use Slim\Factory\AppFactory;
$app = AppFactory::create();

$app->get('/', function ($request, $response) {
    return $response->write('Welcome to Slim!');
});

$app->get('/about', function ($request, $response) {
    return $response->write('About My Site');
});

$app->run();

Ruby

require 'sinatra'
get '/frank-says' do
  'Put this in your pipe & smoke it!'
end

Python

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
  return "Hello World!"

Java

import static spark.Spark.*;

public class HelloWorld {
    public static void main(String[] args) {
        get("/hello", (req, res) -> "Hello World");
    }
}

JavaScript

import Express from 'express';
const app = new Express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

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

Самостоятельная работа

  1. Выполните запрос curl --head https://hexlet.io. Изучите отправляемые и возвращаемые заголовки
  2. Откройте в браузере консоль разработчика, перейдите в ней на вкладку Network (Сеть) и загрузите https://ru.hexlet.io в этой вкладке. Изучите, какие запросы делает сайт (и с какими заголовками), а также то, что приходит в ответ.

<span class="translation_missing" title="translation missing: ru.web.courses.lessons.mentors.mentor_avatars">Mentor Avatars</span>

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят менторы из команды Хекслета или другие студенты.

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
115
курсов
892
упражнения
2241
час теории
3196
тестов

Зарегистрироваться

или войти в аккаунт

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 115 курсов, 2000+ часов теории
  • 800 практических заданий в браузере
  • 250 000 студентов

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Rambler
Логотип компании Bookmate
Логотип компании Botmother

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг».