Inleiding
Bij het maken van onze casus voor regterschotracing komt er ook frond-end van pas waarbij we een front-end framework voor gebruiken. Omdat niet iedereen hier nog bekend mee is en we niet zeker weten welke opties er eigenlijk zijn en welke het beste werken gaan we hier een onderzoek naar doen. De hoofdvraag van dit onderzoek gaat als volgt: Welke front-end framework past het best bij ons project? Om tot een antwoord te komen tot de hoofdvraag heb ik ook een aantal deelvragen verzonnen. Deze deelvragen zijn: Welke front-end frameworks zijn er al? Wat zijn de criteria? Wat zijn de resultaten van de prototypes en als laatste hoe scoren de frameworks op de criteria. Na het beantwoorden van de deelvragen ga ik in de conclusie de hoofdvraag beantwoorden waar ik de deelvragen bij betrek.
Welke front-end frameworks zijn er?
Door te zoeken op het internet heb ik de meeste voorkomende frameworks genoteerd. Dit zijn:
- Angular
Angular is de front-end framework van google. Deze wordt gebruik onder andere door microsoft en en gmail en heeft zo'n 83.000 github stars.
- Vue.js
Vue.js is een java framework. Deze wordt gebruikt door Nintendo en Adobe. en heeft 198.000 github stars
- React
React is gemaakt door facebook en wordt gebruikt door discord en en instagram. In tegenstelling to vue is react een library en is handiger voor single page aplicaties.
- jQuery
jQuery is het minst bekend van deze frameworks maar kwam ik nog steeds vaak tegen dus heb ik er voor gekozen om dit ook als een optie te zien. Het wordt gebruikt door onder andere walt disney
Deze 4 kwam ik tegen op de meeste websites en zijn ook de meest gebruikte. Deze neem ik dus mee naar de volgende deelvragen.
Welke criteria gaan we gebruiken voor het bepalen van de framework
Om te bepalen welke framework het best past bij dit project stel ik een aantal criteria op. Op basis van deze criteria geef ik de framework een score tussen de één en tien. Sommige criteria zullen sterker weging omdat deze belangrijker zijn
| Code | Wegingsfactor | Criteria |
|---|---|---|
| CR1 | 2x | Documentatie |
| CR2 | 3x | Ervaring |
| CR3 | 1x | Prestatie |
| CR4 | 3x | Prototype |
| CR5 | 1x | Onderhouden |
- Deze criteria zal ik even kort toelichten:
- CR1 gaat over hoeveel er te vinden is op het internet. Is de documentatie up to date en hoeveel kun je er op stackoverflow over vinden.
- CR2 staat voor hoeveel ervaring wij met het framework hebben. Hoe bekend zijn we er mee en hebben we er al eerder mee gewerkt.
- CR3 gaat over de snelheid van de framework
- CR4 is voor hoe makkelijk het is om de prototype te maken
- CR5 is hoe vaak de framework wordt geüpdate en onderhouden
Wat zijn de resultaten van de prototypes
Om te kijken welke front-end framework het fijnst is maak ik met elke framework een dynamische lijst op basis van JSON.
React
Het maken van de react prototype ging erg gemakkelijk. Ik heb react nog nooit eerder gebruikt en heb de eerste beste video gebruikt om mijn react project op te zetten. Van daaruit heb ik verder gezocht naar een dynamische lijst en kon ik ook gelijk weer de eerste video gebruiken. Het maken van de prototype ging dus zonder problemen en werkte eigenlijk meteen.
Code
import React from "react";
import ReactDOM from 'react-dom';
const state = {
dashboards: [
{id: 1, car: "BMW", driver: "Erik"},
{id: 2, car: "AUDI", driver: "Wijnand"},
{id: 3, car: "Porsche", driver: "Thomas"}
]
}
const {dashboards} = state;
const element =
<div>
<h1>Dashboards</h1>
<ul>
{dashboards.map((dashboards) => {
return <li> Auto: {`${dashboards.car}`} Coureur: {`${dashboards.driver}`} <button>kijk mee</button></li>
})}
</ul>
</div>
ReactDOM.render(element,document.getElementById("root"));
Resultaat
jQuery
In tegenstelling to React kon ik over jQuery niet zoveel vinden. Er bestonden geen goeie duidelijke video's hoe ik een project moest opzetten met jQuery ook duurde het even tot ik het antwoord voor mijn oplossing had gevonden
Code
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<title>prototype</title>
<script src="jquery.js" type ="text/javascript"></script>
</head>
<body>
<h1>Dashboard</h1>
<ul id="ul"></ul>
</body>
</html>
<script>
$(function(){
$.ajax({
type : 'GET',
url : 'dashboard.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result){
let buffer="";
$.each(result, function(index, val){
for(let i=0; i < val.length; i++){
let item = val[i];
console.log(item.name);
buffer+=" <li>Auto: "+item.car+" Coureur: "+ item.driver+"</li><button>Kijk mee</button>";
}
$('ul').html(buffer);
});
}
});
});
</script>
Resultaat
Hoe scoren de frameworks op de criteria
React
| Code | Aspect | Cijfer | Toelichting | Bron |
|---|---|---|---|---|
| CR1 | Documentatie | 7 | Omdat React ongeveer de grootste front-end framework is kun je op onder andere stackoverflow genoeg hulp vinden maar omdat het zo snel groeit wordt niet alles gedocumenteerd | https://www.sam-solutions.com/blog/best-frontend-framework/#3 |
| CR2 | Ervaring | 7 | Er zijn een 2 teamleden die al eerder gewerkt hebben met react maar er geen grote fan van zijn | - |
| CR3 | Prestatie | 8 | React is één van de snelste frameworks door het gebruik van de virtual DOM | https://jelvix.com/blog/is-react-js-fast#:~:text=Engineering-,React.,optimal%20choice%20for%20interactive%20design. |
| CR4 | Prototype | 9 | Omdat er genoeg hulpbronnen bestaan kon ik de prototype snel maken | |
| CR5 | Onderhouden | 9 | React is wordt erg vaak geupdate | https://www.sam-solutions.com/blog/best-frontend-framework/#3 |
jQuery
| Code | Aspect | Cijfer | Toelichting | Bron |
|---|---|---|---|---|
| CR1 | Documentatie | 5 | De documentatie van de DOM is outdated | https://www.monocubed.com/blog/best-front-end-frameworks/ |
| CR2 | Ervaring | 3 | Niemand in het projectgroep heeft ervaring met jQuery er zijn er wel een aantal die een beetje kennis hebben van javascript | - |
| CR3 | Prestatie | 3 | Omdat jQuery relatief oud is is de performance nogal laag | https://www.sam-solutions.com/blog/best-frontend-framework/#3 |
| CR4 | Prototype | 5 | In tegenstelling tot react kon ik niet zoveel vinden als jQuery en duurde dus ook een stuk langer | - |
| CR5 | Onderhouden | 5 | API van jQuery is nogal outdated en jQuery wordt niet vaak geupdate | https://www.sam-solutions.com/blog/best-frontend-framework/#3 https://www.monocubed.com/blog/best-front-end-frameworks/ |
Bronnen
https://www.ideamotive.co/blog/best-frontend-frameworks
https://www.sam-solutions.com/blog/best-frontend-framework/
https://www.telerik.com/blogs/top-6-frontend-frameworks-2022
https://www.monocubed.com/blog/best-front-end-frameworks/