Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ponday
November 05, 2018
Programming
2
570

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

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

ponday

November 05, 2018
Tweet

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
470
TypeScriptの型表現
honda
10
2.6k
Web Componentsの今
honda
1
320
これまでのReact、これからのReact
honda
0
190
Gatsbyお試し
honda
0
89
styled-components or emotion?
honda
0
550
Web ComponentsとAngular
honda
0
97
Atomic Design周りについての私見
honda
1
410
Web Componentsの動向とPolymer
honda
4
1.7k

Other Decks in Programming

See All in Programming
入門Hello world（PHPカンファレンス2022）
yutaron
0
260
プログラミング教育について(公開版)
yosuke_furukawa
PRO
4
4.7k
フラットなPHPからオブジェクト指向で自動テストのあるPHPへ、そしてフレームワークへ #phpcon2022
77web
1
940
Webフロントエンドと アーキテクチャ事情の持論を喋る
ahomu
2
960
Attacking web without JS - CSS injection
aszx87410
0
1.9k
RFC911Xから振り返るHTTPの仕様
seike460
PRO
0
310
RDRAとDDDでGoのモジュラーモノリスアプリを設計してみた話
imamotohikaru
1
580
PHPからC#のライブラリを呼べるようにしたdotnet_ffiを趣味でつくってみた
pgito
0
220
Micro Frontends for Java Microservices - Cork JUG 2022
mraible
PRO
0
430
SceneKit AND SwiftUI
akkeylab
0
260
I shall define this only once
freekmurze
0
220
小さなユーザーストーリーのすゝめ～的確な進捗把握編～
ryothkay
1
510

Featured

See All Featured
Building a Scalable Design System with Sketch
lauravandoore
450
30k
Fireside Chat
paigeccino
14
1.5k
Bash Introduction
62gerente
598
210k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
How to Ace a Technical Interview
jacobian
268
21k
Intergalactic Javascript Robots from Outer Space
tanoku
259
25k
Done Done
chrislema
175
14k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6k
Adopting Sorbet at Scale
ufuk
65
7.6k
Navigating Team Friction
lara
175
11k
Fantastic passwords and where to find them - at NoRuKo
philnash
29
1.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
120
28k

Transcript

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

    ponday (@ponday_dev)

  2. Profile - ponday (Honda, Yusuke) - 株式会社ベガコーポレーション エンジニア - Like

    : TypeScript / Elixir / Python etc… - あいかわらずフロントエンドの人ではない
  3. None

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

  5. 使ったことある人 ノ

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

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

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

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

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

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

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

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

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

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

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

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

  18. or

  19. or No !!

  20. with

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

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

    State Management Routing DOM API

  23. これまで Component Component Component State Management Routing State Management Routing

    State Management Routing DOM API 各FWが コンポーネント機構を提供

  24. これまで Component Component Component State Management Routing State Management Routing

    State Management Routing DOM API コンポーネント機構に 各種機能が依存

  25. これまで Component Component Component State Management Routing State Management Routing

    State Management Routing DOM API 独自の要素は 他のFWで流用できない

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

    Management Routing State Management Routing Web Components

  27. これから DOM API Component Component Component State Management Routing State

    Management Routing State Management Routing Web Components Web標準APIによる コンポーネント機構

  28. これから DOM API Component Component Component State Management Routing State

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

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

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

    DOM API

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

  32. Web ComponentsとJSフレームワーク - Web ComponentsはView以外の面倒は見ない - 状態管理 - ルーティング -

    etc… - Web Componentsを使わないほうが便利な場面も - JSフレームワークとは適切に役割分担して使う

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

    Components React Router

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

    Components React Router Web Componentsが 面倒をみない機能

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

    Components React Router ReduxやReact Routerは Reactから利用

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

    Components React Router Reactからプロパティを 渡して利用

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

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

    Shadow DOM - SEO

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

  40. Thank you !!