20161215-debugger.html

Transcript

1. debugger.html：React x Redux app built-in Firefox Mozilla Japan N. Shimizu (nshimizu@mozilla-japan.org) 【ランサーズ×Mozilla×freee】React実践！勉強会@dots. (2016/12/15)
2. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ 'JSFGPY
   
   'JSFGPY
   GPS
   J04
   
   .%/
   
   CMPH
   QPTUT
   FUD
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   
   %FW5PPMT
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
3. react-vimjs: vimをReactコンポーネントにした例
6. Open Source Project
7. Proudly non-profit, 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/)
8. To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
10. debugger.html：再開発中のFirefox 組み込みのデバッガー • React と Redux、flow を使って実装されています • スタンドアローンで実行できます • Firefox だけでなく、Google Chromeやnode.jsで動いているコードもデバッグできます • https://github.com/devtools-html/debugger.html
11. Remote Debugging Protocol / Chrome Debugging Protocol のフロントエンド $ISPNF
    %FCVHHJOH
    1SPUPDPM $ISPNF
    %FCVHHJOH
    1SPUPDPM 3FNPUF
    %FCVHHJOH
    1SPUPDPM
12. コマンドライン 
    "QQMJDBUJPOT'JSFGPYBQQ$POUFOUT.BD04SFGPYCJO
    =

    
    
    
    
    
    TUBSUEFCVHHFSTFSWFS
    
    1
    EFWFMPQNFOU
    
    "QQMJDBUJPOT(PPHMF=
    $ISPNFBQQ$POUFOUT.BD04(PPHMF=
    $ISPNF
    =
    
    
    
    
    
    
    SFNPUFEFCVHHJOHQPSU
    
    OPEF
    JOTQFDU
    NZTFSWFSKT リモートデバッグのためのオプションをつけてFirefox/Chrome/nodeを起動
13. コマンドライン 
    OQN
    JOTUBMM
    H
    ZBSO
    
    HJU
    DMPOF
    HJU!HJUIVCDPNEFWUPPMTIUNMEFCVHHFSIUNMHJU
    
    DE
    EFCVHHFSIUNM
    
    ZBSO
    JOTUBMM
    
    ZBSO
    SVO
    
    debugger.html のインストールと起動
14. スタンドアローンで起動した時のランディングページ
15. デバッグ対象を選択した場合の画面
16. 開発の背景：XULからの移行 • Firefoxは一種のWebアプリケーションです • ブラウザエンジンGeckoの上に、JSとXULで実装されてきました • XUL：XMLベースのコンポーネント記述言語 • JS：みんな大好きJavaScript。コンポーネントの振る舞いを記述します • c.f. https://github.com/browserhtml/browserhtml • 開発ツールもXURLで実装されてきました、XULかける人は少ない • XULから離れることで、多くの方に開発へ参加いただけるようになります
17. 3FBDU
    Y
    3FEVY
    ךⵃ欽
18. 目的 ツール UIコンポーネント Ract 状態管理 Redux, React-Redux 実装言語 Flow ビルドツール webpack テスト ESLint, mocha, mochitest パッケージ管理 Yarn ツールチェーン
19. モジュール 役割 debugger.html デバッガー本体 devtools-client-adapters Remote Debugging Protocolの差異を吸収するアダプター devtools-local-toolbox 開発ツールを開発するためのユーティリティ devtools-config ログレベルやポート番号など、デフォルトの設定をまとめたもの devtools-modules 開発ツール共有のツールとコンポーネント devtools-sham-modules Shammed DevTools Modules from M-C 関連するモジュール
20. コンポーネント
21. 2つのモードがあるシングルページアプリケーション • 2つのモード デバッガー デバッグ対象選択
22. IUUQMPDBMIPTU DISPNFUBCEBCDCDFBBB IUUQMPDBMIPTU OPEFUBCEBCDCDFBBB IUUQMPDBMIPTU SFGPYUBCEBCDCDFBBB chrome-tab / node-tab / firefox-tabのパラメータが適切であれば、デバッグモードへ
23. デバッグ対象の選択画面は2つのコンポーネントで構成されています 3PPU -BOEJOH1BHF
24. "QQ 4QMJU#PY %SBHHBCMF 4PVSDFT 4QMJU#PY %SBHHBCMF 3JHIU4JEF#BS 4PVSDFT5BCT &EJUPS 4FBSDI4PVSDF デバッガーのコンポーネントの関係
25. &EJUPS 3JHIU4JEF#BS コンポーネントと実際のビューの対応 4PVSDFT 4PVSDFT5BCT %SBHHBCMF %SBHHBCMF
26. Sourcesのサブコンポーネント 4PVSDFT5SFF .BOBHFE5SFF 5SFF
27. &EJUPS#SFBL1PJOU &EJUPS#SFBL1PJOU 4PVSDF'PPUFS Editorのサブコンポーネント
28. RightSidebarのサブコンポーネント $PNNBOE#BS "DDPSEJPO #SFBL1PJOUT 'SBNFT 4DPQFT
29. Flow SFOEFS$FOUFS1BOF
    \
    
    
    
    
    SFUVSO
    EPNEJW
    
    
    
    
    
    
    \
    DMBTT/BNF
    DFOUFSQBOF
    ^
    
    
    
    
    
    
    EPNEJW
    
    
    
    
    
    
    
    
    \
    DMBTT/BNF
    FEJUPSDPOUBJOFS
    ^
    
    
    
    
    
    
    
    
    4PVSDF5BCT
    
    
    
    
    
    
    
    
    &EJUPS
    
    
    
    
    
    
    
    
    UIJTQSPQTTFMFDUFE4PVSDF
    
    UIJTSFOEFS8FMDPNF#PY
    
    OVMM
    
    
    
    
    
    
    
    
    4PVSDF4FBSDI
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    ^ Flowとして処理できるようにReact.DOMを利用して描画ルーチンを記述しています
30. 状態管理
31. "DUJPO
    $SFBUPS $PNQPOFOUT 4UPSF 3FEVDFS EJTQBUDI "DUJPO "DUJPO 4UBUF 4UBUF Redux：ActionをReducerで処理することで、Storeの管理するアプリの状態を変化させるアーキテクチャ
32. JS NPEVMFFYQPSUT
    
    DPOOFDU
    
    
    TUBUF
    QSPQT
    
    \
    
    
    
    
    CSFBLQPJOUT
    @HFU#SFBLQPJOUT TUBUF
    
    
    ^
    
    
    EJTQBUDI
    
    CJOE"DUJPO$SFBUPST BDUJPOT
    EJTQBUDI
    #SFBLQPJOUT  react-redux を利用してpropsの一部をStoreへ保存
33. Flow DPOTU
    *
    
    SFRVJSF JNNVUBCMF 
    FYQPSU
    UZQF
    #SFBLQPJOUT4UBUF
    
    \
    
    
    CSFBLQPJOUT
    *.BQTUSJOH
    #SFBLQPJOU
    
    
    CSFBLQPJOUT%JTBCMFE
    GBMTF
    ^ immutable.js を使って状態を変更不能に
34. バグ報告、コードのコントリビュートをお願いします！