De stack van mijn ebook reader app (dev blog #1)

april 07, 2025

Introductie

In deze serie neem ik je mee in de ontwikkeling van mijn ebook reader app, waar ik al een tijdje mee bezig ben. Ik ga uitvoerig schrijven over de keuzes ik heb gemaakt en tegen welke problemen ik ben aangelopen tijdens de ontwikkeling. Het onderwerp van vandaag: de stack. Welke database, programmeertaal en libraries gaat de app gebruiken?

Het is de meest fundamentele vraag van elke developer die aan een project begint. Na veel wikken en wegen heb ik uiteindelijk de eerste keuze kunnen maken: de app gaat React Native gebruiken. Dat is een library waarmee native apps gebouwd kunnen worden, gebaseerd op het populaire React.

React (Native)

React is een library waarmee web-apps en websites op een modulaire manier ontwikkeld kunnen worden. Het is oorspronkelijk ontwikkeld door Facebook en heeft een enorme community achter zich, wat het een veilige en toekomstbestendige keuze maakt.

React Native is de library waarmee (mobiele) apps gebouwd kunnen worden. In de keuze hiervoor speelde ook mee dat het cross platform is, waardoor je maar één project hoeft te onderhouden en het tegelijk naar meerdere platforms kan builden. Super handig!

Voordat ik hieraan begon, had ik nog maar weinig ervaring met React. Ik heb er in het verleden ooit mee gewerkt, maar hoe de component lifecycle, state, hooks en reactivity effects en andere concepten precies werkte, wist ik nog niet. Door het volgen van de React Native tutorial en het bestuderen van de PizzaApp (een standaard-app afkomstig uit het voorbeeldproject) kreeg ik een beter overzicht en kennis van de fundamenten, wat vervolgens de aanzet heeft gevormd voor de ontwikkeling van de app.

Database, React Navigation en de andere keuzes

De eerste en misschien wel belangrijkste stap is dus gezet. Nu rest de vraag: welke andere libraries gaan er gebruikt worden?

Voor de database heb ik gekozen voor SQLite. Dat is een lichte, lokale database met lees- en schrijf-mogelijkheden, opgeslagen in één bestand. Ik koos de Drizzle ORM library om daarmee te communiceren.

Deze ORM, oftewel Object Relational Mapping, maakt het schrijven en uitvoeren van leesbare SQL queries en migrations een peulenschil. Ook biedt het support voor database migrations, waardoor de database structuur makkelijk aangepast en uitgebreid kan worden. Wel zo handig.

Voor de navigatie heb ik gekozen voor React Navigation. Met deze library kan ik gemakkelijk een navigatie opzetten die het navigeren van A naar B regelt, inclusief een mooie top- en bottom navigation bar. Bovendien is het ook nog heel uitbreidbaar en aanpasbaar, wat de keuze hiervoor alleen maar verder heeft versterkt.

Om snel een prototype te kunnen ontwikkelen, heb ik de UI library React Native Paper gekozen, een Material Design-library dat componenten biedt voor bijna alles wat je kunt wensen. Hierdoor kan ik snel mooie layouts maken, zonder dat ik mij druk hoef te maken over het ontwerp van de componenten.

Omdat ik een voorkeur heb voor strongly typed languages en JavaScript een weakly typed language is, heb ik als programmeertaal gekozen voor TypeScript. Dat is een superset van JavaScript met typing. Hierdoor kan ik veilige en robuuste code schrijven, die goed te onderhouden is.

De andere libraries heb ik tijdens de ontwikkeling van de componenten zelf gekozen. Wel heb ik vooraf besloten om de pagina's in een WebView te renderen, aangezien CSS standaard ondersteuning biedt voor het opdelen van inhoud in kolommen en de inhoud van een ebook opgedeeld is over meerdere HTML-pagina's. In een andere post ga ik daar meer over uitweidden.

Conclusie

Kortom, de stack die ik heb gekozen is als volgt:

  • TypeScript
  • React Native
  • Drizzle ORM (SQLite database)
  • React Navigation
  • React Native Paper
  • React Native WebView

Dit was het voor nu. Bedankt voor het lezen en ik zie je graag bij het volgende artikel!