Maatwerkoplossingen binnen een grid

Bouwen op een open source framework

Bij Vruchtvlees omarmen we het gebruik van tools en open source technologie. Er wordt gewerkt met o.a. Laravel voor de back-end en met Vue JS voor de front-end.* Het team van Vruchtvlees groeit en daarbij hebben we te maken met nieuwe uitdagingen. Hoe zorgen we voor een toegankelijke codebase voor nieuwe collega’s? Hoe kunnen we nog beter samenwerken? Het afgelopen jaar ontwikkelden we daarvoor een eigen toolkit, die als Boilerplate de basis vormt voor al onze front-end projecten. We leggen je graag uit hoe dat werkt.

Deze grafiek toont de opkomst van Vue JS ten opzicht van Angular (Google) en React (Facebook) aan de hand van het aantal Github Stars. De grafiek betreft een benadering, bekijk de originele grafiek hier.

Alhoewel Laravel veruit het populairste PHP framework is, toont Github dat Vue sterk groeit en reeds React (van Facebook) en Angular (van Google) heeft gepasseerd in het aantal stars*.

*De stars zijn het equivalent van de befaamde Facebook likes op Github.

Off the grid

Bij Vruchtvlees werken we in het development-team volgens een eigen format dat aansluiting vindt op onze werkprocessen en methodiek. We geloven er sterk in dat we een probleem het beste oplossen door de vraag achter de vraag te stellen, maar dat betekent ook dat functionaliteiten geen standaard vorm aan nemen. We vertrekken uit gevestigde tools en zoeken de nuances op om tot een maatwerkoplossing te komen. Het is onvermijdelijk om uiteindelijk in een situatie te belanden waarin we off the grid moeten werken om maatwerk te realiseren.

We vertrekken uit gevestigde tools en zoeken naar nuances op om tot een maatwerkoplossing te komen.

Boilerplate

Onze boilerplate overstijgt de traditionele definitie van de term boilerplate; elke ogenschijnlijk repetitieve code die verschijnt om een soortgelijk resultaat te krijgen. Maatwerk is onvermijdelijk, dus proberen we aan de hand van onze ervaring een betere voorspelling te doen op toekomstige implementaties en wensen. Daarbij is het belangrijk om additionele functionaliteiten toe te kunnen voegen, de werking van het framework moet dus flexibel zijn. Een raamwerk van opties waarin afdoende ruimte is om aanpassingen te doen daar waar nodig.

Bij de ontwikkeling van de boilerplate hebben we een aantal belangrijke doelstellingen bepaald, bij elke optimalisatie en iteratie van de boilerplate liggen deze doelstellingen ten grondslag:

• Voeg alleen componenten toe die vaker zijn te gebruiken
• Maak de werking flexibel zodat er op kan worden doorontwikkeld
• Gebruik herkenbare map- en bestandsnamen
• Zorg ervoor dat componenten aansluiten op de werking van het CMS

Bij Vruchtvlees brengen we de wensen van de klant in functionaliteiten in kaart door extensieve backlogsessies. Dankzij de Boilerplate kunnen we daardoor sommige functionaliteiten sneller en efficiënter oppakken.

Nieuwe features en componenten

Het sentiment van modulaire componenten is de afgelopen jaren enorm toegenomen doordat het bewustzijn van de ideeën achter DRY (Don’t Repeat Yourself) en KISS (Keep it Simple Stupid) is vergroot. Door het gebruik en de behoeftes in onze project beter te doorgronden kunnen we gemakkelijker anticiperen op toekomstige functionaliteiten.

Het komt regelmatig voor dat een nieuw project vraagt om een nieuw component of oplossing binnen het traditionele framework. Indien het een oplossing is die vaker ingezet kan worden, denk bijvoorbeeld aan de vertoning van een pop-up, dan kan deze worden toegevoegd aan onze toolkit.

Digital Style Guide

Naast technische toepassingen fungeert de boilerplate ook om kennis en inzicht over het project te delen met het design team. Een probleem waar we eerder tegen aan liepen was de doorvertaling van design naar code. Met hulp van Node exporteren we alle elementen en waardes die worden gebundeld tot een levende digitale stijlgids. De stijlgids geeft een overzicht van onder meer lettergroottes, lettertypes en kleurgebruik. Daarnaast worden in de stijlgids UI-elementen als knoppen en formulieren opgenomen, zodat we het overzicht houden over alle beschikbare elementen binnen een project.

