Stencil: išsami TypeScript žiniatinklio komponentų kompiliatoriaus apžvalga

Nuolat kintančiame žiniatinklio kūrimo pasaulyje, daugkartinio naudojimo, mastelio keitimui pritaikytų ir lengvai prižiūrimų komponentų poreikis yra itin svarbus. Stencil, TypeScript kompiliatorius, yra galingas įrankis, sprendžiantis šią problemą, leidžiantis kūrėjams kurti žiniatinklio komponentus, kurie sklandžiai integruojasi su įvairiais karkasais arba veikia kaip atskiri elementai.

Kas yra žiniatinklio komponentai?

Prieš gilinantis į Stencil, supraskime pagrindą, ant kurio jis sukurtas: žiniatinklio komponentus. Žiniatinklio komponentai yra žiniatinklio platformos API rinkinys, leidžiantis kurti daugkartinio naudojimo individualizuotus HTML elementus su inkapsuliuotu stiliumi ir elgsena. Tai reiškia, kad galite apibrėžti savo žymes, pavyzdžiui, <mano-komponentas>, ir naudoti jas visose savo žiniatinklio programose, nepriklausomai nuo to, kokį karkasą naudojate (arba nenaudojate!).

Pagrindinės technologijos, slypinčios už žiniatinklio komponentų, apima:

• Individualizuoti elementai (Custom Elements): Leidžia apibrėžti savo HTML elementus.
• Šešėlinis DOM (Shadow DOM): Suteikia inkapsuliaciją, užtikrinančią, kad komponento stilius ir elgsena netrukdytų likusiai puslapio daliai.
• HTML šablonai (HTML Templates): Suteikia galimybę apibrėžti daugkartinio naudojimo HTML struktūras.

Pristatome Stencil

Stencil yra kompiliatorius, kuris generuoja žiniatinklio komponentus. Jį sukūrė Ionic komanda ir jis naudoja TypeScript, JSX bei šiuolaikinius žiniatinklio standartus, kad sukurtų itin optimizuotus ir našius komponentus. Stencil neapsiriboja vien kodo kompiliavimu; jis prideda keletą pagrindinių funkcijų, kurios palengvina ir padaro efektyvesnį žiniatinklio komponentų kūrimą bei priežiūrą.

Pagrindinės Stencil funkcijos ir privalumai

1. TypeScript ir JSX palaikymas

Stencil naudoja TypeScript, suteikdamas griežtą tipizavimą, geresnę kodo organizaciją ir padidintą kūrėjo produktyvumą. JSX naudojimas leidžia deklaratyviai ir intuityviai apibrėžti komponento vartotojo sąsają.

Pavyzdys:

Apsvarstykite paprastą skaitiklio komponentą, parašytą naudojant Stencil:

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

@Component({
  tag: 'my-counter',
  styleUrl: 'my-counter.css',
  shadow: true
})
export class MyCounter {
  @State() count: number = 0;

  increment() {
    this.count++;
  }

  render() {
    return (
      <div class="counter-container">
        <p>Skaičius: {this.count}</p>
        <button onClick={() => this.increment()}>Didinti</button>
      </div>
    );
  }
}

2. Reaktyvusis duomenų susiejimas

Stencil siūlo paprastą būdą valdyti komponento būseną ir reaktyviai atnaujinti vartotojo sąsają. Naudojant @State dekoratorių, komponento būsenos pakeitimai automatiškai sukelia pervaizdavimą, užtikrinant, kad vartotojo sąsaja visada sinchronizuota su duomenimis.

Pavyzdys:

Aukščiau pateiktame skaitiklio pavyzdyje, deklaracija @State() count: number = 0; padaro kintamąjį count reaktyviu. Kiekvieną kartą, kai iškviečiama funkcija increment(), kintamasis count yra atnaujinamas, o komponentas pervaizduojamas, kad atspindėtų naują vertę.

3. Virtualus DOM ir efektyvus atvaizdavimas

Stencil naudoja virtualų DOM, kad optimizuotų atvaizdavimo našumą. Pakeitimai pirmiausia pritaikomi virtualiam DOM, o tada tik būtini atnaujinimai pritaikomi tikram DOM, taip sumažinant brangias DOM manipuliacijas.

4. Išankstinis (AOT) kompiliavimas

Stencil atlieka AOT kompiliavimą, o tai reiškia, kad kodas yra kompiliuojamas kūrimo proceso metu, o ne vykdymo metu. Tai lemia greitesnį pradinį įkėlimo laiką ir geresnį vykdymo našumą.

5. Atidėtasis įkėlimas (Lazy Loading)

Komponentai pagal nutylėjimą yra įkeliami atidėtai, o tai reiškia, kad jie įkeliami tik tada, kai jų prireikia. Tai padeda sumažinti pradinį puslapio įkėlimo laiką ir pagerinti bendrą programos našumą.

