JavaScript Libraries

Een JavaScript library is een verzameling herbruikbare JavaScript code.

Je kunt zelf JavaScript schrijven en verzamelen in een "library". Je verzamelt code in een library als je dezelfde code vaker wil kunnen gebruiken. Andere programmeurs doen dit ook en stellen hun werk vaak publiek beschikbaar. Zo kun je gebruik maken van libraries die andere programmeurs geschreven hebben en hoef jij niet zelf opnieuw het wiel uit te vinden.

JavaScript zelf biedt slechts een beperkte set functionaliteit (veel minder dan bijvoorbeeld ActionScript) en geen standaard oplossingen voor standaard problemen. Bovendien werkt het niet altijd in alle browsers op de zelfde wijze. Doordat andere programmeurs aanvullingen geschreven hebben, kun je met betrekkelijk weinig moeite geavanceerde javascripts gebruiken die werken in alle browsers. “The bad news: JavaScript is broken. The good news: It can be fixed with more JavaScript!”.

Diversiteit

Er zijn vier grote libraries die het ontwikkelen gemakkelijker maken: Dojo Toolkit, Yahoo! User Interface Library (YUI), Prototype en jQuery:

• Dojo

  Van deze vier is Dojo verreweg de oudste en de meest uitgebreide. Dojo ondersteunt on-load including, offline applicaties, 2D drawing en meer.
  http://dojotoolkit.org/

• YUI

  Zoals de naam al zegt intern ontwikkeld door Yahoo. Het is vooral gefocust op het supporten van meerdere browsers op één manier en is veelvuldig getest en gedocumenteerd.
  http://developer.yahoo.com/yui/

• Prototype

  Dankt zijn populariteit vooral aan de automatische integratie in RubyOnRails en is ook gemaakt om dit zo goed mogelijk te doen. Behalve dat is het een kleine, compacte en handige library die ook in andere talen gebruikt kan worden. Prototype is echter lastig te integreren in bestaande codebases, omdat het sommige aspecten van Javascript verandert.
  http://www.prototypejs.org/

• jQuery

  Is gebaseerd op “chaining” en heeft weer een hele andere aanpak dan de eerdere drie libraries. Het focust zich geheel op uitgebreide DOM element selectie met maar 1 functie $() en ondersteunt bijvoorbeeld XPath en CSS3 om dit te doen. Het lijkt een beetje een combinatie te zijn van zowel Prototype, Behaviour en Scriptaculous. Prototype die o.a. met de $() notatie op de proppen kwam, Behaviour is een javascript library die je instaat stelt om CSS selector notatie te gebruiken om DOM elementen te benaderen en Scriptaculous is een library met allerlei visuele effecten. jQuery lijkt van alle 3 een klein beetje te nemen om zo tot een mooi compromis te komen. Verder is het een zeer kleine library, met meerdere plugins beschikbaar om functionaliteit toe te voegen.
  http://jquery.com/

Deze verschillende libraries blinken uit op verschillende vlakken. Prototype heeft hele handige Ajax functies, terwijl YUI weer een grote user interface patterns documentatie en support heeft. Dojo is vooral handig voor de grotere applicaties, jQuery voor snelle websites. Deze laatste gaan we de komende weken uitgebreid onderzoeken.

Voors en tegens

• Voordelen

  Het belangrijkste voordeel van libraries, is dat het veel tijd bespaart. Het is een kwestie van knippen en plakken, en klaar. Het zorgt ervoor dat lastige problemen als het event model, animaties of drag and drop al voor je opgelost zijn.

• Nadelen

  Er kleven echter ook nogal wat nadelen aan. Je kan te snel naar een library grijpen en zo niet echt weten wat je feitelijk aan het doen bent. Hierdoor lijkt het dat je kekke effecten kunt bereiken zonder dat je JavaScript echt onder de knie hebt. Je leert geen JavaScript, maar de library zelf. Daarnaast zijn de meeste libraries behoorlijk omvangrijk. Je hebt geen 250 KB nodig voor een klein effectje op je pagina, wat b.v. YUI kan doen.

  Een geode JavaScript library moet klein zijn, goed gedocumenteerd zijn en de code zelf moet helder en duidelijk zijn.

Opdracht

Onderzoek samen met een klasgenoot (groepjes van 2) hoe je bepaalde functionaliteit in verschillende libraries realiseert. Vergelijk hoe de verschillende libraries er mee omgaan: wat zijn de overeenkomsten en wat de verschillen. Bereid voor volgende les een korte presentatie van 5 minuten hierover voor, zodat je aan je klasgenoten kunt laten zien wat jij hebt uitgevonden.

mogelijke onderwerpen zijn:

1. menu'tjes op basis van een list
2. Het tonen van een bericht/error en deze na een x aantal seconde weer
   laten verdwijnen
3. Het veranderen van een tekst (dmv een klik) in een inputveld (voor
   het inline editten van content)
4. Verschillende visuele effecten aan elkaar koppelen zoals van kleur
   veranderen icm groter/kleiner worden
5. Na het invullen van een reactie op een blogpost deze reactie inline
   laten zien zonder pagina refresh
6. Slideshow maken van foto's
7. Lijst met to-do items ordenen middels drag 'n drop
8. kom zelf met een "probleem", dat je met een library zou kunnen oplossen

Leerdoelen

• Je snapt dat er meerdere libraries aanweizg zijn en kan deze vinden op het web
• Je begrijpt hoe de documentatie (tutorials en API reference) van een library in elkaar zit en kan aan de hand van deze documentatie beoordelen of de library geschikt is voor jouw doel.