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

Web Componentsの今

ponday
February 26, 2019
Programming
1
320

Web Componentsの今

FukuokaJS『三大フレームワーク + WebComponents』（2019/02/26）の発表資料です。

ponday

February 26, 2019
Tweet

More Decks by ponday

See All by ponday
関数型でGoFのデザインパターンやってみる
honda
0
470
TypeScriptの型表現
honda
10
2.6k
これまでの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を未来の技術だと思ってるの？
honda
2
570
Web Componentsの動向とPolymer
honda
4
1.7k

Other Decks in Programming

See All in Programming
RFC911Xから振り返るHTTPの仕様
seike460
PRO
0
310
XP頻出英単語 / XP vocabulary
fkino
0
360
LaravelでLIKE句のSQLインジェクション対策をする
fyui001
0
890
Rethinking Auth for SPAs and Micro Frontends: Easy and Secure With Gateways
manfredsteyer
PRO
0
110
Micro Frontends for Java Microservices - Dublin JUG 2022
mraible
PRO
1
370
設計初心者のための「伝わる」フロー図 / How to draw a communicative flow diagram for beginners
rs_tukki
1
410
iOSDC2022 - iPadOSDC Japan 2022
hcrane
2
1.3k
Comparing Native Java REST API Frameworks - Seattle JUG 2022
mraible
PRO
1
200
Lecture №2.3. Concepts
baramiyadenis
0
330
V8 as a container on CDN Edge worker
mizchi
5
980
RDRAとDDDでGoのモジュラーモノリスアプリを設計してみた話
imamotohikaru
1
580
モバイルアプリのオブザーバビリティを向上させるプラクティス
kazumanagano
6
1.1k

Featured

See All Featured
Why Our Code Smells
bkeepers
PRO
325
55k
For a Future-Friendly Web
brad_frost
166
7.6k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Designing with Data
zakiwarfel
91
4k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
235
1.1M
Fireside Chat
paigeccino
14
1.5k
No one is an island. Learnings from fostering a developers community.
thoeni
10
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
656
120k
The Brand Is Dead. Long Live the Brand.
mthomps
47
2.8k
Building Flexible Design Systems
yeseniaperezcruz
311
34k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k

Transcript

  1. Web Componentsの今 FukuokaJS『三大フレームワーク + WebComponents』 / Feb 26th, 2019 ponday

    (@ponday_dev)

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

    TypeScript / Elixir / Python etc… - 副業もやってます

  3. ここの話

  4. 今日の内容 - Web Componentsとは？ - Web Componentsの良いところ／つらいところ - Web Components向けのライブラリ

    - JSフレームワークとWeb Components

  5. Web Components

  6. Web Components - Web標準の技術で、再利用可能な部品を作るAPI - いくつかの仕様の総称 - Custom Elements -

    Shadow DOM - ES Modules - すでにEdge以外のブラウザで対応済！

  7. Custom Elements - 独自のHTML要素を定義できるAPI - customElements.define - class構文を使う - いわゆるコンポーネント機能

  8. None

  9. Shadow DOM - グローバルから独立したDOMツリー - CSSやJSの影響範囲が限定できる - Scoped CSSなどが実現できる -

    Shadow DOMの中のCSSは外部に影響を与えない - Shadow DOMの中のCSSは外部の影響を受けない
  10. None

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

    State Management Routing DOM API

  12. これまでのWeb開発 - コンポーネント機構は各フレームワークが提供 - DOM APIにはコンポーネント機構がない - 各フレームワークが頑張ってコンポーネントを実現していた - Scoped

    CSSなどのカプセル化の仕組みも同様 - フレームワークに依存するコンポーネント - 当然、フレームワーク間の互換性はない - UIライブラリはフレームワークごとに必要

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

    Management Routing State Management Routing Web Components

  14. これからのWeb開発 - DOM APIもコンポーネント機構を持つ - カプセル化の仕組みも備える - コンポーネント機構の新しい選択肢 - 特定の技術に依存しないコンポーネント

    - フレームワークなどに依存しない - 真の意味で汎用的な部品の実現

  15. Web Componentsの良いところ - Web標準の技術であること - ブラウザネイティブなサポート - 複雑なビルド設定は不要 - 他のフレームワークとの共存も簡単

    - 導入が非常に簡単 - Web標準の技術だからこそ - 外部からの影響を受けない／外部に影響を与えない

  16. つらいところ - 長くなりがち - ボイラープレートが多い - 描画タイミングの管理 - テンプレートが書きづらい -

    文字列 or DOM API - 当然、差分更新はない

  17. lit-html / LitElement

  18. lit-html - テンプレート構築用のライブラリ - Tagged Template Literalsベース - テンプレートが関数になるので取り回しやすい -

    Web Components以外の用途でも使える - 最近バージョン1.0が出た
  19. None

  20. LitElement - Web Componentsをシンプルに書くためのライブラリ - Polymerの後継 - 素のWeb Componentsを書くのは結構つらい -

    面倒な部分をラップしてよしなに処理してくれる - テンプレートエンジンとしてlit-htmlを利用 - 最近バージョン2.0が出た
  21. None

  22. DEMO

  23. DEMO - imgタグの改良版 - lazy loading／中断 - 拡大表示

  24. Q. JSフレームワークは不要になるの？

  25. なりません

  26. JSフレームワークとの関わり - Web Components単体でアプリは作れない - 状態管理やルーティングの面倒はみない - JSフレームワークとは競合ではなく、共存するもの - 一部のコンポーネントがWeb

    Componentsで置き換えられる - 状態管理やルーティングは、フレームワークの責務 - フレームワーク → Web Componentsへの変換も

  27. Web Componentsの使いどころ - 汎用的なコンポーネント - Atomic Designにおける〜Moleculesくらいがターゲット - UIライブラリが担っている領域 -

    既存資産の活用 - JSフレームワーク製のコンポーネントをWeb Components化 - 別のシステム、JSフレームワークに流用できる

  28. まとめ - Web Componentsは再利用可能な部品を作るAPI - 対応ブラウザも増えてきている - JSフレームワークとは競合ではなく共存するもの

  29. Thank you !!