Choose your website development stack

Wat is een web development stack?

Een web development stack is een ecosysteem van technologie. Dit ecosysteem is een verzameling talen, bibliotheken en tools die worden gebruikt om een website te bouwen. Zoals elk ecosysteem, moeten de elementen ervan efficiënt en samenwerkend naast elkaar bestaan. Er zijn verschillende talen en frameworks die je kan gebruiken om een ​​website te ontwikkelen, elk met zijn unieke mogelijkheden, beperkingen en compatibiliteit.

Bij het kiezen van een web development stack voor je project is er geen “one size fits all”-oplossing. Factoren als prestaties, beveiliging, schaalbaarheid, functionaliteit, het niveau van visuele details en natuurlijk je tijd- en budgetbeperkingen spelen allemaal een rol bij het bepalen van de juiste stack voor een project. De tijd nemen om je opties te overwegen kan enorm gunstig zijn voor de levensduur van het project, waardoor je op de lange termijn tijd en geld bespaart.

We nemen je mee door de verschillende opties die je tot je beschikking hebt, de voor- en nadelen van elk, en welke technologieën goed bij elkaar passen, afhankelijk van de behoeften van je project.

What is a development stack

Waar je op moet letten bij het kiezen van de stack

De primaire focus van onze benadering bij het kiezen van een web development stack is “doel” – welk doel of welke rol deze website gaat spelen voor je bedrijf. We splitsen dit graag op in 3 hoofdcategorieën; visueel, functioneel & flexibel:

Visueel – wanneer aantrekkelijkheid de sleutel is
Deze focus is voor klanten die willen dat hun website een visuele representatie van hun bedrijf is. We zien dit als een etalage of visitekaartje; het eerste punt van interactie dat een potentiële klant heeft met een bedrijf. Dit richt zich op het weergeven van de toon en waarden van het bedrijf, terwijl het aanlokkelijk en gastvrij is voor bezoekers. Het is meestal de primaire focus voor industrieën zoals gastvrijheid, media, bureaus, PR en marketing. Als dit het primaire doel van je website is, moet je goed nadenken over front-end frameworks. De front-end-stack die je kiest, biedt je gebruikers een meeslepende ervaring en geeft hen een echt voorproefje van waar je bedrijf voor staat. Hier zijn enkele voorbeelden van enkele visueel gerichte websites die we hebben gemaakt; Felyx, Glasnost & Recharge

Functioneel – voor procesgebaseerde platforms
Functionele websites zijn doelgericht; om hun gebruikers een dienst te verlenen. Dit type focus wordt voornamelijk gebruikt op platforms, online tools, e-commerce of boekingssystemen. Ze hebben een zeer gedefinieerd doel en daarom ligt de focus voor development voornamelijk op back-end technologieën. In dit scenario wil je zorgvuldig nadenken over de database-architectuur, beveiliging, prestaties en bruikbaarheid. Bij deze projecten is het visueel goed uitzien niet altijd even belangrijk als correct en efficiënt werken.

Flexibel – voor bedrijven die altijd in ontwikkeling zijn
Een website kan dynamisch en voortdurend veranderen. Dit is vooral duidelijk in sectoren als journalistiek, evenementen of onderwijs. Deze online ruimtes evolueren voortdurend met nieuwe inhoud. Dit vraagt ​​om een ​​iets andere benadering van ontwikkeling. In dit scenario moet je rekening houden met schaalbaarheid, bruikbaarheid en vooral flexibiliteit. Wanneer we worden benaderd door klanten met deze focus, ontwikkelen we graag websites die hen de controle geven – het creëren van flexibele sjablonen en blokken die ze kunnen gebruiken om hun inhoud regelmatig bij te werken, met zeer weinig technische vaardigheden. Een voorbeeld hiervan is Ron Mandos. We hebben deze website zo ontwikkeld dat de klant eenvoudig nieuwe kunstexposities, kijk ruimtes en kunstenaars portfolio’s kan toevoegen.

