Веб-разработка: основы статического сайта

Мы поговорим о базовых вещах, не заостряя внимания на реализации статических веб-технологий. 

В самом общем смысле веб-сайт практически ничем не отличается от нативного приложения (например, Android/iOS-приложения). Разница между ними заключается в том, что функционирование веб-сайта ограничено возможностями веб-браузера. Он не может работать в системе клиента, как приложение, потому что отображается внутри веб-браузера. Иными словами, веб-сайт — это то, что понимает только веб-браузер.

Существует две основные части веб-разработки: интерфейсная (на стороне клиента) и серверная (на стороне сервера). Сначала поговорим о первой.

Веб-интерфейс

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

Каждая веб-страница представляет собой отдельный HTML-файл. Всякий раз, когда мы переходим на другой маршрут, браузер делает новый запрос, чтобы получить HTML-файл для новой страницы. Например, если вы перейдете с /home (Домашней страницы) по маршруту /about-me (Обо мне), он отправит еще один запрос на сервер, чтобы получить HTML-файл для страницы /about-me.

Лучший способ проверить это — обратить внимание на индикатор загрузки в вашем браузере. Если он показывает, что сайт загружается, вы действительно отправили запрос на сервер и браузер ждет ответа.

HTML расшифровывается как HyperText Markup Language (Язык разметки гипертекста), где HyperText означает текст, содержащий ссылки на какой-либо другой текст. По сути, именно благодаря гипертексту, вы переходите с одной веб-страницы на другую.

Вам нравится, как выглядит эта кнопка? (Кликните “Run Pen” для предварительного просмотра)

https://codepen.io/sapinder_dev/embed/wvdWZBG?

Скорее всего, нет! А как насчет этой?

https://codepen.io/sapinder_dev/embed/dyWXLoL?

Первая — это обычная кнопка HTML со стилями по умолчанию. Вторая использует CSS для применения пользовательских стилей. Ниже приведен пример кода для второй кнопки:

<!-- HTML -->
<button>I'm a Fancy Button!</button>/* CSS */
button {
  color: value; /* consider 'value' as a placeholder */
  background: value;
  border: value;
  padding: value;
  border-radius: value;
  box-shadow: value;
}

CSS расшифровывается как Cascading Style Sheets (Каскадные таблицы стилей). Полное название этих таблиц объясняет их принцип действия. Стили применяются сверху вниз в том порядке, в котором они определены, подобно каскадному водопаду. Любой повторяющийся стиль переопределяет свои предыдущие соответствующие значения, как в следующем примере:

button {
  color: white;
}/* Это переопределит предыдущее значение для параметра 'color' */
button {
  color: black;
}

JavaScript

Для современного веб-сайта недостаточно только HTML и CSS. Например, как вы убедились ранее, нажатие на красивую кнопку не производит никакого эффекта. Но на самом деле эта кнопка предназначена для того, чтобы вызывать определенное действие. Теперь нажмите на кнопку ниже и посмотрите, что произойдет.

https://codepen.io/sapinder_dev/embed/wvdWZMW?

Вы догадались — это JavaScript! 😄 Язык, который добавляет функциональности демонстрационным элементам. Так же, как HTML и CSS, JavaScript является клиентским языком; это означает, что он интерпретируется и выполняется веб-браузером. Он не может работать изначально вне веб-браузера, в отличие от C++, Java, Python и других часто используемых серверных языков.

Работа в JavaScript похожа на использование многих других языков. Например, в следующей инструкции объявляется переменная с именем myName, с которой мы можем делать все, что угодно.

var myName = 'Sapinder Singh';

Мы можем использовать эту переменную по мере необходимости. Но в JavaScript мы хотим работать не только с этими переменными, но и с элементами HTML, присутствующими на странице! Как же работать с HTML-элементами в JavaScript?

Вам наверняка приходилось слышать о таком понятии, как API (Application Programming Interface; по-русски: “программный интерфейс приложения”). Как следует из названия, API служит интерфейсом различным программным продуктам для обеспечения взаимодействия и обмена данными между ними.

При взаимодействии с HTML JavaScript требует DOM API, который расшифровывается как Document Object Model (объектная модель документа). Он предоставляет языку JavaScript HTML-документ в виде объектной модели. Корнем этого перевернутого древовидного объекта является сам документ. Каждый элемент в документе получает свой собственный узел, глубина которого зависит от количества содержащихся в нем дочерних элементов.

