< terug naar nieuws
vrijdag 28 september 2018

Vue.js London 2018

Zoals velen al weten verandert de webwereld razendsnel, zo was je vroeger heel hip als je een site met frames had gemaakt, tegenwoordig zijn frames not-done. Tegenwoordig worden heel veel sites gemaakt met een framework. Dit gebeurt met de backend maar ook zeker met de frontend.

Na 7 jaar lang websites gebouwd te hebben wordt het tijd om een javascript framework te leren. Gelukkig werk ik bij Alteza, en geven ze mij die kans! Er zijn tegewoordig een aantal js frameworks erg hot, namelijk: “Angular”,”Reactjs” en “Vue.js”.  Nou heb ik onderzoek gedaan naar deze frameworks en heb voor Vue.js gekozen, dit omdat ik vind dat Vue.js de beste dingen van reactjs en angularjs heeft gepakt en dit heeft gebruikt voor het Vue.js framework, en omdat de leercurve heel laag is.

20 en 21 september heeft er een event plaats gevonden, namelijk “Vue.js london”. De 20e zijn de workshops en de 21e is de conferentie. Voordat ik hierheen ging heb ik onderzoek gedaan in Vue.js, dit om te zorgen dat ik wat beter zou begrijpen wanneer ze het over complexere dingen gaan hebben. Ik heb gekozen voor de workshop waarbij de basis uitgelegd zou worden. Het leek mij namelijk handig om de basis goed uitgelegd te krijgen zodat je een goed fundament hebt waarop je dan verder kunt bouwen. De workshop werd gegeven door Adam Jahr en Gregg Polack, Gregg Polack is bekend van de website codeschool en heeft hierna samen met Adam Jahr Vue-mastery opgestart waar zij nu lesgeven.

De workshop was bedoeld om mensen met geen kennis van Vue.js up to speed te krijgen. Wel wordt het aangeraden om basiskennis html, css en javascript te hebben. Aangezien ik al in vue ben gedoken voordat ik heb deelgenomen heb ik de eerste helft van de workshop vrij weinig geleerd dit was jammer maar wel fijn om te zien dat ik dat in ieder geval al wel onder de knie heb. Wel heb ik nu wat scherper waarom dingen werken zoals ze werken. 

De workshop was ingedeeld in delen waar je van alles uitgelegd kreeg en  je moest zelf een opdracht uitvoeren. Voordat we begonnen kreeg iedereen een roze en een gele post-it. Wanneer je er niet uitkwam of een vraag had moest je de roze post-it op je laptop plakken en dan wisten de leraren dat je een vraag had zodat ze je konden helpen. De gele was ervoor zodat je aan kon geven dat je klaar was, zodat ze wisten wanneer ze verder konden naar de volgende stap. Adam en Gregg zijn echt 2 hele aardige behulpzame jongens, ook zijn ze heel toegankelijk, zo heeft Adam mij tijdens de lunch nog wat uitgelegd over vuex.

Na de lunch zijn we wat verder de diepte in gegaan en heb ik zeker wat leuke dingen geleerd om in de toekomst ook te gaan toepassen. Het idee was dat we een app gingen maken. Voor de lunch een app om het te leren maar na de lunch een real world app ofwel een app gebouwd zoals het in de echte wereld gaat. De reden dat we voor de lunch niet een real world app zijn gaan maken is omdat die andere manier een stuk makkelijker te volgen is als je nog geen ervaring hebt met frameworks.

De workshop begon om 8.30 uur en eindigde om 17.45uur, een lange maar zeer leerzame dag. Na heerlijk te hebben gegeten en een lekker bad,  was het tijd om te gaan slapen, de volgende dag ging mijn wekker weer aardig vroeg om op tijd te zijn voor de conferentie.

Het was even zoeken maar uiteindelijk heb we het gevonden! We? Ja, ik was niet de enige die het niet kon vinden. Ze hadden het wel iets beter kunnen aangeven, zo is het een half uur later begonnen want op het moment wanneer het zou beginnen was 1/3 van de genodigden er.. Dit vertelde de jongen naast mij die toevallig onderdeel is van het core team van Vue.js een slimme jongen dus.

De eerste spreker was Gregg Polack, dit was één van de leraren die de workshop de dag ervoor heeft gegeven. Dit was gelijk één van de beste lezingen die ik die dag heb bijgewoond! Gregg ging namelijk uitleggen hoe het komt dat Vue zo “reactive” is. Wanneer je een waarde aanpast en deze wordt op meerdere plekken gebruikt wordt dit overal aangepast. Klinkt simpel maar dat is het niet! Zo heeft hij de source code van Vue.js erbij gehaald en stap voor stap uitgelegd wat er gebeurt. Dit was erg leerzaam.

De 2e spreker was Roman Kubra. Roman gaf een lezing over hoe je vue kunt testen door middel van een test framework genaamd “jest”. Als jij een website wilt hebben die betrouwbaar is dan kun je testen schrijven om ervoor te zorgen. Schrijf je geen testen voor je website dan is dat geen probleem, de kans is alleen wel een stuk groter dat er fouten in je code kunnen zitten die je door middel van testen hebt kunnen traceren en oplossen.

Voor de 1e pauze van deze dag was nog een zeer interessant talk, namelijk van Sarah Vieira. Een heel snel pratende jonge vrouw in een legging met unicorns, regenbogen en emoticons erop die met heel veel humor ging vertellen over graphql in combinatie met Vue.js. Graphql is een query language! Oké leuk! Maar wat kun je er mee? Nou, je kunt op een hele makkelijke manier data ophalen/aanpassen/verwijderen uit een database. Eén van de vele voordelen is dat je met graphql zelf bepaalt wat je ophaalt, met andere query talen krijg je vaak de hele dataset terwijl je er soms maar een gedeelte van nodig hebt.

