Главная страница » Что такое статическая веб страница

Что такое статическая веб страница

  • автор:

Статический веб: возврат к истокам?

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

Сначала была статика.

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

И то, и другое — социальные сети, но создание страницы на MySpace требовало базового понимания HTML и CSS. В конце концов, сайт открылся в 2003 году. С другой стороны, простой в использовании интерфейс Facebook помог расширить аудиторию до двух с лишним миллиардов пользователей.

    WYSIWYG (What You See Is What You Get) — как следует из названия, в этой парадигме цель состоит в том, чтобы редактор как можно точнее показывал окончательный рендеринг. Одним из первых сторонников такого подхода был WordPress, позже присоединились другие. Онлайн-редактор Medium (показанный ниже) на базе TinyMCE считается одним из лучших WYSIWYG-редакторов в интернете.

Восход WordPress

WordPress быстро захватил интернет: в настоящее время у него около 60% рынка CMS. Он настолько распространён, что его можно рассматривать как глобальную веб-платформу: около трети всех сайтов в интернете используют WordPress.

Успех не означает релевантность. На самом деле опытные пользователи отказываются от WordPress по разным причинам:

  • Редактирование: работа с WP, даже с новым Guttenberg — настоящее мучение. Редактор медленный, неуклюжий и поставляется с запутанной блочной логикой. Попытки отформатировать и отредактировать контент приводят к пустой трате времени и поиску альтернативных вариантов. Кроме того, он по умолчанию не поддерживает никаких «интеллектуальных функций», таких как сноски или таблицы. Они требуют абсурдно сложного рабочего процесса или ещё одного плагина.
  • Безопасность: из-за своего успеха WordPress стал главной целью хакеров. Любой крупный WP-сайт должен реализовать дополнительные меры защиты (плагины?) для обработки различных типов атак. Кроме того, WordPress поддерживает все версии PHP от 5.2.4 (выпущенной 12 лет назад) до 7.2. Добавьте все плагины и темы — и вы получите бесконечный список атак. Вот обзор самых распространённых.
  • Производительность: из коробки у WordPress ужасная производительность. С некоторыми плагинами (кэш, CDN. ) и другими настройками вы можете его ускорить — но вы хотите этим заниматься? Разве смысл веб-фреймворка не в минимизации усилий по оптимизации?
  • Раздутие плагинами: из-за всех плагинов, необходимых WordPress, он в конечном итоге замедляет работу сайта и ухудшает безопасность. Свежая установка WP требует 5−10 плагинов для работы и 10−15 для «оптимизации»: кэширование/минификация, CDN, сжатие изображений, SEO (YoastSEO, RankMath), редиректы, безопасность, борьба со спамом в комментариях, форматирование (синтаксис кода, внешние ссылки и др.). Любая дополнительная функция требует установки ещё одного плагина: многоязычность, кнопки социальных сетей, импорт Markdown, сноски, генерация содержания, карусели.

Сделаем его статичным!

Когда WordPress вышел в 2003 году, у него почти не было конкурентов. Но это было 15 лет назад. Позже появились интересные инструменты и фреймворки для форматирования текстов, а также для публикации и рендеринга. Развитие шло параллельно, что проложило путь для статического веба.

Начнём с редактирования и сосредоточимся на Markdown.

Восход Markdown

В то время как WordPress становился всё жирнее и жирнее, росла популярность альтернатив как для публикации сайтов, так и для форматирования контента.

Новые облегчённые языки разметки, такие как Markdown, предлагают надёжную альтернативу для редактирования контента. Они подходят даже пользователям нетехнического профиля. Достаточно потратить час на изучение шпаргалки — и вы сократите время форматирования текстов практически до нуля.

Действительно, Markdown достаточно прост, быстр в освоении, при этом невероятно мощен. При использовании Markdown и некоторых сочетаний клавиш автор может одновременно писать и форматировать свой контент. Кроме того, Markdown предлагает множество вариантов экспорта (HTML, PDF, LaTex, doc. ) и гарантирует, что форматирование сохранится независимо от формата.

Наконец, Markdown позволяет работать с текстовыми объектами (сноски, теги, ссылки на разделы, оглавление, графики и диаграммы) на уровне документа вместо внедрения ещё одного слоя абстракции. Это значительно улучшает поддерживаемость и переносимость контента.


Пример архитектуры JAMstack

Управление версиями нравится не только программистам, но и писателям!

Управление версиями и разработка на Git быстро распространились в мире программного обеспечения — и по веским причинам. Это повышение надёжности и безопасности всего процесса разработки. Кроме того, система управления разрешениями пользователей, логика ветвей и доступ к полной истории файлов, а также возможность сравнивать файлы между версиями — невероятно полезные функции, чтобы избежать неправильных изменений или исправить их.