6. Suderinamumas su įvairiais karkasais

Vienas iš pagrindinių Stencil privalumų yra jo gebėjimas generuoti žiniatinklio komponentus, kurie yra suderinami su įvairiais karkasais, įskaitant React, Angular, Vue.js ir net paprastą HTML. Tai leidžia sukurti komponentų biblioteką vieną kartą ir pakartotinai ją naudoti keliuose projektuose, nepriklausomai nuo naudojamo karkaso.

7. Progresyviųjų žiniatinklio programų (PWA) palaikymas

Stencil teikia integruotą PWA palaikymą, leidžiantį lengvai kurti diegiamas, patikimas ir įtraukiančias žiniatinklio programas. Jis apima tokias funkcijas kaip „service worker“ generavimas ir manifesto palaikymas.

8. Maži paketų dydžiai

Stencil yra sukurtas taip, kad sugeneruotų mažus paketų dydžius, užtikrinant, kad jūsų komponentai būtų įkeliami greitai ir efektyviai. Tai pasiekiama naudojant tokias technikas kaip „tree-shaking“ ir kodo padalijimas.

9. Įrankiai ir kūrimo patirtis

Stencil siūlo gausų įrankių ir funkcijų rinkinį, kuris pagerina kūrimo patirtį, įskaitant:

• Spartusis modulių pakeitimas (HMR): Leidžia matyti komponentų pakeitimus realiu laiku, nereikalaujant perkrauti puslapio.
• Derinimo palaikymas: Suteikia įrankius komponentų derinimui naršyklėje.
• Testavimo karkasas: Apima integruotą testavimo karkasą, skirtą vienetų ir integracijos testams rašyti.
• Dokumentacijos generatorius: Automatiškai generuoja dokumentaciją jūsų komponentams.

Darbo su Stencil pradžia

Norėdami pradėti dirbti su Stencil, jūsų sistemoje turi būti įdiegti Node.js ir npm (arba yarn). Tada galite globaliai įdiegti Stencil CLI naudodami šią komandą:

npm install -g @stencil/core

Kai CLI bus įdiegtas, galite sukurti naują Stencil projektą naudodami komandą stencil init:

stencil init mano-komponentu-biblioteka

Tai sukurs naują katalogą pavadinimu mano-komponentu-biblioteka su pagrindine Stencil projekto struktūra. Tada galite pereiti į katalogą ir paleisti kūrimo serverį naudodami komandą npm start:

cd mano-komponentu-biblioteka
npm start

Tai paleis kūrimo serverį ir atidarys jūsų projektą žiniatinklio naršyklėje. Tada galite pradėti kurti savo žiniatinklio komponentus, modifikuodami failus src/components kataloge.

Pavyzdys: paprasto įvesties komponento kūrimas

Sukurkime paprastą įvesties komponentą naudojant Stencil. Šis komponentas leis vartotojams įvesti tekstą ir jį rodyti puslapyje.

1. Sukurkite naują komponento failą

Sukurkite naują failą pavadinimu my-input.tsx kataloge src/components.

2. Apibrėžkite komponentą

Pridėkite šį kodą į my-input.tsx failą:

import { Component, State, h, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'my-input',
  styleUrl: 'my-input.css',
  shadow: true
})
export class MyInput {
  @State() inputValue: string = '';
  @Event() inputChanged: EventEmitter;

  handleInputChange(event: any) {
    this.inputValue = event.target.value;
    this.inputChanged.emit(this.inputValue);
  }

  render() {
    return (
      <div class="input-container">
        <input type="text" value={this.inputValue} onInput={(event) => this.handleInputChange(event)} />
        <p>Jūs įvedėte: {this.inputValue}</p>
      </div>
    );
  }
}

Šis kodas apibrėžia naują komponentą pavadinimu my-input. Jis turi inputValue būsenos kintamąjį, kuris saugo vartotojo įvestą tekstą. Funkcija handleInputChange() iškviečiama, kai vartotojas rašo įvesties lauke. Ši funkcija atnaujina inputValue būsenos kintamąjį ir išsiunčia inputChanged įvykį su nauja verte.

3. Pridėkite stilių

Sukurkite naują failą pavadinimu my-input.css kataloge src/components ir pridėkite šį CSS:

.input-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

4. Naudokite komponentą savo programoje

Dabar galite naudoti my-input komponentą savo programoje, pridėdami šį kodą į savo HTML failą:

<my-input></my-input>

Pažangesnės Stencil koncepcijos

1. Komponentų kompozicija

Stencil leidžia sujungti komponentus, kuriant sudėtingesnes vartotojo sąsajas. Tai apima komponentų įdėjimą vienas į kitą ir duomenų perdavimą tarp jų naudojant savybes ir įvykius.

2. Savybės ir įvykiai

Savybės (Properties) naudojamos perduoti duomenis iš tėvinio komponento į vaikinį. Jos apibrėžiamos naudojant @Prop() dekoratorių.

