Routering

Openen in ChatGPT

In moderne webtoepassingen verwijst routering naar het proces van het beheren van navigatie tussen verschillende weergaven of componenten op basis van de huidige URL of het pad. In webforJ stelt routering een geavanceerd raamwerk voor client-side navigatie in, waarbij de UI dynamisch wordt bijgewerkt zonder volledige pagina-herlaadacties, waardoor de prestaties van uw app worden verbeterd.

Traditionele vs client-side routering

Bij traditionele server-side routering, wanneer een gebruiker op een link klikt, stuurt de browser een verzoek naar de server voor een nieuw document. De server reageert door een nieuwe HTML-pagina te verzenden, wat de browser dwingt om CSS en JavaScript opnieuw te evalueren, het gehele document opnieuw te renderen en de app-status te resetten. Deze cyclus introduceert vertragingen en inefficiënties, omdat de browser bronnen en de pagina-status opnieuw moet laden. Het proces omvat doorgaans:

Verzoek: De gebruiker navigeert naar een nieuwe URL, wat een verzoek naar de server activeert.
Antwoord: De server stuurt een nieuw HTML-document terug, samen met verwante middelen (CSS, JS).
Rendering: De browser her-rendered de hele pagina, waardoor vaak de status van eerder geladen pagina's verloren gaat.

Deze benadering kan leiden tot prestatieknelpunten en suboptimale gebruikerservaringen door herhaalde volledige pagina-herlaadacties.

Client-Side Routering in webforJ lost dit op door navigatie direct in de browser mogelijk te maken, waarbij de UI dynamisch wordt bijgewerkt zonder een nieuw verzoek naar de server te sturen. Hier is hoe het werkt:

Enkele Initiële Verzoek: De browser laadt de app één keer, inclusief alle vereiste middelen (HTML, CSS, JavaScript).
URL-beheer: De router luistert naar URL-wijzigingen en werkt de weergave bij op basis van de huidige route.
Dynamische Component Rendering: De router koppelt de URL aan een component en rendert deze dynamisch, zonder de pagina te vernieuwen.
Statusbehoud: De status van de app wordt behouden tussen navigaties, wat zorgt voor een soepele overgang tussen weergaven.

Dit ontwerp maakt deep linking en URL-gedreven statusbeheer mogelijk, waardoor gebruikers specifieke pagina's binnen de app kunnen bladwijzeren en delen, terwijl ze genieten van een soepele, single-page ervaring.

Kernprincipes

URL-gebaseerde Component Mapping: In webforJ zijn routes direct gekoppeld aan UI-componenten. Een URL-patroon is gekoppeld aan een specifieke component, die bepaalt welke inhoud wordt weergegeven op basis van het huidige pad.
Declaratieve Routering: Routes worden declaratief gedefinieerd, meestal met behulp van annotaties. Elke route komt overeen met een component die wordt weergegeven wanneer de route wordt gematcht.
Dynamische Navigatie: De router schakelt dynamisch tussen weergaven zonder de pagina te herladen, waardoor de app responsief en snel blijft.

Voorbeeld van client-side routering in webforJ

Hier is een voorbeeld van het definiëren van een route voor een UserProfileView-component om gebruikersgegevens weer te geven op basis van de id-parameter in de URL:

@Route(value = "user/:id")
public class UserProfileView extends Composite<Div> implements DidEnterObserver {

  @Override
  public void onDidEnter(DidEnterEvent event, ParametersBag parameters) {
    String id = parameters.getAlpha("id").orElse("");
    refreshProfile(id);
  }
}

In deze opzet:

Navigeren naar /user/john zou de UserProfileView-component renderen.
De id-parameter zou john uit de URL vastleggen en u in staat stellen deze binnen de component te gebruiken om gebruikersgegevens op te halen en weer te geven.

Onderwerpen

📄️Routeerbare apps

Enable webforJ routing with the @Routify annotation to scan packages, manage frames, and control browser history.

📄️Routes definiëren

Definiëren van routes is essentieel voor het koppelen van URL's aan specifieke componenten. Dit stelt je in staat om te bepalen hoe verschillende onderdelen van je UI worden weergegeven op basis van de URL-structuur. Het framework gebruikt de @Route annotatie om dit proces declaratief en eenvoudig te maken, waardoor de behoefte aan handmatige configuratie wordt verminderd.

📄️Routenavigatie

Trigger client-side navigation programmatically with Router.navigate, pass parameters, and switch views without reloads.

📄️Routepatronen

Define dynamic URL segments, optional parameters, wildcards, and regex constraints to match webforJ routes precisely.

📄️Query-parameters

Queryparameters stellen je in staat om extra gegevens via URL's door te geven, met het formaat ?key1=value1&key2=value2. Terwijl routeparameters worden gebruikt om vereiste gegevens binnen het URL-pad door te geven, bieden queryparameters een flexibele methode voor het doorgeven van optionele of extra gegevens. Ze zijn vooral nuttig bij het filteren van inhoud, sorteren of het verwerken van meerdere waarden voor dezelfde sleutel.

📄️Statusbeheer

Creating seamless, dynamische gebruikerservaringen vereist vaak dat de staat van uw webapp in de URL wordt weerspiegeld en behouden blijft tijdens browsernavigatie-evenementen. U kunt dit bereiken zonder de pagina te herladen door gebruik te maken van URL-parameterupdates en het beheer van de geschiedenisstatus van de browser. Dit zorgt ervoor dat gebruikers specifieke weergaven kunnen delen, bookmarken of terugkeren naar de app, waarbij deze volledig op de hoogte is van hun eerdere interacties.

🗃Navigatielevenscyclus

3 items

🗃Route Hiërarchie

3 items

📄️Titels van navigatieframe

Set browser frame titles per route with the @FrameTitle annotation or generate them dynamically using HasFrameTitle.

📄️Route-registratie

In aanvulling op het registreren van routes met de @Route annotaties, is het mogelijk om routes dynamisch te registreren, bij te werken of te verwijderen tijdens runtime op basis van app-logica, gebruikersrollen of andere voorwaarden. Deze flexibiliteit stelt je in staat om de navigatie dynamischer te beheren, in plaats van routes statisch te definiëren op compilatietijd.

📄️Routetransities

Route-transities bieden declaratieve geanimeerde overgangen bij het navigeren tussen routes. Gebouwd op de View Transitions API, laat het toevoegen van de @RouteTransition annotatie aan je routecomponenten de router automatisch de animatiecyclus tijdens navigatie beheren.