Maatwerk is vaak kostbaar, maar juist door software op maat kun je precies het resultaat krijgen dat je voor ogen hebt. Om binnen budget te blijven zullen ontwikkelaars concessies moeten doen. Vaak gebeurt dat op belangrijke punten die pas later zichtbaar worden. Denk hierbij aan een app die niet schaalbaar is, of waarbij de broncode bij elke nieuwe functionaliteit (deels) moet worden herschreven. Wat ook vaak gebeurt is het hopeloos proberen aan te passen van bestaande software. Er zijn situaties denkbaar waar dat verstandig is, toch is het effect vaak hetzelfde: een te dure (web)app die nèt niet doet wat je wilt.

Wij weten echter dat maatwerk software door slimme keuzes best betaalbaar kan zijn. In deze blogpost neem ik je daarom graag mee in hoe wij dat doen met React.

De voordelen van React

React (ook bekend als ReactJS) is een open-source framework voor het bouwen van gebruiksvriendelijke web interfaces. React is ontzettend populair omdat het onderdeel is van een grote open-source community, het is daarnaast razendsnel en flexibel op te zetten. Zoals veel innovaties is React ontstaan uit een noodzaak, in dit geval om het alsmaar grotere wordende Facebook en Instagram beheerbaar te houden. React is op het moment van schrijven één van de populairste frontend framework en dat is niet voor niks. Veel webapplicaties die we dagelijks gebruiken zijn (deels) ontwikkeld met React, denk aan Netflix, Dropbox en Airbnb.

 

Grote open-source community

Wanneer je open-source software combineert met een grote actieve community dan is het resultaat software van hoge kwaliteit. Sinds een aantal jaar is React open-source en kunnen miljoenen ontwikkelaars meewerken aan de verbetering van het platform, en dat zie je terug in de kwaliteit. Anders dan bij closed source software, kan iedereen de broncode inzien en controleren. Zo worden eventuele beveiligingsrisico’s snel geïdentificeerd en opgelost. Er worden continu nieuwe functionaliteiten en verbeteringen doorgevoerd waar iedereen in de community weer van profiteert.

 

Snel en gebruiksvriendelijk

Wanneer je een pagina op het internet opent, wordt deze gerenderd door de server. Dat wil zeggen dat een server de pagina aanmaakt en aanlevert wanneer iemand daar om vraagt. Elke keer wordt alles opnieuw verzonden, terwijl er op de website vaak maar een klein deel verandert. Bijvoorbeeld de tekst en een aantal afbeeldingen, de header en footer blijven gelijk. Bij React (een single page-applicatie) is dat anders, dit werkt met client-side rendering. De server levert alleen de Javascript bestanden aan en vervolgens draait de webapplicatie in de browser van de gebruiker. Nu hoeft niet telkens alles opnieuw te worden verzonden, maar alleen wat er veranderd is. Dit is niet alleen sneller, het levert ook een soepele gebruikservaring op.

 

Flexibel en makkelijk te onderhouden

In plaats van een applicatie te bouwen met veel functionaliteiten in een klein aantal componenten, zogenaamde monolieten, bestaat React uit heel veel kleine componenten. Dit maakt het makkelijker om de applicatie te testen, aan te passen en dus ook om te onderhouden. De kleine componenten lenen zich uitstekend voor unit tests. Unittesten is een methode om een softwaremodule of stuk broncode afzonderlijk te testen. Door deze unit tests hoeven we minder kostbare integratietests en end-to-end tests (E2E) te schrijven. Dit wordt ook wel de door Mike Cohn bedachte “testing pyramid” genoemd, een strategie om zo efficiënt mogelijk software te testen. Voor de geïnteresseerden; deze blog van Colin But gaat hier verder op in.

React maakt het ook mogelijk om slechts een klein deel van het framework te gebruiken, zo kunnen developers alleen gebruiken wat ze nodig hebben. Dit maakt het sneller en flexibeler in gebruik.

 

Scheiding tussen logica en presentatie

React leent zich uitstekend om te werken met een Application Programming Interface (API). Een API maakt het mogelijk om de logica van de app los te koppelen van de presentatie. Neem als voorbeeld Netflix: de logica waaronder het wijzigen van je account, het streamen van films en series en de aanbevelingen worden gedaan door de API. De app of website van Netflix zijn dan eigenlijk niks anders meer dan een presentatielaag. Dit betekent dat wij als developers slechts één keer een API ontwikkelen, en wanneer die draait snel een of meerdere presentatielagen kunnen toevoegen, zoals een app voor de smartphone. Hier kom ik zo nog even op terug.

De nadelen van React

Naast de voordelen, zitten er ook nadelen aan het gebruik van React. De meest genoemde nadelen hebben betrekking op de vindbaarheid en de manier waarop React met informatie in componenten omgaat. Afhankelijk van het doel van de (web)applicatie, is React niet altijd de beste keuze.

 

