Navigacijos valdymas žiniatinklio komponentuose su „Stencil Router“

Žiniatinklio komponentai suteikia galingą būdą kurti daugkartinio naudojimo ir inkapsuliuotus UI elementus šiuolaikiniam internetui. Aplikacijoms tampant sudėtingesnėms, efektyvi navigacija tampa itin svarbi vartotojo patirčiai. „Stencil Router“ siūlo lengvą ir efektyvų sprendimą navigacijos valdymui žiniatinklio komponentų projektuose, sukurtuose su „StencilJS“.

Kas yra „Stencil Router“?

„Stencil Router“ yra deklaratyvi maršrutizavimo biblioteka, sukurta specialiai „StencilJS“ aplikacijoms. Ji leidžia apibrėžti maršrutus ir susieti juos su konkrečiais komponentais, užtikrinant sklandžią navigaciją tarp skirtingų vaizdų jūsų žiniatinklio komponentais pagrįstoje aplikacijoje. Skirtingai nuo tradicinių karkasų, „Stencil Router“ išnaudoja žiniatinklio komponentų galią, kad sukurtų tikrai modulinę ir nešiojamą navigacijos sistemą.

Kodėl verta naudoti „Stencil Router“?

Štai keletas svarbių priežasčių, kodėl verta rinktis „Stencil Router“ jūsų žiniatinklio komponentų projektams:

• Deklaratyvus maršrutizavimas: Apibrėžkite savo maršrutus aiškiai ir glaustai, naudodami HTML panašią sintaksę. Tai padaro jūsų maršrutizavimo logiką lengvai suprantamą ir prižiūrimą.
• Sklandi integracija su „Stencil“: „Stencil Router“ yra sukurtas taip, kad sklandžiai veiktų su „StencilJS“, išnaudojant jo komponentų modelį ir gyvavimo ciklo metodus.
• Atidėtas įkėlimas (Lazy Loading): „Stencil Router“ palaiko atidėtą komponentų įkėlimą, gerinantį pradinį puslapio įkrovimo laiką ir bendrą aplikacijos našumą. Tai ypač svarbu didesnėms aplikacijoms su daugybe maršrutų.
• Įdėtinis maršrutizavimas: Kurkite sudėtingas navigacijos struktūras su įdėtiniais maršrutais, leidžiančiais organizuoti jūsų aplikaciją į logines dalis.
• Tipų saugumas: Sukurtas su „TypeScript“, „Stencil Router“ užtikrina tipų saugumą, padedantį anksti pagauti klaidas ir pagerinti kodo kokybę.
• Draugiškas SEO: „Stencil Router“ palaiko serverio pusės atvaizdavimą (SSR), todėl jūsų aplikacija tampa draugiškesnė paieškos sistemoms.
• Lengvas ir našus: „Stencil Router“ yra sukurtas būti lengvas ir našus, užtikrinantis sklandžią vartotojo patirtį.

Darbo su „Stencil Router“ pradžia

Peržvelkime „Stencil Router“ diegimo ir naudojimo žingsnius „StencilJS“ projekte.

1. Diegimas

Pirmiausia, įdiekite „Stencil Router“ naudodami npm arba yarn:

            npm install @stencil-community/router

            

              
                Copy
              
            
          

Arba naudojant yarn:

            yarn add @stencil-community/router

            

              
                Copy
              
            
          

2. Importavimas ir konfigūravimas

Importuokite reikiamus modulius savo stencil.config.ts faile ir sukonfigūruokite maršrutizatorių:

            import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { Router } from '@stencil-community/router';

export const config: Config = {
  namespace: 'my-app',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  plugins: [
    sass(),
    Router({
      // Optional: Add custom configuration here
    })
  ],
};

            

              
                Copy
              
            
          

3. Apibrėžkite savo maršrutus

Sukurkite pagrindinį komponentą (pvz., my-app.tsx) ir apibrėžkite savo maršrutus naudodami <stencil-route-link> ir <stencil-route> komponentus. Būtinai importuokite maršrutizatorių savo komponento failo viršuje:

            import { Component, h } from '@stencil/core';
