Auteurs:
Naam | Studentnummer |
|---|---|
| 655269 |
Docenten
Naam | Functie |
|---|---|
| Skills begeleider | |
Procesbegeleider |
Klas | ITA-OOSE-A |
|---|---|
Groepsnaam | Smalltalk |
Course | OOSE |
Datum |
|
Versie |
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.
...
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
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
Figuur 1: Resultaat react
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 Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<!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
Figuur 2: Resultaat jQuery
Hoe scoren de frameworks op de criteria
...