WebComponent

2023 Webconf - WebComponent

Transcript

1. 如何⽤ React 發⼤財 WebComponent 202308 - milkmidi
2. milkmidi (奶綠茶) 
 PositiveGrid Staff Frontend Engineer 
 
 
 milkmidi@gmail.com 
 https: / / www.facebook.com/milkmidifans
3. Ten years ago!
4. jQuery Flash Action Script Silverlight RWD 是三⼩! bootstrap
5. 10 年前奶綠出過兩本書 已絕版 每年都要拿 Flash 出來鞭⼀下
6. Web Development Trends in 2023 React / Vue / Angular Flash Action graphQL TailwindCSS webassembly Webpack / Vite No jQuery Test
7. 我也想靠 Flash 吃⼀輩⼦呀 結果 Jobs ⼀句話我就失業了
8. Why WebComponent?
9. PM 要請你修改 sign-in 功能，這時你會 ?
10. jQuery 再戰⼗年
14. WebComponent 是你的救贖
17. 1 好找，好改 2 限縮 JS scope 3 準時下班
18. PM說： 現在要修改登出鈕按的⾏為。 不急，⼗分鐘後再給我就好
19. 這時你要回答?
21. 要使⽤前有個 But ⼈⽣就是這個 But
23. How to use?
26. 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
27. attributeChangedCallback
28. Shadow DOM 與世隔絕的安全⼩屋 這我家的貓，很可愛吧
30. 外層和 Shadow DOM 的 style 不會互相影響 但，也是缺點 透過 attachShadow( { mode } ); 可以讓外層的 JS 是否可以呼叫 shadowDOM 裡的元素 mode: open：element.shadowRoot // ShadowRoot obj mode: closed: element.shadowRoot // null
31. Shadow DOM + slot 這我家的貓，很可愛吧
33. 下段語法寫錯，正確為 document.createElement(‘my-component’)
34. Web Component 就是這麼簡單
35. 加薪技能樹
36. WebComponent + petite-vue
38. 都是尤⼤⼤開發的 Only ~ 6kb DOM-based, mutates in place(not virtual DOM) petite-vue
41. https://www.positivegrid.com/products/spark 實際應⽤
43. WebComponent 限縮 scope petite-vue 處理阿雜的 DOM 事件 本來專案就走 SSR 的情況下，很適合導入
44. 工具沒有好或壞 用的好帶你上天堂 還是我家的貓，還是很可愛
45. 學習不需要為公司、長官或同事， 
 不需要為別人，只為你自己。 五倍紅寶石-高見龍
46. ⼯商服務 Positivegrid 徵 Senior Android Engineer Senior Backend Engineer Machine Learning Engineer C++ Developer
47. QA
48. https://www.facebook.com/cmoneyengineer/photos https://www.facebook.com/groups/2616981278627207 圖片出處