1. Обновить С момента создания пьесы «История человечества» я продолжил сборку «Полет на Луну» в 2016...
2. Первые шаги
3. Задача первая: поток данных
4. Задача вторая: сопоставление URL
5. Соединяя это: сервер
6. Маршруты
7. Соедини это: Приложение
8. Main.JS - Где волшебство происходит
9. Завершение
10. То, что нужно запомнить

Обновить

С момента создания пьесы «История человечества» я продолжил сборку «Полет на Луну» в 2016 году и, основываясь на этом, писал о динамических компонентах реакции и SEO дружественный контент на основе React , которые расширяют это дальше. Я настоятельно рекомендую прочитать их тоже, поскольку они предлагают более полную и актуальную версию этой концепции.

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

Некоторое время назад я опубликовал Почта о том, как мы создали History of Humanity, пример клиентского приложения React.js, в котором в своем приложении используются динамические компоненты реакции.

Проект «История человечества»

Хотя это прекрасное доказательство концепции, оно страдает от двух проблем:

1. Работает только если на клиенте включен javascript, иначе ничего не происходит
2. Из-за этого он совершенно не доступен для поисковых систем

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

• Объединены в один файл, чтобы сэкономить на HTTP-запросах
• Минимизировано, чтобы уменьшить размер загрузки

Pre-Rendering React.js Приложения для SEO

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

Первые шаги

Если бы мы создавали крупномасштабное приложение, ваши разработчики, вероятно, использовали бы такие инструменты, как Grunt или Gulp. Однако, поскольку это такая простая штука, польза от их использования незначительна.

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

У меня также есть вторичное преимущество в том, что я не пишу React как JSX, так что его не нужно превращать в JS, что будет аргументом в пользу использования Grunt.

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

Единственные реальные проблемы, с которыми мы столкнемся с технической точки зрения:

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

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

Задача первая: поток данных

При первоначальной выборке списка элементов, а также при загрузке приложением определенного элемента (который мы чуть позже обработаем), мы должны иметь возможность предварительно выбрать данные и добавить их в приложение, прежде чем мы доставим его. , Именно здесь мы сталкиваемся с первой из наших проблем. Данные для всех элементов могут быть легко загружены, поскольку они уже находятся в файле; мы просто должны разместить этот файл на сервере где-нибудь доступном. Точно так же загрузка данных для одного элемента просто требует, чтобы мы пошли и извлекли эти данные, а затем передали их в качестве реквизита.

Задача вторая: сопоставление URL

Есть много вариантов маршрутизации для React.JS. Тем не менее, большинство излишне для чего-то такого маленького. Вместо этого мы будем использовать History.js. Он довольно маленький и довольно надежный, учитывая количество поддерживаемых браузеров. В более крупном проекте, требующем большей конфигурации, скорее всего, мы посмотрим на другое решение (возможно, React Router ).

Соединяя это: сервер

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

var express = require ('express'), path = require ('path'), app = express (), ip = '0.0.0.0', port = 3000, bodyParser = require ('body-parser'); // Включаем статические ресурсы app.use (express.static (path.join (__dirname, 'public'))); app.set ('views', path.join (__dirname, 'views')); app.set ('view engine', 'ejs'); // Настройка маршрутизации require ('./ app / routs / core-rout.js') (app); // Установить 404 app.get ('*', function (req, res) {res.json ({"route": "Извините, эта страница не существует!"});}); app.listen (порт, ip); console.log («Сервер работает и работает через порт:» + порт);

Нам просто требуется express и несколько других полезных вещей, установить маршруты к статическим файлам (JS и CSS на стороне клиента, которые находятся в общедоступной папке), настроить механизм просмотра, поскольку у нас будет самый простой в мире шаблон, и включить логику маршрутизации для большей части приложения. Быстрый обработчик 404 и настройка сервера на прослушивание порта 3000 завершает работу.

Маршруты

Это где вещи начинают становиться немного более вовлеченными. Наш файл core-routs выглядит так:

