Auteurs:

Docenten

Klas

ITA-OOSE-A

Groepsnaam

Smalltalk

Course

OOSE

Datum

Versie

Inleiding

Bij het maken van onze casus voor regterschotracing Regterschot Racing komt er ook frondfront-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. Ook zal het onderzoek duidelijkheid geven over welk framework het beste gaat werken De hoofdvraag van dit onderzoek gaat als volgt: Welke Welk 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  resultaten van de prototypes en als laatste hoe scoren de frameworks op de criteria. Na  Na het beantwoorden van de deelvragen ga ik in de conclusie de hoofdvraag beantwoorden waar ik de deelvragen bij betrek.

...

Door te zoeken op het internet heb ik de meeste voorkomende frameworks genoteerd. Dit zijn:

• Angular

Angular is de het front-end framework van googleGoogle. Deze wordt gebruik onder andere gebruikt door microsoft en en gmail en heeft zo'n 83.000 github stars. Microsoft en Gmail.  Angular maakt gebruikt van typescript(Angular, z.d.)

• Vue.js

Vue.js is een java Java framework. Deze wordt onder andere gebruikt door Nintendo en Adobe.  en heeft 198.000 github starsVue.js is een soort uitbreiding op react

• React

React is gemaakt door facebook Facebook en wordt gebruikt door discord Discord en en instagramInstagram. In tegenstelling to vue is react tot Vue.js is React een library en is handiger over het algemeen beter voor single page aplicatiesapplicaties.

• jQuery

jQuery is het minst bekend van deze frameworks maar . Echter kwam ik deze 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 disneyWalt 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.

...

Deze criteria zal ik even kort toelichten:

• CR1 gaat Gaat over hoeveel er te vinden is op het internet. Is de documentatie up to date en hoeveel kun je er op stackoverflow sites zoals Stackoverflow over vinden.?
• CR2 staat 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 het framework wordt geüpdate geüpdatet en onderhouden.

Wat zijn de resultaten van de prototypes

Om te kijken welke front-end framework het beste bij ons past maak ik met elke framework een dynamische lijst op basis van JSON. 

React

Het maken van het 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. Vanuit daar heb ik verder gezocht naar een dynamische lijst en kon ik ook gelijk weer de eerste video gebruiken. Het maken van het 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

Image Added

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

<!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

Image Added

Figuur 2: Resultaat jQuery

 Vue.js

Het duurde even tot ik de syntax van Vue.js begreep. Dit komt vooral omdat het niet op iets lijkt wat ik al eerder gebruikt heb. Het duurde daarom relatief gezien best lang om dit voor elkaar te krijgen. Echter, omdat Vue.js een erg populaire framework is, kon ik genoeg hulp vinden op het internet.

<script>
export default {
  data(){
    return{
      "dashboards": [
        {
          ID: 1,
          car: 'BMW',
          driver: 'Erik'
        },
        {
          "ID": 2,
          "car": "AUDI",
          "driver": "Wijnand"
        },
        {
          "ID": 3,
          "car": "Mercedes",
          "driver": "Thomas"
        }
      ]
    }
  }
}
</script>
<template>
  <h1>Dashboards</h1>
  <ul>
  <li v-for="(dashboard,index) in dashboards"  :key="dashboard.car">Auto: {{dashboard.car}} Coureur: {{dashboard.driver}} <button>kijk mee</button></li>
  </ul>
</template>

Resultaat

Image Added

figuur 3: resultaat Vue.js

 Angular

Het duurde even tot ik de beginnende kneepjes van Angular in de hand had. Dit kwam wel vrij snel door de grote hoeveelheid documentatie die Angular aanbied. Voor bijna elk component dat Angular aanbiedt zijn er tientallen voorbeelden over hoe je het zou kunnen gebruiken. Hierdoor was het maken van het prototype zeer gemakkelijk en vanzelfsprekend. Het enige wat iets lastig was, was het feit dat het maken van pagina's iets uitgebreider was dan met bijvoorbeeld Vue.js.

