WebComponent & lit-html 前端開發新選擇

tags: 2018, R3
位置: R3
講者:邱冠喻

投影片:https://md.pastleo.me/p/2018-mopcon-webcomponent-lithtml


回到沒有那麼多的framework時

  • jQuery(or DOM API)
    • 1136 lines

各種framework出現

Angular、React、Vue

WEB Component

  • ES Modules
    • import
  • HTML Template
    • 他已經是DOM物件,所以可以用JS去操作
<template>
    <h1>Hello</h1>
</template>
  • Custom Elements
    • define you own html tag
  • Shadow DOM
    • 用於建立css的結界,內外不會互相影響

innerHTML =

  • 沒有效率
  • 元件狀態管理困難

ES6 tagged template literal

console.log`
    Math.PI = $(Math.PI),
    Math.E = $(Math.E)
`

lit-html

JS template LITeral + HTML Template
AHH

class Hell extends LitElement {
    constructor() {
        cuper();
        this.color = 'green';
    }
    //...
}

HelloCustomEle.properties={
    color {type: String}
}

與React的寫法非常相似!

HyperHTML

更推薦!!! 如果再投稿一次,會講這個主題

概念與lit HTML 類似,差別是hyperHTML是無名小卒提出來了的,而lit HTML 則是Google 提出的。
因為lit HTML是Google提出的所以比起hyperHTML更加地受到關注。

HyperHTML Doc

WebComponent 的好處

  • 不需要 npm i ,libraries比較少,更輕量
  • 不需要webpack、grunt等 bundler
  • web 標準規範
    • 可能是未來主流之一!
  • 除錯容易,chrome dev tool可支援

Can I Use?

Caniuse 說: 支援度目前還沒有很高

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

  • Chrome: fully support since 67
    • 我都支援了,就普及了60~70%
  • Firefox: just released 63 and fully support custom element and shadow DOM
  • safari: partially support for ustom element and shadow DOM
  • edge: only support string literal ES module and template element
  • IE: sorry NO
    Image Not Showing Possible Reasons
    • The image file may be corrupted
    • The server hosting the image is unavailable
    • The image path is incorrect
    • The image format is not supported
    Learn More →
  • android chrome: fully support since 67
    • 非常複雜
  • ios safari:
    • partially support since iOS 10.3
    • fully supprot ES module since iOS 11.2

這個還能不能用呢?

我想還是不行
西瓜

  • 社群跟資源還不夠完整
  • 可以用最新版的chrmoe、firefox來做開發不需經過任何工具
Select a repo