20170523-web-develpment-and-components

A brief introduction of component based web app development.

Transcript

1. Web։ൃͱίϯϙʔωϯτγεςϜ G's Achademy | May 23rd, 2017 | Mozilla Tech Speaker N.Shimizu (@chikoski)
2. ➔ N.Shimizu (@chikoski) ➔ Tech Speaker ➔ JavaScript / WebAssembly / Emscripten / WebGL / WebVR / Unity / Rust
5. debugger.html (https://github.com/devtools-html/debugger.html)
6. The Expanding World of Web Standard Technologies and Platforms ts - r r U r In r- f IETF Full- screen Brotli HTTP/2 TLS SSL URL HTTP Origin data URL Real-Time Communications Progressive Web Apps Extensible to Anything! Progressive Enhancement Device Control Game, VR & High Performance Apps Proxy Module QUIC Net Info CSP Beacon Navi. Timing DNT CORS block scope Class Gene- rators Itera- tors Collec- tions DOM UI Events File RDF RSS RDFa Indexed DB WOFF Shared Workers fetch Public Key Pinning HSTS Web Socket Protocol - Web Anima- tions Arrow Func. Pro- mise Template Literals ECMA Script 2015 CSS Snapshot 2015 HTML W3C HTML5 SIMD Khronos Async Func. Push Service Worker HTML Components Custom Elements Generic Sensor Blue- tooth USB Speech Media Recorder MIDI FIDO Game- pad Shared Mem. Web Assembly asm.js WebVR Typed Array WebGL Shadow DOM temp- lates EME vibra- tion Web Crypto Web Audio Orienta- tion WebRTC ORTC data channel Media Stream Battery Status Presen- tation Pointer Events Writing Mode Shapes Tran- sitions & Anima- tions Fonts Layout Media Queries text decora- tion trans- form Mask- ing Flex Box Filter User Inter- face Open Media Multi Column Permi- ssions Notifi- cations geo- location Page Visibility Web App Manifest Exclu- sions Grid Layout Math ML Quarks Mode SMIL SVG P PNG APNG OGP Opus H.264 VP10 WebM VP8 mp3 VP9 multi media Web Sockets API WHATWG Server- Sent ev. HTML5 Parser Elements & Syntax sections HTML5 Forms Canvas 2D Web Workers WAI- ARIA Content Model app cache Micro- data Web Storage
7. Webサイト：JSはHTMLに振る舞いを加えるもの 7 + ૉఢͳWebαΠτ
8. Webアプリ：HTMLはJSから作られるもの 8 IUNM
   
   EJW
   JEBQQ
   VM
   DMBTTJUFNMJTU
   MJ
   DMBTTJUFNMJ
   
   VM
   EJW
   
   IUNM 描画
9. 例：カウンター ➔ 仕様 ◆ ボタンを押すと数字が1ずつ増えて行く 9
10. カウンターの初期実装（つづき） EJW
    JEDPVOUFS
    Q
    EBUBSPMFWBMVFQ
    CVUUPO
    EBUBSPMFVQ့ӮӃCVUUPO
    EJW 10
11. カウンターの初期実装（つづき） GVODUJPO
    WBMVF&MFNFOU \
    
    
    SFUVSO
    EPDVNFOURVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFWBMVF> 
    ^
    GVODUJPO
    WBMVF \
    
    
    
    SFUVSO
    /VNCFS WBMVF&MFNFOU UFYU$POUFOU
    ^
    GVODUJPO
    VQ \
    
    
    DPOTU
    FMN
    
    WBMVF&MFNFOU 
    
    
    FMNUFYU$POUFOU
    
    WBMVF
    
    
    ^
    EPDVNFOURVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFVQ> BEE&WFOU-JTUFOFS DMJDL
    VQ  11
12. カウンターに初期化ボタンを追加 EJW
    JEDPVOUFS
    Q
    EBUBSPMFWBMVFQ
    CVUUPO
    EBUBSPMFVQ့ӮӃCVUUPO
    CVUUPO
    EBUBSPMFJOJUӢᙛӃCVUUPO
    EJW 12
13. カウンターに初期化ボタンを追加（つづき） GVODUJPO
    JOJU \
    
    
    DPOTU
    FMN
    
    WBMVF&MFNFOU 
    
    
    FMNUFYU$POUFOU
    
    
    ^
    EPDVNFOU
    
    
    RVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFJOJU>
    
    
    BEE&WFOU-JTUFOFS DMJDL
    JOJU  13
14. オブジェクトにまとめて見やすくする DPOTU
    DPVOUFS
    
    \
    
    
    FMN
    EPDVNFOURVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFWBMVF>
    
    
    WBMVF0G
    GVODUJPO \
    /VNCFS UIJTFMNUFYU$POUFOU ^
    
    
    VQ
    GVODUJPO \
    UIJTFMNUFYU$POUFOU
    
    UIJT
    
    
    ^
    
    
    JOJU
    GVODUJPO \
    UIJTFMNUFYU$POUFOU
    
    ^
    
    
    TUBSU
    GVODUJPO \
    
    
    
    
    EPDVNFOU
    
    
    
    
    
    RVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFVQ>
    
    
    
    
    
    BEE&WFOU-JTUFOFS DMJDL
    F
    
    UIJTVQ 
    
    
    
    
    EPDVNFOU
    
    
    
    
    
    RVFSZ4FMFDUPS DPVOUFS
    <EBUBSPMFJOJU>
    
    
    
    
    
    BEE&WFOU-JTUFOFS DMJDL
    F
    
    UIJTJOJU 
    
    
    
    
    
    ^
    ^ 14
15. 例：カウンター ➔ 仕様 ◆ ボタンを押すと数字が1ずつ増えて行く ◆ 初期化ボタンがある ◆ 2つカウンターをつくる 15
16. 描画するHTMLをテンプレート化 EJW
    JEDPVOUFSTEJW
    UFNQMBUF
    JEDPVOUFS
    
    
    EJW
    JEDPVOUFS
    
    
    
    
    Q
    EBUBSPMFWBMVFQ
    
    
    
    
    CVUUPO
    EBUBSPMFVQ့ӮӃCVUUPO
    
    
    EJW
    UFNQMBUF 16
17. 複製に耐えられるようにクラスを定義 DMBTT
    $PVOUFS \
    
    
    DPOTUSVDUPS UFNQMBUF \
    
    
    
    
    UIJTFMN
    
    EPDVNFOUJNQPSU/PEF UFNQMBUFDPOUFOU
    USVF 
    
    
    
    
    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFVQ>
    
    
    
    
    
    BEE&WFOU-JTUFOFS DMJDL
    F
    
    UIJTVQ 
    
    
    
    
    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFJOJU>
    
    
    
    
    
    BEE&WFOU-JTUFOFS DMJDL
    F
    
    UIJTJOJU 
    
    
    
    
    
    ^
    
    TOJQ 17
18. カウンターを2つ作る DPOTU
    DPOUBJOFS
    
    
    
    
    EPDVNFOURVFSZ4FMFDUPS DPVOUFST 
    DPOTU
    UFNQMBUF
    
    EPDVNFOURVFSZ4FMFDUPS DPVOUFS 
    DPOTU
    D
    
    OFX
    $PVOUFS UFNQMBUF 
    
    DPOTU
    D
    
    OFX
    $PVOUFS UFNQMBUF 
    DPOUBJOFSBQQFOE$IJME DFMN 
    DPOUBJOFSBQQFOE$IJME DFMN  18
19. 例：カウンター ➔ 仕様 ◆ ボタンを押すと数字が1ずつ増えて行く ◆ 初期化ボタンがある ◆ 2つカウンターをつくる • 1つはクリック1回ごとに数字が増える • 1つは3回クリックして1つ数字が増える 19
20. 値の管理をJSで行うように変更 DMBTT
    $PVOUFS\
    
    
    DPOTUSVDUPS \UFNQMBUF
    WBMVF^ \
    
    
    
    
    UIJTUFNQMBUF
    
    UFNQMBUF
    
    
    
    
    UIJTWBMVF
    
    
    
    
    ^
    
    TOJQ
    
    
    WBMVF0G \
    SFUVSO
    UIJTWBMVF
    ^
    
    TOJQ 20
21. 値の管理をJSで行うように変更（つづき） VQ \
    
    
    UIJTWBMVF
    
    UIJTWBMVF
    
    
    
    
    UIJTVQEBUF 
    ^
    JOJU \
    
    
    UIJTWBMVF
    
    
    
    
    UIJTVQEBUF 
    ^ 21
22. JSオブジェクトの値をDOMに反映するメソッド VQEBUF \
    
    
    DPOTU
    FM
    
    
    
    
    
    
    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF> 
    
    
    FMUFYU$POUFOU
    
    UIJTWBMVF
    ^
    
    
    22
23. 描画用の関数を外部から与えられるように変更 DPOTUSVDUPS \UFNQMBUF
    WBMVF
    VQEBUF^ \
    
    
    UIJTUFNQMBUF
    
    UFNQMBUF
    
    
    UIJTWBMVF
    
    
    
    
    UIJT@VQEBUF
    VQEBUF
    ^
    VQEBUF \
    
    
    SFUVSO
    UIJT@VQEBUF
    
    UIJT@VQEBUF
    
    UIJTEFGBVMU6QEBUF 
    ^
    EFGBVMU6QEBUF \
    
    
    DPOTU
    FM
    
    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF> 
    
    
    FMUFYU$POUFOU
    
    UIJTWBMVF
    ^ 23
24. カウンター作成の例 DPOTU
    D
    
    OFX
    $PVOUFS \UFNQMBUF
    UFNQMBUF
    
    
    
    
    VQEBUF
    GVODUJPO \
    
    
    
    
    JG UIJTWBMVF
    
    
    
     \
    
    
    
    
    
    
    
    
    DPOTU
    FM
    
    
    
    
    
    
    
    
    
    
    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF> 
    
    
    
    
    
    
    
    FMUFYU$POUFOU
    
    UIJTWBMVF
    
    
    
    
    
    ^
    
    
    
    ^
    ^  24
25. モジュールを作ってDSLに DMBTT
    $PVOUFS\
    
    TOJQ
    ^
    GVODUJPO
    DPVOUFS DPOG \
    
    
    SFUVSO
    OFX
    $PVOUFS DPOG 
    ^
    FYQPSU
    \$PVOUFS
    DPVOUFS^ 25
26. 値の反映戦略も別モジュールに分ける GVODUJPO
    FWFSZ5JNF \
    
    TOJQ
    ^
    GVODUJPO
    PODF*O5SFF \
    
    TOJQ
    ^
    FYQPSU
    \FWFSZ5JNF
    PODF*O5ISFF^ 26
27. DSLを使うと意味が明瞭に JNQPSU
    \DPVOUFS^
    GSPN
    DPVOUFS
    JNQPSU
    \FWFSZ5JNF
    PODF*O5ISFF^
    GSPN
    VQEBUF
    
    TOJQ
    DPOTU
    D
    
    DPVOUFS \
    
    
    
    UFNQMBUF
    TJNQMF
    VQEBUF
    FWFSZ5JNF
    ^ 
    DPOTU
    D
    
    DPVOUFS \
    
    
    UFNQMBUF
    HPSHVT
    VQEBUF
    PODF*O5ISFF
    ^  27
28. アプリは変化し、育っていくもの ➔ 要求仕様は変化します。変化した時の作業を簡単にしたい ➔ それに対応するプログラマの気持ち ◆ 関係するものは一箇所にまとめたい ◆ 書き換えるの部分を少なくしたい ◆ 他の部分と独立してテストできるようにしたい ◆ 使いまわせるものは使いまわしたい ➔ 「ソフトウェアコンポーネント」という概念の導入 28
29. ソフトウェアコンポーネント ➔ ソフトウェアを作るための、独立性が高い部品のこと ➔ 1990年代前半から ➔ 特徴 ◆ 内部の状態が外部からは隠蔽されている / APIでコントロールする ◆ 部分的に変更ができる ◆ クラスに比べて粒度が大きい 29
30. コンポーネント：アプリの独立した部品 ➔ Webはアプリプラットフォーム：巨大でよく変更されるアプリ ➔ コンポーネントを使うと ◆ プログラムの再利用性が高めることができます ◆ 複数のコンポーネントを組み合わせて使えます ◆ 独立性が高いのでメンテナンスも容易になります ➔ アプリの作り変え、変更を素早く行えるようになります 33
31. React.js ➔ facebookによって開発されたUI用ライブラリ ➔ 宣言的にUIコンポーネントを定義できます ◆ UIのパーツを個別に開発できます ◆ コンポーネントを入れ子に使えます ◆ 組み合わせて、新しいパーツを作れます ➔ 描画されるHTMLもここで定義されます ➔ propsを指定することで振る舞いをカスタマイズ ➔状態をもつコンポーネントも定義できます ➔ES2015フレンドリー 34 DMBTT
    )FMMP.FTTBHF
    
    
    
    FYUFOET
    3FBDU$PNQPOFOU
    \
    
    
    SFOEFS
    \
    
    
    
    
    SFUVSO
    EJW
    
    
    
    
    
    
    )FMMP
    \UIJTQSPQTOBNF^
    
    
    
    
    EJW
    
    
    ^
    ^
    3FBDU%0.SFOEFS
    )FMMP.FTTBHF
    OBNF+PIO
    
    NPVOU/PEF 
32. debugger.html ➔ Firefoxの新しいデバッガー ➔ 特徴 ◆ スタンドアローンのアプリとしても実行可能 ◆ 様々なデバッグ対象 • Firefox • Chrome • node.js ◆ ReactとReduxで実装されています ➔ https://github.com/devtools-html/debugger.html 35
33. $ISPNF
    
    %FCVHHJOH
    1SPUPDPM 3FNPUF
    %FCVHHJOH
    1SPUPDPM $ISPNF
    
    %FCVHHJOH
    1SPUPDPM
34. ໨త πʔϧ ίϯϙʔωϯτγεςϜ React ࣮૷ݴޠ JS / Flow Ϗϧυπʔϧ Webpack ςετ ESLint, mocha, mochitest ύοέʔδ؅ཧ Yarn
35. debugger.htmlは良い教材です ➔ 読みやすい！ ◆ ログイン状態の管理をしなくても良いアプリです ◆ コンポーネントの粒度が大きいです ◆ Flowで全てのものが完結しています ➔ ちょっと大きい ➔ 日々の開発で使える！ 38
36. Firefoxにコントリビュートするチャンスです！ 39