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
   

   View Slide

2. LINE Custom Stickers
   

   View Slide

3. For in-House Designers and 3rd Party Designers
   Custom Stickers CMS
   

   View Slide

4. Custom Stickers
   LINE Shop
   Custom
   Stickers CMS
   SVG
   PNG
   Customized
   Text
   

   View Slide

5. LINE Creators Market
   Public to all Creators
   

   View Slide

6. That Could Be Shared Between Custom Sticker CMS and Creators Market
   > Form Controls
   > The Custom Text Editor
   There Are Some Common Parts
   

   View Slide

7. Custom Text Editor
   

   View Slide

8. > Make it componentized and reusable
   > The user interaction is somewhat complicated
   Custom Text Editor
   

   View Slide

9. > Easy to integrate with other front-end frameworks
   > Must be a common technology
   Consideration of Componentize
   

   View Slide

10. Custom Elements
    

    View Slide

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
    

    View Slide

12. Browsers Compatibility
    https://www.webcomponents.org/
    

    View Slide

13. Framework Compatibility
    https://custom-elements-everywhere.com/
    > Custom Elements work well with Vue JS
    > Creators Market heavily adopted Vue JS
    Angular Svelte
    Others
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. The Benefit It Brings Us
    Reusability
    
    Interoperability
    
    is=“graphemic-input” 

    type=“text” />
    Extendability
    is=“graphemic-input” 

    type=“text” />
    

    View Slide

17. The actual custom element for editing custom sticker
    
    

    View Slide

18. Use It in HTML
    
    

    View Slide

19. Use It in JS
    
    

    View Slide

20. > No standard CSS pseudo selectors
    > It is very hard to customize style of
    
    

    View Slide

21. 
    > works in all major browsers
    Interoperability
    

    View Slide

22. https://github.com/whatwg/html/issues/1467#issuecomment-447650684
    
    > In maxlength Computation of 

    , Non-BMP
    Characters Are Counted Differently Among
    Major Browsers
    > Languages of South Asia and South-East Asia
    Heavily Use non-BMP Characters
    

    View Slide

23. > Extend
    
    > Calculate maxlength by counting graphemes
    • https://github.com/orling/grapheme-splitter
    type=“text” />
    
    Extendability
    Interoperability
    

    View Slide

24. > Compatible with modern browsers and most front-end frameworks
    > Custom Element is the browser-native component library
    The Takeaways
    > Reusability, Interoperability, Extendability
    

    View Slide

25. Thank You
    

    View Slide