Frontend en backend keuzes
In dit hoofdstuk kun je de criteria vinden welke wij gebruikt hebben om frameworks en libraries te kiezen.
Deze tabellen zijn met toelichting te lezen in ons verantwoordingsdocument.
Talen en frameworks
| Tool | Naam | Omschrijving |
|---|---|---|
| LLM Manager | Ollama | Een LLM-manager die het eenvoudig downloaden en runnen van Large Language models via de command line mogelijk maakt. Uitgebreide integratie met het LangChain framework via ChatOllama. |
| LLM framework | LangChain | Een open-source LLM-framework beschikbaar voor Javascript en Python. LangChain biedt veel opties voor RAG-taken, zoals document loaders en embedding models. |
| Programmeertaal | Python | Een veelzijdige programmeertaal voor machine learning en AI-taken. |
| In-memory data store | Redis | Een key-value database, cache en vector store voor het opslaan van quizzen en vectoren uit cursusmaterialen. |
| API specificatie | OpenAPI/Swagger | Tools voor gestructureerd specificeren en visualiseren van API-endpoints. |
| Queue systeem | Celery | Een queue systeem om de backend responsief te houden. |
| Queue systeem dashboard | Celery flower | Een dashboard voor het monitoren van de Celery queue. |
| Containerisatietool | Docker | Containerisatietool voor het platform-agnostisch uitrollen van applicaties. |
Backend-framework
| Frameworks | Python | RESTful API | Data validation | Swagger integratie | Unittest ondersteuning | Queuesysteem ondersteuning | Uitgebreide documentatie | WebSockets of Server-Side Events (SSE) |
|---|---|---|---|---|---|---|---|---|
| Django REST | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Flask REST | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ |
| FastAPI | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Pyramid | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| Falcon | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ✅ |
| Bottle | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ |
| Eve | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ |
| Sanic | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tornado | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| Hug | ✅ | ✅ | ❌ | ❌ | ✅ | ❌ | ✅ | ❌ |
| TurboGears | ✅ | ✅ | ✅ | ❌ | ✅ | ❌ | ✅ | ❌ |
Op basis van deze vergelijking hebben we gekozen voor FastAPI.
Frontend-framework
| Frameworks | SPA | Uitgebreide documentatie |
|---|---|---|
| Vue.js | ✅ | ✅ |
| React | ✅ | ✅ |
| Angular | ✅ | ✅ |
| Svelte | ✅ | ❌ |
| Solid | ✅ | ❌ |
| Lit | ✅ | ❌ |
| Qwik | ✅ | ❌ |
| Ember.js | ✅ | ❌ |
Op basis van deze vergelijking en op basis van de bestaande kennis binnen onze groep, hebben we gekozen voor React.
CSS-framework
Om te helpen de styling sneller te kunnen bouwen hebben we enkele CSS-frameworks bekeken:
| Bootstrap | Material UI | Radix UI | shadcn | |
|---|---|---|---|---|
| Versie | 5.3.3 | 6.1.5 | Oktober 1, 2024 | August 2024 |
| Responsive | ✅ | ✅ | ✅ | ✅ |
| React-ondersteuning | ⚠️ (Middels React Bootstrap) | ✅ | ✅ | ✅ |
| Customization opties | Kleur, fonts | Kleur, fonts | Accentkleur, radius, schaal | Kleur, radius |
| Customization methode | Variable overrides middels Sass files | Theme overrides (tool: mui-theme-creator), of global CSS overrides | Via playground | CSS variabelen of Tailwind CSS utility classes |
| Menu bar (zoals Brightspace) | ✅ (Navbar) | ✅, (App bar) | ✅, (Navigation Menu) | ✅, (Navigation Menu) |
| Card | ✅ | ✅ | ✅ | ✅ |
| Breadcrumbs | ✅ | ✅ | ❌ | ✅ |
| Tree view | ❌ | ✅ | ❌ | ❌ |
| Visuele gelijkenis met Brightspace (out of the box) | ✅ | ⚠️ (In zekere mate) | ❌ | ❌ |
Op basis van deze vergelijking hebben we gekozen voor Material UI.