え、まだWeb Componentsを未来の技術だと思ってるの？

VEGA Tech Meetup #3 (2018/11/05) 発表資料です。

Transcript

1. え、まだWeb Componentsを未来の技術だと思ってるの？
   VEGA Tech Meetup #3 / Nov 5th, 2018 ponday (@ponday_dev)
   

   View Slide

2. Profile
   - ponday (Honda, Yusuke)
   - 株式会社ベガコーポレーション エンジニア
   - Like : TypeScript / Elixir / Python etc…
   - あいかわらずフロントエンドの人ではない
   

   View Slide

3. View Slide

4. Web標準の技術のみで
   再利用可能な部品を作るAPI
   

   View Slide

5. 使ったことある人 ノ
   

   View Slide

6. たぶんほとんど居ないのでは？
   

   View Slide

7. Web Componentsを未来の技術と思い込んでいませんか？
   

   View Slide

8. よくある意見
   - まだブラウザの対応が進んでないでしょ？
   - まだほとんど使われてないでしょ？
   - ウチはReact／Angular／Vue.js使ってるから...
   

   View Slide

9. よくある意見
   - まだブラウザの対応が進んでないでしょ？
   - まだほとんど使われてないでしょ？
   - ウチはReact／Angular／Vue.js使ってるから...
   

   View Slide

10. ブラウザの対応状況
    対応済
    未対応
    

    View Slide

11. ブラウザの対応状況
    対応済
    未対応
    大半のブラウザが
    対応済
    

    View Slide

12. ブラウザの対応状況
    対応済
    未対応
    開発ステータスが
    「開発中」に
    

    View Slide

13. ブラウザの対応状況
    - 大半のモダンブラウザが対応済
    - Edgeもステータスが「検討中」→「開発中」に
    - 既に対応ブラウザ次第では十分使えるレベル
    - Polyfillを使うという手も
    

    View Slide

14. よくある意見
    - まだブラウザの対応が進んでないでしょ？
    - まだほとんど使われてないでしょ？
    - ウチはReact／Angular／Vue.js使ってるから...
    

    View Slide

15. Web Componentsの利用例
    - 既に採用事例は多数
    - GitHub、YouTube、Google Earthなど
    

    View Slide

16. Web Componentsの本番利用
    - 既存のリソースを捨てる必要はない
    - 特に追加設定なく利用も可能
    - まずは小さく
    

    View Slide

17. よくある意見
    - まだブラウザの対応が進んでないでしょ？
    - まだほとんど使われてないでしょ？
    - ウチはReact／Angular／Vue.js使ってるから...
    

    View Slide

18. or
    

    View Slide

19. or
    No !!
    

    View Slide

20. with
    

    View Slide

21. フレームワークとの連携
    - Web ComponentsはあくまでWeb標準の技術
    - 特定のフレームワークに依存するものではない
    - あらゆるフレームワークと連携できる
    

    View Slide

22. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API
    

    View Slide

23. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API
    各FWが
    コンポーネント機構を提供
    

    View Slide

24. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API
    コンポーネント機構に
    各種機能が依存
    

    View Slide

25. これまで
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    DOM API
    独自の要素は
    他のFWで流用できない
    

    View Slide

26. これから
    DOM API
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    Web Components
    

    View Slide

27. これから
    DOM API
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    Web Components
    Web標準APIによる
    コンポーネント機構
    

    View Slide

28. これから
    DOM API
    Component Component Component
    State
    Management
    Routing State
    Management
    Routing State
    Management
    Routing
    Web Components
    各FWのコンポーネントから
    利用することができる
    

    View Slide

29. Web Componentsの役割
    - 再利用可能な部品を作るためのAPI
    - アプリケーション開発のためのAPIではない
    - あくまでViewの機能を拡充するもの
    

    View Slide

30. Web Componentsとフレームワーク
    Component
    State
    Management
    Routing
    Component
    State
    Management
    Routing
    DOM API
    

    View Slide

31. これだけでアプリケーション（SPA）は作れない
    

    View Slide

32. Web ComponentsとJSフレームワーク
    - Web ComponentsはView以外の面倒は見ない
    - 状態管理
    - ルーティング
    - etc…
    - Web Componentsを使わないほうが便利な場面も
    - JSフレームワークとは適切に役割分担して使う
    

    View Slide

33. 例えばReact + Web Components
    React Component
    Redux
    (State Management)
    Web Components
    React Router
    

    View Slide

34. 例えばReact + Web Components
    React Component
    Redux
    (State Management)
    Web Components
    React Router
    Web Componentsが
    面倒をみない機能
    

    View Slide

35. 例えばReact + Web Components
    React Component
    Redux
    (State Management)
    Web Components
    React Router
    ReduxやReact Routerは
    Reactから利用
    

    View Slide

36. 例えばReact + Web Components
    React Component
    Redux
    (State Management)
    Web Components
    React Router
    Reactからプロパティを
    渡して利用
    

    View Slide

37. Vueで利用する場合も構造は同じ
    Vue Component
    Vuex
    (State Management)
    Web Components
    Vue Router
    

    View Slide

38. 課題
    - プロパティの受け渡し
    - Server Side Renderingが難しい
    - window.customElements.define
    - Shadow DOM
    - SEO
    

    View Slide

39. まとめ
    - Web Componentsはもう未来の技術ではない
    - 採用実績も増えつつある
    - JSフレームワークと共存できる
    - まずは小さく始めてみては？
    

    View Slide

40. Thank you !!
    

    View Slide