Создание фреймворка для spa на чистом javascript

Обновлено: 15.01.2025

Dust – это шаблонизатор JavaScript. Dust.js унаследовал внешний вид от языков ctemplate. Этот шаблонизатор предназначен для работы в асинхронном режиме на сервере и в браузере.

SPA-приложения (или Single Page Application) – это приложение, помещающееся на одной веб-странице.

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

Данное руководство поможет создать такое приложение при помощи NodeJS, фреймворка SailsJS и шаблонизатора DustJS (на клиенте и на сервере).

Требования

Данное руководство требует предварительно настроить сервер Ubuntu 14.04 (с 64-битной архитектурой). Для среднестатистической разработки 512 MB памяти будет достаточно.

Кроме того, нужен доступ к sudo.

1: Установка программ

Для начала нужно становить всё необходимое ПО.

Установите инструменты для разработки:

sudo apt-get install python-software-properties python g++ make

Затем установите NodeJs и NPM при помощи следующих команд:

sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs

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

NPM используется для установки пакетов NodeJs. Установите с помощью этого менеджера Sails:

sudo npm -g install sails

Примечание: Это установит последнюю версию Sails. Прочитать больше о Sails.js можно на сайте проекта.

2: Создание проекта Sails

Создайте новое приложение:

sails new dustspa
cd dustspa

Фреймворк Sails создаст каталог dustspa со следующей структурой:

--config
--views
---api
--tasks
--assets
README
.gitignore
package.json
.sailsrc
app.js
Gruntfile.js

В файле package.json найдите следующие строки:

Измените их следующим образом:

"dependencies": "dustjs-linkedin": "^2.5.1",
"sails": "

Компилятор dust используется для компилирования шаблонов dust в шаблоны dust JavaScript.

Затем установите dustjs и остальные зависимости из файла package.json:

sudo npm install

Затем используйте команду:

Посетите your_server_ip:1337. На экране появится домашняя страница приложения. Остановите сервер, нажав Ctrl+C.

3: Установка View Engine

И замените строкой:

Затем нажмите Ctrl+X,Y и ENTER, чтобы охранить и закрыть файл.

Примечание: В дальнейшем все файлы будут редактироваться таким образом.

4: Создание файла layout.dust

Контент файла layout.dust будет отображаться на посадочной странице. Все запросы будут сначала приходить на эту страницу, а потом обрабатываться фронтендом.

Создайте layout.dust в каталоге views:

Добавьте в файл следующий код:

Этот HTML-код довольно прост.

Затем нужно установить вид для / в routes.js. Откройте файл config/routes.js:

Примечание: Если сервер уже запущен, остановите его при помощи Ctrl+C.

Запустите следующую команду из каталога dustspa (текущий каталог):

Откройте в браузере ip_сервера:1337. Если на экране появилась страница, значит, всё работает верно и можно продолжать разработку. Если страница не открылась, проверьте, всё ли вы выполнили правильно.

Примечание: На данном этапе ссылки не работают.

5: Создание шаблонов

Примечание: Шаблоны – это часть страницы.

Создайте каталог partials в каталоге views и откройте этот каталог:

mkdir views/partials
cd views/partials

Затем создайте файлы home.dust, about.dust и contact.dust в каталоге partials. Добавьте в них такой контент:

6: Компилирование шаблонов

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

Установите dust compiler:

sudo npm install -g dust-compiler

Скомпилированные шаблоны будут храниться в assets/templates. Откройте главный каталог dusts:

Скомпилируйте шаблоны dust:

dust-compiler -s views/partials/ -d assets/templates/ --bootstrap --nonotify

В каталоге assets/templates появятся файлы:

Теперь файлы шаблонов готовы.

Для начала добавьте в конец файла views/layout.dust библиотеки dust-js и файлы шаблонов в тегах <body> :

После этого нужно добавить скрипт, фиксирующий клики по ссылкам и выводящий на экран требуемый шаблон. Создайте файл assets/js/clickHandler.js со следующим контентом:

(function () var links = document.getElementsByClassName("links"),
templateDiv = document.getElementById("template"),
nav = document.querySelector('nav > ul'),
clicked = false, viewCount = < home: 2, about: 1, contact: 1 >;
function clickHandler(e) var target = event.target,
templateName = this.getAttribute("data-template");
if(clicked) clicked.removeAttribute('class');
>
else nav.querySelector('.active').removeAttribute('class');
>
target.parentElement.setAttribute('class','active');
clicked = target.parentElement;
dust.render(templateName, viewCount, function (err, out) if(err) console.log('Error:',err);
else viewCount[templateName]++;
templateDiv.innerHTML = out;
>
>);
>;
for(var i = 0; i < links.length; i++) links[i].addEventListener('click', clickHandler, false);
>
>)();

