Day: July 2, 2018

  • Stencil : Web component compiler

    pongspat.h

    Stencil เป็น compiler ที่ทำหน้าที่สร้าง standards-based web component (custom element) ซึ่งรวบรวมแนวคิดที่ดีของ framework ต่างๆที่ได้รับความนิยมสูง มาไว้ใน component โดย build-time tool ที่ใช้งานง่าย เช่น

    • Virtual DOM
    • Async rendering (inspired by React Fiber)
    • Reactive data-binding
    • TypeScript
    • JSX

    web component ที่ได้จาก Stencil เป็น standards-based web component ทำให้สามารถใช้งานร่วมกับ framework ต่างๆที่ได้รับความนิยม และสามารถใช้ได้โดยไม่มี framework ก็ได้ จากเดิมเมื่อพัฒนาด้วย framework หนึ่งแล้ว ไม่สามารถนำไปใช้ร่วมกับ framework อื่นได้

    Stencil มี APIs เช่น Virtual DOM, JSX, และ async rendering  ที่ทำให้สามารถพัฒนา web component ที่ทำงานได้เร็ว มีประสิทธิภาพดีกว่า และสร้างได้ง่ายกว่าเมื่อเปรียบเทียบกับการเขียน custom element โดยตรงโดยไม่ใช้ Stencil  และใน Stencil ยังมี small dev server พร้อมความสามารถ live reload อยู่ด้วย

    เริ่มต้นสร้าง project กับ Stencil

    การสร้าง component ทำได้โดยเริ่มต้นจาก component starter ดังนี้

    git clone https://github.com/ionic-team/stencil-component-starter my-component
cd my-component
git remote rm origin
npm install

    จากนั้น ถ้าต้องการ start  live-reload server สำหรับการพัฒนา ให้ใช้คำสั่ง

    npm start

    Updating Stencil
    ถ้าต้องการ update Stencil เป็น version ล่าสุดให้ใช้คำสั่ง

    npm install @stencil/core@latest --save-exact

    Stencil components

    component ถูกสร้างโดยการสร้าง file .tsx ใน “src/components” directory เขียน component ด้วย JSX และ Typescript  ซึ่ง component ที่สร้างมาจาก component starter คือ my-component.tsx

    import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-first-component',
  styleUrl: 'my-first-component.scss'
})
export class MyComponent {

  @Prop() name: string;

  render() {
    return (My name is {this.name}); 
  } 
}

    เมื่อ compile แล้วเสร็จ สามารถนำ component ไปใช้ใน HTML page ได้เช่นเดียวกับ tag อื่นๆ Web Components จะต้องมี “-” ภายใน tag (“myFirstComponent” เป็นชื่อที่ไม่สามารถใช้งานได้)

    <my-first-component name="Max"></my-first-component>

    เมื่อเปิดผ่าน browser จะแสดงผล My name is Max

     

    อ้างอิง : https://stenciljs.com