...

Angular is het front-end framework van Google. Deze wordt onder andere gebruikt door Microsoft en Gmail. Angular heeft zo'n 83.000 GitHub stars.  Angular maakt gebruikt van typescript(Angular, z.d.)

• Vue.js

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

• React

React is gemaakt door Facebook en wordt gebruikt door Discord en en Instagram. In tegenstelling tot Vue.js is React een library en is over het algemeen beter voor single page applicaties.

...

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

...

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 biedaanbied. Voor bijna elk component dat Angular biedt 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 } 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

figuur 5: resultaat angular google charts

Hoe scoren de frameworks op de criteria

...

...

Vue.js

...

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 Angular en reactReact. Dit komt omdat de syntax op vue 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 React en Angular zitten maar 2 punten verschil. Het voordeel van react React is dat het veruit de 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 Brouwers aankloppen. Een ander voordeel is dat angular Angular een integratie heeft voor google charts Google Charts die als winnaar uit het onderzoek van de graphs komt Onderzoeksverslag Visuele Dataweergave. Daarom is Angular het antwoord op onze hoofdvraag: Welke "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/

...