Поэтому, чтобы выбрать “Fancy Button” в JavaScript с помощью DOM API, я должен сделать следующее:

// предполагаем, что у кнопки есть идентификатор
var fancyButton = document.getElementById("fancy-button");

Вместо того, чтобы присваивать обычное значение какой-либо переменной, мне нужно присвоить ей элемент DOM. Затем я могу рассматривать эту переменную как фактический элемент на странице. Следующая инструкция реализует часть этого “клика” по кнопке.

/* Не волнуйтесь, если не понимаете синтаксис, вам только надо разобраться, как это работает. */

fancyButton.onclick = () => alert("I've been clicked! :)");

Таким образом, HTML, CSS и JavaScript формируют основу интерфейса современного веб-сайта. Это открывает перед нами несколько возможностей:

  • иметь в наличии один или несколько HTML-файлов (и другие дополнительные файлы, такие как .css, .js и т.д., связанные внутри HTML);
  • открыть корневой HTML-файл в любом веб-браузере;
  • видеть, как он отображается в виде веб-страницы.

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

Веб-сервер

Веб-сервер необходим для того, чтобы обслуживать наши веб-страницы по всему миру. Для этой задачи у нас есть множество серверных языков, таких как Java, PHP, Ruby, Python, C++ и т.д. Я упоминал ранее, что JavaScript — это клиентский язык, потому что он не может быть запущен вне веб-браузера и действовать как веб-серверный. Теперь я готов признать: это не совсем так! 😅

Знакомьтесь: Node.js

Node.js — это среда выполнения JavaScript. Среда выполнения сочетает в себе различные инструменты и технологии, которые обеспечивают условия, подходящие для запуска определенной программы или приложения.

Ваш веб-браузер также обеспечивает среду выполнения для JavaScript, которая предоставляет различные API для основного движка JavaScript, в том числе:

  • DOM для парсинга HTML;
  • хранилище API для резервации данных веб-сайта в системе клиента;
  • CSSOM для управления стилями с помощью JavaScript.

Однако основной частью среды выполнения JavaScript является движок JavaScript.

Google Chrome и другие веб-браузеры, работающие на базе Chromium, используют для запуска JavaScript движок Google V8, написанный на C++. Интересно, что Node.js применяет тот же движок. Но вместо предоставления таких интерфейсов, как DOM API и ему подобных, он использует другие инструменты. Они обеспечивают доступ к операционной системе, файловой системе, компьютерной сети и т. д. Это позволяет использовать JavaScript в качестве серверного языка.

В настоящее время Node.js — популярный выбор среди серверных языков. Главное преимущество для тех, кто работает с интерфейсной частью, заключается в отсутствии необходимости изучать другой язык, чтобы настроить сервер! Все готово, если вы достаточно хорошо знаете JavaScript.

Работа сервера

Сервер всегда находится в состоянии рабочей готовности (если не крашнулся! 🙄), принимая запросы и отправляя соответствующие ответы клиентам. Тип ответа сервера зависит от метода (вида) пользовательского запроса. Ниже приведены два наиболее широко известных метода запроса, используемых по протоколу HTTP:

  • GET — метод, который следует использовать для извлечения ресурса с сервера; например, когда вы посещаете какой-либо веб-сайт, браузер отправляет запрос GET на сервер с просьбой указать веб-страницу, находящуюся на этом маршруте;
  • POST — метод, который рекомендуется применять для публикации/отправки данных на сервер, обычно при создании нового ресурса; когда вы заполняете веб-форму, то она в основном использует метод POST, как показано в приведенном ниже фрагменте.
<!-- HTML -->
<form method="POST">
  <!-- The form fields go here -->
</form>

Мы не станем уделять внимание реализации того, как сервер обрабатывает запросы и ответы в Node.js: вам, как новичку, будет сложно в этом разобраться. Вот псевдокод для выполнения подобной работы:

СОЗДАЙТЕ http-сервер с помощью http.createServer()
ВЫЗОВИТЕ server.listen() чтобы активировать сервер

// Теперь обрабатывайте запросы с разных маршрутов, например, '/home' или любого другого маршрута

IF request.url EQUALS '/home'
  SEND '/home.html'

ELSE IF request.url EQUALS '/create-user'