Het kan natuurlijk zo zijn dat je alle 3 van deze categorieën als onderdeel van je website moet hebben, maar als je de afzonderlijke componenten begrijpt, kan je zien waar het belang ligt in het doel van de website. Dit maakt de weg vrij voor het kiezen van een stapel die voldoet aan de fundamentele doelstelling van een project.

Vervolgens zullen we de voor- en nadelen van elke technologie evalueren, om zo de mogelijkheden zo goed mogelijk af te stemmen op de behoeften van het project.

Things to consider when choosing how to develop your website

Enkele opties die het overwegen waard zijn

Front-end frameworks en bibliotheken:

Vue: Dit is een open-source JavaScript-framework dat wordt gebruikt om gebruikersinterfaces en applicaties met één pagina te bouwen. Een SPA (toepassing voor één pagina) is een toepassing die de inhoud van de pagina dynamisch herschrijft in plaats van verschillende statische webpagina’s te laden. Dit betekent dat de pagina niet opnieuw wordt geladen. In plaats daarvan veranderen bepaalde elementen van de pagina dynamisch. Voorbeelden hiervan zijn Twitter, Gmail en Facebook. Deze applicaties zijn sneller en zorgen voor een betere gebruikerservaring. De dynamische en op componenten gebaseerde structuur van SPA’s betekent dat je meer mogelijkheden hebt om vloeiende overgangen en pre-loaders te creëren

React: Dit is ook een open-source Javascript-framework, dat door Facebook wordt onderhouden en gebruikt om front-end gebruikersinterfaces te maken. De verschillen tussen React en Vue zijn voornamelijk architectonisch en komen in de meeste gevallen neer op de voorkeur van de developer. De belangrijkste punten om het verschil tussen de 2 weg te nemen, zijn dat React gemakkelijker schaalbaar is en dat Vue meer ondersteuning heeft via online communities en tools en plug-ins van derden.

WebGL & ThreeJS: zijn JavaScript-API’s die worden gebruikt om 2D- en 3D-afbeeldingen in een webbrowser weer te geven. De browserweergave mogelijkheden van WebGl & Three js betekenen dat je de grenzen van visuele ervaring kunt verleggen, door 2D-webpagina’s om te zetten in een 3D-interactieve reis. Het gebruik van dit type API-rendering als front-end-technologie voor je website is een grote onderneming voor development, prestaties en visuele inhoud, maar de resultaten zijn visueel superieur aan elke andere front-end-technologie.

Maatwerk thema’s: Veel CMS (content management systemen) en e-commerce platforms maken gebruik van thema’s. Basisthema’s zijn meestal gratis, je kan betalen voor premium-thema’s of je kan je eigen thema’s ontwikkelen. Thema-ontwikkeling is steeds populairder geworden bij bedrijven omdat het de aangepaste esthetische klanten biedt waarnaar ze zoeken terwijl ze de functionaliteit en inhoudsbeheer van CMS zoals WordPress of Shopify gebruiken.

Back-end frameworks en Content Management Systemen

WordPress
Volgens wordpress.com vormen WordPress-websites 35% van alle websites. Van eenvoudige blogs tot Fortune 500-bedrijven, het is het meest gebruikte webplatform ooit. Vanwege zijn langdurige populariteit heeft WordPress een grote steun van de gemeenschap, van forums tot plug-ins en thema-ontwikkeling, het is algemeen aanvaard door de web ontwikkelingsgemeenschap. De minimale back-end gebruikersinterface maakt het gemakkelijk voor niet-technische gebruikers om wijzigingen aan te brengen of inhoud bij te werken. Dit spreekt veel klanten aan.

Met de recente Gutenberg-update heeft WordPress een op componenten gebaseerde programmeerstructuur aangenomen met behulp van React JS. Dit betekent dat het kan worden uitgebreid met aangepaste componenten en andere op React gebaseerde functionaliteit.
Lees hier meer over WordPress-ontwikkeling

