Overdag ben je aan het werk. In mijn geval 36 uur per week. De 4 uur van mijn part-time middag besteed ik vaak aan boodschappen doen, fitnessen, gras maaien, onkruid wieden. Niet aan studie, bijeenkomsten van Microsoft of andere organisaties over .NET, C#, programmeren in het algemeen, waar ik eigenlijk die 4 uur per week aan had willen besteden. En zo gaat het ook in de avond. Overdag aan het werk (zittend beroep), dus proberen nog een uurtje te lopen, nog even TV kijken, dus als je dan nog een uurtje aan studie kan besteden, dan heb je geluk. Het is geen onwil dat je naast je werk weinig of niet studeert, het is "gewoon" een gebrek aan tijd. Dat zie je ook wel terug aan mijn blogs, als ik met een certificering aan de slag ga, dan duurt het lang. En voor jezelf is dat ook frustrerend want je wilt het tempo wel wat versnellen. Maar er zijn andere zaken die ook moeten gebeuren en die niet kunnen blijven liggen, dus uiteindelijk moet je "roeien met de riemen die je hebt".
Het initiatief van TRES om een "studiedag" te organiseren is dan ook "een geschenk uit de hemel". Een dag niet bezig met bugs, vragen of projecten, maar je kunnen focussen op iets waar je eigenlijk al langer mee aan de slag had willen gaan en waar je nu eindelijk 100% van je aandacht aan kunt geven.
Op donderdag 16 februari 2023 was het zover, 's morgens rond 9.00 uur de aftrap, 16.00 uur de terugblik en in de tussenliggende uren kon je bezig met een studie, uitzoekklus, een sessie over Time Management van André Talsma en een sessie over Feedback door Werner Hoenders.
Ik had van tevoren al gekeken welke studies interessant waren. Zaken met security, altijd interessant, maar wel 14 uur. Ook kwam ik hier een sessie over VUE3 tegen. En dat is wel interessant, want voor onze sites gebruiken we voor de frontend VUE. Daar heb ik wel eens wat mee gedaan, maar dat was bestaande code die je dan wat aanpast. Of je dingen goed doet (of niet), je hebt geen idee. Deze studie duurt volgens het overzicht 5 uur, dus past ook nog eens mooi binnen deze studiedag. Daarom heb ik ook geen sessie van André of Werner bezocht, want ik schatte in dat ik een beetje uitloop zou hebben, maar deze training op de studiedag kon afronden.
Tenminste, dat dacht ik. Het resultaat is dat 16 februari rond 17.00 uur op de helft zat. Dat komt ook omdat ik zelf het project van Github uitgecheckt heb en mee getypt heb met de instructeur in de video's. Hij praat supersnel, maar zo snel kan ik niet door de bestanden heen bladeren, typen, dus moet zaken pauzeren. En ik maak ook nog wat aantekeningen voor de samenvatting hier. Op vrijdagavond nog 4 uur aan video's volgen en op zaterdag nog 2 uren video, daarmee heb ik alles afgerond. Nu kijken of ik zaken in de praktijk kan brengen, daardoor gaat het straks automatisch, want het is even zoeken hoe de syntax is (de ene is include ' bla ' from 'bla', de andere include bla from 'bla.Vue', bepaalde zaken hebben een syntax als gewone functies: functie(){ ...}, maar je hebt ook de functie = () => { ... }, lambda-expressies als ik me niet vergis).
In ieder geval, mocht je geïnteresseerd zijn in VUE3 en niet die studie kunnen/willen volgen (of zoals bepaalde lifehackers wel eens zeggen, laat iemand anders de studie volgen en een samenvatting maken, als jij dit leest scheelt jou dit weer flink wat tijd), hier de samenvatting die ik gemaakt heb:
Mocht je bij een bedrijf werken (of zelf een account hebben) op Udemy, de cursus is hier te vinden: link.
De instructeur is Lachlan Miller, via Twitter bereikbaar op @Lachlan19900 en via zijn eigen site: link. Hij heeft ook nog een andere studie op Udemy, meer gericht op de composition API: link.
In de rest van dit verhaal noem ik hem "de instructeur". Oh ja, zet de Nederlandse ondertiteling maar uit. Die fonetische vertaling is slecht. VUE3 wordt ondertiteld als "Yuji's three", "beauteous" en "Mujibs".
Eerst de code downloaden van: https://github.com/lmiller1990/complete-vuejs
Eerste stap is nodejs installeren.
In de video installeert de instructeur dit vanaf nodejs.org, ik heb al een versie.
// versie was toen 15.13.0
node -v
// geeft mij 16.15.1 en werkt ook prima
Volgende stap is de installatie van Yarn.
De instructeur gaat naar classic.yarnpkg.com om het te downloaden, ook daar had ik al een versie van, yarn -v geeft versie 1.22.5 terug, gewoon gebruikt en werkt ook prima. Anders zou je met npm install -g yarn moeten uitvoeren.
We gaan gebruik maken van Vite, via vitejs.dev
In de readme staat wat we moeten doen:
yarn add vue@3.0.7
yarn add vite@2.1.1 --dev
Voer daarna in bash "yarn vite src" uit en hierna draait een webserver, bereikbaar op poort 3000.
En (natuurlijk) werkt het niet, ik las niet goed en vergat "src" toe te voegen: dan is er geen index.html en krijg je een 404 pagina te zien.
We gaan vervolgens vue-tags gebruiken. Wat een onclick="..." is in "normaal javascript", is hier een v-on:click.
Op een input koppelen we tags zoals v-bind:value="value" en v-on:input="input". Deze halen we later weer weg, omdat we 1 tag gebruiken: v-model.
Daarna communicatie tussen de onderdelen.
Je kunt van de parent naar child zaken doorgeven via de "props".
Maar hoe geef je wat terug van "het kind" naar "de ouder"? Zoals we in een click met $event zaken van de core JS konden krijgen, zo hebben we ook de $emit. En daarmee geven we zaken door naar "de parent".
Volgende blok;
Twee zaken installeren:
yarn add vue@compiler-sfc@3.0.7
yarn add vitejs@plugin-vue@1.1.5 --dev
Zaken in eigen .vue bestand plaatsen, imports en hierna de webserver weer laten runnen:
yarn vite --config vite.config.js form-validation
Een element in de template, mybutton, my-button: kebab-case #wtf
In het eerdere blok werden de props als een array ingesteld (dus [..]), maar hier gaan we naar de object-notatie, iets waar ik zelf eigenlijk al mee startte (dus props: {... }).
Waar je met v-bind:for werkt kun je ook de shorthand gebruiken: :for
Zoals je de v-on:input hebt, zo kun je daar de v-on vervangen met @ (shorthand).
Het versturen van een formulier.
We zien het voorbeeld van de <form @submit="submit">
Die submit maak je in je eigen methods aan. Dat wordt dan een submit($event).
Eerste wat je daar doet is een $event.preventDefault() om geen echte POST te doen (je verstuurt je zaken via een POST in je script. Met een attribuut kun je dit aanpassen:
<form @submit.prevent="submit">
Volgende blok, we gaan met Pokemon cards aan de slag!
Ik heb niets met Pokemon, maar dit is wel cool. Er is een API voor: pokeapi.co en daarmee gaan we nu met VUE kaarten op het scherm tonen.
window.fetch wordt door elke browser ondersteund om data op te halen. Behalve internet explorer, volgens de instructeur: "if you are using internet explorer, you probably have a bad time". Nou... ik neem aan dat Edge het wel ondersteunt, dus van dat probleem zijn we dan af.
In ieder geval, je krijgt een groot JSON object terug.
De instructeur zegt dat je dit misschien wilt koppelen aan een eigen variabele binnen data(), maar dat moet je niet willen: ding zit gekoppeld, kan unresponsive worden. En het gaat je maar om een paar eigenschappen. Kijk, en dit is een goede tip. Want in bestaande code had ik het misschien gezien en gedacht: we hebben die store nodig. Maar als er erg veel data in zit en je maar een paar onderdelen nodig hebt, dan moet je die terug geven.
De live-cycle hooks, created() en mounted().
Met this.$el kun je zien of er "iets" is (je DOM). Eerst in geheugen geladen, daarna beschikbaar.
Met slots kun je in je aanroepende VUE de content plaatsen.
Maar dat is maar voor 1 plek. Als je zoals in deze kaart 3 "slots" wilt plaatsen, dan doe je dat met
<template v-slot:title>
{{pokemon.name}}
</template>
// En in die Card.vue plaats je daar dan de
<slot name="title" />
Zo kun je dus verschillende "skins" voor je kaarten gebruiken.
Sectie 3 is een leuke sectie, omdat je daar koppelt met de API van Pokemon.
Dat is de Options API, dus dat je <template>, <script> en <style> in je .VUE-bestanden hebt.
In sectie 4 beginnen we met de composition API, die is flexibeler.
Bij composition moet je expliciet data "returnen" anders wordt het niet zichtbaar.
Dat is een verschil met de options api, waarbij alles "magisch" verschijnt.
We krijgen uitleg over ref (hoe dat een verwijzing naar het object is en je dus met .value de waarde aan kunt passen) en hoe je met reactive wel direct die actie kunt uitvoeren en niet de .value hoeft te gebruiken.
ref wordt vaak gebruikt met een string of een nummer.
reactive wordt vaak met objecten gebruikt.
We zien hoe we met computed() een functie maken die zorgt dat data in het scherm bijgewerkt wordt als de brongegevens wijzigen.
In het volgende blok voegen we watch en watchEffect toe.
Met watch geef je aan wat je wilt monitoren, watchEffect is algemeen, als je console.log(numbers.a) doet, zie je alleen wijzigingen met die numbers.a (als numbers.b wijzigt, wordt er niets gelogd).
De instructeur laat zien hoe je met watch(object, (newval, oldval)) de oude en nieuwe waarde kunt gebruiken.
Maar... dat werkt alleen bij ref-objecten!
De App.vue wordt redelijk groot.
We gaan naar de composable.
Je maakt een los .js bestand. Daarin zet je:"
function useNumbers(){... // je code
return {var1, var2, var3, ...}}.
In je .vue bestand kun je dan import { useNumbers } from './useNumbers.js'
en in je script:
const { var1, var2, ..} = useNumbers();
Hiermee kun je alles "wat bij elkaar hoort" in eigen bestanden zetten en hou je de andere code leesbaar.
We zien hoe je een App.vue hebt, daarin een Controls.vue en daarin een Hashtag.vue.
Je wilt een aangeklikte hashtag "terug" geven naar de App, maar dat moet via de Controls.
Niet handig als er nog 20 componenten tussen zitten.
Hiervoor gebruik je dus de store.
We gaan met de store werken. Zo kun je zoeken met filter: daar kun je meerdere resultaten krijgen, dus je krijgt altijd een array terug. Weet je zeker dat je 1 (of geen) resultaten terug krijgt, dan doe je de .find(...).
In je setup() moet je altijd je variabelen "returnen". Maar als je een store.state.object doet, dan krijg je een foutmelding (omdat die punt niet mag). Je moet dat ding dan labelen, zoals:
currentTag: store.state.currentTag
En als het een "computed waarde" moet zijn, dan wordt het:
currentTag: computed(() => store.state.currentTag)
Nog een kleine refactoring, de instructeur wil de store "zo simpel mogelijk houden", wat terecht is, dus de computed(()...) komt in de .Vue component terecht.
Het volgende deel gaat over Vue Router Fundamentals, dus hoe je grotere applicaties kunt maken.
Eerst gaan we vue-router installeren. We pakken dezelfde versie als die de instructeur neemt, 4.0.5:
yarn add vue-router@4.0.5
Composition API heeft dus duidelijk mijn voorkeur.
We gaan naar vueuse.org
Hier staan allemaal losse composables (bibliotheek).
Voorbeeld is useMouse.
Volgende sessie is het maken van een microblog!
Artikelen, like-button en filteren op hash-tags.
Sessie hierna is de Router Fundamentals.
Hierin wordt het routeren behandeld en wel client-side, dus geen postsbacks/refreshes op je scherm.
Interessant, een voorbeeld waarbij het bij de instructeur wel werkt, maar bij mij niet.
Ik zou een menu moeten zien. In de console een warning over property "testPosts" was accessed during render but is not defined on instance.
En natuurlijk is het een typo... in de setup deed ik een return testPosts; maar het moet een return { testPosts } zijn (omdat je meerdere items terug kunt geven).
Het volgende blok gaat over Vuex. Het bijhouden van "state" in een single-page-application.
De instructeur laat het diagram zien op vuex.vuejs.org
We gaan eerst vuex installeren, tijdens de opname versie 4.0.0 de actuele versie:
yarn add vuex@4.0.0
Ten tijde van deze opname is vuex 5 in de opstartfase.
Even naar de Github-locatie gesurfd:
https://github.com/vuejs/vuex
En hier lees je dus dat vuex 3 en 4 nog onderhouden worden, maar er geen nieuwe features meer komen.
Pinia is het nieuwe Vuex en te vinden op:
https://pinia.vuejs.org/ en hier kun je er ook informatie over vinden: https://cypress-testing-handbook.netlify.app/pinia.html
In deze module werken we met een store. De instructeur laat hier ook weer zien, hij wil niet de hele store terug geven.
Dat is de store.state.postId. Maar omdat dit een waarde is (standaard NULL) wordt die niet bijgewerkt.
Daarom moet je daar dan een computed(() => ...) omheen zetten.
Hoopgevende woorden van de instructeur: your applications can scale to infinity!
Alles komt nu in 1 store, 1 store.js en dat wordt minder goed schaalbaar.
Daarom gaan we modules maken.
Dat doe je met:
const posts = {
namespaced: true
}
De instructeur laat nog zien hoe je het ombouwt naar de options API en je met created, computed, methods werkt.
Hij geeft aan dat als je met typescript werkt, dit moeilijker is.
Dan het laatste blok, het "Capstone Project".
We gaan hier een soort online foto-album mee maken en werken met vuex en routing.
Tooltje om wat dummy teksten, plaatjes op te vragen: jsonplaceholder.typicode.com
En nog een linkje van een nuttige codebibliotheek: https://github.com/vueuse/vueuse