Как использовать JavaScript, чтобы оживить ваш контент

В статье Сила статики я объяснил некоторые преимущества публикации контента в виде статического сайта: простой набор HTML-файлов, а не более сложный сайт, основанный на языке сценариев. Одним из недостатков, который я упомянул, было отсутствие гибкости, хотя я кратко упомянул об этом:

С постоянно растущей популярностью JavaScript существуют варианты «наслоения» персонализации поверх статической страницы после того, как она будет доставлена ​​в браузер пользователя.

Теперь я хочу изучить эту концепцию немного подробнее.

Все материалы примеров доступны в соответствующем репозитории GitHub.

Сервер против клиента

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

Что обеспечивает эту силу? JavaScript. JavaScript выполняется на клиентской стадии всего процесса, другими словами, в браузере/компьютере, за которым сидит наш читатель. Клиент — это «мы», избалованный работодатель в предыдущей аналогии. Наконец-то нам придется выполнять некоторую работу для себя, но часто это является преимуществом, потому что:

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

Владейте своими данными

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

Как владелец сайта, вы можете подумать о том, чтобы сказать своим читателям: «Вот что я хочу сказать, делайте с этим, что хотите» — по сути, это подход, который мы можем применить при использовании статического сайта, дополненного JavaScript.

Хватит уже теории

Время для некоторых примеров. Начнем с тривиального: вставка времени в документ.

Серверная часть

Мы можем использовать PHP-скрипт, чтобы легко вставить время, когда страница запрашивается с сервера:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example one</title>
</head>
<body>
    <h1>Hello</h1>
    <p>The time is <b><?php echo date('H:i a'); ?></b>.</p>
</body>
</html>

Не беспокойтесь о реализации здесь, важно помнить, что PHP-код выполняется на сервере, и время динамически вставляется в страницу до того, как она будет доставлена ​​клиенту (браузеру). Каждый раз, когда мы обновляем страницу и сервер отправляет ее нам, мы получаем потенциально другой документ.

Сторона клиента

Теперь давайте рассмотрим альтернативу JavaScript:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example one</title>
</head>
<body>
    <h1>Hello</h1>
    <p>The time is <b><script>document.write(new Date().toLocaleTimeString());</script></b>.</p>
</body>
</html>

В каком-то смысле наша альтернатива JavaScript более динамична, чем ее аналог PHP; это динамично, поскольку мы, клиент, заинтересованы. Нам всегда будут присылать одну и ту же страницу, но каждый раз, когда мы ее видим, мы делаем небольшой объем работы и в итоге получаем другой результат. Сервер сказал нам, что делать, но на самом деле мы должны это сделать.

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Example one</title>
</head>
<body>
    <h1>Hello</h1>
    <p>The time is <b id="thetime"></b>.</p>
    <script>
    setInterval(function() {
        document.querySelector("#thetime").textContent = new Date().toLocaleTimeString();
    }, 1000);
    </script>
</body>
</html>

Каждую секунду (1000 миллисекунд) анонимная функция обновляет текст элемента b (находя его по его id) и устанавливает для него текущее время.

Более полезный пример

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

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

Скрипт, bookmarks.js, доступен на GitHub. Я рекомендую скачать его и включить на нескольких страницах статического сайта, к которому у вас есть доступ (в идеале, в среде тестирования или разработки!). Ссылка на bookmarks.js с элементом script в любом месте вашей страницы.

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

Описание подхода

Скрипт работает следующим образом:

  • localStorage используется для отслеживания массива страниц (в частности, компонента пути URL). Это полупостоянное хранилище данных — думайте о нем как о значительно улучшенной альтернативе файлам cookie.
  • Только данные String могут храниться в localStorage, но JSON позволяет нам преобразовывать произвольные данные JavaScript в String и наоборот, используя методы stringify и parse.
  • DOM используется для управления страницами в браузере. Помните, что наш подход заключается в том, чтобы взять статический контент сайта, доставленный с сервера, и улучшить его на клиенте.
  • При просмотре страницы проверяется ее URL. Если это домашняя страница*, список закладок вставляется прямо вверху страницы. В противном случае вводится ссылка «добавить» или «удалить», в зависимости от того, добавлена ​​ли страница уже в закладки.

* Обратите внимание, что URL-адрес вашей страницы должен быть просто /, то есть на верхнем уровне или в «корне» вашего домена

Заключительные слова

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

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

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