import { RouterHistory, match } from '@stencil-community/router';

@Component({
  tag: 'my-app',
  styleUrl: 'my-app.css',
  shadow: true,
})
export class MyApp {
  render() {
    return (
      <div>
        <header>
          <h1>My App</h1>
          <nav>
            <stencil-route-link url="/">Home</stencil-route-link>
            <stencil-route-link url="/about">About</stencil-route-link>
            <stencil-route-link url="/contact">Contact</stencil-route-link>
          </nav>
        </header>

        <main>
          <stencil-route url="/" component="app-home" exact={true} />
          <stencil-route url="/about" component="app-about" />
          <stencil-route url="/contact" component="app-contact" />
          <stencil-route url="/profile/:name" component="app-profile" />
          <stencil-route component="app-not-found" />  <!-- Catch-all route for 404 -->
        </main>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Paaiškinimas:

• <stencil-route-link>: Sukuria nuorodą į konkretų maršrutą. url atributas nurodo tikslinį URL.
• <stencil-route>: Apibrėžia maršrutą ir susieja jį su konkrečiu komponentu.
• url: URL kelias, kuris turi atitikti.
• component: Žiniatinklio komponento pavadinimas, kuris bus atvaizduojamas, kai maršrutas atitiks.
• exact: (Nebūtina) Nurodo, ar maršrutas turi atitikti tiksliai. Nustačius true, maršrutas atitiks tik tada, jei URL tiksliai atitiks nurodytą kelią. Naudinga pagrindinio puslapio maršrutui.
• Maršrutas *be* `url` atributo veikia kaip universalus maršrutas (catch-all), dažnai naudojamas 404 „Nerasta“ puslapiui rodyti.

4. Sukurkite savo komponentus

Sukurkite komponentus, kurie bus atvaizduojami kiekvienam maršrutui (pvz., app-home.tsx, app-about.tsx, app-contact.tsx ir app-profile.tsx). Pavyzdžiui:

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

@Component({
  tag: 'app-home',
  styleUrl: 'app-home.css',
  shadow: true,
})
export class AppHome {
  render() {
    return (
      <div>
        <h2>Home Page</h2>
        <p>Welcome to the home page!</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Pakartokite šį procesą kitiems komponentams, sukurdami jiems bazinį turinį.

5. Maršruto parametrų apdorojimas

„Stencil Router“ leidžia perduoti parametrus maršrutuose. Pavyzdžiui, my-app.tsx faile mes apibrėžėme maršrutą /profile/:name. Norėdami pasiekti name parametrą app-profile komponente, galite naudoti @Prop dekoratorių kartu su match savybe, kurią įterpia maršrutizatorius:

            import { Component, h, Prop } from '@stencil/core';
import { MatchResults } from '@stencil-community/router';

@Component({
  tag: 'app-profile',
  styleUrl: 'app-profile.css',
  shadow: true,
})
export class AppProfile {
  @Prop() match: MatchResults;

  render() {
    const name = this.match && this.match.params && this.match.params.name;

    return (
      <div>
        <h2>Profile Page</h2>
        <p>Hello, {name}!</p>
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Paaiškinimas:

• @Prop() match: MatchResults;: Deklaruoja savybę pavadinimu match, kurios tipas yra MatchResults. „Stencil Router“ automatiškai įterpia match objektą į komponentą, kai maršrutas atitinka.
• this.match.params.name: Pasiekia name parametrą iš match objekto.

Pažangios maršrutizavimo technikos

„Stencil Router“ siūlo keletą pažangių funkcijų sudėtingesniems maršrutizavimo scenarijams tvarkyti.

1. Įdėtinis maršrutizavimas

Galite kurti įdėtinius maršrutus, apibrėždami maršrutus kitų komponentų viduje. Tai leidžia organizuoti aplikaciją į logines dalis ir kurti sudėtingesnes navigacijos struktūras. Pavyzdžiui, app-about.tsx viduje galėtumėte turėti:

            import { Component, h } from '@stencil/core';
import { RouterHistory } from '@stencil-community/router';

@Component({
  tag: 'app-about',
  styleUrl: 'app-about.css',
  shadow: true,
})
export class AppAbout {
  render() {
    return (
      <div>
        <h2>About Us</h2>
        <p>Learn more about our company.</p>

        <nav>
          <stencil-route-link url="/about/team">Our Team</stencil-route-link>
          <stencil-route-link url="/about/history">Our History</stencil-route-link>
        </nav>

        <stencil-route url="/about/team" component="app-team" />
        <stencil-route url="/about/history" component="app-history" />
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Tuomet jums reikėtų sukurti app-team ir app-history komponentus.

2. Programinė navigacija

Kartais reikia naviguoti programiškai (pvz., po formos pateikimo). Galite įterpti RouterHistory į savo komponentą ir naudoti push() metodą, kad pereitumėte į konkretų URL.

            import { Component, h, State } from '@stencil/core';
import { RouterHistory } from '@stencil-community/router';

@Component({
  tag: 'app-contact',
  styleUrl: 'app-contact.css',
  shadow: true,
})
export class AppContact {
  @State() message: string = '';

  submitForm = () => {
    // Simulate form submission
    setTimeout(() => {
      this.message = 'Form submitted successfully!';
      // Redirect to the home page after submission
      this.navigateTo('/');
    }, 1000);
  };

  @Prop()
  history: RouterHistory

  private navigateTo = (url: string) => {
    this.history.push(url);
  }

  render() {
    return (
      <div>
        <h2>Contact Us</h2>
        <p>Send us a message!</p>
        <form onSubmit={this.submitForm}>
          <button type="submit">Submit</button>
        </form>
        {this.message && <p>{this.message}</p>}
      </div>
    );
  }
}

            

              
                Copy
              
            
          

Svarbu: Savo stencil.config.ts faile įsitikinkite, kad Router papildinys yra sukonfigūruotas teisingai. Maršrutizatoriaus istorijos objektas yra įterpiamas. Naudojant programinę navigaciją, jums taip pat reikės atnaujinti app.tsx arba pagrindinį komponentą, kad įterptumėte istorijos `prop`, pavyzdžiui:

            <stencil-route url="/contact" component="app-contact" history={this.history} />
            

              
                Copy
              
            
          

3. Atidėtas įkėlimas (Lazy Loading)

Siekiant pagerinti pradinį įkrovimo laiką, ypač didesnėse aplikacijose, „Stencil Router“ palaiko atidėtą komponentų įkėlimą. Tai reiškia, kad komponentai įkeliami tik tada, kai aktyvuojamas jų atitinkamas maršrutas.

Norėdami įjungti atidėtą įkėlimą, įsitikinkite, kad jūsų komponentai yra sukurti kaip atskiri moduliai. „Stencil“ tai atlieka automatiškai, kai kuriate savo projektą. Tada tiesiog apibrėžkite savo maršrutus kaip įprasta. „Stencil Router“ automatiškai atidės komponentų įkėlimą, kai to prireiks.

Pavyzdžiui, jei jūsų aplikacijoje yra didelis administratoriaus skydelis, galite atidėti administratoriaus komponentų įkėlimą, kad jie būtų įkeliami tik tada, kai vartotojas pereina į administratoriaus skiltį.

Geriausios „Stencil Router“ naudojimo praktikos

Štai keletas geriausių praktikų, kurių reikėtų laikytis naudojant „Stencil Router“:

• Organizuokite maršrutus: Apibrėžkite savo maršrutus logiškai ir nuosekliai. Naudokite įdėtinius maršrutus, kad organizuotumėte aplikaciją į skiltis.
• Naudokite aprašomuosius maršrutų pavadinimus: Rinkitės aiškius ir aprašomuosius maršrutų pavadinimus. Tai padarys jūsų maršrutizavimo logiką lengviau suprantamą ir prižiūrimą.
• Apdorokite 404 klaidas: Visada apibrėžkite universalų maršrutą (catch-all), kad apdorotumėte 404 klaidas (puslapis nerastas). Tai užtikrina geresnę vartotojo patirtį.
• Naudokite atidėtą įkėlimą: Įjunkite atidėtą įkėlimą komponentams, kurių nereikia iš karto. Tai pagerins pradinį puslapio įkrovimo laiką ir bendrą aplikacijos našumą.
• Testuokite savo maršrutus: Kruopščiai testuokite savo maršrutus, kad įsitikintumėte, jog jie veikia teisingai. Naudokite automatizuotus testavimo įrankius, kad anksti pagautumėte klaidas.
• Apsvarstykite internacionalizaciją (i18n): Pasaulinėms aplikacijoms apsvarstykite, kaip jūsų maršrutizavimo strategija sąveikauja su i18n. Gali tekti koreguoti maršrutus atsižvelgiant į vartotojo lokalę. Pavyzdžiui, vartotojas iš Prancūzijos gali pasiekti „/fr/about“ vietoj „/about“. Bibliotekos, tokios kaip „i18next“, gali padėti tai valdyti.
• Prieinamumas: Užtikrinkite, kad jūsų maršrutizavimas ir nuorodos būtų prieinamos vartotojams su negalia. Naudokite tinkamus ARIA atributus ir semantinį HTML.

„Stencil Router“ realiame pasaulyje: pasaulinių aplikacijų pavyzdžiai

Štai keletas hipotetinių pavyzdžių, kaip „Stencil Router“ galėtų būti naudojamas realiose, pasaulinėse aplikacijose:

1. El. prekybos platforma

El. prekybos platforma galėtų naudoti „Stencil Router“ navigacijai tarp skirtingų produktų kategorijų, produktų detalių puslapių, pirkinių krepšelio, atsiskaitymo ir vartotojų paskyrų valdyti. Atidėtas įkėlimas galėtų būti naudojamas produktų nuotraukoms ir vaizdo įrašams įkelti tik tada, kai to reikia, pagerinant našumą vartotojams su lėtesniu interneto ryšiu visame pasaulyje. Maršrutai taip pat galėtų būti pritaikyti pagal šalį, siūlant skirtingus produktų katalogus pagal vietovę (pvz., „/uk/products“ Jungtinei Karalystei ir „/de/products“ Vokietijai).

2. Internetinė mokymosi platforma

Internetinė mokymosi platforma galėtų naudoti „Stencil Router“ navigacijai tarp skirtingų kursų, modulių, pamokų, testų ir užduočių. Įdėtiniai maršrutai galėtų būti naudojami kursų turiniui organizuoti į logines dalis. Programinė navigacija galėtų būti naudojama vartotojams nukreipti po testo ar užduoties atlikimo. Platforma galėtų siūlyti turinį keliomis kalbomis, naudojant maršrutus, tokius kaip „/en/courses“ (anglų k.) ir „/es/cursos“ (ispanų k.). Vartotojų paskyros taip pat galėtų būti valdomos su maršrutais, tokiais kaip „/profile/:userId“, leidžiančiais vartotojams peržiūrėti ir atnaujinti savo profilio informaciją. Be to, platforma gali atitikti skirtingų šalių duomenų privatumo įstatymus naudojant sąlyginį maršrutizavimą.

Išvada

„Stencil Router“ yra galinga ir lanksti maršrutizavimo biblioteka, kuri gali žymiai supaprastinti navigaciją žiniatinklio komponentų aplikacijose, sukurtose su „StencilJS“. Laikydamiesi šiame vadove aprašytų žingsnių ir geriausių praktikų, galite sukurti tvirtas ir lengvai prižiūrimas navigacijos sistemas, kurios pagerina jūsų žiniatinklio aplikacijų vartotojo patirtį. Dėl savo dėmesio našumui, moduliškumui ir tipų saugumui, „Stencil Router“ yra puikus pasirinkimas šiuolaikiniam žiniatinklio kūrimui.