Laravel
Laravel scoort hoog in vergelijking met andere development frameworks, voornamelijk vanwege de geavanceerde functies en ontwikkelingstools die snelle ontwikkeling van webapplicaties mogelijk maken. Laravel biedt een aantal kant-en-klare functies die elke toepassing nodig heeft. Deze functies besparen niet alleen tijd, maar bieden ook een robuuste oplossing voor de belangrijkste elementen van een website. Het meest opvallende is dat het gebruik van authenticatie betekent dat developers snel een veilige en beveiligde website kunnen maken. Dit kan een moeizame en moeilijke taak zijn om handmatig te implementeren, maar de authenticatie-oplossing van Laravel biedt een robuust en ondersteund implementatiemodel.

Drupal
Drupal is een CMS (Content Management System) en aanpasbaar platform dat door ondernemingen over de hele wereld wordt gebruikt. Het is een schaalbaar, veelzijdig, open-source framework dat is gebruikt om websites over de hele wereld te ontwikkelen, variërend van blogs tot bedrijfs-, politieke en overheidssites.
Lees hier meer over Drupal-development

Shopify
Shopify is een steeds populairder online winkelbouwer. Het maakt gebruik van thema’s, die kunnen worden gekocht of op maat gemaakt. Shopify heeft zowel gratis als betaalde versies en heeft geweldige community-ondersteuning gekregen. Shopify, WordPress met Woo Commerce & Magento zijn de meest gebruikte e-commerce platforms.
Lees hier meer over de ontwikkeling van e-commerce

Express
Express JS is een lichtgewicht back-end technologie die wordt gebruikt om database- en API-verzoeken af ​​te handelen. Het is licht, snel en werkt geweldig met NODE js-pakketten. Express wordt vaak gebruikt als middleware tussen je applicatie en de database.

Ruby on Rails
Is een open-source, objectgeoriënteerde back-end technologie. Het is geweldig voor het snel ontwikkelen van back-end voor webapplicaties en frameworks, maar kan prestatie en schaalbaarheid missen.

Back-end website development

Je website toekomstbestendig maken

Er zijn enkele langetermijn variabelen waarmee je rekening moet houden bij het kiezen van je development stack. Er zijn verschillende manieren om een ​​website te bouwen, de ene meer schaalbaar en duurzamer dan de andere. Het kan vanuit het oogpunt van tijd en kosten verleidelijk zijn om je website zo snel mogelijk gebouwd en live te willen hebben. Dit kan leiden tot problemen in de loop van de tijd, meestal resulterend in een volledige renovatie binnen een paar jaar.

Hier bij Studio Vi hanteren we een structurele en methodische benadering bij het bouwen van onze websites. We ontwerpen en ontwikkelen onze websites om schaalbaar, flexibel en duurzaam te zijn, zodat onze klanten altijd op hun website kunnen bouwen, in plaats van een nieuwe nodig te hebben.

Het toevoegen van dingen zoals server-side rendering kan de levensduur van je website echt verlengen. Server-side rendering verhoogt niet alleen de snelheid van de website drastisch, maar is ook geweldig voor zoekmachineoptimalisatie en verhoogt de veiligheid van je gegevens. Server-side rendering kan ook helpen bij de compatibiliteit van de browser, wat betekent dat toekomstige updates in browsers minder snel een negatief effect zullen hebben op je website. Enkele van de meest populaire frameworks voor SSR zijn Nuxt voor Vue JS, NEXT voor React JS en Gatsby voor Laravel/PHP.

De ontwikkeltechnieken zijn niet de enige factor in de levensduur van een website of applicatie. Bepaalde technologieën worden beter ondersteund dan andere. Deze ondersteuning kan afkomstig zijn van de oprichters en makers of afkomstig zijn van community bronnen zoals bibliotheken en plug-ins. De adoptie van een bepaalde technologie bepaalt de levensduur ervan.

De hoeveelheid onderhoud op elk platform varieert. Een CMS zoals WordPress bestaat al 18 jaar, wat betekent dat de belangrijkste problemen al zijn opgelost; updates zijn meestal add-ons of verbeteringen, in plaats van stabiliteit oplossingen. Het tegenovergestelde is waar voor nieuwere technologieën, Angular JS heeft bijvoorbeeld elke 3 maanden een grote release en is al aan zijn 12e grote versie. Hoewel het een krachtige technologie is die wordt ondersteund en gemaakt door Google, betekent dit dat er regelmatig en aanzienlijke aanpassingen nodig zijn om je website up-to-date te houden.

