nlpmeijstage.files.wordpress.com€¦ · Web viewOmdat elk framework zijn voor- en nadelen heeft,...

Fancy RorixOnderzoek naar framework

Document: Onderzoek naar frameworksAuteur: Nick van der MeijDatum: 19-9-2014Plaats: Rosmalen

Versie: 1.2

Opdrachtnemer: Nick van der MeijOpdrachtgever: Osman YucekayaStagebegeleider: Osman Yucekaya

Onderzoek naar frameworks – pagina 1

InhoudVersiebeheer..........................................................................................................................................3

Inleiding..................................................................................................................................................4

Onderzoeksvragen.................................................................................................................................5

Welke eisen stelt Rorix aan het gekozen framework?............................................................................6

Inleiding..............................................................................................................................................6

Eisen...................................................................................................................................................6

Welke frameworks zijn er allemaal beschikbaar?..................................................................................7

Ext JS...................................................................................................................................................7

jQ Widgets..........................................................................................................................................7

Telerik PHP UI/Kendo UI.....................................................................................................................7

Wijmo.................................................................................................................................................7

Overige frameworks...........................................................................................................................8

Wat zijn de voor- en nadelen van alle gevonden frameworks?..............................................................9

Ext JS.................................................................................................................................................10

jQ Widgets........................................................................................................................................11

Telerik PHP UI/Kendo UI...................................................................................................................12

Wijmo...............................................................................................................................................13

Vergelijking Frameworks......................................................................................................................14

Breakdown sheet..............................................................................................................................14

Functionaliteit..................................................................................................................................15

Uiterlijk.............................................................................................................................................15

Gebruiksvriendelijkheid....................................................................................................................15

Codebase gebaseerd op customization............................................................................................15

Codebase gebaseerd op initialisatie van widgets.............................................................................15

Codebase gebaseerd op consistentie...............................................................................................15

Conclusie en aanbeveling.....................................................................................................................16

Bijlage 1................................................................................................................................................17


VersiebeheerVersienummer Datum van release0.1 12-9-20141.0 15-9-20141.1 19-9-20141.2 22-9-2014


InleidingDit document is geschreven naar aanleiding van de stageopdracht “Fancy Rorix”. Het doel van de stageopdracht is het verbeteren van de admin (de CMS van Rorix B.V.) door gebruik te maken van een framework die de admin kan voorzien van consistentie in de code en een verhoogd gebruiksvriendelijkheidgehalte.

Om een goed framework te kiezen moet er eerst onderzocht worden welke frameworks er zijn en welke er voldoen aan de eisen van Rorix. Deze punten worden in dit document beschreven in de vorm van een hoofdvraag en een aantal deelvragen.

Meer informatie over de stageopdracht is te vinden in het Plan van Aanpak.


OnderzoeksvragenVoor dit onderzoek is een hoofdvraag geformuleerd die als volgt luidt:

Welk framework kan Rorix het beste gebruiken om hun admin te verbeteren?

Om deze vraag goed te beantwoorden zijn er drie deelvragen opgesteld:

Welke eisen stelt Rorix aan het gekozen framework? Welke frameworks zijn er allemaal beschikbaar? Wat zijn de voordelen en nadelen van alle gevonden frameworks?


Welke eisen stelt Rorix aan het gekozen framework?InleidingOmdat elk framework zijn voor- en nadelen heeft, is het belangrijk om te weten wat de eisen zijn voordat we gaan kijken naar de framework. Het kan namelijk mogelijk dat de eisen die Rorix stelt aan het framework anders zijn dan de voor- en nadelen van het framework. Om deze eisen duidelijk te krijgen is er een requirementsanalyse document met alle eisen met betrekking tot de stageopdracht. Dit document kan gevonden worden in bijlage 1.

EisenDe eisen die voor dit onderzoek van belang zijn, zijn de volgende:

Het framework moet beschikking hebben tot modals (popup windows met functionaliteiten) Het framework moet de gebruiksvriendelijkheid verhogen. Er moeten meerdere modals tegelijk geopend kunnen worden. Ook moeten deze modals

kunnen bewegen, geresized en geminimaliseerd worden. Het framework moet een uitgebreid assortiment van widgets hebben. Het framework kan toegepast worden met de huidige structuur van de code. Het framework moet nog actief ontwikkeld worden, waardoor het niet snel gaat verouderen

en nog actief uitgebreid wordt. Het framework moet een duidelijke en uitgebreide API hebben. Het framework moet een uitgebreide gebruikers community hebben waardoor hulp vinden