<div class="container">
  <h1> Dashboards </h1>
    <ul *ngFor="let dashboard of dashboards">
      <li> Auto: {{ dashboard.car }} coureur: {{ dashboard.driver }} <button>kijk mee</button></li>
    </ul>
</div>

import { Component } from '@angular/core';
import dashboardData from './json/dashboard.json';
interface dashboard {
  ID: Number;
  car: String;
  driver: String;

}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'prototype';
  // @ts-ignore
  dashboards: dashboard[] = dashboardData;
}

Resultaat

Image Added

figuur 4: resultaat angular

Prototype angular + google charts

Omdat angular ook een google charts API integratie hebben we hier ook een prototype voor gemaakt

import { Component, OnInit } from '@angular/core';
import {FormControl} from "@angular/forms";


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  tabs = ['First', 'Second', 'Third'];
  selected = new FormControl(0);

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }

}

<div>
  <button mat-raised-button
          class="example-add-tab-button"
          (click)="addTab(selectAfterAdding.checked)">
    Add new tab
  </button>
  <mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
</div>

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="First" style="height: 100%">
    <div class="example-boundary">
      <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
        <img src="https://lh3.googleusercontent.com/_eWd5RuZfGPlgVcNzsG4S352TTXbZVoHsJju1t2_jFattGC-JaLrRTe02L7tBfQacQ=w600-rwa" height="100%" width="100%">
      </div>
    </div>
  </mat-tab>
  <mat-tab label="Second" >Content 2</mat-tab>
  <mat-tab label="Third" >Content 3</mat-tab>
</mat-tab-group>

Resultaat

Image Added

figuur 5: resultaat angular google chartsImage RemovedImage Removed

Hoe scoren de frameworks op de criteria

React

...

jQuery

...

Vue.js

Angular

Conclusie

Door de cijfers bij elkaar op te te tellen en de wegingsfactor toe te passen hebben we een shortlist opgesteld.

Je ziet al snel dat één framework al door de mand zakt. Dit is jQuery. Dit komt omdat jQuery relatief gezien erg oud is. In vergelijking met de andere frameworks kun je ook niet heel veel vinden. Vue.js heeft net iets minder punten dan Angular en React. Dit komt omdat de syntax op Vue.js niet lijkt op iets dat we eerder gebruikt hebben en het dus ook even gaat duren voor dat we hier bekend mee raken. Tussen React en Angular zitten maar 2 punten verschil. Het voordeel van React is dat het veruit het grootste framework is en je hier dus ook het meeste hulp bij kan vinden. Het voordeel van Angular is dat het meest lijkt op de technieken waar we bekend mee zijn en hier dus snel mee aan de gang kunnen. Ook hebben we hier een workshop over gehad en kunnen we bij eventuele vragen bij Meron Brouwers aankloppen. Een ander voordeel is dat Angular een integratie heeft voor Google Charts die als winnaar uit het Onderzoeksverslag Visuele Dataweergave. Daarom is Angular het antwoord op onze hoofdvraag: "Welk front-end framework past het best bij ons project?"

Bronnen

Angular. (n.d.). Angular. Retrieved November 23, 2022, from https://angular.io/

endoflife.date. (n.d.). Vue | endoflife.date. Retrieved November 23, 2022, from https://endoflife.date/vue

Patel, J. (2021, November 24). 10 Best Front end Frameworks for Web Development in 2022. Monocubed. https://

...

www.monocubed.com/blog/best-front-end-frameworks/

Jelvix. (n.d.). What Makes React.js Fast: Tools to Optimize the Performance. Retrieved November 23, 2022, from https://jelvix.com/blog/is-react-js-fast

Sakovich, N. (2021, December 10). Best Frontend Frameworks for Web Development of 2021–2022. SaM Solutions. https://www.sam-solutions.com/blog/best-frontend-framework/