Как перевести проект на React (на проекте битрикс)?

Question

[iamdeveloper]

На данный момент на проекте используются: нативный js, битрикс (и php естественно)
Нам не нравится как взаимодействуют фронтенд и бэкэнд сейчас (фронт и бэк в разных репозиториях и мы хотим чтобы все было в одном месте. Если что то меняется на фронте, то приходится передавать скомпилированные файлики js и css. Нам это неудобно)
Думаем как оптимизировать работу фронтенда и бэкэнда.

Поступило предложение переводить проект на React.
Думаю как это сделать, ведь писать с нуля проект на реакте - это одно, а переводить существующий проект на реакт, мне кажется, это другое.
У меня пока нет полного представления как это будет. Есть куча непонятный вещей.

1) Например сейчас, данные отрисовываются с помощью php.
Но если мы будем переводить проект на реакт, то как мы будем писать php в нем?
Ведь синтаксис реакта ( jsx ) не предусматривает php.
И есть разделы которые даже не хочется трогать - просто копировать php и вставить. Но как такое получится в реакте?

2) И еще момент: проект довольно большой. И мне кажется, так просто взять за неделю и перевести проект на реакт не получится. Наверное будем частями переводить.
Т.е. получается одна часть проекта будет написана на реакте, а другая - нет? Это вообще как?

У кого то есть подобный или близкий к этому опыт? Что посоветуете? Как грамотно перевести проект на реакт в таком случае?

Comments

[Sedbol]

Писать версию на React. А уже потом отказаться от PHP.

[Denis]

Мне казалось что для этого требуется полгода-год. Одно дело когда 20 событий повесилось на кнопку, другое куча декораторов редакс и тд.
Потом использовать ssr или нет если да то с беком пхп нужно настраивать next js.
Считаю если у вас есть свободное время и проект особо не развивается (каждый день не пушиться по 1000 строк кода), то в принципе можно, начать с какой нибудь мелкой фичи и поглядеть что выйдет.

[Yustas Alexu]

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

Я бы вообще отказался от этой затеи на вашем месте. Если проект большой, а вы даже не представляете как работает php на сервере, то вы "встрянете".

Answer 1

[Александр Маджугин]

Но если мы будем переводить проект на реакт, то как мы будем писать php в нем?

Что это вообще может значить? PHP у вас это server side, а React это клиентское приложение.... Блин, я даже не знаю что дальше спросить... вы PHP в браузере собрались исполнять или JS интерпритатором PHP?
Это вот вопрос он лишен смысла чуть более чем полностью.

Ведь синтаксис реакта ( jsx ) не предусматривает php.

Да причем тут синтаксис? Среда исполнения не предусматривает php, а вы про синтаксис.

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

Если это сайт среднего размера, то нужно заложить не неделю, а несколько месяцев.

Т.е. получается одна часть проекта будет написана на реакте, а другая - нет? Это вообще как?

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

У кого то есть подобный или близкий к этому опыт? Что посоветуете? Как грамотно перевести проект на реакт в таком случае?

Выше написал:
1 Сначала разрабатываете шаблон для одного раздела сайта на React, так как буд-то других разделов просто не существует.
2 Пишите соотвествующий бэкенд который будет отдавать данные для этого вашего шаблона.
3 Переводите этот раздел сайта на React.
4 Эксплуатируете неделю, подчищая косяки.
5 Выбираете еще один раздел сайта поменьше и переводите его аналогичным образом.
6 В этом месте у вас уже должно быть понимание где вы наложали с архитектурой, какие накопились костыли, и в чем фундаментальные изъяны того что вы сделал. Тут вы должны остановиться и выкинуть всё что сделали раньше. Я не шучу - просто выкинуть и начать перерабатывать эти разделы с нуля...
7 Теперь вы знаете что делать дальше.

Comments

[Евгений]

Что это вообще может значить? PHP у вас это server side, а React это клиентское приложение

Просто битриксоиды привыкли передавать данные на клиента путём "распечатывания" переменных на бекенде прямо в скрипт.
Вот так

<script>
   alert('<?="Hello,World!"?>');
</script>

[Александр Маджугин]

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

<script id="data" type="application/json">
// здесь json с данными необходимыми для страницы
</script>

Тогда не нужно лишний запрос делать к серверу за данными - раз уж мы отдаем страницу логично в нее и данные подклеить.
И при этом js может работать как с данными прилетевшими вместе со страницей, так и с сервера.

А при alert('<?="Hello,World!"?>'); получается что данные намертво впечатаны в страницу и для изменения нужна перегрузка. Тогда в чем смысл подключать реактивный фреймворк?

[Евгений]

Тогда в чем смысл подключать реактивный фреймворк?

Так потому ТС и создал вопрос, потому что он не понимает как скрестить ужа с ежом.

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

Это работает на сайте с тремя страницами. Это полностью неподдерживаемый код. Если на сайте появляется фронт чуть сложнее, чем подсветка кнопок, то надо делать API. Сейчас не 2000 с GPRS, заканчивайте с подобными извращениями.

[Александр Маджугин]

Евгений, спорно. Если ваш API страницеореинтерованный, то ему не важно что отдавать - json или json + html, а если разница есть - значит у вас есть логический разрыв между фронтом и бэком - его надо устранять.

Есть еще один варик - у вас логика на фронте, но это уже совсем другой компот и я не думаю, что в данном случае речь идет о чем-то таком.

[Евгений]

значит у вас есть логический разрыв между фронтом и бэком - его надо устранять.

Не понял. Зачем устранять? Если страница показывает курсы валют, то здесь уже напрашивается эндпоинт Api на получение курсов валют. Почему? Да потому что получение курсов может быть не тривиальной задачей и добавлять эту логику в код генерации страницы - плохая идея. Так как на поддержку этого будет уходить много времени и сил.

[Александр Маджугин]

> Не понял. Зачем устранять? Если страница показывает курсы валют, то здесь уже напрашивается эндпоинт Api на получение курсов валют.
Если эта страница новостей и она показыает еще и курс валют - вы правы. Это выглядит достаточно логичным.
Если страница показывает ТОЛЬКО курсы валют например это mybank.ru/currency/, то нет никакого смысла показывать страницу без курсов валют, а потом их подгружать черзе api - логичнее и эндпоинт API сделать mybank.ru/currency/, и пусть он отдает json при "ajax" запросе и html страницы + этот же json при обычном запросе. Нет смысла делать каскад запросов, там где можно обойтись одним - это будет и банально быстрее и ни чуть не солжнее - вам нужна релизация которая умеет в зависимости от ситуации формировать или только json или json + html. Здесь нет никакого оверхеда - и то и то вам придется реализовывать в любом случае - почему не реализовать это на одном url?

Answer 2

[Андрей Рязанцев]

Все верно человек выше отписал. Добавлю. Ваши шаблоны компонентов Битрикса должны отдавать исходные данные для последующей отрисовки страницы на стороне клиента. Я не знаком с React, но подозреваю, что данные он получает через json. Т.е. задача сводится к тому, что шаблон компонента Битрикса отдавал json, а React его понимал. Создайте новый шаблон сайта, без визуальных данных, и включайте его по GET-условию, например react=Y. И читайте комментарий выше.

Answer 3

[inizegorodov]

Нам не нравится как взаимодействуют фронтенд и бэкэнд сейчас (фронт и бэк в разных репозиториях и мы хотим чтобы все было в одном месте.

Подключите репозиторий с вёрсткой подмодулем к основному репозиторию, а на сервере проставьте симлинки на файлы css и js.

https://git-scm.com/book/ru/v2/%D0%98%D0%BD%D1%81%...