20161215-debugger.html - Speaker Deck

Slide 1

Slide 1 text

debugger.html：React x Redux app built-in Firefox Mozilla Japan N. Shimizu ([email protected]) 【ランサーズ×Mozilla×freee】React実践！勉強会@dots. (2016/12/15)

Slide 2

Slide 2 text

/4IJNJ[V!DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ ˖ 'JSFGPY'JSFGPYGPSJ04.%/CMPHQPTUT FUD ˖ 3VTUBTNKT8FC"TTFNCMZ8FC73%FW5PPMT ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ

Slide 3

Slide 3 text

react-vimjs: vimをReactコンポーネントにした例

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

Open Source Project

Slide 7

Slide 7 text

Proudly non-proﬁt, Mozilla makes products like Firefox with a mission to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)

Slide 8

Slide 8 text

To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

debugger.html：再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます • Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html

Slide 11

Slide 11 text

Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF%FCVHHJOH1SPUPDPM $ISPNF%FCVHHJOH1SPUPDPM 3FNPUF%FCVHHJOH1SPUPDPM

Slide 12

Slide 12 text

コマンドライン "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO=  TUBSUEFCVHHFSTFSWFS1EFWFMPQNFOU "QQMJDBUJPOT(PPHMF=$ISPNFBQQ$POUFOUT.BD04(PPHMF=$ISPNF= SFNPUFEFCVHHJOHQPSU OPEFJOTQFDUNZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動

Slide 13

Slide 13 text

コマンドライン OQNJOTUBMMHZBSO HJUDMPOFHJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU DEEFCVHHFSIUNM ZBSOJOTUBMM ZBSOSVO debugger.html のインストールと起動

Slide 14

Slide 14 text

スタンドアローンで起動した時のランディングページ

Slide 15

Slide 15 text

デバッグ対象を選択した場合の画面

Slide 16

Slide 16 text

開発の背景：XULからの移行 • Firefoxは一種のWebアプリケーションです • ブラウザエンジンGeckoの上に、JSとXULで実装されてきました • XUL：XMLベースのコンポーネント記述言語 • JS：みんな大好きJavaScript。コンポーネントの振る舞いを記述します • c.f. https://github.com/browserhtml/browserhtml • 開発ツールもXURLで実装されてきました、XULかける人は少ない • XULから離れることで、多くの方に開発へ参加いただけるようになります

Slide 17

Slide 17 text

3FBDUY3FEVYךⵃ欽

Slide 18

Slide 18 text

目的ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン

Slide 19

Slide 19 text

モジュール役割 debugger.html デバッガー本体 devtools-client-adapters Remote Debugging Protocolの差異を吸収するアダプター devtools-local-toolbox 開発ツールを開発するためのユーティリティ devtools-conﬁg ログレベルやポート番号など、デフォルトの設定をまとめたもの devtools-modules 開発ツール共有のツールとコンポーネント devtools-sham-modules Shammed DevTools Modules from M-C 関連するモジュール

Slide 20

Slide 20 text

コンポーネント

Slide 21

Slide 21 text

2つのモードがあるシングルページアプリケーション • 2つのモードデバッガーデバッグ対象選択

Slide 22

Slide 22 text

IUUQMPDBMIPTU DISPNFUBCEBCDCDFBBB IUUQMPDBMIPTU OPEFUBCEBCDCDFBBB IUUQMPDBMIPTU SFGPYUBCEBCDCDFBBB chrome-tab / node-tab / ﬁrefox-tabのパラメータが適切であれば、デバッグモードへ

Slide 23

Slide 23 text

デバッグ対象の選択画面は2つのコンポーネントで構成されています 3PPU -BOEJOH1BHF

Slide 24

Slide 24 text

"QQ 4QMJU#PY %SBHHBCMF 4PVSDFT 4QMJU#PY %SBHHBCMF 3JHIU4JEF#BS 4PVSDFT5BCT &EJUPS 4FBSDI4PVSDF デバッガーのコンポーネントの関係

Slide 25

Slide 25 text

&EJUPS 3JHIU4JEF#BS コンポーネントと実際のビューの対応 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF

Slide 26

Slide 26 text

Sourcesのサブコンポーネント 4PVSDFT5SFF .BOBHFE5SFF 5SFF

Slide 27

Slide 27 text

&EJUPS#SFBL1PJOU &EJUPS#SFBL1PJOU 4PVSDF'PPUFS Editorのサブコンポーネント

Slide 28

Slide 28 text

RightSidebarのサブコンポーネント $PNNBOE#BS "DDPSEJPO #SFBL1PJOUT 'SBNFT 4DPQFT

Slide 29

Slide 29 text

Flow SFOEFS$FOUFS1BOF \ SFUVSOEPNEJW \DMBTT/BNFDFOUFSQBOF^ EPNEJW \DMBTT/BNFFEJUPSDPOUBJOFS^ 4PVSDF5BCT &EJUPS UIJTQSPQTTFMFDUFE4PVSDF UIJTSFOEFS8FMDPNF#PY OVMM 4PVSDF4FBSDI ^ Flowとして処理できるようにReact.DOMを利用して描画ルーチンを記述しています

Slide 30

Slide 30 text

状態管理

Slide 31

Slide 31 text

"DUJPO $SFBUPS $PNQPOFOUT 4UPSF 3FEVDFS EJTQBUDI "DUJPO "DUJPO 4UBUF 4UBUF Redux：ActionをReducerで処理することで、Storeの管理するアプリの状態を変化させるアーキテクチャ

Slide 32

Slide 32 text

JS NPEVMFFYQPSUTDPOOFDU TUBUF QSPQT \ CSFBLQPJOUT@HFU#SFBLQPJOUT TUBUF ^ EJTQBUDICJOE"DUJPO$SFBUPST BDUJPOT EJTQBUDI #SFBLQPJOUT react-redux を利用してpropsの一部をStoreへ保存

Slide 33

Slide 33 text

Flow DPOTU*SFRVJSF JNNVUBCMF FYQPSUUZQF#SFBLQPJOUT4UBUF\ CSFBLQPJOUT*.BQTUSJOH #SFBLQPJOU CSFBLQPJOUT%JTBCMFEGBMTF ^ immutable.js を使って状態を変更不能に

Slide 34

Slide 34 text

バグ報告、コードのコントリビュートをお願いします！