Įvykiai (Events) naudojami komunikacijai iš vaikinio komponento į tėvinį. Jie apibrėžiami naudojant @Event() dekoratorių ir išsiunčiami naudojant funkciją emit().

3. Gyvavimo ciklo metodai

Stencil suteikia gyvavimo ciklo metodų rinkinį, leidžiantį prisijungti prie skirtingų komponento gyvavimo ciklo etapų. Šie metodai apima:

• componentWillLoad(): Iškviečiamas prieš komponento atvaizdavimą pirmą kartą.
• componentDidLoad(): Iškviečiamas po to, kai komponentas atvaizduojamas pirmą kartą.
• componentWillUpdate(): Iškviečiamas prieš komponento atnaujinimą.
• componentDidUpdate(): Iškviečiamas po komponento atnaujinimo.
• componentWillUnload(): Iškviečiamas prieš komponento pašalinimą iš DOM.

4. Testavimas

Stencil teikia integruotą testavimo karkasą, paremtą Jest. Galite naudoti šį karkasą, rašydami vienetų ir integracijos testus savo komponentams. Testavimas yra labai svarbus siekiant užtikrinti, kad jūsų komponentai veiktų teisingai ir išvengti regresijų.

Stencil palyginimas su kitais žiniatinklio komponentų karkasais

Nors Stencil nėra vienintelis pasirinkimas kuriant žiniatinklio komponentus, jis išsiskiria savo dėmesiu našumui, suderinamumu su įvairiais karkasais ir supaprastinta kūrėjo patirtimi. Kiti karkasai, tokie kaip LitElement ir Polymer, taip pat siūlo sprendimus žiniatinklio komponentų kūrimui, tačiau unikalios Stencil funkcijos, kaip AOT kompiliavimas ir atidėtasis įkėlimas, tam tikrais atvejais suteikia aiškių pranašumų.

Realaus pasaulio pavyzdžiai ir naudojimo atvejai

• Dizaino sistemos: Daugelis organizacijų naudoja Stencil, kurdamos daugkartinio naudojimo komponentų bibliotekas savo dizaino sistemoms. Šios bibliotekos gali būti naudojamos keliuose projektuose ir karkasuose, užtikrinant nuoseklumą ir lengvą priežiūrą. Pavyzdžiui, pasaulinė finansų institucija gali naudoti Stencil kurdama dizaino sistemą, kuri naudojama jos žiniatinklio programose įvairiose šalyse, užtikrinant nuoseklią prekės ženklo patirtį tarptautiniams klientams.
• El. prekybos platformos: El. prekybos platformos gali pasinaudoti Stencil, kurdamos individualizuotas produktų korteles, atsiskaitymo procesus ir kitus interaktyvius elementus, kuriuos galima lengvai integruoti į skirtingas svetainės dalis. Pasaulinė el. prekybos įmonė galėtų naudoti Stencil kurdama produkto kortelės komponentą, kuris naudojamas jos svetainėje skirtinguose regionuose, pritaikant komponento kalbą ir valiutą pagal vartotojo buvimo vietą.
• Turinio valdymo sistemos (TVS): TVS platformos gali naudoti Stencil, kurdamos daugkartinio naudojimo turinio blokus ir valdiklius, kuriuos galima lengvai pridėti prie puslapių.
• Prietaisų skydeliai ir administravimo panelės: Stencil gali būti naudojamas kuriant interaktyvius prietaisų skydelius ir administravimo paneles su daugkartinio naudojimo komponentais duomenų vizualizavimui, formų įvestims ir kt.

Išvados

Stencil yra galingas ir universalus įrankis, skirtas kurti žiniatinklio komponentus. Jo dėmesys našumui, suderinamumui su įvairiais karkasais ir puiki kūrėjo patirtis daro jį puikiu pasirinkimu kuriant daugkartinio naudojimo UI komponentus šiuolaikinėms žiniatinklio programoms. Nesvarbu, ar kuriate dizaino sistemą, el. prekybos platformą, ar paprastą svetainę, Stencil gali padėti jums sukurti mastelio keitimui pritaikytus ir lengvai prižiūrimus komponentus, kurie pagerins jūsų programos našumą ir priežiūrą. Pasitelkdami žiniatinklio komponentus ir Stencil funkcijas, kūrėjai gali kurti tvirtesnes, lankstesnes ir ateičiai pritaikytas žiniatinklio programas.

Kadangi žiniatinklio kūrimo aplinka ir toliau vystosi, Stencil yra puikioje pozicijoje atlikti svarbų vaidmenį formuojant UI kūrimo ateitį. Jo atsidavimas žiniatinklio standartams, našumo optimizavimui ir teigiamai kūrėjo patirčiai daro jį vertingu įrankiu bet kuriam žiniatinklio kūrėjui, siekiančiam sukurti aukštos kokybės žiniatinklio komponentus.