Meer informatie Ja, ik geef toestemming
Door Jochem Schutte Leestijd 9 min.

Handige Tools en Best Practices voor Vue.js

Bij Way2Web werken we met Vue.js als frontend framework. Hier lees je waarom we exclusief voor Vue.js kozen. We letten bij gebruik van dit framework scherp op de best practices – de bewezen effectievere technieken en werkmethoden. Dat leidt niet alleen tot betere resultaten, maar maakt ook het samenwerken aan een project eenvoudiger, efficiënter en prettiger voor onze developers.

Kennis en ervaring delen is een van de sterke kanten van een opensource framework als Vue.js. In dit artikel vind je (in willekeurige volgorde) enkele handige tools, tips en best practices. Doe er je voordeel mee!

#1. Single file components

Het structureren van verschillende technieken die met elkaar samenwerken, zoals HTML, JavaScript en CSS is een van de moeilijke onderdelen van softwareontwikkeling. In Vue groepeer je deze verschillende technieken in één functioneel component, bijvoorbeeld het tonen van een grafiek of het tonen van data in een lijst. Zelfs een button kan een losse functionaliteit zijn.

#2. Vue CLI

Vue CLI is een systeem bedacht door de ontwikkelaars van Vue om gemakkelijk en snel een project te beginnen door verschillende moderne technieken bij elkaar te brengen en samen te laten werken. Hier zit standaard een groot deel van de Vue style-guide in verwerkt (zie punt 1) maar ook een begin om automatisch te testen plus tools om te kijken of je code aan je eigen conventies voldoet.

#3. Testen – zowel unit als end-to-end

Net als bij Laravel is het belangrijk om Vue applicaties te testen. Je kunt gebruik maken van unit testen om losse onderdelen van een applicatie te testen of van behavior testen om een hele flow te testen. Een goed voorbeeld van een end-to-end test is om te kijken of een bestelproces blijft werken na het aanpassen van code.

Way2Web Jochem werkt

#4. Vue-router & Vuex

Voor grotere applicaties loop je snel tegen problemen aan wanneer je globale data bij wil houden of functionaliteit over meerdere pagina’s wilt verdelen. Dit soort functionaliteit zit standaard niet in Vue om het zo breed mogelijk inzetbaar te maken maar ook lichtgewicht te houden. Om de eerdergenoemde problemen op te lossen hebben de makers van Vue hier losse onderdelen voor gemaakt die je aan je applicatie kunt toevoegen: Vuex (https://github.com/vuejs/vuex) voor het bijhouden van de globale date en vue-router (https://github.com/vuejs/vue-router)  voor pagina’s.

#5. Awesome-vue voor packages

Door de grote community achter Vue worden er ook veel open source packages gemaakt. De makers van Vue.js houden een lijst bij van al deze packages, plus boeken, YouTube kanalen en podcasts die over Vue.js. Zo helpen ze je om te leren en betere applicaties te maken. Die lijst vind je op https://github.com/vuejs/awesome-vue.

#6. Vue enterprise boilerplate

Vue is niet alleen een uitstekende oplossing voor kleine projecten maar is zeker ook geschikt voor grote projecten. Langlopende projecten zijn uiteraard een stuk complexer en er zijn helaas maar weinig voorbeelden van te vinden. Gelukkig heeft een lid van het core team van Vue.js hier een voorbeeld van gemaakt dat hij ook bijhoudt: https://github.com/chrisvfritz/vue-enterprise-boilerplate.

Tot slot: kijk vooral ook eens naar de best practices zoals die door de makers van Vue.js zelf zijn opgesteld. Ze zijn ingedeeld in 4 categorieën: Essential, Strongly Recommended, Recommended & Use with caution. Deze best practices lopen uiteen van bijvoorbeeld naming conventions van bestanden tot performance tweaks om je applicatie zo snel mogelijk te maken. Wij controleren onze code automatisch aan de hand van deze regels. https://vuejs.org/v2/style-guide/

Tips? Graag!

Wij houden deze lijst graag actueel en zijn altijd op zoek naar nieuwe invalshoeken. Heb je daarom slimme tips of best practices die hier ook in horen? Stuur ze dan naar peterpaul.keulers@way2web.nl!

Bent u klaar voor the next level?

De digitale transformatie biedt fantastische nieuwe mogelijkheden en kansen. Ook voor uw onderneming, dat weet ik zeker. Als IT-specialist én ondernemer praat ik daar graag eens met u over verder. Geheel vrijblijvend natuurlijk. Zullen we een afspraak maken?