?

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
cartoon

NestedReact 1.0 beta. Hierarchical Checklist Demo.

Posted on 2016.08.08 at 21:50

Comments:


ЛёШа Фу!
kvasdopil at 2016-08-10 15:15 (UTC) (Link)
> Поспорьте.
Да пожалуйста. https://github.com/kvasdopil/checklistTree

В принципе, видны преимущества вашей библиотеки:
1) из коробки есть сериализация и контроль типов
2) прикручен 2-way биндинг к контролам форм
3) (наверное) оно быстрее работает на ваших задачах

С другой стороны, от синтаксиса апей хочется разрыдаться.
Gaperton
gaperton at 2016-08-10 21:25 (UTC) (Link)
А что, выглядит совсем неплохо. Кода чуть побольше, но незначительно.

Индивидуальная подписка каждого экземпляра на обновления своих данных с автоматическими локальными апдейтами - это конечно выглядит очень круто. Это то место, где эти примеры работают по разному - NestedReact подписывает на обновления только state, и update идет сверху, отсекая лишнее pureRender-ом.

Локальные обновления тоже можно, но их надо включать отдельной строкой (listenToProps = 'propName1 propName2' ) и выносить state в store. Мы так не любим делать. Хотелось бы посмотреть, как оно будет работать в случае со state - для чистоты сравнения. И что там тогда с рендерами будет.

А так да, по возможностям наблюдения за состоянием получается практически равноценно. Отсутствие data binding, сериализации, валидации (в этом примере не используется) - это, пожалуй, основное.

А насчет синтаксиса - я решительно не вижу в каком месте надо разрыдаться. Синтаксис простой и литературный.

Edited at 2016-08-10 09:43 pm (UTC)
Gaperton
gaperton at 2016-08-10 22:11 (UTC) (Link)
Ну и спасибо, конечно. Отличный пример.
ЛёШа Фу!
kvasdopil at 2016-08-11 06:00 (UTC) (Link)
Вам тоже спасибо, идея линков меня заинтересовала. Задницей чую что их можно получить в mobx из коробки. Напишу если найду.
ЛёШа Фу!
kvasdopil at 2016-08-11 08:44 (UTC) (Link)
В общем от mobx функциональности линков добиться не получилось. Они там внутри используются (ака BoxedValue), но их проблематично достать из рендера.
В принципе, всё легко решается наколхоживанием линков руками (см https://github.com/kvasdopil/checklistTree/blob/master/src/link.js) и валидаторы туда засунуть не проблема. Правда есть сомнения, что оно будет прям настолько уж удобно.

Оно будет несколько удобнее, если формы описывать живыми реактовскими компонентами. Просто мы вместо этого пишем что то типа

popupForm({
 title: "Edit User",
 data: this.object,
 fields: [{
  name: 'name',
  validator: validators.UserName,
 },{
  name: 'icon',
  type: IconSelect
 }]
})

и, раз у нас на каждую форму всё равно магический враппер накручен, то и смысл в ништяках типа линков пропадает.

А как у вас валидация сделана? Мож я не понимаю чего-то?
Gaperton
gaperton at 2016-09-06 02:24 (UTC) (Link)
Все просто. Во-первых, реализация линков вынесена в отдельный пакет.

https://github.com/Volicon/NestedLink

Там кода совсем немного, и он простой. Его можно почитать.

Во-вторых, эти линки легко прикручиваются к любому источнику данных. Сделать привязку к mobx - это немного поправить метод Link.state. Надо сделать линк, который вместо setState при записи тупо пишет в проперти объекта. И все.

Еще надо поправить Link.all(). По хорошему - эта пара поправленных методов выносится в базовый класс, рядом с которым кладется новый подкласс линков.

Вот так это делается для NestedReact: https://github.com/Volicon/NestedReact/blob/develop/src/nested-link.js
Gaperton
gaperton at 2016-09-06 02:28 (UTC) (Link)
Могу добавить, что эти линки из NestedLink мало того, что дохрена могут (что, впрочем, в случае mobx по большей части не нужно, но валидацию на коленке, например, могут), но лишены их традиционных недостатков о которы пишут в сети. Например, они умеют кэшируются в компоненте. Что не ломает pure render.

Последнее, впрочем, тоже в случае mobx не особенно нужно, наверное. Там локальный render ведь всегда, вроде. ХЗ, как это с линками будет дружить при их передаче в другие компоненты.
Gaperton
gaperton at 2016-09-06 02:35 (UTC) (Link)
Валидация сделана так. http://slides.com/vladbalin/deck#/

Каждый класс модели и коллекции умеет валидировать себя, и метод model.getLink( 'attr' ) протаскивает validation error модели как еще один проперти линка.

Принцип, как линки используются для валидации, объяснен здесь: https://medium.com/@gaperton/react-forms-with-value-links-part-2-validation-9d1ba78f8e49#.78tgyjp5m

Этот трюк - это по настоящему круто, кстати. Позволило сократить код форм в нашем продукте примерно в половину. ИМХО - это главнейший аргумент в пользу линков. То, что они позволяют писать минус пропс - это ерунда в сравнении с валидацией.

Edited at 2016-09-06 02:37 am (UTC)
Previous Entry  Next Entry