Suche senden
Hochladen
React and-rx
•
Als PPTX, PDF herunterladen
•
1 gefällt mir
•
1,943 views
Taketoshi 青野健利
Folgen
ARCANA Meetup LT React x RX
Weniger lesen
Mehr lesen
Software
Melden
Teilen
Melden
Teilen
1 von 15
Jetzt herunterladen
Empfohlen
GraphQL with React
GraphQL with React
Taketoshi 青野健利
Reactを使ったVR環境
Reactを使ったVR環境
KatsuyaENDOH
Apolloを使って、React-Reduxの世界にGraphQLを持ち込む
Apolloを使って、React-Reduxの世界にGraphQLを持ち込む
chuck h
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
AWSで開発するサーバレスAPIバックエンド
AWSで開発するサーバレスAPIバックエンド
暁 三宅
react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
暁 三宅
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
LightNode - Micro RPC/REST Framework
LightNode - Micro RPC/REST Framework
Yoshifumi Kawai
Empfohlen
GraphQL with React
GraphQL with React
Taketoshi 青野健利
Reactを使ったVR環境
Reactを使ったVR環境
KatsuyaENDOH
Apolloを使って、React-Reduxの世界にGraphQLを持ち込む
Apolloを使って、React-Reduxの世界にGraphQLを持ち込む
chuck h
V8 Iginition Interpreter
V8 Iginition Interpreter
Taketoshi 青野健利
AWSで開発するサーバレスAPIバックエンド
AWSで開発するサーバレスAPIバックエンド
暁 三宅
react-scriptsはwebpackで何をしているのか
react-scriptsはwebpackで何をしているのか
暁 三宅
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
Hayashi Yuichi
LightNode - Micro RPC/REST Framework
LightNode - Micro RPC/REST Framework
Yoshifumi Kawai
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
Akira Inoue
WebGL Performance Tuning Tips
WebGL Performance Tuning Tips
Yukio Andoh
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Koichiro Sumi
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301
Masanobu Shimura
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Yuta Matsumura
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
Koichiro Sumi
OSS Product feat. Gradle
OSS Product feat. Gradle
Yasuharu Nakano
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
Ipv6+JMeter+GAE
Ipv6+JMeter+GAE
Kazumune Katagiri
PHP Application E2E with Capybara
PHP Application E2E with Capybara
Yoshiaki Yoshida
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
OWIN って何?
OWIN って何?
miso- soup3
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
kanazawa.rb LT gem
kanazawa.rb LT gem
BeMarble
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
The History of Reactive Extensions
The History of Reactive Extensions
Yoshifumi Kawai
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
Yoshifumi Kawai
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
Weitere ähnliche Inhalte
Was ist angesagt?
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
Akira Inoue
WebGL Performance Tuning Tips
WebGL Performance Tuning Tips
Yukio Andoh
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Koichiro Sumi
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301
Masanobu Shimura
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
Yuta Matsumura
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
Sho Okada
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
Koichiro Sumi
OSS Product feat. Gradle
OSS Product feat. Gradle
Yasuharu Nakano
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
dcubeio
Ipv6+JMeter+GAE
Ipv6+JMeter+GAE
Kazumune Katagiri
PHP Application E2E with Capybara
PHP Application E2E with Capybara
Yoshiaki Yoshida
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
OWIN って何?
OWIN って何?
miso- soup3
capybara で快適なテスト生活を
capybara で快適なテスト生活を
Ryunosuke SATO
kanazawa.rb LT gem
kanazawa.rb LT gem
BeMarble
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
The History of Reactive Extensions
The History of Reactive Extensions
Yoshifumi Kawai
WebWorker and Atomics
WebWorker and Atomics
Taketoshi 青野健利
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
Yoshifumi Kawai
Was ist angesagt?
(20)
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
デモで楽しむ Visual Studio 2022 & .NET 6 最新アップデート
WebGL Performance Tuning Tips
WebGL Performance Tuning Tips
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
Sidekiq Proを1年ほど使ってみて良かったところ、困ったところ | 新宿.rb 29th #shinjukurb
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kichijyojipm17-Riot20190301
kichijyojipm17-Riot20190301
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
イケてる技術で品質を担保しつつスピード感のある開発を実現する冴えたやり方
ASP.NETの進化とASP.NET Core Blazorの凄さ
ASP.NETの進化とASP.NET Core Blazorの凄さ
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
ActiveResourceモデルによるAPIの隠蔽の怖い話~レスポンスタイムへの致命的影響~ at #shinjukurb
OSS Product feat. Gradle
OSS Product feat. Gradle
React NativeでTwitterクライアントを作ってみよう
React NativeでTwitterクライアントを作ってみよう
Ipv6+JMeter+GAE
Ipv6+JMeter+GAE
PHP Application E2E with Capybara
PHP Application E2E with Capybara
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
OWIN って何?
OWIN って何?
capybara で快適なテスト生活を
capybara で快適なテスト生活を
kanazawa.rb LT gem
kanazawa.rb LT gem
Angular2実践入門
Angular2実践入門
The History of Reactive Extensions
The History of Reactive Extensions
WebWorker and Atomics
WebWorker and Atomics
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
AWS + Windows(C#)で構築する.NET最先端技術によるハイパフォーマンスウェブアプリケーション開発実践
Ähnlich wie React and-rx
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
WESEEKWESEEK
linq.js - Linq to Objects for JavaScript
linq.js - Linq to Objects for JavaScript
Yoshifumi Kawai
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
chuck h
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
kazuki matsumura
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
kazuki matsumura
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
サーバレスアーキテクチャを実戦投入するにあたって知るべきこと
サーバレスアーキテクチャを実戦投入するにあたって知るべきこと
暁 三宅
クラウド & STAR-CCM+ を活用するための勘ドコロ
クラウド & STAR-CCM+ を活用するための勘ドコロ
Rescale Japan株式会社
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
kazuki matsumura
The First React on Rails
The First React on Rails
Kohei Ito
React vtecx20170822
React vtecx20170822
Shinichiro Takezaki
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
OpenShift v3 Technical Introduction
OpenShift v3 Technical Introduction
Etsuji Nakai
React + Reduxで作る対話AI
React + Reduxで作る対話AI
Kentaro Tada
20131210 classmethod re:Growth session04
20131210 classmethod re:Growth session04
Kazuki Ueki
SQLQL は GraphQL にとってなんなのか
SQLQL は GraphQL にとってなんなのか
yancya
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
PIXTA Inc.
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
React vtecx20170920
React vtecx20170920
Shinichiro Takezaki
Ähnlich wie React and-rx
(20)
20160927 reactmeetup
20160927 reactmeetup
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
Rails×React×TS で作るwebアプリ入門【weseek tech conf #10】
linq.js - Linq to Objects for JavaScript
linq.js - Linq to Objects for JavaScript
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
Web開発初心者がReactをチームに導入して半年経った
Web開発初心者がReactをチームに導入して半年経った
React Nativeでお絵描きしてみた
React Nativeでお絵描きしてみた
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
サーバレスアーキテクチャを実戦投入するにあたって知るべきこと
サーバレスアーキテクチャを実戦投入するにあたって知るべきこと
クラウド & STAR-CCM+ を活用するための勘ドコロ
クラウド & STAR-CCM+ を活用するための勘ドコロ
ReactでCMSを作ったときにハマったこと
ReactでCMSを作ったときにハマったこと
The First React on Rails
The First React on Rails
React vtecx20170822
React vtecx20170822
React meetup 3_eight
React meetup 3_eight
OpenShift v3 Technical Introduction
OpenShift v3 Technical Introduction
React + Reduxで作る対話AI
React + Reduxで作る対話AI
20131210 classmethod re:Growth session04
20131210 classmethod re:Growth session04
SQLQL は GraphQL にとってなんなのか
SQLQL は GraphQL にとってなんなのか
WebエンジニアのReactNativeでの戦い方
WebエンジニアのReactNativeでの戦い方
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
React vtecx20170920
React vtecx20170920
Mehr von Taketoshi 青野健利
ServiceWorkerとES6 Modules時代のTypescript開発考察
ServiceWorkerとES6 Modules時代のTypescript開発考察
Taketoshi 青野健利
javascriptのデータ構造の話
javascriptのデータ構造の話
Taketoshi 青野健利
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
Taketoshi 青野健利
非同期javascriptの過去と未来
非同期javascriptの過去と未来
Taketoshi 青野健利
仮想DOMの実装とパフォーマンス
仮想DOMの実装とパフォーマンス
Taketoshi 青野健利
JavascriptのGC入門
JavascriptのGC入門
Taketoshi 青野健利
Jspmとtypescriptで開発する
Jspmとtypescriptで開発する
Taketoshi 青野健利
Mehr von Taketoshi 青野健利
(7)
ServiceWorkerとES6 Modules時代のTypescript開発考察
ServiceWorkerとES6 Modules時代のTypescript開発考察
javascriptのデータ構造の話
javascriptのデータ構造の話
V8 javascript engine for フロントエンドデベロッパー
V8 javascript engine for フロントエンドデベロッパー
非同期javascriptの過去と未来
非同期javascriptの過去と未来
仮想DOMの実装とパフォーマンス
仮想DOMの実装とパフォーマンス
JavascriptのGC入門
JavascriptのGC入門
Jspmとtypescriptで開発する
Jspmとtypescriptで開発する
React and-rx
1.
ReactとRX
2.
名前: @brn (青野健利) 職業:
フロントエンドエンジニア・ネイティブエンジニア 会社: Cyberagent アドテクスタジオ RightSegment・AI Messenger ブログ: http://brn-log.hatenablog.com/
3.
アーキテクチャの問題 Reduxはよくできている。が、もっと検討してみよう。 うん?Cyclejs?なんだこれ?
4.
アーキテクチャの問題
5.
アーキテクチャの問題 よし、パクろう。 けどJSX使いたい。 よし、作ろう。
6.
MVIアーキテクチャを取り入れる
7.
MVIアーキテクチャを取り入れる
8.
React + RX Cyclejsをパクって、Rxjsを取り入れたけど、 RxjsのSubscribeでレンダリングするのは嫌ー PropsにObservableを渡したらよしなにしてほしい… よし、作ろう…
9.
react-mvi import { Tags as
T } from '@react-mvi/core'; class Component extends React.Component { render() { <T.Div> <h1>{this.props.text.map(v => v + ' World')}</h1> </T.Div> } }
10.
react-mvi 内部では、ObservableをsubscribeしてVirtualDOMを書き換えています。 変更が起きた所のみをミュータブルに変更するので、高速です。 shouldComponentUpdate必要ないです。 結果通常のReactでは不可能な部分更新に対応できました。
11.
react-mvi なんかMVIのModelになんでも入ってて嫌だから分割しよう。 そんで、分割したクラスはもちろんDIしたい。 DIコンテナも作るか。
12.
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);
13.
react-mvi ちゃんとReactコンポーネントでも動きます!
14.
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
15.
react-mvi https://github.com/brn/react-mvi 私はスターが好きです。 Ilikegithubstar.
Jetzt herunterladen