Kijk, ik zet deze website een beetje op als een blog, maar stiekem is het ook een beetje een soort dagboek, een journal, een column, een notitie… ik schrijf eigenlijk over dingen die ik heb meegemaakt of die me interesseren of wat ik heb meegemaakt.
Inleiding
Vandaag bijvoorbeeld heb ik een test gedaan met wat AI tools van Google. Gemini 3 is nu een van de krachtigste, dan wel hét krachtigste model wat nu op de markt ligt. Ik moet zeggen: misschien is dat ook wel zo. Het is zonder denken razend snel en als je het dieper laat nadenken duurt het iets langer. Daar staat tegenover dat het voelt alsof het nog meer nadenkt dan eerst. Als je de gedachten opent zie je gedachte voor gedachte langs schieten op je scherm.
Ik wilde een nieuwe applicatie starten (een applicatie die ik al vier á vijf keer probeer te starten) en ik dacht dat ik Gemini maar eens het onderzoek ging laten doen van wat ik moet gaan gebruiken in mijn tech-stack. Voor de backend was het al snel duidelijk, ik heb gewoon echt een grote voorkeur voor Java met Spring Boot. Het is gewoon zo’n geweldig framework en het coderen gaat zo lekker soepel.
Maar dan moeten we nog een frontend hebben. Dit is echter een wat lastigere keuze. Waar ik eerst veel deed met Angular toen het nog Angular 17 was, heb ik het toch al een tijdje links laten liggen. Recent moest ik voor een keuzevak werken in React. Dit heeft wel een wereld voor me geopend, maar het was ook echt heel anders. Ik merkte gewoon dat ik nog erg op zoek was naar de structuur van Angular in de React codebase.
Precies hierom heb ik Gemini het werk laten doen en laten onderzoeken wat het beste bij mij paste. Dit heb ik niet simpel gedaan door even aan te geven dat ik twee frameworks heb waar ik mee wil werken en geef me maar een onderzoek. Nee, ik heb echt wel wat energie erin gestopt.
En ik weet dat React een library is, maar ik noem het voor nu een framework. En als ik er aan denk en het goed schrijf, dan is dat een plus.
Stap 1 – Start Onderzoek
Ik begon bij Gemini. Ik opende gewoon de site en selecteerde een “Deep Research” met de “Denken” stand. Dit houdt eigenlijk in dat hij een grondig onderzoek doet met het Thinking model – Gemini 3 Pro. Het start met een prompt voor het onderzoek.
Ik denk dat ik nog vrij onduidelijk was in mijn prompt. Het was is helaas niet meer terug te vinden omdat Google’s Gemini app niet heel soepel werkt met je chat geschiedenis bewaren, maar gelukkig had ik de onderzoeken als geëxporteerd naar Google Docs (dat kan en is super handig). Zoals ik het lees uit het eerste onderzoek heb ik gevraagd naar een vergelijking van Angular vs React voor een frontend Single Page Application (SPA) die bedoeld is voor ledenadministratie en verenigingsbeheer. De applicatie moeten een moderne, ‘clean’ UI hebben en er moet gelet worden op uitbreidbaarheid met modules/plugins.
Zodra je de prompt geeft gaat Gemini een plan bedenken, dit plan geeft hij dan en dan kun je het dus bewerken. Ik heb het iets bijgesteld omdat de focus lag op die verenigingsbeheer en ledenadministratie op sommige punten waar het niet hoefde. Dat krijg je bij AI als je vaag bent, dan gaat het de focus heel snel naar overal en nergens verschuiven. Het plan was nu goed afgesteld en zag er redelijk uit. Dan klik je op ‘Starten’.
Wat je dan krijgt is alleen maar te omschrijven als een wonder. Je ziet hoe het model heel snel denkt en evalueert. Ook doet het van tijd tot tijd onderzoeken met een heleboel bronnen. Van websites tot YouTube videos, blogposts tot Reddit, het gaat tot wel 100 bronnen langs om tot een conclusie te komen. En als het tot een conclusie komt, dan maakt het een verslag groot genoeg om 14 pagina’s in Google Docs mee te vullen. Exclusief de bijgevoegde bronnenlijst.
Stap 2 – Versies
Dit is het moment dat je een onderzoek hebt. Dit exporteren we naar Google Docs en daar kunnen we het onderzoek goed doorlezen en zelfs iets aanpassen. AI maakt nog steeds fouten, dus het is perfect dat we nog even er goed doorheen kunnen lezen en aanpassingen kunnen maken. Voor mij is het gewoon een context onderzoek, dus voor mij maakt het niet meteen uit.
Het onderzoek dat ik heb laten doen is over Angular vs React, maar het onderzoek dat is gedaan is niet gedaan over de meest huidige versies. Gemini had React gevonden op versie 19.0 waar we nu (op moment van schrijven) op 19.2 zitten. Voor Angular vond Gemini Angular 19 waar hij Angular 21 had moeten vinden. Het was logisch dat Angular 21 niet gevonden was, want die was pas een paar dagen terug uitgekomen.
Ik heb daarom de stappen herhaald voor een nieuw onderzoek met deze keer een focus op de nieuwere versies. Dit doe je gewoon door een onderzoek te laten genereren en de versies specifiek te benoemen. Hierdoor krijg je een gerichter onderzoek. Omdat mijn onderzoeken uiteindelijk mij moeten overtuigen kunnen nieuwe features voor beveiliging, architectuur, etc. belangrijk zijn voor de overweging.
Vervolgens heb je misschien de onderzoeken gelezen, misschien ook niet. Het zijn vrij uitgebreide onderzoeken en zelfs het grote gedeelte van de bronnen is bijgevoegd in APA-stijl. Nu moeten we het omzetten in een samenvatting van de twee onderzoeken.
Stap 3 – NotebookLM
Ga naar Google’s NotebookLM, meld je aan en maak een nieuwe notebook. Nu kun je bronnen toevoegen en je selecteert je Google Drive. Selecteer hier je twee onderzoeken en importeer deze.
Nu kun je er van alles mee doen. Je kan het verschillende rapporten laten maken, een audio overzicht, een infographic, diapresentatie en nog veel meer. Zelfs video’s over het onderwerp. En dat allemaal in een heleboel talen, lang of kort en zelfs met aangepaste instructies.
Mijn onderzoeken waren nog een beetje gericht op een applicatie voor verenigings beheer en administratie. Dus mijn documenten gingen daar heel erg naartoe. Ik heb hieronder er een paar van toegevoegd:
Dit is een video die het heeft gemaakt. Dit lijkt het te doen met Nano Banana en text to speech. Ik heb gevraagd naar een Nederlandse uitlegvideo en dan krijg ik dit resultaat.
Ik heb ook een audio bestand laten maken. Hierin heb ik gekozen voor de debat optie en daardoor representeren de presentatoren elk een framework.
Na alle bestanden en onderzoeken ben ik nog in twijfel, want ik kan met beide kanten veel doen. Wat nu nog mijn gedachten doet balanceren is React Native. Als ik een app wil ontwikkelen voor het programma waarbij in mijn geval leden bij een deel van of bij alle functionaliteiten kunnen, dan is een codebase met React Native handig als ik al React gebruik. Ik zou met Angular kunnen werken als ik Ionic + Capacitor gebruik, maar de performance hiervan is echt niet on par met iets als React Native, Flutter of Kotlin. Dit zijn alleen wel weer dingen die ik dan opnieuw moet gaan leren.
Maar dan hoor ik je zeggen, als je toch al AI omarmt en dingen voor je laat ontwikkelen, waarom zou je het dan niet de app laten maken? Dit kan, zeker, maar als ik een app wil maken dan moet ik ook begrijpen wat ik maak en wat de AI schrijft. Development met Angular en React kan ik met AI doen, maar dit doe ik alleen omdat ik het begrijp en dus de AI kan controleren. Dit punt zal ik dus wel echt later moeten oppakken, want ik wil perse een app erbij maken.
Stap 4 – UI libraries
Los van de app, omdat ik het wiel niet opnieuw wil uitvinden, heb ik ook een onderzoek laten doen naar UI libraries voor Angular. Wat ik van React heel fijn vind is dat shadcn/ui bestaat. Dit is een component library met een aantal blokken die je gratis kan gebruiken en het is open source. Het is echter niet gemaakt voor Angular, dus wat zijn de alternatieven?
Gemini heeft onderzoek gedaan en kwam met een aantal suggesties, onder andere ook suggesties die ik nog niet gevonden had. Ik heb een tijdje al mijn onderzoek gedaan naar UI libraries voor Angular, maar dit onderzoek heeft mijn ogen geopend.
Eerder kwam ik alleen langs SpartanNg. Dit was een geweldige verzameling components, maar was eerder altijd nog te onderontwikkeld. Nu lijkt het erop dat het bijgebeend is met schadcn/ui. En dan zijn er nog anderen, zoals ZedUI, dit is net als SpartanNg een kopie van schadcn/ui. Ze verschillen weinig wat componenten betreft en hebben beiden bijna geen ready-made ‘blocks’ (templates om te importeren). Ook is er nog
Dan kwam het nog met TailAdmin. Dit is een complete admin dashboard template (een “Macro-Block” oplossing) gebouwd met Tailwind CSS en Angular. Het heeft voornamelijk templates en niet echt veel components, maar voor de belangrijkste dingen heeft het een template waardoor je wel een heleboel in elkaar kan zetten.
Uiteraard mocht tot slot Material UI niet ontbreken. Ook voor Angular is een Material library en dit kun je gebruiken binnen je webapp of bijvoorbeeld als je met Ionic en Capacitor een app ontwikkelt.
Van al deze dingen ga ik waarschijnlijk met SpartanNg, maar ik houdt ook ZedUI in de gaten. Beiden houden schadcn/ui goed bij en ik houdt heel erg van die stijl voor mijn UI.
Stap 5 – Next Steps
De volgende stap is om de applicatie te maken. Dit gaat een uitdaging worden, want hoe wil ik dit doen. Ga ik gewoon beginnen met de backend en daarna de frontend, ga ik eerst een frontend bouwen met mock data en dan de backend bouwen, of ga ik de backend en frontend tegelijk bouwen? Doe ik dit in mono-repo stijl of houdt ik alles gescheiden? Hoe ga ik het testen? Hoe ga ik deployen? Allemaal dingen waar ik nog over na moet denken. Dit kom later nog wel op mn website. Voor nu ga ik maar eens nadenken over wat ik heb staan en ik ga eens nadenken waar ik wil beginnen.
Geef een reactie