Custom Elements in UIT

2019/8/21に開催されたUIT Meetup Fukuoka vol.1での登壇資料です

Transcript

1. Custom Elements in UIT ⿈慈霖 Huang, Tzu-Lin UIT Team, LINE Fukuoka @UIT meetup Fukuoka vol.1 「現場におけるフロントエンド」 2019/08/21 1 / 33
2. ⾃⼰紹介 About me 2 / 33
3. ⾃⼰紹介 About me From Taiwan 台湾 3 / 33
4. ⾃⼰紹介 About me From Taiwan 台湾 Join LINE Fukuoka in 2016 4 / 33
5. ⾃⼰紹介 About me From Taiwan 台湾 Join LINE Fukuoka in 2016 Front-end developer for 8 years 5 / 33
6. ⾃⼰紹介 About me From Taiwan 台湾 Join LINE Fukuoka in 2016 Front-end developer for 8 years Sticker shop ( スタンプショップ) Theme shop ( 着せかえショップ) Custom sticker ( カスタムスタンプ) CMS 6 / 33
7. What is Custom Elements? A component library native to the browser No additional bytes of a framework for the user to download, parse and compile. WHATWG Spec https://html.spec.whatwg.org/multipage/custom- elements.html#custom-elements 7 / 33
8. Some Real-World Examples https://githubengineering.com/removing-jquery- from-github-frontend/#custom-elements https://www.webcomponents.org/author/github 8 / 33
9. Browser compatibility 9 / 33
10. How to write Custom Elements https://developers.google.com/web/fundamentals/web- components/customelements 10 / 33
11. Why do we choose Custom Elements Let's talk about Custom Sticker ( カスタムスタンプ) a little bit. 11 / 33
12. The Editor 12 / 33 **** ****
13. The Editor It was first made for in-house sticker designer exclusively. (Name Sticker CMS) 13 / 33 **** ****
14. The Editor It was first made for in-house sticker designer exclusively. (Name Sticker CMS) LINE Creators Market will deliver the same feature soon. 14 / 33 **** ****
15. The Editor It was first made for in-house sticker designer exclusively. (Name Sticker CMS) LINE Creators Market will deliver the same feature soon. Don't reinvent the wheel 15 / 33 **** ****
16. Other reasons We don't have to support mobile browsers. The common web components of the editor must be compatible with Vue. Name Sticker CMS No Framework LINE Creators Market 16 / 33
17. Looks good https://custom-elements-everywhere.com/ 17 / 33
18. How does it look like in code? In package.json "dependencies": { "@linecorp/name-sticker-editor": "1.1.1" } Then in HTML Just like a regular HTML tag <script src="/name-sticker-editor/dist/name-sticker-editor.js"></scri <name-sticker-editor src="url/to/sticker/image" safe-area-color="#0003"> </name-sticker-editor> 18 / 33
19. Access via JS const nameStickerEditor = document.querySelector("name-sticker-editor nameStickerEditor.src = "url/to/sticker/image"; nameStickerEditor.resetPath(); nameStickerEditor.addEventListener("change", evt => {}); 19 / 33
20. What have we learned? Need a convenient tool in development phase Home-made Storybook Packaging and distribution of custom elements Scenarios that suitable and not suitable for Custom Elements 20 / 33
21. Home-made tool 21 / 33
22. Storybook https://storybook.js.org/ A better tool for developers and users of the custom elements to play with 22 / 33
23. Packaging Bundled with webpack Users need to put it in <script> tag before using it Not flexible enough if users want to bundle themselves and use it directly in JS Lesson Learned Multiple builds: umd and esm <script src="/name-sticker-editor/dist/name-sticker-editor.js"></scri import { NameStickerEditor } from "node_modules/name-sticker-editor/i 23 / 33
24. Distribution Host on Github Enterprise "dependencies": { "loading-indicator": "git+ssh://git.repo.host:org/loading-indicat } 24 / 33
25. Distribution Host on Github Enterprise Some CI fail because they don't support git+ssh "dependencies": { "loading-indicator": "git+ssh://git.repo.host:org/loading-indicat } 25 / 33
26. Distribution Host on Github Enterprise Some CI fail because they don't support git+ssh Some other CI fail because they don't have permission to access to Github enterprise in https. "dependencies": { "loading-indicator": "git+ssh://git.repo.host:org/loading-indicat } "dependencies": { "loading-indicator": "https://git.repo.host/org/loading-indicator } 26 / 33
27. Lesson Learned in Distribution Distribute them on npm (or private npm) the first day. Discuss with your users earlier 27 / 33
28. Scenarios not suitable for Custom Elements Custom Elements are not silver bullets. 28 / 33
29. Scenarios not suitable for Custom Elements Custom Elements are not like React Components or Vue Components. We still have to do state management ourselves. Encapsulation custom elements in layers of layers just brought us more problems. 29 / 33
30. The encapsulation problem we met <two-tone-slider> is encapsulated in <range-and- color> 30 / 33
31. The encapsulation problem we met In the source code of <range-and-color>, we have to explicitly propagate the change event. Because change events do not propagate out of shadow DOM. https://developers.google.com/web/fundamentals/web- components/shadowdom#events twoToneSlider.addEventListener("change", evt => { this.dispatchEvent(new CustomEvent(evt.type, { detail: evt.detail } }); 31 / 33
32. Suitable Scenarios of Custom Elements Enhance existing HTML elements Something which is difficult to implement with only HTML and CSS 32 / 33
33. Thanks for listening Questions? 33 / 33