// пользователь хочет посетить страницу, на которой он может создать новую учетную запись
  IF request.method EQUALS 'GET'
    SEND '/create-user.html'

// если метод POST, это означает, что пользователь отправил форму по маршруту '/create-user'
  ELSE IF request.method EQUALS 'POST'
    SEND newlyCreatedAccount

Теперь вы получили общее представление о сервере. Вы наверняка заметили обработчика метода POST на маршруте /create-user. Так мы пытаемся создать нового пользователя на основе данных, полученных с помощью объекта request, а затем предоставить пользователю newlyCreateAccount. Но нам нужно сохранить эту учетную запись, чтобы запомнить ее в будущем. Итак, пришло время перейти к следующему разделу.

Базы данных

Возможно, у вас уже есть представление о том, что такое база данных. Это своеобразное хранилище данных с определенным способом организации и работы с данными. Распространенным понятием, относящимся к базам данных (вы наверняка с ним сталкивались), является CRUD. Эта аббревиатура означает: создание (Create), чтение (Read), обновление (Update) и удаление (Delete). Перечисленные четыре операции являются самыми важными из тех, которые выполняет база данных.

Среди множества типов баз данных, выделяют две основные категории: реляционные и нереляционные. Иногда их также называют SQL (Structured Query Language; по-русски: “язык структурированных запросов”) и NoSQL соответственно. Рассмотрим каждую из них:

  1. Реляционные / базы данных SQL предназначены для хранения данных в табличном формате, где каждая строка представляет сущность, а каждый столбец содержит определенные данные об этой сущности, такие как имя, адрес и т.д. MySQL и PostgreSQL — две популярные реляционные базы данных, о которых следует знать при работе с Node.js.
  2. Нереляционные / базы данных NoSQL созданы для хранения данных в любом виде (“не” в названии “нереляционные” означает “не только”). Следовательно, базы данных NoSQL более гибки, чем их аналоги SQL. Самые популярные варианты NoSQL с Node.js — MongoDB и Redis.

Выбор базы данных зависит от типа данных, которые вы собираетесь хранить. Рекомендуется изучить различные варианты, прежде чем сделать выбор, чтобы получить оптимальную производительность.

Серверные API

Вы когда-нибудь задумывались, как приложение погоды в вашем мобильном телефоне собирает такое количество метеоинформации? А как Google maps определяет местоположение? А откуда небольшое приложение для стран отдыха получает столько данных?

Все это делается с помощью API. Серверный API похож на веб-сервер, но, вместо обслуживания веб-приложения, он передает данные другим приложениям, чтобы они могли их использовать. Приложение для стран отдыха использует Rest Countries API для получения данных обо всех странах. Посетив эту конечную точку, вы получите большой объем данных вместо html-страницы.

Конечную точку можно считать целевым пунктом назначения. Мы можем посетить его, чтобы получить данные или выполнить какое-либо другое действие. Например, приведенный выше API предлагает множество конечных точек для получения различных фрагментов данных. Чтобы понять, что я имею в виду, посетите следующие конечные точки, которые позволят вам получить данные только об отдельных странах.

В серверном API может быть любое количество конечных точек. Но при этом API должен соответствовать хорошо продуманной архитектуре, чтобы быть доступным и поддерживаемым в крупномасштабном проекте. Стандартный протокол для веб-API заключается в использовании архитектуры RESTful.

Подытожим сказанное к этому моменту:

  1. HTML, CSS и JavaScript работают вместе на стороне клиента.
  2. Сервер обрабатывает запросы/ответы клиентов, используя Node.js.
  3. Данные хранятся в базах данных.
  4. API можно использовать вместо приложения.

Теперь перейдем к следующему разделу.

Хостинг-провайдеры и домены

Так называемый веб-сервер, о котором вы уже знаете, находится только в вашем локальном компьютере. Вы можете запустить его в фоновом режиме и открыть в браузере, например в локальном хостинге localhost:8000, чтобы зайти на свой веб-сайт. 8000 — это номер порта. Но если вы хотите, чтобы ваш сервер был доступен всему миру, вам следует разместить его не на своем компьютере, а где-то в другом месте. Для этого нужно развернуть ваше приложение у хостинг-провайдера, который будет запускать ваш сервер в режиме 24/7 на своих огромных машинах.

