August 8th, 2016

cartoon

NestedReact 1.0 beta. Hierarchical Checklist Demo.

Пример из NestedReact 1.0 beta, которая сейчас в бранче develop.

Это вот такой иерархический чекист с правилом - группа выбрана тогда и только тогда, когда все дерево под ней выбрано. 79 строк кода за вычетом комментариев и пустых. В основе - новый движок транзакционных моделей, написанный на TypeScript (NestedTypes 2.0 beta). Кругом ES6 классы. Ни одного стора нет. Просто составное состояние в корневом элементе.



Так вот, здесь, не смотря на data binding и классическое ОО в слое данных - unidirectional data flow, и вовсю работает pure render оптимизация. Очень рекомендую на код посмотреть - я его закомментировал в литературном стиле. Там смотреть то почти не на что - кода тьфу.

https://github.com/Volicon/NestedReact/tree/develop/examples/checklistTree

И то и другое возможно на классических моделях без каких-либо проблем. Не верите - запустите и посмотрите в React Tools как там рендер происходит. :) Оно уже собрано, надо просто сделать клон репозитория, и открыть index.html. Да, эти линии - в них можно кликать мышкой и писать там. Это input на самом деле.

UPD: Теперь оно сохраняет и восстанавливает состояние работая с localstorage. В качестве демонстрации, что любое состояние сериализуемо.

ЗЫ: Все время слышу последнее время - mobx, mobx. Было бы клево, если бы кто-нибудь сделал аналогичный пример на mobx.

TypeScript: https://github.com/mikhail-aksenov/mobxChecklist
ES6: https://github.com/kvasdopil/checklistTree

Спасибо, ребята. Выглядит действительно очень похоже. Оба примера по 90 строк. Пример с NestedReact занимает столько же, только в отличии от примеров mobx он сохраняется в LocalStorage. Бесплатная сериализация - это самое основное отличие. Ну, могу еще для демонстрации отличий валидацию на текстовое поле навесить. :) У меня это делается в модели - "name : String" -> "name : String.has.check( x => x )", и поле с именем получит стиль error, если значение пустое. Красным станет, например. Само.

Полный список возможеностей сверх mobx - two-way data binding, декларативная валидация, миксины, коллекции с индексами по id вместо простых массивов, сериализация (с id-ссылками и без), REST.

ЗЗЫ: На всякий случай напоминаю, что этим волшебным моделям NestedTypes уже два с половиной года. Они как бэ пораньше mobx появились, у нас в Verizon поверх них уже 100К строк наколбашено. Я считаю, это освобождает меня от дурацких объяснений "а зачем оно написано если есть mobx". И если честно - я сильно сомневаюсь, что mobx сравним с NestedTypes по производительности на сериализации и синхронизации с сервером коллекций сложных объектов по десять тыщ элементов. У нас на таком сейчас в 2.0 beta субсекундный отклик, например (часть требований). А вот, например, Backbone на таком - сдохнет, он заблокирует тред браузера секунд на 10. И не только бэкбон :).

ЗЗЗЫ: Это вообще довольно глупый вопрос - "а зачем". Затем, что можем. Не хотим страдать с редуксами, как все, и не собираемся дожидаться, когда кто-то что-нибудь сделает с этим.