Het gebruik van Vue.js is de afgelopen jaren flink gegroeid. Er zijn veel bedrijven (Apple, Google, Nintendo, Zoom, Nespresso, BMW, etc.), die Vue gebruiken als open-source Frontend Framework om hun Single-Page-Applications of User Interfaces te bouwen. Sinds de eerste release is Vue.js steeds populairder geworden door hun leesbare syntax, gebruiksgemak, herbruikbaarheid en alom geroemde documentatie. In september 2020 is de derde versie van Vue.js gereleased. Vue 3 is kleiner, (nóg) gemakkelijker te onderhouden en heeft nog meer handige functionaliteiten gekregen. Vanuit het perspectief van onze frontend developer 'Sybren', lees je hieronder de meest aansprekende features.
Composition API
'Het concept van de Composition API is, wat mij betreft, het meest interessant van alle verbeteringen in Vue 3. Door dit concept wordt het delen en hergebruik van code gigantisch verbeterd. Je kan er namelijk voor kiezen om de bij elkaar horende code bij elkaar te laten plaatsen. Hierdoor kan je direct in kleinere herbruikbare 'composities' denken. Denk hierbij bijvoorbeeld aan code die je in veel componenten kan gebruiken: een herbruikbare loading status of herbruikbare code waarmee gegevens uit de database worden opgehaald. Alles bij elkaar vormt uiteindelijk een geheel. Deze kleinere composities kunnen vervolgens op verschillende plekken binnen het project hergebruikt worden.'
Nieuwe standaarden
'Zoals we in het vorige blog beschreven hebben verandert er veel op het gebied frontend ontwikkeling. Deze veranderingen komen ook steeds sneller. Ieder jaar verschijnt er een nieuwe versie van JavaScript (de taal waarin wij onze code schrijven). Dit is gelukkig snel te gebruiken, doordat browsers steeds meer up-to-date zijn met deze standaarden. Zo zijn er bijvoorbeeld recent Maps en Sets toegevoegd. Om deze vernieuwingen te kunnen gebruiken is ondersteuning nodig vanuit Vue. In de huidige architectuur van het Vue.js framework bleek dit echter lastig te implementeren. Reden voor het Vue-core team om dit proces te optimaliseren, door het ondersteunen van de nieuwe standaarden. En nog belangrijker: voorbereid te zijn op wat er nog meer gaat komen aan nieuwe ontwikkelingen in de toekomst.'
Provide / Inject: duidelijkheid in verantwoordelijkheden
'Vue is duidelijk (en vrij strikt) in de wijze hoe gegevens aan componenten doorgegeven worden: 'props down --- events up'. Dit betekent dat je de benodigde gegevens voor een component (props) naar beneden door mag geven, maar dat de verantwoordelijkheid van het aanpassen bij het oorspronkelijke component blijft. Hierdoor blijft code overzichtelijk en transparant. Om iets aan te passen kan het subcomponent (bv. Child in het voorbeeld) een boodschap doorgeven: een event. Bijvoorbeeld: 'increase-clicked'. Op basis van deze boodschap kan het component hierop handelen: het aantal wordt verhoogd.
Naast dat de code door deze strategie heel overzichtelijk blijft, kleven er ook nadelen aan. Soms ben je namelijk veel 'props' (de eerder genoemde gegevens) aan het doorgeven door verschillende sub-componenten. Dat noemen we 'prop-dilling'. Bij grote projecten loopt het aantal props snel op. Meestal kies je er dan voor om een 'store' (dat is een soort kleine database) te gebruiken. In Vue 3 wordt de 'provide/inject' strategie breder ondersteund. 'Provide' is hierbij het hoogste component, die ervoor zorgt dat de betreffende data beschikbaar is. Sub-componenten die de gegevens nodig hebben kunnen deze code gebruiken: 'inject'-eren. Ook hierbij blijft het zaak dat het hoogste component de eindverantwoordelijke is over de gegevens.'
Vue 2.7
'Het concept achter de Composition API is, wat mij betreft, de mooiste verbetering die Vue 3 brengt. Dit heeft de Vue community via het inspraakproces ook laten weten aan het Vue-core team. Het Vue-core team heeft hiernaar geluisterd en heeft aangegeven dat dit concept ook in Vue 2.7 zal worden geïmplementeerd. Naar verwachting wordt 2.7 opgeleverd begin 2022. Dit is goed nieuws voor developers of bedrijven die niet direct de stap naar Vue 3 willen maken.'
Vue 3 release
'Vue 3 is officieel beschikbaar voor iedereen. Dit betekend dat iedereen er nu gebruik van kan maken. Helaas betekent dit nog niet, dat deze versie in onze projecten wordt toegepast. Het 'landschap' (daarmee bedoelen we alle afhankelijkheden voor een project) rondom Vue is namelijk nog niet volledig klaar. Er wordt hard gewerkt door het Vue-core team om al deze afhankelijkheden klaar te maken. Je kan alvast beginnen met een migration build. Dit is een script die signaleert waar jouw code niet compatible is met Vue 2. Dit gaat de migratie van Vue 2 naar Vue 3 gemakkelijk maken.'
Ontdek meer
'De voor mij drie belangrijkste verbeteringen in Vue 3 heb ik nu met jou gedeeld, maar er is meer! De eerder genoemde documentatie is namelijk al klaar voor Vue 3. Hier ontdek je nog veel meer voorbeelden en nieuwe features. Ik raad je aan hier zeker een kijkje te nemen!'
.webp)