Там вам также понадобится доменное имя, чтобы люди могли получить доступ к вашему серверу в Интернете, потому что теперь до него нельзя добраться через локальный хостинг. Доменное имя — это часть URL-адреса *.com. Например, в URL-адресе моего веб-сайта https://blog.sapinder.dev доменное имя sapinder.dev, где dev — это домен верхнего уровня, такой же, как com, org и т. д. Вам также стоит знать, что blog — это поддомен.

Интересный факт: у вас может быть любое количество поддоменов, как только вы станете владельцем доменного имени. Кроме того, www тоже является поддоменом!

Помимо покупки доменного имени, вы также должны регулярно платить своим хостинг-провайдерам, потому что они управляют вашим сервером в режиме 24/7. Но большинство хостинг-провайдеров предлагают бесплатные услуги с ограниченными ресурсами, и вы можете обновлять свои аккаунты по мере роста своих требований. Бесплатные сервисы, предоставляющие бесплатные домены, — то, что нужно для новичков! Главное предостережение заключается в том, что такие домены заканчивается по умолчанию доменным именем провайдера. Например,*.herokuapp.com от Heroku, *.netlify.app от Netlify и так далее. Если вы хотите получить собственное доменное имя, чтобы придать проекту черты профессионализма, вам придется это имя купить.

Управление версиями

Поддержка кода также очень важна, поскольку это единственный способ выявить и исправить накопившиеся ошибки, а также добавить новые функции в приложение. Системы управления версиями (Version Control Systems, или VSC) позволяют отслеживать и добавлять изменения. Они способны даже осуществить полный возврат приложения к предыдущей версии! Настолько мощными могут быть эти системы.

Наиболее широко используемой VSC является Git. Вот несколько понятий, которые вы должны знать при использовании Git:

  1. Отдельная ветка проекта. Ветвление позволяет разработчикам разделять свои кодовые репозитории на отдельные ветки, каждая из которых предназначена для определенной цели (к примеру, я обычно поддерживаю две различные ветки для своего кода, а именно основную и разрабатываемую; первая — это ветка по умолчанию при git-реализации, вторую я сохраняю для стадии разработки); количество и назначение веток может увеличиться в крупномасштабных проектах.
  2. Индексирование. В git есть область индексирования, в которой хранятся все изменения, готовые к внесению в код. Мы добавляем измененные файлы в нашем коде в область индексирования с помощью команды git add <file-name>, чтобы иметь возможность просмотреть изменения перед окончательной фиксацией, что приводит нас к следующему пункту.
  3. Фиксация. После тестирования изменений запускается команда git commit, которая, наконец, создает новую версию в истории git для кодового репозитория.
  4. Слияние. Мы можем объединить изменения, внесенные в любую ветку, с изменениями другой ветки. Допустим, я внес изменения в разрабатываемую ветку и протестировал их; теперь я могу выполнить операцию слияния изменений в основной ветке, чтобы опубликовать изменения на сервере.

Удаленные репозитории

Какова вероятность того, что код вашего приложения, сохраненный в каком-либо месте вашей локальной системы, будет всегда в безопасности? Что делать, если он будет удален или к нему получит доступ кто-то посторонний? Вы поняли: вам нужно хранить его в Интернете, чтобы только вы могли получить к нему доступ в любое время и в любой системе. Если каким-то образом вы потеряете локальный репозиторий, то сможете клонировать его из вашего удаленного репозитория вместе со всей историей git!

Удаленные репозитории не всегда являются частными, но при этом остаются общедоступными. Они известны как проекты с открытым кодом, в которые может внести свой вклад любой желающий, потому что их исходный код (или просто код) доступен всем разработчикам сообщества. К примеру, Firefox, Node.js, VLC-плеер, Linux — это проекты с открытым исходным кодом, в которые может внести свой вклад любой желающий.

Среди облачных/удаленных платформ репозиториев можно выделить две наиболее популярные — Github и Gitlab, причем первая является ведущим решением. Это что-то вроде Facebook для разработчиков и программистов, которые демонстрируют свои проекты, а также поддерживают их.

Читайте также:

Читайте нас в Telegram, VK и Дзен

Перевод статьи Sapinder Singh: Web Development: The Static Fundamentals

Предыдущая статьяСоздание приложения-планировщика в React с Easy Peasy и Ant Design
Следующая статьяЧто мы ожидаем от разработчиков на каждом уровне