over een bepaald probleem niet moeilijk is. Het framework moet met JQuery overweg kunnen.


Welke frameworks zijn er allemaal beschikbaar?Om een goed beeld te krijgen welk framework het beste is om te gebruiken, is het slim om eerst te kijken welke frameworks er beschikbaar zijn. Omdat er heel wat frameworks zijn, zijn hier alleen de frameworks opgenomen die aan de eisen voldoen. De frameworks die bij de voorselectie af zijn gevallen omdat ze niet aan de globale eisen voldeden heb ik ook opgenomen onder het sub-kop “Overige frameworks” met een argumentatie waarom deze frameworks niet de voorkeur hebben gekregen.

Ext JSExt JS is een framework dat ontwikkeld is door Sencha en is volledig geschreven in javascript. Ext JS is voorzien van heel veel voorgeprogrammeerde widgets die gemakkelijk gecustomized kunnen worden, waardoor je er van alles mee kan doen. Ook is het Object Oriëntated (OO) gemaakt waardoor je eigen widgets kan maken die overerven van originele widgets.

Website: http://www.sencha.com/products/extjs/

jQ WidgetsjQ Widgets is een javascript framework met veel widgets die gebruikt kunnen worden in web applicaties. Ook heeft het framework functionaliteiten met betrekking tot MySQL en PHP en een tool om het uiterlijk van de widgets zelf te bepalen.

Website: http://www.jqwidgets.com/jquery-ui-widgets-toolkit/

Telerik PHP UI/Kendo UITelerik heeft 2 verschillende frameworks, namelijk PHP UI en Kendo UI. PHP UI gebruikt PHP om de UI componenten te initialiseren en Kendo UI doet dit met behulp javascript. Beide frameworks hebben een erg uitgebreid assortiment van widgets en tools.

Website: http://www.telerik.com/php-ui of http://www.telerik.com/kendo-ui

WijmoWijmo is een javascript framework wat gebouwd is met behulp van JQueryUI en JQuery mobile. Het bevat meerdere widgets die een website kunnen ondersteunen. Ook is AngularJS geïmplementeerd in het framework.

Website: http://wijmo.com/


http://wijmo.com/

http://www.telerik.com/kendo-ui

http://www.telerik.com/php-ui

http://www.jqwidgets.com/jquery-ui-widgets-toolkit/

http://www.sencha.com/products/extjs/

Overige frameworksHieronder is een lijstje te vinden met de frameworks die niet aan de eisen voldeden en/of andere complicaties hadden.