Vindbaarheid

De meest genoemde reden om geen frontend framework zoals React of Angular te gebruiken is omdat het de vindbaarheid in zoekmachines als Google tegen zou werken. Dat klopt, omdat de “bots” die de pagina’s doorzoeken geen of nauwelijks Javascript uitvoeren komt een React pagina vaak zonder de content door. We willen natuurlijk niet dat het werk van tekstschrijvers en SEO-experts voor de vindbaarheid teniet wordt gedaan door de keuze voor React. Om dit probleem te voorkomen gebruiken we daarom naast React ook Next.js. Dit framework zorgt ervoor dat de eerste pagina die een gebruiker (of bot) opvraagt al gerenderd is door de server mét de content, zo kan Google alle pagina’s gewoon indexeren.

 

State management

In een standaard React applicatie houden componenten van de app de staat bij. De staat van een stopwatch component is de verstreken tijd, en van een navigatiebalk of een gebruiker is ingelogd. Het bijhouden van die staat gebeurt in het component. In een kleine applicatie is dit geen probleem maar wanneer je applicatie groeit, wordt dit steeds ingewikkelder. Dat komt doordat componenten zelf ook weer componenten kunnen hebben. Om te voorkomen dat we “door de bomen het bos niet meer zien” gebruiken we Redux. Dit wordt gebruikt om een de state voor de hele applicatie te beheren op een centrale plek. Dit maakt ontwikkelen niet alleen veel overzichtelijker, het is ook beter te testen en uit te breiden.

 

Niet voor elk vraagstuk

De voordelen die React biedt, komen voornamelijk naar voren wanneer het gaat om een complexere maatwerk applicatie. Voor een applicatie waar content slechts wordt weergegeven met weinig interactie, is React vaak onnodig (en kostbaar).

 

Ontwikkelen voor Android en iOS, maar dan tegelijk met React Native

Tot nu toe heb ik het vooral gehad over webapplicaties, maar veel bedrijven zijn ook gebaat bij een app in de Google Play of Apple App Store. Het voordeel ten opzicht van een webapp is dat je als ontwikkelaar veel meer tot je beschikking hebt, zoals bijvoorbeeld toegang tot de camera of de live locatie. We ontwikkelden voor Mijn Mazzel een app waarbij ondernemers vouchers kunnen verzilveren door een QR-code kunnen scannen. Daarnaast lanceren we binnenkort een app waarbij toeristen de Zweedse bossen kunnen ontdekken met interessante locaties in de buurt. En last but not least, deze apps zijn voorzien van pushberichten, waardoor je klanten op de hoogte kunt houden.

Wanneer we toch al de scheiding tussen data en presentatie hebben ontwikkeld met behulp van een API, is de stap naar een smartphone app ook sneller gemaakt. Het bouwen van zo’n app is vaak een hele klus, omdat het ontwikkelen voor Android en iOS in verschillende programmeertalen moet gebeuren. Voor iOS dien je je app te ontwikkelen in Swift of Objective-C, voor Android is dat Java. Dat moeten de ontwikkelaars van React ook hebben gedacht toen ze in 2015 React Native lanceerden.

React Native is een framework gebaseerd op React, maar je kunt er gelijktijdig mee ontwikkelen voor zowel Android als iOS, in de taal die je al gebruikt hebt voor de React-applicatie. Er zijn meer frameworks waar je voor beide platformen apps kunt ontwikkelen, maar het gave van React Native is dat de JavaScript naar de “native” taal wordt gecompileerd. Dit maakt dat voor de gebruiker de apps van React Native nauwelijks te onderscheiden zijn van apps die speciaal voor een van beide platformen zijn ontwikkeld. Het belangrijkste voordel is echter dat het minder tijd kost. Tot slot zijn veel van de bovengenoemde voordelen en keuzes – zoals Redux – ook van toepassing op een React Native app, waardoor we veel kunnen hergebruiken.

Takeaways

Door slimme keuzes te maken in technologieën die je gebruikt voor het ontwikkelen van je (web)apps kun je de doorlooptijd verkorten, zonder in te leveren op de kwaliteit. Hierdoor kunnen we bij Bullit:

  • focussen op datgene wat waarde toevoegt in de (web)app;

  • een betaalbare (web)app ontwikkelen die geschikt is om uit te breiden;

  • gebruiksvriendelijke interfaces bouwen, zonder dat we daarbij inleveren op de vindbaarheid.

Benieuwd naar de mogelijkheden of ook eens (digitaal) sparren over de mogelijkheden van een (web)app op maat voor jouw organisatie? Stuur mij een mail of bel mij direct op +31 6 39 56 09 34.

Meer weten over betaalbare apps op maat?

GET IN TOUCH

For what's next

Find us

Barkenkamp 5
7141 EL Groenlo
Nederland

Let's meet

info@bullit.digital

© Bullit Digital 2021