Evan You, the creator of Vue.js and Vite

Insights

State of the Vuenion 2023

🛠 Frontend development

De meest geanticipeerde spreker van Vue Amsterdam was ongetwijfeld Evan You, de maker van zowel Vue.js en Vite. Zijn presentatie heet “State of the Vuenion”, een overzicht op de huidige staat van het Vue.js ecosysteem.

2022: Een terugblik

De talk gaat van start met een korte terugblik naar 2022, een jaar waarin veel vooruitgang werd geboekt. Op 7 februari 2022 werd Vue 3 de officiële versie van Vue.js waardoor het ecosysteem in een stroomversnelling terecht kwam. Doorheen het jaar verdriedubbelde het gebruik van V3. Zo kwamen er verschillende nieuwe libraries en frameworks uit en werd er heel wat tijd geïnvesteerd in het versterken van de Vue Core. Handige tools voor developers zoals Volar en vue-tsc werden verstevigd, en het V3 ecosysteem werd stabieler. We zagen een groot aantal (meta)frameworks overschakelen naar Vue 3, zoals Nuxt, Vueuse, Vuetify en Quasar. In 2022 werd ook Vue 2.7 uitgebracht, wat de migratie naar Vue 3 een stuk makkelijker maakte.

Ook Vite groeide exponentieel en kreeg de nodige aandacht van contributors en andere leden van de Vue gemeenschap. Deze razendsnelle build tool bleek een geweldig succes, en wordt intussen ook door andere frameworks gebruikt. Vite ontstond uit de noden bij het Vue team, maar spreekt intussen een veel breder publiek in de web gemeenschap aan. In de toekomst zal het Vue team meer investeren in het maken van framework-agnostische tools, daarmee zijn ze het enige grote framework die zich ook inzetten voor andere communities.

A line chart showing the growth of Vite from 2021to 2022

2023: Looking forward

Vervolgens kregen we een vooruitblik naar 2023 voorgeschoteld. De focus ligt duidelijk op stabiliteit. Het plan is om in de toekomst meer frequente maar kleinere updates door te voeren. De roadmap ziet er als volgt uit:

Q1: Quality-of-life en bugfixes

Eerst en vooral worden de zogenaamde "low hanging fruit" aangepakt. De meest voor de hand liggende problemen komen dus eerst aan de beurt. Het plan is om Reactivity Transform en Suspense los te koppelen van de Vue Core. Reactivity Transform was lange tijd een experimentele feature en was erg controversieel door meerdere problemen op vlak van DX. Het team heeft de beslissing gemaakt om officiële ondersteuning te laten vallen. De functionaliteit zal naar een aparte package verhuizen en in een komende release uit de core wegvallen. Er staan ook verbeteringen op vlak van externe type support in script setup op de planning. Een leuk extraatje is ondersteuning voor reactive prop destructuring, iets wat hoogstwaarschijnlijk zal waargemaakt worden in een toekomstige release.

Q2: SSR improvements

In het tweede kwartaal van 2023 zal het Vue team in samenwerking met het Nuxt team zich focussen op Server Side Rendering. Dit omvat ook het afwerken van Suspense, wat momenteel experimenteel is. Simpel gezegd is Suspense een manier om ingebouwd component die helpt bij het tonen van top-level loading en error state weer te geven. Zo kan je de state van alle asynchrone subcomponenten tegelijk afhandelen zonder het op individuele basis te moeten doen.

Daarnaast kunnen we ook lazy hydration verwachten. Zo kan je zelf definiëren hoe je de async componenten tree wilt hydrateren, zoals bijvoorbeeld bepaalde components pas te hydrateren als ze in beeld gescrolled worden.

Nog een nieuwe feature die het Vue team aan het bekijken is heet v-ssr-only. Dit zou ons toelaten om een template te definiëren als server-side only. Dit kan handig zijn als bij het bouwen van je applicatie bepaalde data die niet meer zal veranderen uit een database wilt ophalen.

Q3-4: Vapor Mode

Vapor mode is een gloednieuwe alternatieve compilatiemodus die de nadruk legt op performantie. Deze modus specialiseert zich in het compileren van Single File Components met script setup naar een performante JavaScript output. De inspiratie hiervoor komt van Solid, wat momenteel het meest performante framework is. Vapor Mode is opt-in op component niveau. Je kan dus kiezen welke componenten je zo laat compileren. Het doel is om deze componenten vrij te kunnen mengen in eender welke Vue 3 app die met de gebruikelijke manier werkt.

Ecosysteem

Ook het ecosysteem zal het komende jaar de nodige aandacht blijven krijgen. Volar, de Vue.js language tools voor VS Code wordt framework agnostisch. Een groot voordeel van deze tool is dat je syntax highlighting voor meerdere talen in 1 bestand kan krijgen. In Vue kan je HTML, CSS en JavaScript in 1 bestand schrijven. Binnenkort zal Volar dus ook voor frameworks zoals React en Svelte kunnen gebruikt worden.

De eerste officiële release van Vitepress komt er ook aan. Vitepress is een krachtige Static Site Generator. De 1.0 versie zit op het moment van schrijven nog in Alpha fase, maar een stabiele 1.0 komt er binnenkort aan.

Ook de Vue.js documentatie wordt onder handen genomen en vertaald. Daar kan de wereldwijde Vue.js gemeenschap aan bijdragen, want de documentatie site is Open Source.

We mogen ons binnenkort ook verwachten aan een officieel Vue certificaat, een beoordelingsprogramma voor ontwikkelaars in samenwerking met Vue School. Het doel is om duidelijkheid en begrip te bieden van wat er nodig is om Vue ten volle te gebruiken als ontwikkelaar.

Tenslotte werd het einde van het leven van Vue 2 aangekondigd. Er wordt nog tot het einde van december 2023 ondersteuning geboden, maar daarna is het voorbij. Indien het echt nodig is kan er nog (tegen betaling) ondersteuning geboden worden voor bedrijven die niet van Vue 2 kunnen afstappen.

Conclusie

We verwachten dit jaar geen spannende nieuwe features voor Vue.js, maar we vertrouwen op de visie van de mensen die zich bezighouden met de ontwikkeling van ons favoriete framework. Vue 3 heeft zich al bewezen, dus de belofte van stabiliteit en maturiteit is meer dan welkom.

Evan You speaking at Vue Amsterdam
Manaus

Manaus

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