Onze levende stijlgids geeft inzicht in de opmaak, structuur en elementen die zijn gedefinieerd.

De digitale stijlgids helpt daarbij ook om nieuwe developers binnen legacy projecten* sneller up to speed te krijgen. Het is direct duidelijk welke mogelijkheden en elementen beschikbaar zijn, zodat het opbouwen van templates en functionaliteiten soepeler verloopt. Dit versnelt niet alleen ons werkproces, maar maakt ook team breed de kaders van het project inzichtelijk.

*Een legacy project is lopend project dat eerder bijvoorbeeld door een ander development team, of een developer, is gemaakt en wordt overgenomen door een andere developer.

Een impressie van onze digitale stijlgids.

Een eigen jasje

Het komt regelmatig voor dat templates een eigen identiteit of look and feel hebben die wisselende vormen aanneemt. Aan de basis van de Cinekid-website worden bijvoorbeeld vier gradaties van kleur en patronen gebruikt, in soortgelijke componenten. Bij Rialto en World Cinema Amsterdam werken de websites op dezelfde back-end, maar hebben ze elk een eigen karakter in sfeer en kleur.

Hiervoor ontwikkelden we modules die de codebase vanuit één project worden beheerd. De projecten en/of functionaliteiten worden gescheiden aan de hand van aparte exports. Hierdoor zijn generieke functionaliteiten op de verschillende platformen altijd beschikbaar, maar worden ze afzonderlijk aangevuld of geconfigureerd. Toekomstige functionaliteiten kunnen hierdoor op meerdere platformen tegelijk worden uitgerold of afzonderlijk worden beheerd.

Linting

Linting is een methodiek die onze code doorloopt en fouten herkent. Dat kunnen zowel cruciale fouten zijn (zoals een functionaliteit die wordt belemmerd) of een simpele stijlfout. Om de kwaliteit van de code te bewaken passen we linting toe die de structuur en syntax toetst. Linting checkt het gebruik van een specifiek aantal karakters, de diepte van het nesten en de regelhoogtes. Zo behouden we de kwaliteit en structuur die noodzakelijk zijn om op door te bouwen. Een voorbeeld van een toepassing is de opmaak van de onderstaande lijstweergave.

Deze code resulteert in een aantal stijlfouten die ondervangen worden.

Het gewenste resultaat wordt hieronder getoond:

Dit voorbeeld zal tot de verbeelding spreken van de meeste developers. Het gebruik van o.a. nieuwe regels, een consistent gebruik van leestekens en het beperkten van de lengte van de code zorgen ervoor dat de code overzichtelijker wordt opgebouwd.

Artificial development: de toekomstige boilerplate?

Dit zijn slechts enkele voorbeelden van de componenten die in de basis liggen van al onze digitale projecten. Linting bestaat momenteel uit statische regels die opgesteld wordt om de code te toetsen. Alhoewel dit goede richtlijnen biedt om de code te optimaliseren biedt machine learning nieuwe mogelijkheden om developers verder te ondersteunen.

Er wordt bijvoorbeeld geëxperimenteerd met het vertalen van design naar code met camera’s die wireframes omzetten naar HTML. Bovendien zijn steeds meer design applicaties toegespitst op digitale werkprocessen. Voorlopig lijkt dit alles nog toekomstmuziek te zijn, maar we zijn natuurlijk altijd op zoek naar een nieuwe optimalisatieslag!

Werken bij Vruchtvlees?

Zelf ideeën? We horen het graag van je. We zijn altijd op zoek naar verrassende talenten die de drive en de nieuwsgierigheid hebben om de beste digitale producten ter wereld te maken. Als onderdeel van ons team draagt iedereen zijn eigen steentje bij aan het optimaliseren van Dutch Design tot het web. Van development tot design en van marketing tot interactie, co-creatie staat voorop. Voor opdrachtgevers en merken, waarbij je met jouw expertise echt een verschil kunt maken.