De ontwikkeling van de Cube front-end code.

1 oktober 2015, achteraf gezien best een bijzondere dag in de nog relatief korte geschiedenis van Cube (bijna 9 jaar). Het was namelijk mijn eerste werkdag bij Cube, wat toendertijd nog naar de naam Brandcube luisterde. Inmiddels ben ik bijna 4 jaar, 2 verhuizingen en +- 20 nieuwe collega’s verder terwijl ik dit bericht schrijf vanuit een prachtig gerenoveerd kantoor midden in het centrum van Oldenzaal. Erg leuk en bijzonder om deze groei van dichtbij mee te kunnen maken.

5d36bb62487c5blogpost-tiny.jpg

Inherent aan de groei van het bedrijf is uiteraard de ontwikkeling van de kennis en de kunde binnen het vakgebied. In dit blogbericht neem ik je graag mee in evolutie van onze technieken binnen mijn functie; front-end development.

Duizenden regels

Twee verschillende bestanden, groter waren de projecten in het begin niet. Een HTML bestand met daaraan gekoppeld een CSS bestand. Natuurlijk overdrijf ik nu behoorlijk, maar wat opviel is dat we maar 1 enkel CSS bestand gebruikten. Hierdoor bestonden deze bestanden in de meeste gevallen uit duizenden regels, niet echt wenselijk en zeker niet overzichtelijk. Het was hoog tijd hier wat verandering in aan te brengen.

Tijd voor structuur

Langzamerhand werden de klussen wat groter en werd het tijd om wat meer structuur aan de CSS code toe te brengen. De oplossing hiervoor was het gebruik maken van SASS. In SASS verdeel je de code over verschillende kleinere mappen en bestanden om zo meer overzicht te creëren. Ook gingen we daarbij gebruik maken van zogenaamde ‘Variables’ & ‘Mixins’. Dit zorgde ervoor dat we sneller en efficiënter CSS code konden schrijven.

Ook gingen we werken volgens het DRY principe, DRY staat namelijk voor Don’t Repeat Yourself. Waarom zou je een bepaald stuk code opnieuw schrijven als het al bestaat? Ook dit zorgde ervoor dat onze code schoner en minder omvangrijk werd, en dat dan ook nog eens in kortere tijd.

Nieuwe mensen, nieuwe technieken

We zitten inmiddels in 2017, Brandcube heeft een ontzettende groei doorgemaakt en we werken alweer een tijdje vanuit de Geldermanfabriek in Oldenzaal. Met de vele nieuwe collega’s hebben we uiteraard ook vele kennis van andere en nieuwe technieken in huis gehaald. Ook binnen het front-end landschap veranderde het nodige.

We gingen werken met nieuwe Javascript technieken zoals React en Vue.js. Voordelen van bijvoorbeeld Vue.js zijn o.a.:

  • Erg eenvoudig en overzichtelijk is het gebruikersgemak

  • Een grote community met veel kennis tot zijn beschikking

  • Super snelle user experience, zelf voor hele grote applicaties

  • Ruime keuze aan integratie en packages

  • Zeer goed samen te gebruiken met Laravel

Doordat onze opdrachten steeds uitgebreider werden en we daarom regelmatig met meerdere developers aan een project gingen werken was het tijd geworden om regels en richtlijnen binnen onze SASS code op te gaan stellen. We besloten ze gaan werken volgens de BEM module.

Ook was het nodig om een vast framework te gaan kiezen, na een aantal teamsessies werd gezamenlijk gekozen dat Bootstrap 4 het meest geschikt was.

Huidige technieken

Dus welke (nieuwe) technieken gebruiken we tegenwoordig? Uiteraard HTML, CSS in de vorm van SASS en Javascript, dat is de basis van elk product. Vooral op het gebied van Javascript zijn er veel ontwikkelingen, zo maken we tegenwoordig geen gebruik meer van het oude vertrouwde jQuery maar schrijven we onze custom Javascript op basis van het ES6 principe.

Daarnaast ontwikkelen we de laatste tijd veel in Javascript frameworks als React en Vue.js, dit zijn technieken die het een stuk eenvoudiger maken om dynamische en interactieve websites te bouwen, want de vraag hiernaar wordt steeds groter. Zo is de website waar je dit nu leest gebouwd met Vue.js met daar boven op Nuxt.js. Nuxt neemt de client/server distributie weg en zorgt voor de gehele UI-rendering van het project. Dit heeft als groot voordeel dat de Javascript indexeerbaar is in zoekmachines.

En nu?

Op het moment van schrijven zitten we alweer meer dan een half jaar in ons nieuwe kantoor in hartje Oldenzaal. Het team is weer wat mensen rijker, mede daarmee de kennis en skills. Wel kregen we te maken met een dilemma. Het was belangrijk om een bepaalde standaard in onze projecten te krijgen, zodat elke collega moeiteloos een project van een ander over kan nemen. Echter staat daar tegenover dat de technieken zelf zich ook blijven vernieuwen en ontwikkelen.

Daarom hebben we voor elke codetaal binnen Cube een team gevormd die deze ontwikkelingen op de voet volgt. Elke 3 maanden tijdens een developers meeting (uiteraard met pizza & bier) presenteren we elkaar onze bevindingen en wordt er gezamenlijk besloten of we onze werkwijze aanpassen dan wel behouden.

En uiteindelijk is dat ook wat mijn vak zo leuk maakt, elke dag leer ik weer wat nieuws, ontdek ik weer wat nieuws en gebruik ik weer wat nieuws.