In de wereld van frontend JavaScript-frameworks blijven nieuwe innovaties zich voordoen die betere ontwikkelingservaringen en beter presterende applicaties mogelijk maken. Aan de ene kant zijn er frameworks en bibliotheken zoals Vue, React en Angular waarmee u uw gebruikersinterface op declaratieve wijze kunt definiëren, waarbij updates worden geoptimaliseerd door een virtuele DOM, zodat alleen noodzakelijke updates worden aangebracht. Aan de andere kant zijn er frameworks zoals Svelte en SolidJS, die zijn overgestapt van het gebruik van een framework en het uitvoeren van een virtuele DOM naar het compileren van declaratieve gebruikersinterfaces in standaard JavaScript, wat heeft geresulteerd in kleinere bundels, hogere snelheden en meer gedetailleerde reactiviteit met behulp van waarneembare gegevens. Het laatstgenoemde type framework heeft sindsdien een grote vlucht genomen. Vercel heeft Svelte-maker Rich Harris ingehuurd om fulltime aan Svelte te werken, samen met het aannemen van Netlify SolidJS-maker, Ryan Carniato, om hetzelfde te doen met SolidJS. Onlangs is er een ander framework op de markt gekomen genaamd Voby, dat is geïnspireerd door veel van de ideeën van SolidJS, maar met een paar verschillen. Voby is in de eerste plaats bedoeld als framework voor het bouwen van de notitie-app van de auteur. In dit artikel vergelijken we Voby met SolidJS om te zien wat Voby te bieden heeft. Laten we beginnen!
Reactieve UI-syntaxis
Een van de meest opvallende verschillen tussen frameworks is de syntaxis voor het beschrijven van gebruikersinterfaces en hun reactiviteit. SolidJS maakt gebruik van JSX om UI uit te drukken en Hooks om reactiviteit te creëren door middel van een implementatie van aangepaste observaties. Ter vergelijking: Svelte gebruikt RXJS voor waarneembare gegevens. In SolidJS zou een eenvoudige tellercomponent er als volgt uitzien:
import { createSignal } from “solid-js”;
function Counter(props) {
const [count, setCount] = createSignal(0)
return <div onClick={() => setCount(count() + 1)}>{count()}</div>;
}
Het gebruik van JSX vereist een bouwstap en SolidJS heeft veel optimalisaties die plaatsvinden tijdens deze bouwstap. Het is echter mogelijk om lit-html of hyperscript letterlijke sjablonen te gebruiken als je echt niet wilt bouwen. Je kunt ook zien dat in SolidJS reactiviteit wordt afgehandeld door signalen, dat zijn waarneembare waarden met behulp van Solid’s aangepaste waarneembare implementatie. In SolidJS worden alle JSX-expressies als effecten beschouwd. Deze signalen kunnen in effecten worden gebruikt, zodat telkens wanneer een signaal dat in het effect wordt gebruikt, wordt bijgewerkt, het effect opnieuw wordt uitgevoerd. Of, in ons geval, zal het effect de gebruikersinterface opnieuw opbouwen op basis van de JSX-expressie. De API voor signalen lijkt erg op de React-status, waar u zowel de waarde als een instelfunctie voor waarde hebt. U verandert de waarde niet rechtstreeks.
Voby gebruikt ook observables met behulp van een bibliotheek genaamd Kunnen. Voby maakt ook gebruik van JSX, maar het kan ook HTM als alternatief gebruiken, wat een combinatie is van JSX, HyperScript en lit-html in één syntaxis. Hieronder ziet u een voorbeeld van een eenvoudige Voby-tellercomponent die HTML gebruikt:
import {html} from ‘voby’;
const Counter = (): JSX.Element => {
const value = $(0);
const increment = () => value ( prev => prev + 1 );
return html` <p onClick=${increment}>${value}</p> `;
};
Voby gaat iets anders om met reactiviteit dan SolidJS. Reactieve waarden worden gedefinieerd met behulp van de $() functie. In plaats van de waarde en een setter te krijgen, krijg je een enkele functie die fungeert als zowel een getter als een setter. Wanneer een argument wordt doorgegeven, wordt de waarde ingesteld. In de html gelabelde letterlijke sjablonen, als er een waargenomen waarde in wordt gebruikt, wordt deze bijgewerkt wanneer de waarde wordt bijgewerkt.
Beheer stroomprimitieven
In plaats van te vertrouwen op array.map en JavaScript voor veel besturingsstroomlogica zoals React, hebben zowel SolidJS als Voby ingebouwde besturingsstroomcomponenten die gemakkelijker te gebruiken zijn met optimalisatie onder de motorkap, wat betekent dat u zich geen zorgen hoeft te maken over belangrijke rekwisieten.
Voorwaardelijke weergave
In SolidJS zou je de Show component gebruiken voor voorwaardelijke weergave:
<Show when={state.count > 0} fallback={<div>Loading…</div>}>
<div>My Content</div>
</Show>
Als de when prop waar is, geeft de Show component de gebruikersinterface weer in de onderliggende expressie. Als dit niet het geval is, wordt de fallback prop weergegeven. Aan de andere kant heeft Voby een If component:
<If when={visible}>
<p>Hello!</p>
</If>
De If component werkt ongeveer als de SolidJS Show component, waardoor de gebruikersinterface wordt weergegeven in de onderliggende expressie als de When prop waar is.
Itereren over lijsten
Om reeksen gegevens in React te doorlopen, zouden we moeten vertrouwen op de array.map methode en ervoor zorgen dat we een unieke key prop doorgeven zodat de virtuele DOM updates kan optimaliseren. In SolidJS en Voby hoeven we ons geen zorgen te maken over de key prop of het gebruik van map. SolidJS heeft de For
