Suche senden
Hochladen
AngularJSとFluxとRiotJSと
•
0 gefällt mir
•
5,033 views
Ryo Iinuma
Folgen
http://gotandajs.connpass.com/event/20838/ で話した資料です
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 42
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
Angular2
Angular2
Kenichi Kanai
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Riotjsハンズオン
Riotjsハンズオン
omi end
Empfohlen
Riot.jsに触れてみた話
Riot.jsに触れてみた話
エンジニア勉強会 エスキュービズム
イベント駆動AngularJS / 今から書くAngular 2.0
イベント駆動AngularJS / 今から書くAngular 2.0
Okuno Kentaro
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Angular jsの継続的なバージョンアップ
Angular jsの継続的なバージョンアップ
Kazuyoshi Tsuchiya
Angular2
Angular2
Kenichi Kanai
Angular 4がやってくる!? 新機能ダイジェスト
Angular 4がやってくる!? 新機能ダイジェスト
Masahiko Asai
開発ライフサイクルから見たAngularJS
開発ライフサイクルから見たAngularJS
Mizuho Sakamaki
Riotjsハンズオン
Riotjsハンズオン
omi end
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Editorlt
Editorlt
Masaki Suzuki
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
Yasunobu Ikeda
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
Vscodemeetup6
Vscodemeetup6
Masaki Suzuki
Angular js開発事例
Angular js開発事例
Shun Takeyama
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
社内LTネタ ReactNative
社内LTネタ ReactNative
Oguri Toru
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
Our Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
React + Flux
React + Flux
_yukikayuki
NodeJSでCLI開発を楽しくするライブラリの紹介
NodeJSでCLI開発を楽しくするライブラリの紹介
Ryo Iinuma
Weitere ähnliche Inhalte
Was ist angesagt?
Directiveで実現できたこと
Directiveで実現できたこと
Kon Yuichi
Editorlt
Editorlt
Masaki Suzuki
Enterprise x AngularJS
Enterprise x AngularJS
Kenichi Kanai
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
React meetup 3_eight
React meetup 3_eight
Hideharu Okuma
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
Yasunobu Ikeda
angular1脳で見るangular2
angular1脳で見るangular2
Moriyuki Arakawa
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
noteをAngularJSで構築した話
noteをAngularJSで構築した話
Kon Yuichi
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Horiguchi Seito
Vscodemeetup6
Vscodemeetup6
Masaki Suzuki
Angular js開発事例
Angular js開発事例
Shun Takeyama
One-time Binding & $digest
One-time Binding & $digest
Hayashi Yuichi
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
Masaki Suzuki
社内LTネタ ReactNative
社内LTネタ ReactNative
Oguri Toru
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
Our Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
Was ist angesagt?
(20)
Directiveで実現できたこと
Directiveで実現できたこと
Editorlt
Editorlt
Enterprise x AngularJS
Enterprise x AngularJS
Angular2実践入門
Angular2実践入門
React meetup 3_eight
React meetup 3_eight
CSS Living StyleGuide
CSS Living StyleGuide
クリエイティブの視点から探るAngular 2の可能性
クリエイティブの視点から探るAngular 2の可能性
angular1脳で見るangular2
angular1脳で見るangular2
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
noteをAngularJSで構築した話
noteをAngularJSで構築した話
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
超初心者でも大丈夫!AngularJSでフォームページをちょっとリッチに改造してみよう
Vscodemeetup6
Vscodemeetup6
Angular js開発事例
Angular js開発事例
One-time Binding & $digest
One-time Binding & $digest
アプリ開発&チーム管理で役立った拡張機能
アプリ開発&チーム管理で役立った拡張機能
社内LTネタ ReactNative
社内LTネタ ReactNative
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Our Track to Modern Angular
Our Track to Modern Angular
Andere mochten auch
React + Flux
React + Flux
_yukikayuki
NodeJSでCLI開発を楽しくするライブラリの紹介
NodeJSでCLI開発を楽しくするライブラリの紹介
Ryo Iinuma
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
Yusuke Naka
フロントエンドから見たWebアプリの高速化 #gotandapm
フロントエンドから見たWebアプリの高速化 #gotandapm
Ryo Iinuma
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
Keisuke Imai
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
Ken Muryoi
Riot.js と戦った話 (8月26日 oRo LT 会)
Riot.js と戦った話 (8月26日 oRo LT 会)
kata shin
Riot: ver.3 での変更点と、周辺ツールたち
Riot: ver.3 での変更点と、周辺ツールたち
Tsutomu Kawamura
Riotでサーバレスにした話
Riotでサーバレスにした話
Hiroyuki Hara
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Ryo Iinuma
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
Keisuke Imai
FluxのDispatcherとAction周りのことでもやもやしていることを晒してみる
FluxのDispatcherとAction周りのことでもやもやしていることを晒してみる
Yuta Shimakawa
Andere mochten auch
(12)
React + Flux
React + Flux
NodeJSでCLI開発を楽しくするライブラリの紹介
NodeJSでCLI開発を楽しくするライブラリの紹介
SPAを実現するために必要な通信技術
SPAを実現するために必要な通信技術
フロントエンドから見たWebアプリの高速化 #gotandapm
フロントエンドから見たWebアプリの高速化 #gotandapm
Riot.jsと仲良くなるための僕的tips
Riot.jsと仲良くなるための僕的tips
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
サーバサイドなおじさんがSPAを趣味で初めて作ってみてわかった n のこと(仮)
Riot.js と戦った話 (8月26日 oRo LT 会)
Riot.js と戦った話 (8月26日 oRo LT 会)
Riot: ver.3 での変更点と、周辺ツールたち
Riot: ver.3 での変更点と、周辺ツールたち
Riotでサーバレスにした話
Riotでサーバレスにした話
最近のフロントエンドツールの紹介
最近のフロントエンドツールの紹介
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
FluxのDispatcherとAction周りのことでもやもやしていることを晒してみる
FluxのDispatcherとAction周りのことでもやもやしていることを晒してみる
Ähnlich wie AngularJSとFluxとRiotJSと
Tiなごや vol.3 Alloyやろまい
Tiなごや vol.3 Alloyやろまい
Mori Shingo
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
kumatch kumatch
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
Kazuki Tsutsumi
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
Kazuki Tsutsumi
テスト
テスト
Masashi Sato
Angular1&2
Angular1&2
Kenichi Kanai
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
y_uuki
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
chuck h
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
yoshikawa_t
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
Ricardo Alcocer
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
ralcocer
Spring.project
Spring.project
広平 田村
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
Takayuki Shimizukawa
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
Masayuki Iwai
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
Kaleidox
Kaleidox
Tomoharu ASAMI
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
Yutaka Tachibana
PySpark Intro Part.2 with SQL Graph
PySpark Intro Part.2 with SQL Graph
Oshitari_kochi
Aws向け監視ソリューション比較
Aws向け監視ソリューション比較
Naoya Hashimoto
Ähnlich wie AngularJSとFluxとRiotJSと
(20)
Tiなごや vol.3 Alloyやろまい
Tiなごや vol.3 Alloyやろまい
AngularJSからReactに移ったケースの話
AngularJSからReactに移ったケースの話
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Om Next ~React.jsを超えて
Om Next ~React.jsを超えて
高速!Clojure Web 開発入門
高速!Clojure Web 開発入門
テスト
テスト
Angular1&2
Angular1&2
JavaScript on GitHub (#kyotojs)
JavaScript on GitHub (#kyotojs)
Redux, Relay, HorizonあるいはElm
Redux, Relay, HorizonあるいはElm
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
オフラインWebアプリの再到来で今、再び注目されるAPIの本命 ーJavaScript SQL-like database
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
Slides for tiTokyo 2013 - Japanese version
Spring.project
Spring.project
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
ドキュメンテーションを加速するストレスフリーの作図ツール『blockdiag』 jus2011年6月勉強会
React Nativeで開発するマルチプラットフォームアプリ
React Nativeで開発するマルチプラットフォームアプリ
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
Kaleidox
Kaleidox
GraphQLはどんな時に使うか
GraphQLはどんな時に使うか
PySpark Intro Part.2 with SQL Graph
PySpark Intro Part.2 with SQL Graph
Aws向け監視ソリューション比較
Aws向け監視ソリューション比較
Kürzlich hochgeladen
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Kürzlich hochgeladen
(11)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
AngularJSとFluxとRiotJSと
1.
AngularJSとFluxと RiotJSと 2015/10/28 GotandaJS # @mizuki_r
2.
Profile account. twitter: @mizuki_r github: ry_mizuki role. フロントエンドエンジニア tags. AngularJS,
RiotJS, Backbone, hariko, angular-period, etc
3.
Theme • AngularJSで書いたアプリをFlux化した話 • Flux化したAngularJSアプリにRiotJS入れた話
4.
AngularJSで書いたアプリ をFlux化した話
5.
What is Flux?
6.
Flux s architecture https://facebook.github.io/flux/docs/overview.html
7.
Flux s architecture •
Facebookが提唱したアーキテクチャ • データの流れを一方向に限定する • Store, View, Dispatcherの責務がActionという 単位で処理を回す
8.
Flux s architecture https://github.com/facebook/flux/tree/master/examples/flux-todomvc/#structure-and-data-flow
9.
Why Flux
10.
Why Flux? • modelの管理に疲れた •
データ構造と責務分担の分類の考察 • 急なデータの変更、Viewの変更 • controllerでmodelを管理しがち • modelとmodelの連携 • controllerの抽象化が雑に…
11.
所謂MVCの運用には 高度な訓練と 高い意識が必要なのでは?
12.
もっと低意識で運用したい!
13.
I thought…
14.
ぼくのかんがえたさいきょうの… • Dispatcherは自前でObserver定義 • ViewとActionCreator,
Storeは一対 • ドメインの定義はViewにすべて移譲 • ActionCreatorは外部との連絡用 • API通信はngResourceをwrapしてrepository として分離 • actionにする前にデータ整形を行うメソッドを かます
15.
ぼくさいFlux arch
16.
ぼくさいFlux arch
17.
import * as
action_creator from '../action-creators/example' import store from '../stores/example' class ExampleCtrl { constructor ($scope) { this.onReceiveData = this.onReceiveData.bind(this) this.onDestroy = this.onDestroy.bind(this) store.addReceiveDataListener(this.onReceiveData) $scope.$on('$destroy', this.onDestroy) action_creator.init() } select () { action_creator.select() } onReceiveData () { this.data = store.getData() } onDestroy () { store.removeReceiveDataListener(this.onReceiveData) } } angular.module('example').controller('ExampleCtrl', ExampleCtrl)
18.
import dispatcher from
'../dispatcher' import action_types from '../action-types' import injector from '../injector' export function init () { dispatcher.handleViewAction({ type: action_types.INIT_EXAMPLE_VIEW, }) var Repository = injector.get('ExampleRepository') Repository.fetch().then((data) => { dispatcher.handleApiAction({ type: action_types.RECEIVE_EXAMPLE_DATA, data }) }) } export function select () { dispatcher.handleViewAction({ type: action_types.SELECT_EXAMPLE_VIEW, }) var Repository = injector.get('ExampleRepository') Repository.post().then((data) => { dispatcher.handleApiAction({ type: action_types.POST_SELECT_EXAMPLE_DATA, data }) }) }
19.
conclusion • ViewをActionCreatorとStoreに抽象化できた • コードが冗長になり、量が増えた •
初期開発コストは高いが更新の手間などは減っ た
20.
ViewをActionCreatorと Storeに抽象化できた
21.
…あれ?
22.
Angularじゃなくてもよくね?
23.
Flux化したAngularJSアプ リにRiotJS入れた話
24.
What is RiotJS?
25.
RiotJS • Reactライクのユーザインタフェースライブラリ • とっても小さい •
Virtual-DOM • JavaScript in HTML
26.
<todo> <!-- layout --> <h3>{
opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </form> <!-- logic --> <script> this.items = [] add(e) { var input = e.target[0] this.items.push(input.value) input.value = '' } </script> </todo> http://riotjs.com/ja/
27.
ファイルサイズ Reactの約1/19!
28.
つまり… • 小さいし必要最小限の機能 • 細かいViewの制御なら十分なAPI •
明示的な更新が可能なI/F • Component系なので最小限の変更範囲 • 書きやすそうなJSX
29.
Why is RiotJS?
30.
AngularJSへの不満… • $applyが重い • 暗黙的な$digestの管理が辛い
31.
$applyが遅い • 式を受け取りViewを更新するかを判定 • 更新する場合は`$scope.$digest()`
を実行 • $http, $timeoutなどのAPIが内部的に利用 • 登録されているすべてのリスナを評価する • 遅い評価式を登録してしまうと更新のたびに…
32.
暗黙的な$digestが辛い • $http, $timeoutなどAPIが暗黙的に発行する •
発行しないAPIもある • 自前で作った機能は$scope.$apply等が必要 • たまたまうまく更新がされるケース • digest中にdigestを発行すると死ぬ
33.
つまり… • 特定のView以下で更新したい • 短いサイクルでの更新 •
毎秒すべてのViewを評価してどうする • 明示的に更新したい • 必要ないところで評価されても • 更新したいタイミングは僕らが決めたい
34.
Angular with Riot
35.
RiotJSの役割 • 末端のViewの更新サイクルの管理 • 毎秒更新が発生するもの •
ホバーなどサイクルが短いもの • ユーザアクションのハンドルと他のViewとの連 携はFluxベースのアーキテクチャで吸収 • RiotからAngularのViewは参照しない
36.
directive angular.module('example', []).directive('todo', function
() { return function () { riot.mount('todo') } }) directive化することで、templateから参照できる。
37.
outside injector exports.get =
function (name) { return angular.element(document).injector().get(name) } injectorをAngularの管理外から参照できるように
38.
入れてみた結果 • 「遅い」と言われてた部分が解消(体感的に) • ぶっちゃけRiotJSが早いわけじゃない •
むしろ状況次第ではAngularより遅い • $digest漏れや$applyの遅延による「遅く見え る」が減少した • RiotJS、以外と書きやすい
39.
Conclusion
40.
Conclusion • FluxによるViewの抽象化事例を紹介 • Viewの単位でコードを管理できるので、追加・更新・削 除が思いの外簡単になった •
でもコード量は増えた • AngularJSとRiotJSの共存事例を紹介 • 目に見えて反応が違った • RiotJSは必要最小限で使う分にはかなり使い勝手良い • 個人的にはRiotJSXはもっと使って行きたい
41.
Next Generation • Fluxでの責務分担のあり方をもうちょっと考え たい •
いずれこれは二層式に集約されていくのだろう なと • ServiceWorker上で扱えるレベルのロジック の抽象化 • メインスレッドを綺麗にしてUIのパフォーマン スあげたい
42.
ご清聴ありがとうございました
Jetzt herunterladen