var React = require ('act / addons '), timelineJsonData = require (' ../ data / timeline.json '), axios = require (' axios '), HoH = React.createFactory (require (' ../ js) /dispatcher.js')); function isset (obj) {вернуть typeof obj! == 'undefined'; } module.exports = function (app) {app.get ('/', function (req, res) {// React.renderToString берет ваш компонент и генерирует визуализированную разметку. SEO-удобство во всех отношениях var staticHTML = React.renderToString ( HoH ({timeline: timelineJsonData, initParams: false})); res.render ('index.ejs', {actOutput: staticHTML});}); app.get ('/: year /: position /: name', function (req, res) {function getWikiData (wikiApiLink, renderer) {var initData = {itemDetail: timelineJsonData [req.params.year] [req.params. position], wikiData: false, wikiImages: []}; axios.get ('https://apis.builtvisible.com/history_of_humanity/?url=' + encodeURIComponent (wikiApiLink.replace (/ & / g, "&") )). then (function (output) {if (isset (output.data.query.pages)) {var pageId = Object.keys (output.data.query.pages); initData.wikiData = output.data.query. pages [pageId]; // React.renderToString берет ваш компонент и генерирует визуализированную разметку. SEO дружелюбие во всех отношениях var staticHTML = React.renderToString (HoH ({timeline: timelineJsonData, initparams: req.params, initwikidata: initData})); renderer.render ('index.ejs', {reactOutput: staticHTML});}}) .catch (function (e) {console.log ('error in xhr'); console.log (e);});} var wikiApiLink = 'https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts|images&exintro=&explaintext=& title = '+ req.params.name; getWikiData (wikiApiLink, res); }); };

Здесь мы сначала включаем реакцию, наши данные временной шкалы, аксиомы и приложение.

Теперь, если мы просто имеем дело с точкой входа в приложение, это просто: мы просто запускаем приложение в состоянии по умолчанию. Однако теперь, когда мы на стороне сервера, мы можем указать приложению конкретный элемент. Для этого мы указываем второй маршрут, который принимает форму /: year /: position /: name, где year - это год, когда произошел элемент, position - указатель того, где он находится в событиях этого года, начиная с 0 , а имя - это название элемента.

Здесь начинается предварительная загрузка данных. Мы используем axios для извлечения основных данных из API Википедии. Мы не собираемся получать изображения, так как они менее важны для целей этого, и мы хотим, чтобы приложение было максимально быстрым. Получив эти данные, мы продолжаем работу, как в противном случае, и делаем приложение.

Настоящая магия этого - метод renderToString. Это то, что поставляется с React, что делает жизнь намного проще, чем с чем-то вроде Angular.JS. Мы можем просто визуализировать весь вывод нашего приложения в строку HTML и вставить его в тело нашего вывода. Таким образом, мы получаем что-то дружественное для поиска, которое также имеет все преимущества javascript-приложения. Когда приложение визуализируется, экземпляр React, который отображает браузер, может подключиться к отображаемому выводу HTML и отобразить его обратно в приложение React.

Соедини это: Приложение

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

module.exports = HoH;

При этом мы можем называть наши реагирующие компоненты так, как если бы они были модулями. Мы упаковываем все приложения вместе с помощью Browserify. Вы можете увидеть скрипты, которые запускают это, если вы посмотрите в package.json. Для тех, у кого нет открытого git-репо, они такие:

"build-dev": "browserify -e app / main.js -o public / bundle.dev.js -d", "build-min": "browserify -e app / main.js -g uglifyify -o public / bundle.min.js»,

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

Но подождите минуту, они запускают что-то под названием main.js. Что это за файл?

Main.JS - Где волшебство происходит

Main.js - это файл, который собирает приложение для браузера. Это позволяет нам указать, что именно браузеру потребуется для запуска приложения, запуска тестов, настройки данных и так далее. Это выглядит так:

var React = require ("act / addons "), ReactCSSTransitionGroup = React.addons.CSSTransitionGroup, axios = require ('axios'), timelineJsonData = require ('./ data / timeline.json'), HoH = require ('. /js/dispatcher.js'); window.app = (function () {var requiredFeatures = {"JSON decoding": window.JSON, "API селекторов": document.querySelector, "События DOM уровня 2": window.addEventListener, "API истории HTML5": window.history.pushState}; для (var i = requiredFeatures.length - 1; i> = 0; i--) {if (! requiredFeatures [i]) вернуть предупреждение («Извините, но ваш браузер не поддерживает» + feature + ", поэтому это приложение не будет работать должным образом.");}; if (window.location.pathname! == '/') {var parts = window.location.pathname.split ('/'); var initData = {год: части [1], позиция: части [2], имя: части [3]}} иначе var initData = {год: ложь, позиция: ложь, имя: ложь} return React.render (React.createElement ( HoH, {timeline: timelineJsonData, initparams: initData}), document.getElementById ('hoh'));}) ();

Как вы можете видеть, это похоже на файл core-routs. Мы говорим, что нам нужно (React, Axios и т. Д.), Тестируем браузер на наличие функций, необходимых для запуска приложения, а затем настраиваем некоторые данные на основе текущего URL. После всего этого мы загружаем приложение с любыми необходимыми данными и выводим его в элемент html с идентификатором «hoh».

Завершение

По сути, это все, что требуется для запуска приложения на основе React на сервере. Другие поправки, которые мы здесь добавили, касаются не только UX. Несколько строк вызовов history.js позволяют нам вносить изменения в адресную строку и просматривать историю. Кроме того, у меня есть только несколько следующих мыслей.

То, что нужно запомнить

1. Реакт для построения взглядов. Не превращайте это в контроллеров, несмотря на то, что вы можете.
2. Загружайте данные вне компонентов React и передавайте их как реквизиты. Это относится к дочерним компонентам и к верхней части приложения при рендеринге на сервере.
3. Используйте renderToString. Это делает тривиальным создание приложений, дружественных к SEO.
4. Предварительно визуализируйте столько, сколько вам нужно, но как можно меньше. Скорость это хорошо. Не поддавайтесь искушению сделать все заранее, просто потому что вы можете.

Финальная нота

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

Похожие

Комментарии