Всем привет! Недавно на новой работе начали использовать React.js, и всё было хорошо, пока наш тимлид не решил подключить к нему Relay, который идёт только в связке с языком запросов GraphQL. Там всё стильно, модно, молодёжно, и основная идея — в декларативной привязке данных к компонентам. Но, важно: этим технологиям около полугода, на сайте GraphQL написано, что версия продукта — черновая, и что всё может кардинально измениться.
Не желая поддаваться хипстерским тенденциям, я решил написать что-то простое, использующее тот же декларативный подход, но не такое перегруженное, и с большей свободой в выборе источников данных (вместо запросов — произвольные функции, возвращающие данные через callback). В планах — добавить внутренний механизм AJAX-запросов (или, если есть удобная библиотека (не jQuery), подскажите мне, пожалуйста).
К счастью, на внедрение Relay/GraphQL у тимлида не хватает времени, так что команда начинает пользоваться моим велосипедом, и, надеюсь, это более правильное решение, чем тащить в серьёзный проект огромный сырой фреймворк.
Короче, вот код: https://github.com/xenohunter/DumbRelay. Надеюсь, пригодится кому-то ещё.
P.S. Предполагаю, что не всем интересно читать README на английском, поэтому под катом ниже — небольшой пример.
import DumbRelay from 'dumb-relay';
class MyList extends Component {
render() {
// Данные хранятся в this._data
var clients = this._data['clients'],
list = clients.map(function (client) {
return (<li>{client.name}</li>);
});
return(<ul>{list}</ul>);
}
}
DumbRelay.link(MyList, {
clients: {
// Источник данных
source: api.getClients,
// Обновление данных каждые 5 секунд
rate: 5000,
// Можно пропустить данные через pipeline из фильтров
pipe: [
function (data, callback) {
// Например, показать только VIP-клиентов
data = data.filter((client) => client.isVIP());
}
]
}
});P.P.S. Код не залезает под кат, простите.
P.P.P.S. Подсветку кода убрал специально, так как она сломалась об Harmony.
