Submit Search
Upload
Google Closure Toolsで作った大規模サービスにReactを導入した話
•
9 likes
•
40,290 views
Yusuke Amano
Follow
React.js meetup #2 http://eventdots.jp/event/568979
Read less
Read more
Technology
Report
Share
Report
Share
1 of 20
Download Now
Download to read offline
Recommended
Our wish to Flowtype
Our wish to Flowtype
Teppei Sato
玉子屋のすすめ
玉子屋のすすめ
silvers ofsilvers
導入に困っているあなたに贈る スクラム導入コミュニケーション術
導入に困っているあなたに贈る スクラム導入コミュニケーション術
Kouki Kawagoi
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
なんたって”DevQA” アジャイル開発とQAの合体が改善を生む - 永田 敦 氏 #postudy
POStudy
[RSGT2017] つらい問題に出会ったら
[RSGT2017] つらい問題に出会ったら
Takahiro Kaihara
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました
Yusuke Amano
WalB: Real-time and Incremental Backup System for Block Devices
WalB: Real-time and Incremental Backup System for Block Devices
uchan_nos
3000社の業務データ絞り込みを支える技術
3000社の業務データ絞り込みを支える技術
Ryo Mitoma
More Related Content
More from Yusuke Amano
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
Yusuke Amano
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
Yusuke Amano
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
Yusuke Amano
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
Yusuke Amano
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
Yusuke Amano
kintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組み
Yusuke Amano
チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?
Yusuke Amano
あなたの開発チームには、チームワークがあふれていますか?
あなたの開発チームには、チームワークがあふれていますか?
Yusuke Amano
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
Yusuke Amano
我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったこと
Yusuke Amano
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
Yusuke Amano
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
Yusuke Amano
こだわりのkintone
こだわりのkintone
Yusuke Amano
Closure Toolsの紹介
Closure Toolsの紹介
Yusuke Amano
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Yusuke Amano
More from Yusuke Amano
(15)
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
市場価値で給料が決まるサイボウズの社員だけど、転職ドラフトに参加して給与交渉に挑戦してみました —結果編—
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
現役スクラムマスターが考える「こんなプロダクトオーナーは嫌だ」
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
チームワークあふれる働き方を目指して -サイボウズが歩んだスクラム導入の道-
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
ウォーターフォールからスクラム、そしてリモートスクラムへ〜サイボウズのスクラムの形〜
kintone開発チームのアジャイル開発の取り組み
kintone開発チームのアジャイル開発の取り組み
チームワークあふれる働き方って何だろう?
チームワークあふれる働き方って何だろう?
あなたの開発チームには、チームワークがあふれていますか?
あなたの開発チームには、チームワークがあふれていますか?
サイボウズはいかにしてReactを導入したか
サイボウズはいかにしてReactを導入したか
我々がスクラム挑戦権を得るためにやったこと
我々がスクラム挑戦権を得るためにやったこと
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
エンジニアだけどもっとユーザーに価値を届けたいからスクラムマスター始めました
kintoneフロントエンド開発 モダン化への道
kintoneフロントエンド開発 モダン化への道
こだわりのkintone
こだわりのkintone
Closure Toolsの紹介
Closure Toolsの紹介
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Webアプリケーションをもっと楽しく! 〜フロントエンドのお仕事〜
Recently uploaded
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
Sadao Tokuyama
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
Recently uploaded
(12)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
2024 03 CTEA
2024 03 CTEA
2024 04 minnanoito
2024 04 minnanoito
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Google Closure Toolsで作った大規模サービスにReactを導入した話
1.
Google Closure Toolsで 作った大規模サービスに Reactを導入した話 React.js
meetup #2 @ama_ch 2015/09/08
2.
自己紹介 • 天野 祐介
(@ama_ch) • front-end developer • サイボウズ株式会社 • kintone
3.
React導入前 • Closure Library
(JSライブラリ) • Closure Compiler (minify&型検査) • Closure Templates (テンプレートエンジン) • プログラマ15名 • JS30万行
4.
React導入前 • UIはClosure Library
+ Closure Templatesで実装 • コンポーネント指向 (goog.ui.Component) • Closure Compilerで型を保証 • 全体的にコードが長くなりがちでイベント制御などが 複雑 • サードパーティライブラリとの相性が悪い
5.
疑問 • Closure CompilerでReactのコードをコンパイ ルできるの? •
ReactのコードをClosure Compilerで型チェッ クできるの? • Closure LibraryとReactを混ぜるとどういう書 き方になるの? • 既存UI資産はどうなるの?
6.
疑問 • Closure CompilerでReactのコードをコンパイ ルできるの? •
ReactのコードをClosure Compilerで型チェッ クできるの? • Closure LibraryとReactを混ぜるとどういう書 き方になるの? • 既存UI資産はどうなるの?
7.
• できる • Closure
Compilerではexternsというd.tsみた いなファイルを渡すことでリネームから保護できる • Reactのexternsがオープンソースで公開されてる https://github.com/steida/react-externs • 微妙に動かないところがあるから独自externsも書 いてる
8.
疑問 • Closure CompilerでReactのコードをコンパイ ルできるの? •
ReactのコードをClosure Compilerで型チェッ クできるの? • Closure LibraryとReactを混ぜるとどういう書 き方になるの? • 既存UI資産はどうなるの?
9.
• React.createClass()では型チェックが効かない • React.Component(ES6
Classes)を使いたいけ どまだES6使ってない • ES5 + Closure LibraryでReact.Component を使う方法で解決。JSDocアノテーションも効く • 型に守られたReact!!!
10.
NG sample.components.MyComponent = React.createclass({ /** *
@param {string} name * @return {string} */ hello: function(name) { return 'Hello, ' + name; }, /** @override */ render: function() { var text = this.hello(1); // Error! return ( <div>{text}</div> ); } });
11.
OK /** * @param {Object}
props * @param {Object} context * @constructor * @extends {React.Component} */ sample.components.MyComponent = function(props, context) { sample.components.MyComponent.base(this, 'constructor', props, context); }; goog.inherits(sample.components.MyComponent, React.Component); /** * @param {string} name * @return {string} */ sample.components.MyComponent.prototype.hello = function(name) { return 'Hello, ' + name; }; /** @override */ sample.components.MyComponent.prototype.render = function() { var text = this.hello(1); // Error! return ( <div>{text}</div> ); };
12.
疑問 • Closure CompilerでReactのコードをコンパイ ルできるの? •
ReactのコードをClosure Compilerで型チェッ クできるの? • Closure LibraryとReactを混ぜるとどういう書 き方になるの? • 既存UI資産はどうなるの?
13.
• ClosureコンポーネントツリーとReactコンポーネ ントツリーの接続部分をどうするか • ベースはClosureなのでgoog.ui.Componentで Reactコンポーネントをラップした •
Reactツリーの中ではコンポーネント同士でイベント のやり取りをしたりメソッド呼び出しができない • React部分にはFluxを導入 • DispatcherをClosureで書き直したほぼ素のFlux
14.
Closure Closure Closure React Closure React React Flux
15.
疑問 • Closure CompilerでReactのコードをコンパイ ルできるの? •
ReactのコードをClosure Compilerで型チェッ クできるの? • Closure LibraryとReactを混ぜるとどういう書 き方になるの? • 既存UI資産はどうなるの?
16.
• Reactコンポーネント内でgoog.ui.Component をrenderする • componentDidMountと componentDidUpdateで手動更新すれば対応可 能 •
既存UI資産をReact化してJSXの中で使える • けっこうコツがいる
17.
React/Flux導入の効果 • Fluxによって役割分担しやすくなった • Viewが肥大化しない •
イベントを追ってあっちこっち飛ばないのが楽 • モデルが一箇所だけで更新される安心感 • 手続き的に書いてたUIコードがほぼマークアップに なるのがすごい
18.
今後 • チーム内に布教 • 既存UI資産のReactコンポーネント化 •
ベストプラクティスの探求
19.
現場からは以上です! Thank you!
20.
WE RE HIRING!! 型のあるReact/Fluxを探求したい方はぜひサイボウズへ! http://cybozu.co.jp/company/job/
Download Now