В то время как разработчики получили все эти причудливые инструменты, писатели по-прежнему редактировали свои статьи в Word, чтобы скопировать их в WYSIWYG-редактор WordPress, а затем начать борьбу с форматированием. Почему бы не поделиться вкусностями?

В конце концов, как это ни парадоксально, но репозитории Github представляют собой весьма убедительную CMS:

  • Простое управление доступом. Логика ветвей подходит для редактирования и публикации текстов. Например, если нужно строго контролировать публикацию контента, то полномочия на слияние в главную ветку можно выдать только главному редактору.
  • Логика ветвей. При использовании репозитория в качестве CMS ветви могут служить разным целям. Можно использовать одну ветвь в качестве промежуточной среды, чтобы авторы могли оценить окончательный рендеринг контента на своей машине.
  • История файлов. С репозиториями GitHub вы получаете доступ ко всей истории файлов и легко сравниваете версии. Это удобно, особенно если в блоге много разных авторов.
  • Не требуется установка. Репозиторий можно открыть одним щелчком мыши. В сервисе вроде Netlify ещё один щелчок — и блог в онлайне.

Жирные страницы отсекают аудиторию

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

Средний размер сайта сейчас намного превышает 3 МБ, по состоянию на 2017 год. Но намного важнее изменение структуры веб-страницы. Для справки, вот эволюция средней страницы с 2011 года:


Раздувание средней веб-страницы. Источник: Speed Matters

Для сравнения, в нашем блоге главная страница весит 10 КБ, а средняя страница (включая изображения) — около 400 КБ.

У нас с вами, вероятно, современные ноутбуки и смартфоны с приличной скоростью доступа. Как насчёт тех, кто живет в странах с плохим интернетом? Большая часть интернета состоит из текста: он должен быть лёгким.

Помните о пользователях

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

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

Пользователи уходят с медленных сайтов

Давайте просто спросим у разработчиков сайтов, которые в 12 раз массивнее, чем должны быть: откуда у вас столько ненависти? В идеальных условиях среднестатистическому пользователю со средним подключением 7,2 Мбит/с требуется более трёх секунд, чтобы загрузить одну страницу.

Каков эффект? Нил Патель, известная фигура в SEO-сообществе, сделал очень подробную инфографику на эту тему. По его оценкам, 40% (на мобильных устройствах 53%) пользователей уходят со страницы, загрузка которой превышает три секунды. Таким образом, возникает абсурдная ситуация:

Новостные, медийные и другие сайты теряют до 40% аудитории из-за низкой производительности, обусловленной необоснованным выбором динамического рендеринга. Эта цифра не включает трафик с поисковых систем из-за ухудшения SEO.

Так что давайте снимем жир. Зачем столько скриптов? Неужели в 2019 году так сложно реализовать правильную обработку изображений (изменение размера, сжатие, порядок загрузки)?

Переходим на статику

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

Для своего блога мы выбрали фреймворк Hugo, он помог оптимизировать процесс редактирования контента и добиться впечатляющих результатов органического поиска:


Переходы с поисковых систем (органика)

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

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

Статические и динамические сайты — в чем разница и что выбрать.

Любые сайты в интернете, можно разделить на два типа: статические и динамические.

Статические и динамические сайты

Вроде всё просто, пока не начнешь глубже копать эту тему. Например, сайт может быть динамичным, но при этом содержать статические элементы, а может быть наоборот, статичный сайт с динамическими элементами.

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

Что может быть статическим или динамическим?

При обсуждении, является ли сайт статичным или динамичным, вначале нужно определить, какой аспект сайта вы обсуждаете. Эти аспекты можно разделить на три вида:

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

Код страницы сайта

Доставка

Доставка веб-страницы также может быть статической или динамической. Статическая доставка — это предварительно обработанные страницы, которые обычно кэшируются и доставляются через сеть доставки контента (CDN). Динамические страницы генерируются в реальном времени после запроса к серверу.

Браузер клиента

Браузер также может повлиять на то, является ли сайт статическим или динамическим. Статические сайты остаются неизменными для всех, кто обращается к ним, независимо от браузера. Даже если сайт не использует запросы к базе данных на сервере, но он может изменять страницу на стороне клиента с помощью Javascript.

Основные различия между динамическими (серверный рендеринг) и статическими (рендеринг на стороне клиента) сайтами

Вначале использования Интернета, все веб-страницы отображали одинаковый контент для каждого пользователя. Со временем многие веб-сайты стали использовать базы данных и такие серверные языки программирования, как Python, PHP, ASP, Ruby, Java и другие. Это позволило сайтам стать динамическими и отображать контент для пользователя в зависимости от настроек или ввода определенной информации.

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