dHTMLx ( http://dhtmlx.com/ )

Om te beginnen zijn de regels rondom de licentie een beetje vaag. Er is een GPL versie maar die heeft niet alle functionaliteiten, en daar bovenop is er ook widgets te koop per stuk. Daarnaast zijn de meeste widgets erg primitief. Er missen functionaliteiten of de functionaliteiten zien er versimpelt uit.

Primefaces ( http://www.primefaces.org )

Primefaces heeft veel widgets die goed gebruikt kunnen worden. Er is alleen 1 nadeel, support voor meerdere modals is er niet. Aangezien dit één van de eisen is, valt deze library dus af.

W2ui ( http://w2ui.com )

Om te beginnen is het assortiment van w2ui qua widgets erg beperkt. Daarnaast zijn de modals die ze gebruiken niet heel erg functioneel. Er kunnen geen modals tegelijk geopend worden, de modals kunnen niet geresized worden of geminimaliseerd/gemaximaliseerd.

GetUIKit ( http://www.getuikit.com )

GetUIkit is meer een css library dan een widget framework. Hierdoor zijn er niet veel widgets maar zien de widgets die er zijn er wel fancy uit. Echter, de functionaliteit van de modals is erg mager. Functionaliteiten zoals resizen, meerdere modals openen, maximaliseren en minimaliseren missen.


http://www.getuikit.com/

http://w2ui.com/

http://www.primefaces.org/

http://dhtmlx.com/

Wat zijn de voor- en nadelen van alle gevonden frameworks?Om een goed beeld te krijgen van de vier potentiele frameworks die zijn gevonden in de vorige deelvraag, gaan we deze frameworks nu beter bekijken op drie fronten: Functionaliteiten, Gebruiksvriendelijkheid en Codebase.

Bij functionaliteiten gaan we kijken wat er allemaal qua functionaliteiten beschikbaar is in het framework en bij gebruikersvriendelijkheid gaan we kijken hoe soepel alles is in gebruik. Deze twee criteria gaan we doen met behulp van de demo’s op de website van het framework.

Als laatst gaan we kijken hoe de codebase in elkaar zit. Met andere woorden, hoe makkelijk is het om functionaliteiten aan te passen en te initialiseren. Dit wordt gedaan met behulp van de demo’s op de sites (voornamelijk de sourcecode) en door zelf te experimenteren met de gratis versie (als deze er is).


Ext JSFunctionaliteiten

Er is weinig te zeggen over de functionaliteit die Ext JS biedt. Ext JS beschikt over een groot assortiment van widgets. Om dit duidelijk te maken is hier een link naar de demo site: http://dev.sencha.com/ext/5.0.1/examples/index.html

Gebruiksvriendelijkheid

Eigenlijk zijn alle widgets gebruiksvriendelijk. Echter, dit is voornamelijk omdat alle widgets helemaal customizable zijn. Hierdoor is er de mogelijkheid dat de widgets afgestemd kunnen worden aan de wensen en eisen van de eindgebruiker, wat erg nuttig kan zijn.

Codebase

De codebase van Ext JS is erg gestructureerd. Ze gebruiken OOP (Object Oriëntated Programming) om classes van ui componenten te maken die je kunt overerven, veranderen en opslaan. Hierdoor kun je alle widgets en tools customizen naar eigen templates waardoor er makkelijker consistentie kan komen in de code. De leercurve is wel stijl aangezien alles is geschreven in Javascript en OOP. Het initialiseren van componenten is een beetje gecompliceerd maar dit heeft te maken met de MVC (Model-View-Controller)/ MVVM (Model-View-ViewModel) datastructuur die er gebruikt wordt in het framework.

Voordelen

Veel verschillende widgets (meer dan genoeg om alles in de admin te vervangen) die gecustomized kunnen worden naar eigen gebruik.

Modals kunnen geminimaliseerd, gemaximaliseert, geresized en gecustomized worden. Grote gebruikers community. Uitgebreide en duidelijke API. Wordt goed onderhouden met minor patches en bugfixes Kan als zelfstandig systeem gebruikt worden of als support framework (met behulp van

widgets). Je kan linken naar html (door bijvoorbeeld de content van een window te vullen met html). De widgets zijn duidelijk en gebruiksvriendelijk.

Nadelen

Grote leercurve waardoor het leren van het framework moeilijk is.

Samenvatting

Ext JS is heel uitgebreid. Het ziet er verzorgt en duidelijk uit en de gebruiksvriendelijkheid in de demo’s zijn erg goed. Het systeem is multifunctioneel en je kan gebruiken wat je nodig hebt, wat het erg geschikt maakt voor de admin.

De leercurve is erg steil. Dit komt doordat het hele framework is opgezet aan de hand van javascript in combinatie met OOP, MVC en MVVM. Hierdoor wordt javascript op een andere manier gebruikt dan in andere javascript libraries en frameworks, zoals bijvoorbeeld JQuery.


http://dev.sencha.com/ext/5.0.1/examples/index.html

jQ WidgetsFunctionaliteiten

jQ Widgets heeft een uitgebreid assortiment van widgets, maar deze zijn niet heel erg uit te breiden met een eigen inbreng. Veel widgets zijn voorgeprogrammeerd en kun je aan en uit zetten, maar zelf iets customizen is heel veel omschrijf werk.


Alle widgets zijn eigenlijk wel gebruiksvriendelijk. Er is gedacht aan standaard zaken zoals soepele overgangen tussen modals en alles ziet er gewoon fatsoenlijk uit.

Codebase

De codebase is in principe hetzelfde als dat van JQuery. Je koppelt html elementen met een id aan javascript functionaliteiten, waardoor deze functionaliteiten worden uitgevoerd. Hierdoor is het javascript deel erg simpel maar wel veel code om iets te initialiseren, aangezien alles gekoppeld moet worden aan de jQ Widgets (buttons, tabels, divs, etc.).

Voorbeeld: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm?%28arctic%29#demos/jqxwindow/defaultfunctionality.htm

Voordelen

Veel verschillende widgets. Uitgebreide en duidelijke API. Tool om de lay-out te veranderen. Modals kunnen geminimaliseerd, maximaliseert, geresized en gecustomized worden. Wordt goed onderhouden. Kan makkelijk geïmplementeerd worden in het huidige systeem.

Nadelen

Alleen gratis licentie voor non-profit bedrijven. Relatief veel code per widget en functionaliteit.

Samenvatting

jQ Widgets heeft veel verschillende widgets beschikbaar die de admin kunnen verbeteren. Doordat het in javascript is geschreven is het heel makkelijk om widgets aan te roepen. Echter, het opzetten van een widget met functionaliteiten (bijvoorbeeld een modal die kan minimaliseren en maximaliseren) vergt erg veel code. Ook is er alleen een gratis licentie voor non-profit bedrijven, waardoor je een licentie moet kopen om dit framework te kunnen gebruiken.


http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm?(arctic)#demos/jqxwindow/defaultfunctionality.htm

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxwindow/index.htm?(arctic)#demos/jqxwindow/defaultfunctionality.htm

Telerik PHP UI/Kendo UIFunctionaliteiten

Net zoals bij Ext JS zijn de functionaliteiten erg uitgebreid. Ook kunnen de functionaliteiten uitgebreid worden met eigen functies. De demo kan gevonden worden op http://demos.telerik.com/kendo-ui/ .


Omdat alle widgets heel veel customization opties hebben, kan elke widgets heel gebruiksvriendelijk gemaakt worden. Ook kunnen widgets uitgebreid worden waardoor ze nog specifieker gemaakt kunnen worden.

Codebase

De codebase is eigenlijk eenvoudig. Je maakt een html element en linkt daar javascript aan. De omvang van de code per widget valt mee, aangezien veel al voorgeprogrammeerd is waardoor je alleen specifieke attributen, zoals titels en opties voor functionaliteiten, aan hoeft te passen.

De codebase van PHP is iets anders, hier wordt namelijk gebruik gemaakt van OOP. Om het verschil tussen deze twee soorten manieren goed weer te geven zijn hier de links naar twee dezelfde widgets, één in javascript en één in PHP:

http://demos.telerik.com/php-ui/grid/toolbar-template

http://demos.telerik.com/kendo-ui/grid/toolbar-template

Voordelen

Veel verschillende widgets (meer dan genoeg om alles in de admin te vervangen) die gecustomized kunnen worden naar eigen gebruik.

Modals kunnen geminimaliseerd, maximaliseert, geresized en gecustomized worden. Grote gebruikers community. Uitgebreide en duidelijke API. Wordt goed onderhouden met minor patches en bugfixes. De widgets zijn duidelijk en gebruiksvriendelijk. Weinig code nodig om widgets te initialiseren. AngularJS geïmplementeerd. Keuze in welke implementatie je wil, PHP of Javascript

Nadelen

Geen gratis licentie.

Samenvatting

Telerik PHP UI/Kendo UI is heel erg uitgebreid en gebruiksvriendelijk. Het is goed gedocumenteerd en wordt goed onderhouden.

Er is een keuze tussen PHP en Javascript, en bij beide opties is de implementatie van widgets erg makkelijk. Echter, er is geen gratis versie.


http://demos.telerik.com/kendo-ui/grid/toolbar-template

http://demos.telerik.com/php-ui/grid/toolbar-template

http://demos.telerik.com/kendo-ui/

WijmoFunctionaliteiten

De functionaliteiten die Wijmo bied zijn goed. Echter, de optie om bepaalde functies te customizen is niet vanzelfsprekend. Er zijn veel opties wel al voorgeprogrammeerd die als optie aangezet kunnen worden bij het initialiseren van een widget. Denk hierbij aan functionaliteiten als “kan modal x geminimaliseerd worden, kan widget y gedragged en dropped worden”.


De gebruiksvriendelijkheid valt een beetje tegen. Soms zijn widgets een beetje “laggy” en onhandig, wat het gebruik van sommige widgets een beetje ongemakkelijk maakt. Een goed voorbeeld hiervan is http://demo.componentone.com/wijmo/AngularExplorer/#/wijmo/charts

Codebase

Qua codebase is het weer html elementen koppelen aan javascript. Soms vergt dit redelijk wat code en andere keren is dit een stuk minder. Een voorbeeld hiervan is een standaard Kalender en een kalender met wat opties:

Standaard: http://wijmo.com/demo/explore/?widget=Calendar&sample=Overview

Uitgebreid: http://wijmo.com/demo/explore/?widget=Calendar&sample=Custom%20selection

Voordelen

AngularJS, JQuery en JQuery mobile geïmplementeerd Veel verschillende widgets. Wordt goed onderhouden met minor patches en bugfixes. Modals kunnen geminimaliseerd, maximaliseert, geresized en gecustomized worden. Er is een lay-out customization tool. Grote gebruikers community. Uitgebreide en duidelijke API. Integratie voor huidige systeem is makkelijk

Nadelen

Geen gratis licentie, alleen een gratis trial. Widgets soms niet erg gebruiksvriendelijk Soms veel code om widget te initialiseren

Samenvatting

Wijmo is een goed framework. Het ziet er verzorgt uit en heeft veel functionaliteiten die gebruikt kunnen worden om de admin te verbeteren. Ook maakt het gebruik van Angular JS waardoor het erg flexibel is qua basisfunctionaliteiten.

Echter er is veel code voor nodig om widgets te initialiseren en niet alle widgets zijn even gebruiksvriendelijk.


http://wijmo.com/demo/explore/?widget=Calendar&sample=Custom%20selection

http://wijmo.com/demo/explore/?widget=Calendar&sample=Overview

http://demo.componentone.com/wijmo/AngularExplorer/#/wijmo/charts

Vergelijking FrameworksOm nu een goed beeld te krijgen welk framework het slimste is om te gebruiken, is het slim om alle frameworks met elkaar te vergelijken. Daarom is het handig om een breakdown tabel te maken op basis van een cijfer en ieder framework te beoordelen op de volgende punten:

Functionaliteit. Uiterlijk. Gebruiksvriendelijkheid. Codebase gebaseerd op customization.* Codebase gebaseerd op initialisatie van widgets.** Codebase gebaseerd op consistentie.*** Aanschafprijs

*Met dit punt wordt bedoelt dat je de widgets kan uitbreiden met je eigen inbreng.

**Met dit punt wordt bedoelt hoeveel code er voor nodig is om een widget te initialiseren met standaard functionaliteiten.

***Met dit punt wordt bepaald aan de hand van de hoeveelheid duplicatiecode.

Breakdown sheetOm het overzichtelijk te houden, is hieronder de breakdown sheet te vinden. Daarnaast wordt er na de breakdown sheet voor ieder punt een argumentatie gegeven waarom het betreffende framework dit cijfer heeft gekregen. Omdat de prijs niet mee telt bij de beoordeling (aangezien niet elk framework betaald is), zal de prijs worden gegeven als het desbetreffende framework niet gratis gebruikt mag worden.

Ext JS jQ Widgets Kendo UI WijmoFunctionaliteit 9 8 8 8

Uiterlijk 8 6.5 9 10Gebruiksvriendelijkheid 8 8 8 6

Codebase customization 9 6 8.5 6Codebase initialisatie 8 6 7 7

Codebase consistentie 10 5 5 5Aanschafprijs GPL licentie $399 per jaar,

per developerGelimiteerde GPL versie,

volledige versie is $699 per jaar, per developer

Gelimiteerde GPL versie,

volledige versie is $495 per jaar, per developer

Totaal 51 39.5 45.5 42


FunctionaliteitDoordat alle frameworks ongeveer hetzelfde uitgebreide assortiment van widgets hebben, hebben ze allemaal goed gescoord. De enige die net iets meer verdiende was Ext JS door de functionaliteit van MVVM (Model View ViewModel) support.

UiterlijkExt JS en Kendo UI hebben allebei een fatsoenlijk uiterlijk als het gaat om widgets. Echter jQ Widgets daarentegen ziet er erg “oud” uit. Wijmo heeft op dit punt een 10 gekregen door het support van een theme builder waarin je makkelijk de hele layout kan maken hoe je zelf wil.

GebruiksvriendelijkheidDe gebruiksvriendelijkheid was overal wel goed, bij sommige wat beter, en bij sommige wat slechter. Wijmo heeft hier het slechtst gescoord doordat veel widgets af aan toe een beetje “laggy” waren, wat de gebruiksvriendelijkheid verminderd.

Codebase gebaseerd op customizationExt JS heeft hier het hoogst gescoord om hun OOP manier van werken. Hierdoor zijn alle widgets helemaal customizable naar eigen wensen. Kendo UI heeft een uitgebreid assortiment van voorgeprogrammeerde opties bij elke widgets. Wijmo en jQ Widgets hebben wel wat opties die gebruikt kunnen worden bij widgets, maar dit is niet heel uitgebreid.

Codebase gebaseerd op initialisatie van widgetsHet initialiseren van een widget was bij Ext JS het beste. Door de support van OOP kan je widgets heel makkelijk aanroepen en ze initialiseren met de opties die je wil. De rest van de frameworks gebruiken een andere manier van widgets initialiseren, namelijk de widget aan een html element koppelen. Hierdoor is er soms ook veel code nodig om een widget te initialiseren. Vooral bij jQ Widgets was de code die nodig was om een widget te initialiseren erg veel.

Codebase gebaseerd op consistentieDe consistentie is een beetje unfair om mee te namen, maar omdat dit een belangrijke eis was, is hij hier toch terug te vinden. Ext JS heeft hier een 10 gescoord door het gebruik van OOP. Door deze werkwijze kan je elke gecustomized widgets opslaan als aparte widget en hergebruiken hoe vaak je maar wil. Dit voorkomt heel veel duplicatiecode wat een hele hoop tijd scheelt. De rest van de frameworks hebben dit niet waardoor je de widgets iedere keer opnieuw moet maken, wat dus niet erg consistent is.


Conclusie en aanbevelingZoals gezien in de breakdown, komt Ext JS er het beste uit. Hierdoor is deze ook aan te raden om te gebruiken. Ext JS is erg uitgebreid en er kan veel mee gedaan worden. Niet alleen heeft het een groot assortiment van widgets, maar door de OOP manier van werken is het ook heel makkelijk om consistentie in de code te krijgen. Doordat het modulair gebruikt kan worden, is het perfect voor de implementatie van het huidige systeem.

Omdat het uiteindelijke plan is om de admin langzaam te gaan verbeteren, is Ext JS ook een goede optie. Je kan Ext JS namelijk modulair gebruiken, maar ook kunnen hele delen als “desktop applicatie” gemaakt worden, waardoor je een soort windows idee krijgt in browservorm. Je kan het dus zo uitgebreid en mooi maken als je zelf wil.

Wat natuurlijk ook mee telt is dat Ext JS helemaal gratis is, omdat de admin onder de GPL licentie valt. Omdat Ext JS geen gelimiteerde versie heeft als GPL versie, kunnen alle functionaliteiten gewoon gebruikt worden. Echter, zelfs als Ext JS ook betaald zou zijn of een gelimiteerde versie zou hebben voor de GPL versie, zou Ext JS nog steeds de aanbeveling zijn.


Bijlage 1Fancy Rorix

Requirementsanalyse

Document: RequirementsanalyseAuteur: Nick van der MeijDatum: 8-9-2014Plaats: Rosmalen

Versie: 1.0

Opdrachtnemer: Nick van der MeijOpdrachtgever: Osman YucekayaStagebegeleider: Osman Yucekaya


VersiebeheerVersienummer Datum van release0.1 8-9-20140.2 8-9-20141.0 9-9-2014


InleidingIn dit document zijn de requirements opgesteld voor het project met betrekking tot de vervanging van de modals. Informatie over dit project kunt u terug vinden in het Plan van Aanpak.

Voor het opstellen van de requirements zijn er 3 stappen ondernomen, namelijk:

Het vastleggen van de belanghebbenden van het project (hierna te noemen “stakeholders”). Het inventariseren van requirements door middel van interviews met stakeholders De gevonden requirements prioriteren in overleg met de stakeholders.

De requirements worden geprioriteerd door middel van de MoSCoW methode (“Must haves”, “Should haves”, “Could haves” en “Won’t haves”).


Stakeholder analyseHieronder worden de stakeholders en hun rol in het project beschreven.

Stakeholder Voordelen bij project

Bijdrage / opoffering

Invloeden

Afdeling IT Minder tijd kwijt aan onderhoud en uitbreiden van functionaliteiten

Tijd Opstellen requirements.Testen van geïmplementeerde functionaliteiten.

IT manager Minder tijd kwijt aan onderhoud en uitbreiden van functionaliteiten

Tijd Opstellen requirements.Testen van geïmplementeerde functionaliteiten.Verantwoordelijk voor het inlichten van IT medewerkers.

Afdeling Marketing

Minder tijd kwijt aan onderhoud van de productpagina

Tijd Opstellen requirements.Testen van geïmplementeerde functionaliteiten.

Marketing manager

Minder tijd kwijt aan onderhoud van de productpagina

Tijd Opstellen requirements.Testen van geïmplementeerde functionaliteiten.Verantwoordelijk voor het inlichten van marketing medewerkers.

Directie Minder personeelskosten

Tijd en geld Bepaling welk framework wordt gekocht.


Requirement interviewsHet doel van de interviews is om achter de behoeftes en eisen van de stakeholders te komen.

Voor het opstellen van de requirements worden interviews gehouden met de stakeholders. Deze interviews worden eerst geplant met de desbetreffende stakeholder. Tijdens de interviews wordt er door het systeem gelopen om zo een duidelijk beeld te krijgen van wat er veranderd moet worden.

Voorbeelden van vragen die tijdens het interview gesteld worden zijn:

Met welke functionaliteiten in het huidige systeem ben je tevreden en helpen je op eenpositieve manier in het uitvoeren van je taak?

Met welke functionaliteiten in het huidige systeem ben je ontevreden en belemmeren je inhet uitvoeren van je taak?

Welke veranderingen zou je zelf willen doorvoeren aan de functionaliteiten waar jeontevreden over bent zodat deze je op een positieve manier kunnen ondersteunen bij hetuitvoeren van je taken?

Welke functionaliteiten mis je in het huidige systeem en waarom zou je deze in het nieuwesysteem geïmplementeerd willen zien?


MoSCoW methodeDe MoSCoW methode is een veel gebruikte techniek in software ontwikkeling om de eisen aan hetresultaat van een project te prioriteren. Omdat projecten doorgaans een beperkt budget hebben engebonden zijn aan een tijdsbestek, moeten er prioriteiten gesteld worden aan de vaak velerequirements die de verschillende stakeholders hebben. Met MoSCoW is een requirement onder teverdelen in de volgende categorieën:

Must (M)Definieert een requirement die aanwezig MOET zijn in het uiteindelijk op te leveren resultaat. Eenrequirement van dit type is kritiek voor het slagen van een project.

Should (S)Dit zijn requirements van hoge prioriteit en zijn ook kritiek voor het slagen van een project. EenShould requirement is minder tijd kritisch als een Must requirement en zou op een later tijdstipmogen worden opgeleverd. Indien nodig kunnen er workarounds worden bedacht om alsnog aan derequirement te voldoen.

Could (C)Dit zijn gewenste requirements (ook “nice to have” genoemd). Het welslagen van een project is nietafhankelijk van deze requirements. Indien het budget en tijdsbestek het toelaat kan er voor gekozenworden de requirement alsnog te implementeren.

Won’t (W)Een requirement in deze categorie is iets wat stakeholders graag in de toekomst geïmplementeerdzouden willen zien. Een dergelijke requirement zal dus uitgesteld worden naar een volgende versie.Hieronder volgt per onderdeel van het systeem de inventarisatie en prioritering van requirements in overleg met de verschillende stakeholders.


Legenda ID code{Soort requirement}-{Groepering requirement}-{Requirementnummer}

Soorten requirements:

RF – Functionele requirement RN – Niet functionele requirement RH – Hoofdrequirement die onderverdeeld wordt in subrequirements (functionele of niet

functionele requirements)

Requirements over gedrag van de modals (GM)Na het uitvoeren van de interviews met de verschillende stakeholders zijn de onderstaanderequirements geformuleerd met betrekking tot het gedrag en uiterlijk modals.

RequirementsID RF-GM-1Titel ConsistentieOmschrijving Het uiterlijk van de modals moet consistent zijn.

ID RF-GM-3Titel Meerdere modalsOmschrijving Er kunnen meerdere modals tegelijkertijd worden geopend.

ID RF-GM-4Titel MinimaliserenOmschrijving Een openstaand modal kan worden geminimaliseerd.

ID RF-GM-5Titel ResizeOmschrijving De openstaande modals kunnen worden geresized naar de wens van de

gebruiker.

ID RF-GM-6Titel UiterlijkOmschrijving Het uiterlijk van de modal moet er verzorgt en duidelijk uit zien.

ID RF-GM-7Titel GebruiksvriendelijkOmschrijving De modals moeten gebruiksvriendelijk zijn. Dit betekent dat de eindgebruiker

zo min mogelijk irritatie mag hebben van bijvoorbeeld haperingen in de schermen wanneer je ze beweegt.


MoSCoW breakdown sheet

ID Titel M S C WBehaald (X/V) Opmerking

RF-GM-1 Consistentie X X

RF-GM-2 Framework X Eruit gehaald i.v.m. duplicatie requirement

RF-GM-3 Meerdere modals X X RF-GM-4 Minimaliseren X X RF-GM-5 Resize X X RF-GM-6 Uiterlijk X X RF-GM-7 Gebruiksvriendelijk X X


Requirements over functionaliteit van de modals (FM)Hier zijn de requirements opgesteld over de functionaliteiten binnen de modals.

RequirementsID RF-FM-1Titel ConsistentieOmschrijving De innerlijke lay-out van de modals moet consistent zijn.

ID RF-FM-2Titel DynamischOmschrijving De functionaliteiten binnen de modals zijn voorzien van AJAX functionaliteiten.

ID RF-FM-3Titel Lay-outOmschrijving De modals zijn voorzien van een aparte css library

ID RH-FM-4.0Titel FunctionaliteitenOmschrijving De huidige functionaliteiten blijven bestaan.

ID RF-FM-4.1Titel Meerdere productenOmschrijving Er is een mogelijkheid om meerdere producten tegelijk aan te passen

ID RH-FM-5.0Titel GebruiksvriendelijkheidOmschrijving Bij de functionaliteiten is gedacht aan de gebruiksvriendelijkheid

ID RF-FM-5.1Titel AJAXOmschrijving Met behulp van AJAX wordt ervoor gezorgd dat wijzigingen gelijk worden

opgeslagen

ID RF-FM-5.2Titel Drag and DropOmschrijving Drag and Drop functionaliteit wordt gebruikt waar dit de

gebruiksvriendelijkheid verhoogd.

ID RF-FM-5.3Titel ScrollpreventieOmschrijving De modals zijn voorzien van een manier om zo min mogelijk te hoeven scrollen.


ID RF-FM-5.4Titel FeedbackOmschrijving Er is een mogelijkheid om naar de gebruiker toe feedback te geven

ID RF-FM-5.5Titel Snel werkenOmschrijving De gebruiker wordt mogelijkheden geboden om technieken te gebruiken wat

het werk sneller kan maken

MoSCoW Requirements Breakdown


RF-FM-1 Consistentie X X RF-FM-2 Dynamisch X X RF-FM-3 Lay-out X X RH-FM-4.0 Functionaliteiten X RF-FM-4.1 Meerdere producten X X RH-FM-5.0 Gebruiksvriendelijkheid X RF-FM-5.1 AJAX X X RF-FM-5.2 Drag and Drop X X RF-FM-5.3 Scrollpreventie X X RF-FM-5.4 Feedback X X RF-FM-5.5 Snel werken X X


Requirements met betrekking tot de code (C)Hier zijn de requirements opgesteld die te maken hebben met de backend van het systeem

RequirementsID RH-C-1Titel Codestandaard en techniekenOmschrijving De code is opgebouwd aan de hand van de codestandaard en de huidige

gebruikte technieken.

ID RN-C-1.1Titel CommentaarOmschrijving De code is voorzien van duidelijk en nuttig commentaar

ID RN-C-1.2Titel SMARTYOmschrijving Voor een makkelijk opmaak van de lay-out wordt SMARTY gebruikt

ID RN-C-1.3Titel AJAXOmschrijving Voor een dynamisch effecten die te maken hebben met het database wordt

AJAX gebruikt.

ID RN-C-1.4Titel CSSOmschrijving Voor de grafische schil wordt CSS gebruikt

ID RN-C-1.5Titel HTMLOmschrijving Voor de opbouw van de schermen wordt HTML gebruikt

ID RN-C-1.6Titel JavascriptOmschrijving Voor dynamische effecten die niet met het database te maken hebben wordt

javascript gebruikt.

ID RN-C-1.7Titel PHPOmschrijving Voor backend programming wordt PHP gebruikt

ID RF-C-2Titel StructuurOmschrijving De implementatie past bij de huidige structuur van de website


ID RF-C-3Titel Opbouw modalsOmschrijving De modals kunnen worden gebouwd met relatief weinig code.

ID RF-C-4Titel FrameworkOmschrijving Het gekozen framework moet nog actief worden ontwikkeld.

ID RF-C-5Titel API DocumentatieOmschrijving Het gekozen framework moet een uitgebreide API hebben

ID RF-C-6Titel Gebruikers communityOmschrijving Er moet een grote gebruikers community zijn waardoor er dus veel hulp te

vinden is

ID RF-C-7Titel Veel widgetsOmschrijving Het gekozen framework moet genoeg widgets bevatten om het admin deel

geheel om te bouwen

MoSCoW Requirements Breakdown


RH-C-1.0 Codestandaard en technieken X RN-C-1.1 Commentaar X X

RN-C-1.2 SMARTY X X Afhankelijk van het gekozen framework

RN-C-1.3 AJAX X X

RN-C-1.4 CSS X X Afhankelijk van het gekozen

framework

RN-C-1.5 HTML X X Afhankelijk van het gekozen

frameworkRN-C-1.6 Javascript X X RN-C-1.7 PHP X X RF-C-2 Structuur X X RF-C-3 Opbouw modals X X RF-C-4 Framework X X RF-C-5 API Documentatie X X RF-C-6 Gebruikers community X X RF-C-7 Veel widgets X X


nlpmeijstage.files.wordpress.com€¦ · Web viewOmdat elk framework zijn voor- en nadelen heeft,...

Documents

Transcript of nlpmeijstage.files.wordpress.com€¦ · Web viewOmdat elk framework zijn voor- en nadelen heeft,...