- Hulp & contact
- Winkelwagen
- Login
- Menu
Wat zijn JavaScript-frameworks en libraries?
JavaScript (afgekort JS) is een scripttaal waarmee de dynamische HTML-content in de webbrowser interactief kan worden gemaakt. De taal kan worden gebruikt voor zowel object-georiënteerd als procedureel en functioneel programmeren. JavaScript bevat voorgedefinieerde objecten (d.w.z. data-elementen met speciale eigenschappen, methodes of functies) voor de toegang tot een website, maar die zijn soms lastig in het gebruik. Inmiddels is veel nuttige informatie verzameld in verschillende JavaScript libraries (in het Nederlands: ‘JavaScript-bibliotheken’) en frameworks. Dit zijn tools die het programmeren vereenvoudigen. Wij bespreken hier de beste en bekendste JavaScript-tools.
JavaScript-framework vs. library
Om te beginnen is het belangrijk om twee begrippen uit elkaar te houden. ‘Library’ (bibliotheek) en ‘framework’ worden vaak door elkaar gebruikt, wat strikt genomen verkeerd is. Ze overlappen elkaar weliswaar op veel gebieden, maar toch zijn er fundamentele verschillen.
Een JavaScript library
Een JavaScript library is een programmeerbibliotheek, of het nu om een klassen-, componenten- of andere bibliotheek gaat. Programmeerbibliotheken hebben altijd subprogramma’s met hulpfuncties die het programmeren vereenvoudigen. In vergelijking met een framework is een bibliotheek meer ontwikkeld voor een specifiek gebruik en heeft hiervoor op elkaar afgestemde functies. De JavaScript library D3.js dient bijvoorbeeld voor datavisualisatie – hiermee kunnen zowel kleine tabellen, diagrammen en statistieken als complexe grafische voorstellingen worden geïmplementeerd (incl. animaties en interacties). Libraries werken altijd met een geïntegreerd softwareprogramma dat de betreffende functies van een programmeerbibliotheek gebruikt als er een bepaalde functie nodig is. Daarom kunnen libraries alleen binnen een programma werken, en niet zelfstandig.
JavaScript-frameworks
Een framework is ook geen autonoom programma, maar eerder een speciale vorm van een klassenbibliotheek. Een framework stelt de software-architectuur (dus de basisstructuur) van een applicatie voor en bepaalt in wezen het ontwikkelingsproces. Frameworks hebben bepaalde ontwerppatronen met verschillende functies (vaak in de vorm van meerdere bibliotheken) en dienen voor de ontwikkeling van nieuwe, onafhankelijke applicaties. Een voorbeeld is het Zend-framework voor PHP dat o.a. wordt gebruikt in de webwinkel-software van Magento en de webanalysetool Piwik.
Inversion of Control (IoC)
Een ander verschil tussen een framework en een bibliotheek is de wijze van besturing. Bij bibliotheken hebben programmeurs toegang tot de code via de programmeerinterface van een software. Frameworks voeren daarentegen een omkering van de besturing uit (Inversion of Control): de code is ingesloten in vastgestelde structuren van het framework en kan worden opgeroepen zodra deze nodig is. Samenvattend kan worden gezegd dat bibliotheken worden opgeroepen door het programma, terwijl een framework de programmacriteria stelt.
JavaScript libraries en frameworks
De kern van JavaScript is een tamelijk eenvoudige programmeertaal die bijzonder geschikt is voor gebruik binnen een browser. Veel programmeurs hebben problemen met de interface van hun website, het DOM (Document Object Model). Hier komen JavaScript-frameworks en libraries van pas: ze vereenvoudigen het werk van ontwikkelaars op verschillende gebieden van het programmeren. De JavaScript-extensions die hieronder worden voorgesteld, kunnen allemaal gratis worden gedownload.
Veelgebruikte JavaScript libraries
JavaScript libraries zijn herbruikbare codes waarmee bepaalde eigenschappen en functies voor een website kunnen worden toegekend. jQuery is de bekendste JavaScript library en biedt veel nuttige functies, hoewel ook andere bibliotheken behulpzaam kunnen zijn.
jQuery
De uitgebreide bibliotheek jQuery is de meestgebruikte JavaScript library, onder meer omdat je hiermee gemakkelijk cross-browser jQuery-code kunt schrijven en omdat er veel plug-ins voor bestaan. Deze opensourcebibliotheek maakt deel uit van veel contentmanagementsystemen, zoals WordPress, Drupal of Joomla!. jQuery dient als interface voor DOM en biedt de volgende functies:
- Eenvoudige selectie van website-elementen (vergelijkbaar met CSS3-selectors).
- Mogelijkheid om geselecteerde website-elementen te veranderen (zoals positie, kleur, enz.).
- Event-system: website-elementen reageren op usernavigatie (muisklikken, toetsenbordinvoer, enz.).
- Eenvoudige implementatie van animaties en effecten.
- Naadloze interactie tussen input en serverdata met Ajax request (zoals bij de autocomplete functie).
jQuery UI
jQuery UI is een gratis uitbreiding voor jQuery. Hiermee kun je een gebruikersinterface (in het Engels: ‘User Interface’ of afgekort ‘UI’) vormgeven en implementeren, bijvoorbeeld van websites of webapps. De focus ligt op het eenvoudig ontwerpen van effecten en interacties. jQuery UI heeft als functie het implementeren van interactiemogelijkheden (o.a. drag and drop, inzoomen en uitzoomen), maar ook animaties, effecten en widgets (autocomplete, sliders, date picker, enz.). Met de grafische editor ThemeRoller kunnen eigen thema’s worden gemaakt of bestaande thema’s worden gebruikt en aangepast. Door de modulaire structuur hoeven alleen de noodzakelijke componenten te worden geïmplementeerd.
Dojo Toolkit
De Dojo Toolkit is vooral geschikt voor de implementatie van webapplicaties en dynamische webcontent. De Toolkit heeft een grote diversiteit aan functies. De belangrijkste bestanddelen zijn:
- Dojo (het hoofdprogramma): snel en eenvoudig gebruik met DOM, Ajax, JavaScript, Events, enz.
- Dijit: een soort module voor grafische gebruikersinterfaces, widgets, lay-outs, effecten en animaties (vergelijkbaar met jQuery UI).
React
React werd in 2011 voor het eerst gebruikt in een Facebook-newsfeed. In 2013 werd het vervolgens gepubliceerd op opensourcebasis. Het is een JavaScript library waarmee je gebruikersinterfaces kunt maken. Het bijzondere van deze bibliotheek is dat website-elementen (views) niet alleen op de client kunnen worden gerenderd, maar ook op de server, wat een sterkere rendering mogelijk maakt. Dit kan door het gebruik van een virtuele DOM, waarmee ook het testen van webapplicaties eenvoudiger wordt.
Veelgebruikte JS-frameworks
Er zijn aanzienlijk meer JavaScript libraries dan frameworks. Frameworks zijn in het bijzonder geschikt voor complexe webapplicaties. Wanneer ontwikkelaars openstaan voor de concepten en specificaties van de betreffende frameworks, kunnen ze er heel effectief mee werken. Twee zeer uitgebreide en vaakgebruikte tools zijn AngularJS en Ember.js.
AngularJS
Dit framework, dat van Google afkomstig is, heeft veruit de grootste community van alle JavaScript-frameworks. AngularJS kan worden gebruikt om single-page-webapplicaties te maken (webapps die uit slechts één HTML-document bestaan). Door het MVVM-concept (model-view-viewmodel) kunnen webapplicaties worden ontwikkeld die zeer goed zijn afgestemd op de interactie met de users. Daarbij rendert AngularJS de webapplicatie aan de client-zijde. Het framework is gebaseerd op jQuery Lite, een afgeslankte versie van de bekende JavaScript library jQuery.
Ember.js
Ook Ember.js is een client-side framework dat wordt gebruikt voor het implementeren van single-page-webapplicaties. In tegenstelling tot AngularJS is het gebaseerd op het MVC-principe (Model View Controller). Een ander onderscheidend kenmerk is dat de makers van Ember.js de community intensief betrekken bij de ontwikkelingsprocessen van het framework en met hen discussiëren over belangrijke veranderingen aan het framework voor ze worden geïmplementeerd. Ember.js omschrijft zichzelf als framework waarmee ambitieuze webapplicaties kunnen worden gemaakt; daarom is het in eerste instantie geschikt voor ontwikkelaars die al ervaring hebben met het ontwerpen van webapplicaties.
Nuttige tools voor veel toepassingen
Frameworks en bibliotheken kunnen het werken met JavaScript aanzienlijk vereenvoudigen. De hierboven besproken extensions vormen slechts een klein deel van de beschikbare tools. Een goede bron voor andere JavaScript-frameworks, libraries en plug-ins is naast GitHub ook de website www.javascripting.com. Hier kun je geschikte JavaScript-extensions vinden voor diverse doeleinden.