Что такое динамический веб-сайт?

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

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

Сайт ВКонтакте

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

Преимущества динамических сайтов

Работа с базой данных

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

Использование CMS

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

Всё это обеспечивает гибкость при создании сайтов, а также CMS часто позволяют работать с сайтом сразу нескольким пользователям, (SEOшники, авторы, редакторы и прочие). И что самое интересное, пользователи могут управлять сайтом, не вдаваясь в программирование.

Низкая стоимость текущего обслуживания

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

Недостатки динамических сайтов.

Ограничения на дизайн

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

Если взять популярную CMS WordPress, то хотя здесь представлено большое количество самых разных шаблонов оформления, но фактически, веб-мастер всё равно не получает идеальный дизайн, который он хотел-бы использовать. Выбор дизайна, даже в WordPress, это всегда компромиссы. Как самому установить шаблон читайте в этой статье.

Выбор темы в WordPress

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

В зависимости от CMS может быть сложно применить сразу несколько дизайнов на одном сайте, чтобы отобразить разный тип контента на одном сайте. К примеру, вы не сможете сделать сильно отличную страницу с информацией о заказе, со страницей оплаты товара.

Динамичный сайт, может потребовать больших затрат.

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

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

Что такое статический сайт.

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

У выбора статичного сайта также есть свои преимущества и недостатки.

Преимущества.

Гибкость

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

Стоимость

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

Обслуживание такого сайта, также намного проще, а значит и дешевле. Причем, если например, WordPress тоже легко разместить на хостинге, то вот в случае возникновения различных проблем, таких как резко возросшая нагрузка на хостинг, справится будет сложно, а значит, скорее всего придется нанимать специалистов, что будет стоить дорого.

Время загрузки

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

Недостатки.

Более сложное обновление.

Создать статический сайт можно с помощью различных инструментов, наподобие Adobe XD, но вот редактировать такой сайт, будет уже намного сложнее. И если вы не знакомы с HTML, CSS и с веб программированием, то весьма вероятно, вам придется просить других специалистов, чтобы они внесли даже простые изменения.

Программа Adobe XD

Более сложное масштабирование.

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

Стоимость.

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

Так что выбрать?

Если говорить про весь интернет в целом, то уже давно динамические сайты в большинстве. Сейчас уже почти не осталось статических сайтов.

Особенно это актуально для технически сложных сайтов, таких блоги или интернет магазины.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

Веб-сервер

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

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

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

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

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

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

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

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

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

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

  • GET — метод, который следует использовать для извлечения ресурса с сервера; например, когда вы посещаете какой-либо веб-сайт, браузер отправляет запрос GET на сервер с просьбой указать веб-страницу, находящуюся на этом маршруте;
  • POST — метод, который рекомендуется применять для публикации/отправки данных на сервер, обычно при создании нового ресурса; когда вы заполняете веб-форму, то она в основном использует метод POST, как показано в приведенном ниже фрагменте.

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

Теперь вы получили общее представление о сервере. Вы наверняка заметили обработчика метода 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 предлагает множество конечных точек для получения различных фрагментов данных. Чтобы понять, что я имею в виду, посетите следующие конечные точки, которые позволят вам получить данные только об отдельных странах.

  • Индия — https://restcountries.eu/rest/v2/alpha/in;
  • США — https://restcountries.eu/rest/v2/alpha/us;
  • Франция — https://restcountries.eu/rest/v2/alpha/fr.

В серверном 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 для разработчиков и программистов, которые демонстрируют свои проекты, а также поддерживают их.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

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

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

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

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

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

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

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

Веб-сервер

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

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

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

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

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

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

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

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

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

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

  • GET — метод, который следует использовать для извлечения ресурса с сервера; например, когда вы посещаете какой-либо веб-сайт, браузер отправляет запрос GET на сервер с просьбой указать веб-страницу, находящуюся на этом маршруте;
  • POST — метод, который рекомендуется применять для публикации/отправки данных на сервер, обычно при создании нового ресурса; когда вы заполняете веб-форму, то она в основном использует метод POST, как показано в приведенном ниже фрагменте.

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

Теперь вы получили общее представление о сервере. Вы наверняка заметили обработчика метода 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 предлагает множество конечных точек для получения различных фрагментов данных. Чтобы понять, что я имею в виду, посетите следующие конечные точки, которые позволят вам получить данные только об отдельных странах.

  • Индия — https://restcountries.eu/rest/v2/alpha/in;
  • США — https://restcountries.eu/rest/v2/alpha/us;
  • Франция — https://restcountries.eu/rest/v2/alpha/fr.

В серверном 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 для разработчиков и программистов, которые демонстрируют свои проекты, а также поддерживают их.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *