Slide 1

Slide 1 text

ReactとRX

Slide 2

Slide 2 text

名前: @brn (青野健利) 職業: フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/

Slide 3

Slide 3 text

アーキテクチャの問題 Reduxはよくできている。が、もっと検討してみよう。 うん?Cyclejs?なんだこれ?

Slide 4

Slide 4 text

アーキテクチャの問題

Slide 5

Slide 5 text

アーキテクチャの問題 よし、パクろう。 けどJSX使いたい。 よし、作ろう。

Slide 6

Slide 6 text

MVIアーキテクチャを取り入れる

Slide 7

Slide 7 text

MVIアーキテクチャを取り入れる

Slide 8

Slide 8 text

React + RX Cyclejsをパクって、Rxjsを取り入れたけど、 RxjsのSubscribeでレンダリングするのは嫌ー PropsにObservableを渡したらよしなにしてほしい… よし、作ろう…

Slide 9

Slide 9 text

react-mvi import { Tags as T } from '@react-mvi/core'; class Component extends React.Component { render() {

{this.props.text.map(v => v + ' World')}

} }

Slide 10

Slide 10 text

react-mvi 内部では、ObservableをsubscribeしてVirtualDOMを書き換えています。 変更が起きた所のみをミュータブルに変更するので、高速です。 shouldComponentUpdate必要ないです。 結果通常のReactでは不可能な部分更新に対応できました。

Slide 11

Slide 11 text

react-mvi なんかMVIのModelになんでも入ってて嫌だから分割しよう。 そんで、分割したクラスはもちろんDIしたい。 DIコンテナも作るか。

Slide 12

Slide 12 text

react-mvi import { createModule, Injector, inject } from '@react-mvi/core'; import { MyService } from './myservice'; class MyComponent { @inject() private myService; ... } const module = createModule(config => { config.bind('myService').to(MyService).asSingleton(); }); const injector = new Injector([module]); const myComponent = injector.inject(MyComponent);

Slide 13

Slide 13 text

react-mvi ちゃんとReactコンポーネントでも動きます!

Slide 14

Slide 14 text

react-mvi import React from 'react' import { createModule, Injector, inject, run } from '@react-mvi/core'; import { MyService } from './myservice'; class MyComponent extends React.Component { @inject() private myService; ... } const module = createModule(config => { config.bind('myService').to(MyService).asSingleton(); }); const injector = new Injector([module]); run({component: MyComponent, injector}); // SAME AS ReactDOM.render

Slide 15

Slide 15 text

react-mvi h"ps://github.com/brn/react-mvi 私はスターが好きです。 I like github star.