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

1656613815 pochemu ya sozdal prostoj asinhronnyj universalnyj shablon react redux kotoryj

Уильям Вудхед

xbFJF1v4Vn1YiO0P7rEmocE8yJesoeI6O5Ig
React Redux

На прошлой неделе я поставил перед собой задачу.

Я проверял некоторые шаблоны Universal React Redux «Начало работы» и обнаружил, что многие действительно сложны. Они включают кучу зависимостей и обладают функциональностью, для раскрытия которой могут потребоваться недели.

В общем, шаблоны выполняют для меня две функции:

  1. Начните работу быстрее, поскольку программа уже создана
  2. Узнайте, как создать программу

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

Поэтому я поставил перед собой задачу:

Создайте простой шаблон Async Universal React Redux.

Звучит отлично, но что это все значит?

Просто хотите увидеть код? Просмотрите это GitHub Repo.

Что такое асинхронный универсальный шаблон React Redux?

Давайте разберем каждое слово по одному.

Универсальный

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

Почему это важно? Воспроизведение на стороне сервера важно для SEO, а также для богатых ссылок и метаданных – например, когда вы публикуете веб-ссылки в Twitter или Slack.

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

Асинхронный

Асинхронность означает, что мы хотим получить данные из внешних API перед воспроизведением страницы. Мы хотим воспроизвести страницу на стороне сервера с данными, являющимися асинхронным запросом.

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

Отреагировать

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

Redux

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

Шаблон

Определяется Кембриджским словарем как:

Текст, который можно копировать и использовать… в компьютерных программах только с очень небольшими изменениями.

Зачем нужна универсальная программа?

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

Основная причина – богатые ссылки и метаданные. Когда вы публикуете страницу в Twitter или LinkedIn, они очищают необработанную HTML страницу, возвращенную с сервера, чтобы найти метаданные.

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

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

Слаковая публикация Pilcro без метаданных

KNIboYOszuVHPmRe-6S6WJ030391L31ffecy

Слабая публикация Pilcro с метаданными – заметьте разницу

cNfmlcRQDHXFiE-i4AkJEOrXTj0i8HPwwT-B

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

Самый простой шаблон, который я мог сделать

Создание универсальных приложений действительно сложно. Пока нет стандартного способа подхода к этому. Многие существующие шаблоны ужасно сложны.

Вот почему я пытался создать самый простой шаблон, работающий как на Mac, так и на Windows.

В исходном коде нет ничего лишнего. Веб-страница не может быть проще. Это выглядит так:

BsPNbL90GiJ4iuQFnZRLUPPsn2YFa9adSYmC

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

Итак, вот ссылка на репозиторию GitHub.

Проверьте его – клонируйте, установите, запустите. Посмотрите, что вы думаете. Буду рад любому отклику. И если вам это нравится, поставьте звездочку и поделитесь!

Если вам понравилась эта история, пожалуйста? и поделитесь пожалуйста с другими. Также посмотрите мою компанию pilcro.com. Pilcro – это программа для управления брендом для G-Suite.

CsWVmNZ2bnvwrdu3apMKDKvdhxOCY1awxFvU

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

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