Всем привет из 2018! Оригинальный [https://github.com/erikras/react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example\) прекратил развитие в 2017 году, но его можно собрать на версии 6.14.2, на 8 и выше версии будут ошибки. Но есть его форк https://github.com/bertho-zero/react-redux-universal-hot-example, где продолжается разработка и поддерживаются более свежие версии Nodejs.

Введение

Это краткое руководство и обучение по фронтэнеду для бэкендера. В данном руководстве я решаю проблему быстрого построения пользовательского интерфейса к серверному приложению в виде одностраничного веб-приложения (single page app).

Основной целью моего исследования является возможность за разумное время (для одного ~~нормального~~ человека) получить удобный и простой в использовании интерфейс-черновик к серверному приложению. Мы (как разработчики серверной части) понимаем, что наш приоритет - серверная часть. Когда (в гипотетическом проекте) появятся во фронте профи своего дела, они все сделают красиво и "правильно".

В роли учебной задачи представлена страничка чата с каким-то умозрительным "ботом", который работает на стороне сервера и принимает сообщение только через WebSocket. Бот при этом выполняет эхо ваших сообщений (мы тут не рассматриваем серверную часть вообще).

Мне для изложения материала требуется, чтобы вы имели:

базовое знание javascript (тут нужно поискать в интернете справочник по крайней версии js стандартов ES-2015)
знание reactjs (на уровне обучения https://facebook.github.io/react/tutorial/tutorial.html)
понятие о websockets (это очень просто, главное чтобы ваш сервер это умел)
знание и умение использовать bootstrap (на уровне этого раздела http://getbootstrap.com/css/)

Что используем

Redux - официальная документация расположена по адресу http://redux.js.org. По-русски есть несколько вариантов, я лично использовал в основном https://rajdee.gitbooks.io/redux-in-russian/content/docs/introduction/index.html.

Статью exec64, она стала причиной написать этот тутриал https://exec64.co.uk/blog/websockets_with_redux/.

Готовый сервер с react и redux от https://github.com/erikras/react-redux-universal-hot-example(он нам спасает человеко-месяцы времени по настройке большой связки технологий, которые необходимы для современного js проекта)

Мотивация

Вообще я разрабатываю приложение на языке Python. Погоди-погоди уходить ...

Что мне было нужно:

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

Что было испробовано:

вариации на тему на чистом js (устарело, есть много полезных моделей велосипеда)
JQuery (~~уже не могу ТАК извратить так свой мозг~~, крайне сложный для быстрого старта синтаксис и ... это дело профессионалов)
Angular (переход на 2 версию спугнул и не нашел за отведенное время лазейки к решению моей задачи)
Socket.io (там все реализовано, если вы node.js программист вы уже его используете, но он слишком сильно привязывает серверную часть на node, мне нужен только клиент без третьих лиц)

Выбрано в итоге:

React (понятно и доступно/просто + babel = делает язык вполне понятным)
Redux (импонирует использование ~~единой помойки~~ единого хранилища)
WebSockets (очень просто и не связывает руки, а позволяет внутри себя уже применять такой формат какой позволит фантазия)

Упрощения и допущения:

Мы не будем использовать авторизации в приложении
Мы не будет использовать авторизации в WebSocket-ах
Мы будем использовать самое доступное приложение Websocket Echo (https://www.websocket.org/echo.html)

Содержание

Как читать

Не будете повторять - пропускайте часть 1
Знаете reactjs - пропускайте часть 2
Знаете redux - пропускайте части 3, 4 и 5
Знаете как работает middleware в redux - смело читайте часть 6 и далее в обратном порядке.