202403-WebComponent

Transcript

1. 如何發大財 Web Components 202403 - milkmidi
2. 工 商服務 Senior Frontend Engineer Senior Backend Engineer Full stack Engineer C++ / Android / iOS / Machine Learning / MIS Marketing Project Specialist Firmware Manager
3. milkmidi (奶綠茶) PositiveGrid Staff Frontend Engineer milkmidi@gmail.com https: / / www.facebook.com/milkmidifans
4. Ten years ago!
5. jQuery Flash Action Script Silverlight RWD 是三 小 ! bootstrap
6. 10 年前奶綠出過兩本書 已絕版 每年都要拿 Flash 出來鞭 一 下
7. Web Development Trends in 2024 React / Vue / Angular Flash Action graphQL TailwindCSS webassembly Webpack / Vite No jQuery test e2e test 00940
8. 我也想靠 Flash 吃 一 輩 子 呀 結果 Jobs 一 句話我就失業了
9. Why Web Component?
10. PM 要請你修改 sign-in 功能，這時你會 ?
11. jQuery 再戰 十 年
12. Vanilla.js
15. Web Component 是你的救贖
18. 1 好找，好改 2 限縮 JS scope 3 準時下班
19. PM說： 現在要修改登出鈕按的 行 為。 不急， 十 分鐘後再給我就好
20. 這時你要回答?
22. 要使 用 前有個 But 人生 就是這個 But
24. How to use?
27. But! extends:’a’ Safari 支 援度太低
30. 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
31. attributeChangedCallback
32. 奶綠發了個 PR <style> h1 { color: red; } </style>
33. Shadow DOM 與世隔絕的安全 小 屋 這我家的貓，很可愛吧 一 般的 HTMLElement 就可 用
35. 外層和 Shadow DOM 的 style 不會互相影響 但，也是缺點 透過 attachShadow( { mode } ); 可以讓外層的 JS 是否可以呼叫 shadowDOM 裡的元素 mode: open：element.shadowRoot // ShadowRoot obj mode: closed: element.shadowRoot // null
36. :host CSS pseudo class
38. 外層如何更新 shadowDOM style?
39. 1 透過 ::part
41. 2 CSS Variable
43. 3 ShadowRoot: adoptedStyleSheets 這個 支 援度 目 前還太低，先知道就好
44. Shadow DOM + slot 這我家的貓，很可愛吧
46. Q ? 此時會吃到的 style 是誰的 ?
47. slot with name
49. SEO ?
50. Shadow DOM SEO ?
51. shadowrootmode
53. WebComponent + React/Vue
54. WebComponent + React
55. WebComponent + React
56. React Modal
57. Modal
58. Modal
59. Modal
61. Web Component 就是這麼簡單
62. Micro Frontend
63. 3個網站要共 用 Header
64. 此時你會 ? iframe Federation Plugin(Webpack/Vite) WebComponent
65. Iframe 優：安全，style 也不會互吃 缺：慢、還是慢。
66. Federation Plugin 優：可以將共 用 的 package 抽出來 省下不必要的 k 數。 缺：要改架構，style 會互吃。
67. WebComponents 優： 一 隻 JS 就完美解掉。 缺：可能會做太快，讓 PM 誤以為這個 很簡單。
69. WebComponent + petite-vue
72. 都是尤 大大 開發的 Only ~ 6kb DOM-based, mutates in place(not virtual DOM) petite-vue
75. https://www.positivegrid.com/products/spark 實際應 用
77. WebComponent 限縮 scope petite-vue 處理阿雜的 DOM 事件 本來專案就走 SSR 的情況下，很適合導入
78. 為何不使用 WebComponent + Vue
79. Q
80. 工具沒有好或壞 用的好帶你上天堂 還是我家的貓，還是很可愛
81. 學習不需要為公司、長官或同事， 不需要為別人，只為你自己。 五倍紅寶石-高見龍
82. QA
83. https://www.facebook.com/cmoneyengineer/photos https://www.facebook.com/groups/2616981278627207 圖片出處