Этот скрипт очень прост. Он выполняет следующие действия:

Фиксирует клики по ссылкам.
Извлекает имя шаблона из атрибута data-template.
Стилизует открытую ссылку.
Отображает шаблон при помощи функции dust.render, редактируя объект viewCount.

Ссылаясь на clickHandler.js, отредактируйте views/layout.dust и добавьте в теги <body> в конце файла следующее:

Теперь нужно отредактировать layout.dust в каталоге views. Замените <div следующим кодом:

Это настроит повторное использование шаблона. Механизм dust.js заменит контентом файла view/partials/home.dust.

Примечание: Чтобы лучше разобраться в коде, откройте assets/js/clickHandler.js.

Шаблон по имени xxx будет помещён в файл по имени xxx.dust. Можно создавать много .dust файлов и ссылаться на шаблоны внутри других шаблонов. Это позволяет размещать заголовки и футеры на нескольких страницах.

Обратите внимание: кроме расширения .dust часто встречаются файлы с расширением .tl. Поскольку это имеет значение только при сборке, можно использовать любое расширение.

Синтаксис ссылки на шаблон также поддерживает пути; то есть, шаблон можно указывать в пути (например, shared/header.dust) и ссылаться на него . Это систематизирует шаблоны в подобные библиотекам структуры.

Примечание: Больше о шаблонах можно найти здесь.

В результате layout.dust будет иметь такой вид:

7: Тестирование приложения

Откройте в браузере:

Протестируйте SPA, кликнув по ссылкам Home, About, Contact.

Заключение

SPA-приложение успешно разработано! Данный сайт позволяет использовать шаблон и на клиенте, и на сервере.

Я не могу поверить, что снова собираюсь написать статью о WordPress. На самом деле я шучу, так как в прошлый раз, когда я играл с WordPress REST API, я подумал, что на самом деле это довольно круто!

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

Я расскажу о следующих шагах:

Создание моделей с настраиваемыми полями в WordPress
Создание пользовательской конечной точки для API REST WP (API URL)
Настройка одностраничного приложения Vue.js
Хостинг приложения

Но в начале, давайте определимся что такое «использование WordPress как headless CMS».

Monolithic CMS vs Headless CMS [source]

Что это значит?

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

Еще несколько лет назад мы были привычны к тому, что традиционные CMS работают определенным образом. То есть они управляют всем. Под этим я подразумеваю бэкэнд (управление данными/контентом, роли и разрешения, задачи администратора) и внешним интерфейсов то есть фронтендом (в большинстве случаев представления, генерируемые PHP) и естественно всем, что между ними.

Тем не менее, относительно недавно произошел значительный сдвиг благодаря росту современного фронтенд интерфейса. В огромной экосистеме, которая возникла вокруг нее, просто нет места для старых, монолитных CMS. Появились генераторы статических сайтов, микросервисы, ориентированные на API, и serverless архитектуры.

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

Итак, почему бы не использовать WordPress только для того, в чем он действительно хорош? Это именно то, что называется API-интерфейс WP JSON REST который был включен в его состав с момента выпуска WordPress 4.7. Он позволяет использовать контент, внедренный в бэкэнд WordPress, в во внешних приложениях, независимо от того, какая технология задействована.

Это изменяет правила игры.

Вы можете найти более подробное объяснение API WP REST в нашем первом посте на эту тему.

Зачем тебе это использовать?

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

Основным недостатком WordPress (кстати, на который разработчики жаловались годами) было отсутствие свободы разработки и хлопоты, связанные с настройкой шаблонов. Но используя WordPress только как бэкэнд, эти проблемы выбрасываются в окно и с высокой скоростью:

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

→ Работа с WP-шаблонами окончена. Подключите его по своему вкусу и не беспокойтесь о переопределении шаблонов на основе PHP. Намного проще создавать потрясающие пользовательские интерфейсы с нуля, которые затем могут использовать данные WordPress.

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

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

Я рассказал больше о том, почему Vue.js правильный выбор в нашем блоге.

Выбор Vue.js

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

: Отличный фреймворк для создания статических сайтов, разработки одностраничных приложений (SPA) и рендеринга на стороне сервера. В этом уроке мы использовали его для создания статического сайта поверх headless CMS. : Vue.js эквивалент Gatsby. Работает на GraphQL для извлечения данных из любых источников, в том числе headless CMS. Он может генерировать прогрессивные веб-приложения (PWA). : Минималистичный статический генератор сайтов на базе Vue, идеально подходящий для создания документации и небольших блогов.

Проблемы с SEO?

