Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebComponent
Search
milkmidi
August 12, 2023
Programming
1
3.1k
WebComponent
2023 Webconf - WebComponent
milkmidi
August 12, 2023
Tweet
Share
More Decks by milkmidi
See All by milkmidi
202403-WebComponent
milkmidi
0
180
前端好朋友-tailwindcss
milkmidi
0
8.3k
202110-federation
milkmidi
0
150
Vue3一次就上手
milkmidi
0
6.3k
202007-React對戰雷台
milkmidi
0
180
Other Decks in Programming
See All in Programming
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
380
CDK引数設計道場100本ノック
badmintoncryer
2
590
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
680
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
20
9.7k
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
580
iOS開発スターターキットの作り方
akidon0000
0
220
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
580
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.3k
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
810
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
190
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Raft: Consensus for Rubyists
vanstee
140
7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How STYLIGHT went responsive
nonsquared
100
5.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Documentation Writing (for coders)
carmenintech
72
4.9k
Bash Introduction
62gerente
613
210k
Making Projects Easy
brettharned
117
6.3k
Transcript
如何⽤ React 發⼤財 WebComponent 202308 - milkmidi
milkmidi (奶綠茶) PositiveGrid Staff Frontend Engineer
[email protected]
https: / / www.facebook.com/milkmidifans
Ten years ago!
jQuery Flash Action Script Silverlight RWD 是三⼩! bootstrap
10 年前奶綠出過兩本書 已絕版 每年都要拿 Flash 出來鞭⼀下
Web Development Trends in 2023 React / Vue / Angular
Flash Action graphQL TailwindCSS webassembly Webpack / Vite No jQuery Test
我也想靠 Flash 吃⼀輩⼦呀 結果 Jobs ⼀句話我就失業了
Why WebComponent?
PM 要請你修改 sign-in 功能,這時你會 ?
jQuery 再戰⼗年
None
None
None
WebComponent 是你的救贖
None
None
1 好找,好改 2 限縮 JS scope 3 準時下班
PM說: 現在要修改登出鈕按的⾏為。 不急,⼗分鐘後再給我就好
這時你要回答?
None
要使⽤前有個 But ⼈⽣就是這個 But
None
How to use?
None
None
connectedCallback() Invoked when the custom element is first connected to
the document's DOM. disconnectedCallback() Invoked when the custom element is disconnected from the document's DOM. attributeChangedCallback() Invoked when one of the custom element's attributes is added, removed, or changed. Life cycle callbacks
attributeChangedCallback
Shadow DOM 與世隔絕的安全⼩屋 這我家的貓,很可愛吧
None
外層和 Shadow DOM 的 style 不會互相影響 但,也是缺點 透過 attachShadow( {
mode } ); 可以讓外層的 JS 是否可以呼叫 shadowDOM 裡的元素 mode: open:element.shadowRoot // ShadowRoot obj mode: closed: element.shadowRoot // null
Shadow DOM + slot 這我家的貓,很可愛吧
None
下段語法寫錯,正確為 document.createElement(‘my-component’)
Web Component 就是這麼簡單
加薪技能樹
WebComponent + petite-vue
None
都是尤⼤⼤開發的 Only ~ 6kb DOM-based, mutates in place(not virtual DOM)
petite-vue
None
None
https://www.positivegrid.com/products/spark 實際應⽤
None
WebComponent 限縮 scope petite-vue 處理阿雜的 DOM 事件 本來專案就走 SSR 的情況下,很適合導入
工具沒有好或壞 用的好帶你上天堂 還是我家的貓,還是很可愛
學習不需要為公司、長官或同事, 不需要為別人,只為你自己。 五倍紅寶石-高見龍
⼯商服務 Positivegrid 徵 Senior Android Engineer Senior Backend Engineer Machine
Learning Engineer C++ Developer
QA
https://www.facebook.com/cmoneyengineer/photos https://www.facebook.com/groups/2616981278627207 圖片出處