?

Log in

No account? Create an account
November 2016   01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

August 8th, 2016


cartoon

NestedReact 1.0 beta. Hierarchical Checklist Demo.

Posted on 2016.08.08 at 21:50
Tags:
Пример из 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. И не только бэкбон :).

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

Previous Day  Next Day