Отличительной чертой традиционного использования WordPress является то, что вам не нужно слишком беспокоиться о SEO; он в основном оптимизировано для этого по умолчанию. Обычно есть проблемы с использованием SEO с JS-фреймворками.

Так же лучшая производительность и UX помогут вам улучшить ваши результаты в SEO!

Контекст

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

Я покажу вам, как создать адаптивный Vue SPA, чтобы сделать именно это. Бэкэнд очень похож на мой пост, посвященный React с WordPress, но я буду использовать его совершенно по-другому с приложением на Vue.js.

Необходимые условия

Работающий экземпляр WordPress
Базовые знания Vue
Бесплатный аккаунт MapBox

1. Создание моделей с настраиваемыми полями в WordPress

Давайте сразу перейдем прямо в админку WordPress.

Я буду использовать плагин ACF (Advanced Custom Fields) для создания наших пользовательских объектов для демонстрации.

Этот плагин позволяет добавлять настраиваемые поля в нативные сущности WordPress, такие как посты (posts). Он тщательно протестирован, стабилен и облегчает нам добавлении пользовательских данных на страницу.

Вы можете легко установить его, используя вкладку «Плагины» на панели инструментов WordPress. Вот что вы должны найти:

Объявите настраиваемые поля, щелкнув на новый раздел настраиваемых полей на левой панели.

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

2. Создание пользовательской конечной точки

Теперь, когда у вас есть ваши данные, вам нужно открыть их для всеобщего использования через API JSON REST.

Для этого создайте пользовательскую конечную точку. Откройте папку WordPress и откройте файл functions.php. Здесь вы зарегистрируете свою новую конечную точку.

Добавьте следующие строки в конец файла:

Метод add_action создает пользовательскую конечную точку и регистрирует ее через ловушку (hook) rest_api_init. После вызова конечной точки будет выполнен обратный вызов, который добавит ваши настраиваемые поля под ключом acf.

Теперь, когда отображение работает должным образом, не стесняйтесь зайти на новую конечную точку REST по адресу: /wordpress/wp-json/markers/v1/post.

Вот структура, которую вы должны увидеть после GET запроса, обратите внимание на новое поле ACF:

3. Настройка Vue SPA

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

Чтобы создать свой проект, используйте Vue CLI. Если у вас его еще нет, вы можете легко установить его с помощью npm install -g @vue/cli

Затем создайте свой проект: vue create markers.

Первое, что нужно сделать, это получить данные из API непосредственно в вашем компоненте App. Для этого просто добавьте следующее объявление в компонент:

Если вы не знакомы с хуком жизненного цикла mounted компонента Vue, я настоятельно рекомендую вам почитать эту документацию.

Теперь, когда у вас есть данные, давайте создадим первый компонент (в папке /components), который называется badge.

Внесите в него следующее содержимое:

Зарегистрируйте его непосредственно в объекте компонента с помощью:

Теперь давайте создадим новый компонент: Map.vue.

Во-первых, добавьте JS и CSS Mapbox прямо в ваш файл index.html:

Затем определите ваш компонент следующим образом:

Затем мы создаем свои маркеры (используя фоновое изображение, определенное в CSS) и добавляем их на карту.

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

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

4. Хостинг для демо

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

Размещение базы данных MySQL может осуществляться тысячами способов, поэтому я оставлю эту часть на ваше усмотрение и сосредоточусь на размещении только экземпляра WordPress и приложения Vue.

Вот как это сделать с Heroku:

Зайдите в их панель и создайте новый проект.

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

Затем измените строки подключения к базе данных. Это можно сделать очень легко в файле wp-config.php со следующими атрибутами:

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

Ура, вам нужно только разместить ваше приложение Vue, и все будет готово!

Я воспользовался бесплатным аккаунтом Netlify, что означает, что он перенесет демо в публичное репо и подключит его к проекту Netlify.

Итак, после того, как запушили код, перейдите на панель инструментов Netlify и используйте следующую конфигурацию для сайта:

Просто измените свой метод fetch, чтобы он указывал на ваш новый экземпляр Heroku (а не на ваш локальный хост), и все готово.

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

Мне нравится работать с WordPress как с headless CMS каждый раз, когда я это пробую! Vue.js всегда подразумевает замечательный опыт разработки, поэтому мне очень понравилось создавать эту демонстрацию.

Mapbox также впечатляет. Это был мой первый раз, когда я игрался с Maps API, и это отличный сервис, с хорошей документацией. Всегда круто пробовать что-то новое. 🙂

Должно быть, я потратил 2-3 часа на все это!

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

Любые вопросы? Не стесняйтесь оставлять комментарии, чтобы высказать свои мысли, отзывы и вопросы. Если вам понравился этот пост, уделите секунду 👏 или поделитесь им в Twitter!

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