Na de 1e pauze was het de beurt aan Sebastien Chopin, 1 van de bedenkers van nuxt. Nuxt is een framework die ervoor zorgt dat de rendering van je vue app op de server plaatsvindt in plaats van op de cliëntside. Groot voordeel hiervan is dat google je site beter kan lezen. Daarnaast is het renderen op de server in de meeste gevallen sneller dan op de cliënt, dit komt omdat de cliënt met meerdere factoren te maken heeft zoals bijvoorbeeld de snelheid van je device. Tijdens zijn talk heeft hij live nuxt 2.0 gereleased. Een post geplaatst op de “medium” website, github bijgewerkt en een bericht op twitter verstuurd met daarbij een selfie (gemaakt met het publiek op de achtergrond).

Vuex is waar Jacob Schatz het over heeft gehad. Vuex is een gecentraliseerde state beheer systeem. Met andere woorden, vuex zorgt ervoor dat alle data management op een centrale plek gebeurt. Dit is vooral heel handig voor je overzicht, daarnaast zorg je er ook voor dat je de data overal kunt gebruiken (omdat je het globaal hebt gezet).

Na Jacob was het de beurt aan Chris Demars. Chris is een ui developer bij Google. Zijn talk ging over accessibility. Hij is van mening dat alle sites beschikbaar moeten zijn voor iedereen, welke handicap je ook hebt. Hij ging vooral in op het feit dat er meer mensen last hebben van kleurenblindheid dan je denkt. Want 20% van de wereld heeft een handicap, nou denk je dat is niet veel maar als je bekijkt dat er 7 biljoen mensen op aarde leven en er dus 1,4 biljoen hiervan een handicap hebben is dat dus behoorlijk wat!

Vervolgens was het de beurt aan Jen Looper. Jen ging het hebben over een app die ze gemaakt had. De app was gemaakt met Vue.js en bevatte machine learning. Ze had namelijk een spel gemaakt waarbij je of een plaatje van bijvoorbeeld een dalmatiër of ijs met chocola kreeg en vervolgens moest je deze de juiste kant opschuiven. De machine learning deed dit ook en jij moest proberen om dit sneller te doen.

Dit keer kregen we niet 1 spreker van een half uur maar kregen we meerdere sprekers achter elkaar van +/- 7 min, lightning talks werd dit genoemd.

De eerste was Natalia die vertelde over “Vue Vixin”, een organisatie speciaal voor vrouwen die willen leren coderen. Zo organiseren ze workshops, trainingen en conferenties speciaal voor vrouwen.

Talk 2 ging over data visualisation door middel van svg in combinatie met Vue.js. Zoals jullie weten is Vue.js reactive en dit werkt heel mooi met tabellen en grafieken. Zo kun je hele mooie geanimeerde tabellen maken.

Jason Yu ging Vuepress uitleggen, Vuepress is een plugin waar je heel makkelijk documentatie mee kunt maken. Wanneer jij live gaat vertellen over een techniek kan dit best lastig zijn en als je dan live gaat coderen kan dit heel spannend zijn. Jason Yu had hier maling aan en ging live coderen in een lightning talk, zeer moedig maar gelukkig ging het allemaal goed!

Vervolgens was het de beurt aan landgenoot Ives. Ives ging het hebben over codesandbox. Dit is een soort codepen, voor de mensen die niet weten wat dit is, dit is een webapplicatie waarmee je gemakkelijk codesnippets kunt maken en dit kun je vervolgens delen door middel van een identieke link. Het mooie van codesandbox is dat je hiermee ook gebruik kunt maken van Vue.js wat best speciaal is omdat het een framework is.

Evan You is de bedenker/maker van Vue.js, hij zou als laatste vertellen over het framework en wat er allemaal nog aan zit te komen. Gelukkig voor mij werkte de laptop van Daniel Rosenwasser niet naar behoren waardoor deze 2 omgedraaid werden. Gelukkig omdat ik helaas eerder moest vertrekken om het vliegtuig nog te kunnen halen.

Evan deed zijn talk in tegenstelling tot de rest remote (skype). Hij vertelde dat hij van plan is om het framework nog sneller, kleiner en overzichtelijker te maken. Op het moment is de core code niet heel erg overzichtelijk. Dit gaat veranderen waardoor men makkelijker mee kan helpen aan de core code van Vue.js.

De laatste talk was van Daniel, hij vertelde over typescript. Typescript is een taal  gebaseerd op javascript maar dan met het typing verhaal erbij. Dit zorgt ervoor dat wanneer je een variabel een type string geeft en er later in je code een nummer aan koppelt krijg je een melding wanneer je de code wilt compileren. Zo heb je ook plugins voor develop omgevingen die gelijk tonen wanneer je een fout maakt, zogenaamde linters. Helaas moest ik deze talk eerder verlaten en weet ik niet waar hij het verder over heeft gehad.

Vue.js Londen heeft mij heel veel geleerd! Ik ben heel blij dat ik de mogelijkheid heb gekregen van Alteza om hier naartoe te mogen. Wil jij ook naar conferenties en werken in de nieuwste technieken dan raad ik iedere developer aan om ook bij Alteza te komen werken!

< terug naar nieuws