Custom Elements in Custom Stickers

Tzulin Huang
LINE Fukuoka UIT Team Front-end Engineer
https://linedevday.linecorp.com/jp/2019/sessions/S2-10

Transcript

1. 2019 DevDay Custom Elements in Custom Stickers > Tzulin Huang > LINE Fukuoka UIT Team Front-end Engineer
2. LINE Custom Stickers
3. For in-House Designers and 3rd Party Designers Custom Stickers CMS
4. Custom Stickers LINE Shop Custom Stickers CMS SVG PNG Customized Text
5. LINE Creators Market Public to all Creators
6. That Could Be Shared Between Custom Sticker CMS and Creators Market > Form Controls > The Custom Text Editor There Are Some Common Parts
7. Custom Text Editor
8. > Make it componentized and reusable > The user interaction is somewhat complicated Custom Text Editor
9. > Easy to integrate with other front-end frameworks > Must be a common technology Consideration of Componentize
10. Custom Elements
11. https://github.blog/2018-09-06-removing-jquery-from-github-frontend/#custom-elements > No additional bytes of a framework for the user to download, parse and compile > A component library native to the browser Custom Elements
12. Browsers Compatibility https://www.webcomponents.org/
13. Framework Compatibility https://custom-elements-everywhere.com/ > Custom Elements work well with Vue JS > Creators Market heavily adopted Vue JS Angular Svelte Others
14. > There are plenty of good tutorial and documentation • https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements • https://developers.google.com/web/fundamentals/web-components/customelements > Or just google “Custom Elements” > Not part of my topic How To Develop Custom Elements
15. The Benefit It Brings Us Reusability Encapsulate and re-use complicated UI logic in Vanilla JS Interoperability Improve web apps’ interoperability among browsers Extendability Extend insufficient HTML elements
16. The Benefit It Brings Us Reusability <name-sticker-editor /> Interoperability <two-tone-slider /> <input 
 is=“graphemic-input” 
 type=“text” /> Extendability <input 
 is=“graphemic-input” 
 type=“text” />
17. The actual custom element for editing custom sticker <name-sticker-editor />
18. Use It in HTML <name-sticker-editor />
19. Use It in JS <name-sticker-editor />
20. > No standard CSS pseudo selectors > It is very hard to customize style of <input type=“range”> <two-tone-slider />
21. <two-tone-slider /> > <two-tone-slider /> works in all major browsers Interoperability
22. https://github.com/whatwg/html/issues/1467#issuecomment-447650684 <input is=“graphemic” type=“text” /> > In maxlength Computation of 
 <input type=“text” />, Non-BMP Characters Are Counted Differently Among Major Browsers > Languages of South Asia and South-East Asia Heavily Use non-BMP Characters
23. > Extend <input type=“text” /> <input is=“graphemic” type=“text” /> > Calculate maxlength by counting graphemes • https://github.com/orling/grapheme-splitter <input is=“graphemic” type=“text” /> <input type=“text” /> Extendability Interoperability
24. > Compatible with modern browsers and most front-end frameworks > Custom Element is the browser-native component library The Takeaways > Reusability, Interoperability, Extendability
25. Thank You