Как плавно перейти на react (angular) на сайте, где используется jQuery?

Question

[Дмитрий]

Привет сообщество.
Сейчас работаю в компании на довольно большом проекте. Просто написан на HTML/CSS/jQuery, если говорить о фронте. Весь динамический функционал сейчас на голом jQuery разбитом по отдельным файлам и библиотекам со своей зоной отвественности. Я же для, хорошей поддержки, хочу разнести его в мелкие компоненты что бы все компоненты были четко разбиты и лежали со всеми файлами их реализации в свой директории, внедрить какой-то фреймворк, для связывания данных на view и в модели.

Возникает вопрос: как плавно переписать проект на компоненты и при этом не сломать все? ;)
Хочу делать это по маленьким блокам.
Т.е. есть форма авторизации или блок выбора цвета-размера товара. Я хочу переписать их на react или подключить angular и внедрить как ни в чем не бывало.

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

Comments

[sim3x]

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

[Дмитрий]

sim3x: да

Answer 1

[Владислав Поляков]

Подключаем . JADE Тык , Тык
И используем
include somefile.jade
Так же можно пользоваться

extends

block

Comments

[Дмитрий]

jade на проекте подключен. Вопрос в архитектурном плане а не в плане как подтянуть один файл в другой ;) Есть сейчас форма поиска, например. Она на обычном jquery. Я например переписал ее на react. И таких компонентов я сделал кучу по сайту. Как их аккуратно внедрить не затроную весь проект? Для кажого писать ReactDOM.render() ? Или вот с Angular. Как его подключить на готовый большой проект, и правильно разбить на контроллеры? Сделать отдельную папку для файлов angular и делать 1 контроллер = 1 модуль на сайте? Например контроллер каталога, товара, корзины?

[Владислав Поляков]

Ну я бы сделал файл , да даже в XML , своего рода карту, где будет явно прописано
<Форма поиска> Ссылка на .jade файл со всеми подключенными библиотеками , которые можно через extends подключать в шапку сайта. И в главном файле поставить обработчик, пусть ищет в коде своего рода ссылки( Пример : {{ФОРМАПОИСКА}} ) наткнулся, зашел в своего рода библиотеку, и подключил ,грубо говоря, снипет

[Дмитрий]

Ну а как быть с ReactDOM ?

[Владислав Поляков]

Дмитрий: Честно говоря, я не работал с react (angular), просто привожу пример , который у меня отлично работает .

[Дмитрий]

Владислав Поляков: а пример чего вы приводите?) Как подключить сниппет из другого jade-файла?) Это как бы в документации описано. Вы как пишете большие проекты? Подключаете один js-файл с простыней кода и все?

[Владислав Поляков]

Дмитрий: Нет , у меня js код разбит на 3-4 файла, в одном только функции , в другом конструкторы, в третьем я пишу плагины , в основном у меня все разбито на снипеты, не люблю большие куски кода.

[Дмитрий]

Владислав Поляков: Вот у меня сейчас тоже так. А я хочу огранизовать на всем проекте компонентную систему. Должна быть отдельная папка для каждого компонента с js, css и разметкой.

[Владислав Поляков]

Ну в чем проблема ?
blocks
|
--js
--form.js
--action.js
-- etc.
--css
--jade
Опять повторюсь , создайте своего рода карту , ну или навигационный маршрут, и в начало документа обработчик, который будет подключать то , что нужно , нужные снипеты ,

[Дмитрий]

Владислав Поляков: теперь вы хотите перенести несколько блоков с одного проекта на другой и понеслась: найти и скопирвоать JS в одной части сайта, найти и скопировать разметку, найти и скопировать CSS. Против того когда держишь все файлы компонента в одном месте, как это пропагандирует БЭМ-методолгия

[Владислав Поляков]

Дмитрий: Я ничего уже не понимаю , что вам нужно... [e-mail] вот вам мой эмейл , опишите полностью вашу проблему, не стоит тут засорять эфир, а разберемся, сюда скинем решение.

[Дмитрий]

Владислав Поляков: Вопрос четко описан в тексте ;) Я хочу перевести проект написанный на jquery в нескольких файлах в полностью компонентную структуру. Взять подход БЭМ и реализовать все с помощью react, html/css, js

Answer 2

[Артем Кисленко]

Я опишу свой опыт, не знаю даст это что-то или нет. Тоже встала такая проблема, думал как решить, основная загвоздка была в том, что сразу все переписывать не было времени, т.к. если внедрять React нужно было переписывать все view. Я добавил роутинг от backbone, чтобы много лишнего кода не писать большинство функций оставил на jquery, но так у меня появилась четкая структура.

А view использовал от React (где либо немного переписывать, либо новый функционал), таким образом я структурировал проект избавился от простыней кода (постепенно) и добавил React, Хотя признаться честно React добавил, чтобы изучить новое, там он не особо был нужен. Ну и в итоге получился довольно структурированный проект. Правда все равно местами используется React местами jQuery уж слишком большое наследие в проекте.

Но да, этот проект не для поисковых систем.

Comments

[ijakparov]

Каким образом использовать react если часть контента к примеру рендерится на php, не писать же компонент для того чтобы скрыть/показать текст?

[Артем Кисленко]

ijakparov: Может я не понял вопроса, php отдает json, react собирает из json то, что нужно.

[ijakparov]

Артем Кисленко: К примеру на сайте вы используете CMS Wordpress Или Bitrix. У вас весь контент в таком случае рендерится c php. Вот есть у вас страница контактов на ней react компонент это только форма обратной связи, а все остальное (шапка, футер, сайдбар итд) это html отрендериный php, и вот у вас на странице контактов есть необходимость к примеру разворачивать некий контент по клику на него.

[Артем Кисленко]

ijakparov: Да, вы правы, в этом и было изначально затруднение. Как я уже писал, получалась некоторая мешанина из jQuery и React на начальном этапе. Я использовал Django и серверный рендеринг, получилось действительно красиво (на мой взгляд) и вроде даже глаз не режет. Для php тоже что-то есть похожее, - www.phpied.com/server-side-react-with-php

[ijakparov]

Артем Кисленко: Считаете что нужно избавляться от jQuery в подобных проектах? По моему если рендерить JSX из php и так же использовать компоненты react собранные в бандл из commonJS модулей, то в один прекрасный момент возникнет путаница так как придется искать где именно у вас описан этот компонент. Получится что-то вроде разных сред разработки, все не в одном месте.

[Артем Кисленко]

ijakparov: нет, считаю, что в коммерческих проектах с этим не стоит заморачиваться (даже вредно). Лучше, просто попытаться реорганизовать структуру файлов и папок. Как уже писали выше, сама jQuery - это не проблема, проблема стиль написания кода. А вот начать пользоваться сборщиком js (уже после реорганизации), я бы рекомендовал, т.к. это может избавить от постоянных дублей кода (это имело место в моем случае).

[ijakparov]

Артем Кисленко: я как раз был в поисках структурирования jquery и вынесения всего js в модули nodejs. Вот так к примеру я пишу сейчас модули:

module.exports = function(){

return{
init: function(){
this.event();
},
event: function(){
jQuery(".js-show-more-descr").click(function(){
jQuery(this).hide();
jQuery(".chars").css("max-height","none");
});
}
}
};