---
# System prepended metadata

title: 如何共用元件 - 從開發LINE隨你填貼圖來談 - 黃慈霖 Tzu-Lin Huang、Jesse
tags: [jsdc2019]

---

# 如何共用元件 - 從開發LINE隨你填貼圖來談 - 黃慈霖 Tzu-Lin Huang、Jesse
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

> Start here

## 隨你填貼圖
- 中文字變化較多 -> 台灣市場賣得特別好
- 原為提供內部設計師設計官方貼圖用
- 文字編輯器共用元件

> 原創市集 ==vue==
> 隨你填貼圖CMS ==nativeJS==



## Custom Element:瀏覽器提供的元件庫
(React element相容性較差)
- https://www.webcomponents.org//elements
- [Custom Elements Everywhere](https://custom-elements-everywhere.com)
- https://developers.google.com/web/fundamentals/web-components/customelements
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements


## 
- Matryoshka俄羅斯娃娃
    - 一層包一層都是包成custom element
    - shadow dom -> 有些內層的事件無法被外層監聽 -> 需要額外寫事件傳遞到外層
    - property & attribute 同步 --> 無窮迴圈
- 問題點
    - 自行處理事件狀態
    - 避免無窮迴圈情境

## 適合場景：
- 現有HTML元素不能滿足需求
    - 泰文/Emoji：使用2個UTF-16 code point表示-> chrome / safari length不同
    - [answer for textarea[maxlength] interoperability issue #1467](https://github.com/whatwg/html/issues/1467#issuecomment-447650684)
    - two-tone-slider，沒有標準CSS selector
- 處理跨瀏覽器問題


## reusing logic in vue and in react
- what to reuse?
    - stateful logic
    - ~~utility logic (pure)~~

- [Mixins Considered Harmful](https://reactjs.org/blog/2016/07/13/mixins-considered-harmful.html)
    - implicit dependencies -> 外層不知道mixin裡面的方法
    - name clashes -> 兩個不同的mixin使用了相同的methods(會被後面的override)
    - snowballing complexity -> amixin內用到bmixin
- ==Use HOC ([Higher Order Components](https://zh-hant.reactjs.org/docs/higher-order-components.html)) instead==
    - no implicit dependencies？why xd
    - still has name clashes
    - a lot of conventions (常規拉）
    - caveats need to be taken care of

- [Render Props](https://zh-hant.reactjs.org/docs/render-props.html)
    - same situation on HOCs
    -  pros
        -  only one caveat (React.pureComponent)
        -  not a new API
    - cons
        - wrapper hell
        
-  
hook is the ultimate tech to reuse logic!

https://reactjs.org/docs/hooks-intro.html#motivation

