React ontwikkeling van idee tot plan

Bij 4BIS in onze favoriete Javascript bibliotheek React omdat het krachtig is en heel divers inzetbaar. Maar zeker in grote react apps is een goed plan erg belangrijk. omdat een React app snel uit kluiten kan groeien. In dit artikel ga ik uitleggen hoe wij bij 4BIS onze react apps plannen, van idee tot plan.
n
Web
updated: Aug 21, 2020 at 4:28PM | published: Aug 11, 2020
Tom

Bij 4BIS in onze favoriete Javascript bibliotheek React omdat het krachtig is en heel divers inzetbaar. Maar zeker in grote react apps is een goed plan erg belangrijk. Dit komt door de volgende redenen:

  • Je krijgt snel te maken met veel componenten.
  • De complexe data-flow door die vele componenten loopt.
  • Een heel scala aan andere kleine onverwachte problemen.

  • Daarom ga ik in dit artikel beschrijven hoe wij een plan maken voor een react app in een aantal stappen.

Voor we gaan beginnen is het belangrijk onderscheid te maken tussen een react app en een react widget. Een react widget bestaat vaak uit minder componenten en word gebruikt voor een kleine specifieke taak. Denk bijvoorbeeld aan een zoek balk of een login pop-up. Een react app daarentegen bestaat vaak uit veel componenten en word meer gebruikt voor grotere taken met veel toeters en bellen. Denk hierbij aan onze email handtekening generator of aan de facebook site. Tijdens dit artikel zal ik mij vooral richten op hoe wij het maken van een react app aan pakken. Om dit traject goed te kunnen laten zien zal ik in de loop van dit artikel zelf een opzet maken voor onze nieuwe react woordenteller.

Wist je dat
React eigenlijk geen framework is, maar een JavaScript bibliotheek.

functionaliteit

Als eerst het handig om zo duidelijk mogelijk te weten van je react app moet gaan doen. Het is niet nodig om dit tot in detail te weten, de bedoeling is dan ook om de hoofd functies te bedenken. Dit is zodat we later zo min mogelijk tegen problemen aanlopen waar we eerder nog niet over nagedacht hebben. Hierom is het ook belangrijk de vraag te stellen of we de app in de toekomst gaan uit bereiden, en zo ja hoe en waar.

Voor de woordenteller gaan we nu zoals eerder beschreven zo precies mogelijk bedenken wat hij moet doen. Ook bedenken we in dit stadium al wat we in de toekomst willen toevoegen. Zodat we daar tijdens het ontwikkelen rekening mee kunnen houden.

  • Tekst ophalen uit textarea en in een string doen
  • Tekst ophalen van een URL en in een string doen
  • Procentuele en numerieke weergaven van hoe vaak ieder woord en karakter voor komt per zin en in totaal
  • Hoeveelheid zinnen.
  • Gemiddelde lengte van zin in woorden en karakters
  • (Toekomst) per woord synoniemen laten zien
  • Tekst opslaan in local storage

Dit zijn een aantal hoofd functies voor in de woordenteller die ik heb kunnen bedenken. Dit zijn dan ook de belangrijkste dingen die de app moet kunnen.

Simpele sketch

De volgende stap is om de app in grote lijnen vorm te geven denk aan een lay-out en houd ook nu rekening met eventuele uitbreidingen en aanpassingen in de toekomst. Je kunt de lay-out op veel verschillende manieren vormgeven, wij gebruiken nog altijd pen en papier om een sketch te maken.

Dit is de grove sketch die ik heb gemaakt. Deze dient vooral om een idee te krijgen hoe de app eruit komt te zien. Ook is dit een goed start punt om te gaan bedenken hoe de woordenteller het best in componenten kunnen opdelen.

Componenten

Voor het opdelen in componenten is het belangrijk om op te letten welke componenten herbruikbaar zijn, en welke delen daarvan variabel moeten blijven. Een goed voorbeeld is een knop. Een knop is makkelijk te hergebruiken, want alleen de tekst die op de knop staat en een aantal andere attributen moet variabel worden. Een complexer voorbeeld is een tabblad ik wil drie tabbladen met ieder een andere titel en een andere inhoud. Terwijl ik wel hetzelfde tabblad component wil gebruiken.

Een ander belangrijk punt om in gedachten te houden is welke componenten je gemount (actief) wil blijven houden. Dit is belangrijk omdat, op het moment dat je een interactie doet met een component de kinderen daarvan worden geüpdatet. Dus een component dat veel kinderen heeft kan daardoor voor vertraging zorgen. Hierom wil je alle kinderen die niet nodig zijn unmounten (deactiveren). Een voorbeeld hiervoor is de inhoud van de tabbladen, op het moment dat ik een bepaald tabblad niet open heb is het ook niet nodig de inhoud daarvan gemount te houden.

Dit is hoe ik uiteindelijk mijn sketch heb opgedeeld in componenten met iedere rechthoek een ander component. Zoals eerder beschreven is het ook handig om in dit stadium te noteren welke componenten je hergebruikt. Nu we weten welke componenten we willen kunnen we een componenten hiërarchie diagram opstellen. Vaak is dit niet nodig maar zal wel laten zien hoe we dit doen.

Hiërarchie diagram

Het maken van een hiërarchie diagram doen we wanneer er een nog duidelijker beeld moet komen van welke componenten we nodig hebben, en hoe deze ten opzichte van elkaar bestaan. Bij Het maken van de hiërarchie diagram is het wederom belangrijk om rekening te houden met dingen die we in de toekomst toe gaan voegen.

Ontwikkel omgeving

Zodra de planning af is kunnen we een ontwikkelomgeving op te zetten. Een ontwikkelomgeving zorgt er in dit geval voor dat we in een schoon react project kunnen werken. Je kunt deze omgeving zelf handmatig opzetten maar, wij gebruiken een programma genaamd “create react app”. Dit programma maakt voor ons de omgeving en alle nodige basis bestanden aan.

Ben jij op zoek naar een opmaat gemaakte en beheerde react app of widget? Neem contact met ons op en zie wat wij voor je kunnen doen.


Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de React Hooks serie useMemo & useCallback

Deel 4 van de ReactHooks serie! We gaan het hebben over useCallback en over useMemo. Met deze hooks kunnen we waardes of callback memoizen dit kan nuttig zijn bij zware operaties of om te zorgen dat bepaalde componenten niet altijd mee rerenderen. Zeker omdat bij kleine applicatie het vaak efficienter is om niet te optimaliseren dan wel.

Lees meer
Redux de Intro!

Redux de Intro!

Deze week een korte introductie van de 4 basisbegrippen die je nodig hebt om Redux te begrijpen. We gaan kort uitleggen hoe state wordt aangepast in een Redux Store met behulp van Reducers en Actions. En we vertellen wat al deze begrippen doen en hoe ze werken in een Redux applicatie.

Lees meer

Software ontwikkeling op maat

Hoe werkt het?

Wat wonderen doet voor het ene bedrijf kan zinloos zijn voor een ander bedrijf. Daarom hebben we oplossingen op maat die het unieke karakter van jouw bedrijf respecteren. We werken in een positieve spiraal van testen, monitoren en verzamelen gegevens om precies te weten te komen wat voor jou werkt en wat niet. Het is onze ‘whole package’-mindset, een aandacht voor details die ons in staat stelt om elke keer jouw prestatiedoelstellingen te bereiken. Dus ontspan en geniet van de rit!