20170523-web-develpment-and-components

 20170523-web-develpment-and-components

A brief introduction of component based web app development.

00580f6c11851d2fff0b3e2f7392226b?s=128

N. Shimizu

May 24, 2017
Tweet

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
  3. None
  4. None
  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  EJWJEBQQ VMDMBTTJUFNMJTU MJDMBTTJUFNMJ  VM EJW

     IUNM 描画
  9. 例:カウンター ➔ 仕様 ◆ ボタンを押すと数字が1ずつ増えて行く 9

  10. カウンターの初期実装(つづき) EJWJEDPVOUFS QEBUBSPMFWBMVFQ CVUUPOEBUBSPMFVQ့ӮӃCVUUPO EJW 10

  11. カウンターの初期実装(つづき) GVODUJPOWBMVF&MFNFOU \ SFUVSOEPDVNFOURVFSZ4FMFDUPS DPVOUFS<EBUBSPMFWBMVF>  ^ GVODUJPOWBMVF \ SFUVSO/VNCFS

    WBMVF&MFNFOU UFYU$POUFOU  ^ GVODUJPOVQ \ DPOTUFMNWBMVF&MFNFOU  FMNUFYU$POUFOUWBMVF   ^ EPDVNFOURVFSZ4FMFDUPS DPVOUFS<EBUBSPMFVQ> BEE&WFOU-JTUFOFS DMJDL VQ  11
  12. カウンターに初期化ボタンを追加 EJWJEDPVOUFS QEBUBSPMFWBMVFQ CVUUPOEBUBSPMFVQ့ӮӃCVUUPO CVUUPOEBUBSPMFJOJUӢᙛӃCVUUPO EJW 12

  13. カウンターに初期化ボタンを追加(つづき) GVODUJPOJOJU \ DPOTUFMNWBMVF&MFNFOU  FMNUFYU$POUFOU ^ EPDVNFOU RVFSZ4FMFDUPS DPVOUFS<EBUBSPMFJOJU>

     BEE&WFOU-JTUFOFS DMJDL JOJU  13
  14. オブジェクトにまとめて見やすくする DPOTUDPVOUFS\ FMNEPDVNFOURVFSZ4FMFDUPS DPVOUFS<EBUBSPMFWBMVF>  WBMVF0GGVODUJPO \/VNCFS UIJTFMNUFYU$POUFOU ^ VQGVODUJPO

    \UIJTFMNUFYU$POUFOUUIJT ^ JOJUGVODUJPO \UIJTFMNUFYU$POUFOU^ TUBSUGVODUJPO \ EPDVNFOU RVFSZ4FMFDUPS DPVOUFS<EBUBSPMFVQ>  BEE&WFOU-JTUFOFS DMJDL FUIJTVQ  EPDVNFOU RVFSZ4FMFDUPS DPVOUFS<EBUBSPMFJOJU>  BEE&WFOU-JTUFOFS DMJDL FUIJTJOJU  ^ ^ 14
  15. 例:カウンター ➔ 仕様 ◆ ボタンを押すと数字が1ずつ増えて行く ◆ 初期化ボタンがある ◆ 2つカウンターをつくる 15

  16. 描画するHTMLをテンプレート化 EJWJEDPVOUFSTEJW UFNQMBUFJEDPVOUFS EJWJEDPVOUFS QEBUBSPMFWBMVFQ CVUUPOEBUBSPMFVQ့ӮӃCVUUPO EJW UFNQMBUF 16

  17. 複製に耐えられるようにクラスを定義 DMBTT$PVOUFS \ DPOTUSVDUPS UFNQMBUF \ UIJTFMNEPDVNFOUJNQPSU/PEF UFNQMBUFDPOUFOU USVF 

    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFVQ>  BEE&WFOU-JTUFOFS DMJDL FUIJTVQ  UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFJOJU>  BEE&WFOU-JTUFOFS DMJDL FUIJTJOJU  ^ TOJQ 17
  18. カウンターを2つ作る DPOTUDPOUBJOFS EPDVNFOURVFSZ4FMFDUPS DPVOUFST  DPOTUUFNQMBUFEPDVNFOURVFSZ4FMFDUPS DPVOUFS  DPOTUDOFX$PVOUFS UFNQMBUF

     DPOTUDOFX$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^ \ UIJTUFNQMBUFUFNQMBUF UIJTWBMVF ^ TOJQ

    WBMVF0G \SFUVSOUIJTWBMVF^ TOJQ 20
  21. 値の管理をJSで行うように変更(つづき) VQ \ UIJTWBMVFUIJTWBMVF  UIJTVQEBUF  ^ JOJU \

    UIJTWBMVF UIJTVQEBUF  ^ 21
  22. JSオブジェクトの値をDOMに反映するメソッド VQEBUF \ DPOTUFM UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF>  FMUFYU$POUFOUUIJTWBMVF ^ 

    22
  23. 描画用の関数を外部から与えられるように変更 DPOTUSVDUPS \UFNQMBUF WBMVF VQEBUF^ \ UIJTUFNQMBUFUFNQMBUF UIJTWBMVF UIJT@VQEBUFVQEBUF ^

    VQEBUF \ SFUVSOUIJT@VQEBUF UIJT@VQEBUF UIJTEFGBVMU6QEBUF  ^ EFGBVMU6QEBUF \ DPOTUFMUIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF>  FMUFYU$POUFOUUIJTWBMVF ^ 23
  24. カウンター作成の例 DPOTUDOFX$PVOUFS \UFNQMBUFUFNQMBUF  VQEBUFGVODUJPO \ JG UIJTWBMVF \ DPOTUFM

    UIJTFMNRVFSZ4FMFDUPS <EBUBSPMFWBMVF>  FMUFYU$POUFOUUIJTWBMVF ^ ^ ^  24
  25. モジュールを作ってDSLに DMBTT$PVOUFS\ TOJQ ^ GVODUJPODPVOUFS DPOG \ SFUVSOOFX$PVOUFS DPOG 

    ^ FYQPSU\$PVOUFS DPVOUFS^ 25
  26. 値の反映戦略も別モジュールに分ける GVODUJPOFWFSZ5JNF \ TOJQ ^ GVODUJPOPODF*O5SFF \ TOJQ ^ FYQPSU\FWFSZ5JNF

    PODF*O5ISFF^ 26
  27. DSLを使うと意味が明瞭に JNQPSU\DPVOUFS^GSPNDPVOUFS JNQPSU\FWFSZ5JNF PODF*O5ISFF^GSPNVQEBUF TOJQ DPOTUDDPVOUFS \ UFNQMBUFTJNQMF VQEBUFFWFSZ5JNF ^

     DPOTUDDPVOUFS \ UFNQMBUFHPSHVT VQEBUFPODF*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 FYUFOET3FBDU$PNQPOFOU\ SFOEFS \ SFUVSOEJW )FMMP\UIJTQSPQTOBNF^ EJW ^ ^ 3FBDU%0.SFOEFS  )FMMP.FTTBHFOBNF+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