Onze nieuwe App-vise website

Introductie

Afgelopen jaar constateerden we dat we zo druk zijn geweest met het opleveren van projecten voor klanten dat we te weinig aandacht hebben besteed aan onze eigen website. We besloten om onze website grondig aan te pakken en naast een vernieuwing van onze huisstijl ook het hele ontwerp en de techniek van onze website aan te passen. Hierbij hebben we gekozen om onze website meteen te voorzien van de nieuwste technieken die we ook hebben gebruikt voor de meest recente projecten van onze klanten. De website hebben we gebouwd met Vue.js in combinatie met Prismic.io. Benieuwd hoe we tot deze keuzes zijn gekomen?

De vereisten voor onze nieuwe website

Bij App-vise starten we niet gelijk met het ontwikkelen van een nieuw project. De eerste stap is het vormen van een productvisie en daar zijn we ook voor onze website mee gestart. Tijdens deze product vision board sessie gevolgd door een user story sessie werden de belangrijkste functionaliteiten vastgesteld en hebben we deze uitgeschreven in gebruikersverhalen. Kort samengevat kwam het er op neer dat onze website er uit moest springen qua design wat niet ten koste mocht gaan van de gebruikerservaring (UX). Zoals verwacht stelden we vast dat we pagina’s wilden zoals het portfolio, over ons, onze diensten en een contactpagina. De blogfunctie werd als belangrijke nieuwe functionaliteit benoemd omdat wij graag onze kennis en ervaringen delen. Om dit allemaal zo soepel en gemakkelijk te kunnen laten verlopen stelden we de volgende vereisten vast:

• een snelle, gemakkelijk in gebruik en goed vindbare (SEO) website;
• de content moet gemakkelijk aangepast kunnen worden en onze marketing medewerkers zijn in staat om zelfstandig blogs en aanpassingen te doen;
• vernieuwende technieken en een gemakkelijk ontwikkelproces;
• een mooie showcase van wie App-vise is en wat wij onze klanten kunnen bieden zowel op het adviserend als technisch vlak.

Waarom het Vue.js framework?

Vue maakt webdevelopment een stuk eenvoudiger. Het is een open-source progressive javascript framework waar gebruikersinterfaces mee gebouwd kunnen worden. Je kunt er complexe en vernieuwende applicaties mee ontwikkelen. Er zijn een aantal belangrijke voordelen te noemen om te kiezen voor dit framework:

• Er is een grote community en goede documentatie beschikbaar.
• De core library is super klein wat resulteert in een extreem goede performance.
• Je kunt het project goed structureren en in combinatie met onze clean codebase opzet is het eenvoudig om te onderhouden en aanpassingen door te voeren.
• Animaties zijn gemakkelijk toe te voegen met behulp van het Vuetify framework.

Vue.js is een client side techniek. Dit betekent dat de data op een later moment wordt opgehaald met behulp van API’s en dan pas in de browser wordt verwerkt. Dit kan een negatieve invloed hebben op de SEO van je website omdat de Google crawler de data dan niet goed kan scannen. Een oplossing hiervoor is het toepassen van server side rendering (SSR). Hier hebben we gekozen voor NuxtJS; een framework dat gebouwd is bovenop het Vue.js framework. NuxtJS maakt het met behulp van een aantal simpele configuraties mogelijk om een statische website te genereren van onze VueJS applicatie.

Netlify hosting

Het opzetten en beheren van hosting heeft ons in het verleden de nodige kopzorgen bezorgd. Gelukkig bestaan er tegenwoordig partijen zoals Netlify die ons op dit gebied ontzorgen. Netlify is een cloud-based hosting platform dat zich volledig heeft gericht op het zo gemakkelijk en optimaal mogelijk maken van het hosten en geautomatiseerd updaten van moderne webprojecten. Netlify zorgt ervoor dat wij als ontwikkelaars ons minimaal druk hoeven te maken over hosting. Het hele project is met behulp van Netlify heel simpel op te zetten waardoor je je onder andere geen zorgen meer hoeft te maken over het opzetten en hosten van een complexe NodeJS server.

Content beheren met het headless CMS van Prismic.io

Een van de bekendere CMS oplossingen zijn bijvoorbeeld Wordpress en Drupal. Bij deze systemen ben je zelf verantwoordelijk voor de hosting en het onderhoud daarvan. Inmiddels zijn er meerdere zogenoemde headless CMS oplossingen die volledig in de cloud draaien. Prismic.io is hier een voorbeeld van en een van de voordelen is dat je ook voor het CMS geen zorgen hebt wat betreft hosting en onderhoud van de backend. Prismic.io geeft verschillende mogelijkheden en vrijheid in de keuzes welke technieken je wilt gebruiken. Voor het opvragen van de data hebben we gekozen voor GraphQL; een querytaal voor API’s die gemakkelijk gekoppeld kan worden met de Prismic API. Voor de koppeling met de Prismic API hebben we gebruikt gemaakt van de gebruiksvriendelijke Apollo client. Het grote voordeel van GraphQL is dat aanpassingen aan het CMS of de applicatie gemakkelijk te implementeren zijn en deze veranderingen zodoende minder impact hebben.

Onze bevindingen

Wij zijn super enthousiast over de keuzes voor de technieken en voordelen die we in praktijk ervaren. Of je nu een complexe webapplicatie wilt bouwen of start met een simpele website die je afhankelijk van de groei van jouw product verder wilt kunnen uitbouwen. Je kunt met deze technieken alle kanten op doordat alles los en schaalbaar opgezet is. Wil je later ook een native app naast jouw website aanbieden en deze content ook kunnen beheren? Dat kan ook heel gemakkelijk door gebruik te maken van het CMS van Prismic.io. Zo kun je dus alle content gemakkelijk aanpassen en op één centrale plek beheren waarbij je maximale vrijheid behoudt in het design en de inrichting van jouw website en/of apps.

Voordelen

• Een supersnelle webapplicatie.
• Geen zorgen over hosting en beveiliging.
• Ook niet ontwikkelaars kunnen gemakkelijk op het project meedraaien.
• Maximale vrijheid in design wat perfect aansluit bij een een design thinking aanpak.
• Met behulp van het Prismic.io CMS kun je gemakkelijk nieuwe pagina's en secties toevoegen aan je website.
• Doorgroeien naar een groot platform met een complexe dynamische website en daaraan gekoppelde (web) apps is geen enkel probleem.

Nadelen

• Het project opzetten kost meer tijd.
• Voor niet ontwikkelaars is het niet mogelijk om aanpassingen in het design van de website door te voeren zonder hulp van een ontwikkelaar.

Wil jij ook een nieuwe website of app neem dan contact met ons op!