Future-proofing your website

Onze aanbevelingen

Nogmaals, we springen terug naar het doel van je website. Zoals eerder vermeld splitsen we dit op in 3 hoofdcategorieën; visueel, functioneel en flexibel. De primaire doelstelling voor je website zal de belangrijkste bepalende factor zijn voor welke web development stack je kiest.

We bouwen websites voor een breed scala aan klanten, verspreid over een breed scala aan industrieën; van horeca tot transport, van pr-bureaus tot kledingmerken, elk heeft een doel voor ogen en een idee of identiteit die ze aan hun gebruikers willen communiceren. Onze ervaring met deze klanten heeft ons een diepgaande kennis opgeleverd van welke stack het beste voor je werkt. Hier zijn enkele van onze suggesties:

Visueel – WebGL & Three JS

Als je focus op esthetiek, visuele aantrekkingskracht en het uitbeelden van je identiteit dan wil je een visuele web development stack. Dit soort stacks zijn afhankelijk van animatiemogelijkheden, weergave capaciteit en prestaties. Om een ​​zeer visueel aantrekkelijke website te krijgen, is meer grafische verwerkingskracht nodig. Daarom moet je rekening houden met de prestaties en architectuur van je ontwerp.

De krachtigste van deze tools is WebGL. Met deze technologie kun je front-end-interfaces op een volgende niveau maken, waarbij je browsers gebruikt om gecompliceerde 3D-modellen weer te geven. Dit is een relatief nieuwe technologie, waardoor het kan moeilijk zijn om bekwame developers te werven, maar de resultaten spreken voor zich – bekijk ons ​​artikel over WebGL waar we enkele voorbeeld websites opnemen.

 

Functioneel – Express, WooCommerce & Shopify

E-commerce, informatie en taakgestuurde websites moeten anders worden ontworpen en ontwikkeld. Prestaties, gebruiksvriendelijkheid en functionaliteit staan ​​voorop. Hiervoor raden we bepaalde technology stacks aan die robuust en schaalbaar zijn.

Voor e-commerce websites zijn er 2 gratis en veelgebruikte opties; WordPress met WooCommerce en Shopify. Beide opties maken gebruik van thema’s, die op maat kunnen worden gemaakt om je online etalage een authentiek gevoel te geven. Voor grotere e-commerce winkels kun je overwegen om Magento te gebruiken. Het is duurder, maar meer geschikt voor grotere bedrijven met gedetailleerde voorraad afhandeling en -controle.

Als je website bedoeld is om een ​​dienst, functie of informatie te bieden, moet je rekening houden met meer technische aspecten van je website, zoals gegevensverwerking. Hiervoor raden we aan om een ​​express back-end te bouwen. Het is licht, snel, flexibel en klaar in vanilla JS.

 

Flexibel – WordPress op maat gemaakte thema’s

Klanten die een flexibele website willen, hebben de neiging om regelmatig content te updaten en regelmatig online campagnes te voeren. Dit is vrij gebruikelijk bij marketing- en PR-bedrijven. Hiervoor raden we aan om WordPress CMS te gebruiken met een aangepast thema.

We bouwen vanaf het begin lichtgewicht WordPress-thema’s, waardoor je een uniek en authentiek lettertype krijgt terwijl je alle voordelen van WordPress CMS geniet. We bouwen de back-end om gebruiksvriendelijk en gestructureerd te zijn, zodat onze klanten hun online inhoud kunnen wijzigen zonder een developer te hoeven raadplegen.

 

Conclusie

We hopen dat dit artikel je heeft geholpen om je opties beter te begrijpen als het gaat om het kiezen van de technologie stack voor je project. Ons professionele team heeft ruime ervaring met het bouwen van websites en applicaties met verschillende stacks. Neem gerust contact op als je advies zoekt over welke ontwikkel stack je het beste voor je specifieke project moet gebruiken.