JavaScript frameworks

Leerdoelen

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

Wat is een Javascript Framework?

Een JavaScript framework of library is een verzameling herbruikbare JavaScript code.

Een framework is een geheel van softwarecomponenten dat gebruikt kan worden bij het programmeren van applicaties. Echter ook afspraken hoe die componenten gebruikt worden binnen een groep ontwikkelaars en welke code-standaarden en libraries gebruikt worden kunnen ook onderdeel zijn van een framework.

Een library is een verzameling code (functies/routines) die door programma's kunnen worden gebruikt. Het voordeel hiervan is dat programmeurs geen (nieuwe) code hoeven te schrijven voor bepaalde algemene bewerkingen. Ze kunnen simpelweg de functies aanroepen die zich in de bibliotheek (library) bevinden.

Je kunt zelf JavaScript schrijven en verzamelen in een "library". Je verzamelt code in een bestand als je dezelfde code vaker wilt kunnen gebruiken. Andere programmeurs doen dit ook en stellen hun werk vaak publiek beschikbaar. Zo kun je gebruik maken van frameworks en/of 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 - jaar2) 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!".

API?

Een application programming interface (API) definieert de toegang tot de functionaliteit die er achter een framework schuil gaat. Je hoeft op deze manier geen details van de functionaliteit of implementatie te kennen, maar je weet dankzij de API wel hoe je deze kan aangespreken.

even wat voorbeeld materiaal

Voors en tegens

• Voordelen
  • Bespaart veel ontwikkeltijd. Het is een kwestie van knippen en plakken, en klaar.
  • Je hoeft het wiel niet opnieuw uit te vinden maw. er is een grote kans dat wat jij wilt bouwen al in een Javascript Library aanwezig is. Hierbij kun je denken aan bijvoorbeeld:
    • het event model
    • animaties
    • drag and drop
    • browser compatibility
  • De libraries zijn open source projecten
    • de libraries zijn hierdoor vrij beschikbaar
    • er wordt constant gewerkt aan verbeteringen en updates
• Nadelen
  
  • 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.
  • De code is kort en krachtig maar daardoor ook weer cryptisch.
  • De meeste libraries zijn behoorlijk omvangrijk. Je hebt geen 250 KB nodig voor een klein effectje op je pagina, wat b.v. YUI kan doen.

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

Efficientie

Van levens belang voor projecten!
Een JavaScript framework zal je geen betere programmeur maken, maar het zal je wel efficienter maken. Dit alleen is al reden genoeg om voor een bepaald JavaScript framework of library te kiezen. Het keizen van een geschikt framework is best lastig, vooral omdat er zo enorm veel zijn.

Het beste advies wat ik kan geven is om je flexibel op te stellen, en om de juiste vragen te stellen.
Deze lijst helpt je op gang;

• Wat zijn de requierments van het project?
• Support het framework A-grade browsers?
• Is er een vast team van ontwikkelaars?
• Hoe volwassen is het framework?
• Hoe vaak is er een update?
• Hoe overzichtelijk is de documentatie?
• Is er een actieve community?
• Hoe zijn de benchmark tests?
• Is het framework uitbreidbaar?
• Wat vind je van de API stijl?

Wat zijn de requierments van het project?
De eerste en meest belangrijke vraag is wat is er nodig voor het project? Is het een website of een applicatie die gebruik maakt van AJAX, Welke effecten zijn wenselijk. In hoeverre is er out-of-the-box functionaliteit nodig. Welk kennis en ervaring is er nodig van de teamleden (programmeurs, designers) om goed te kunnen werken met een bepaald framework?

Support het framework de gewenste browsers?
Als je doelgroep en project requierments zijn vastgesteld, moet je overwegen of het framework bv A-grade browsers moet ondersteunen. De meeste doen dit wel, maar er zijn wat uitzonderingen (vooral bij Safari op de Mac). Als je een interne webapplicatie ontwikkeld voor een intranet, zijn misschien maar een paar browsers relevant.

Is er een vast team van ontwikkelaars?
Diverse JavaScript frameworks zijn ontwikkeld door maar 1 ontwikkelaar, maar de beste worden onderhouden door een vast team van ontwikkelaars. Dit zorgt voor regelmatige updates, een betrouwbaar forum en response op het melden van een eventuele bug. Met een vast ontwikkelteam heb je ook meer kans dat het framework grondig getest is en zich houd aan specifieke regels. Een enkel paar ogen kunnen nu eenmaal makkelijk iets over het hoofd zien.

Hoe volwassen is het framework?
Als een framework al langere tijd bestaat, heeft het vaak een vrij solide basis. Een volwassen framework is niet in beta versie, maar heeft in ieder geval een hele release fase doorlopen. Als het goed is, is er groeiende community, en afhankelijk van de open-source licentie, zullen ze ook een Subversion of CVS (Concurrent Versions System) ondersteunen. Hierdoor kan er volop ge bugfixed worden zonder het publiek hiermee lastig te vallen.

Hoe vaak is er een update?
Ook al is hiervoor geen duidelijke regel, je moet deze vraag toch stellen. Als de community klaagt over het uitstel van een nieuwe release, dan is dat al een teken. Vertragingen en tekortkomingen geven je natuurlijk weinig vertouwen voor komende projecten. Aan de andere kant, te veel publieke releases wijst op instabiliteit of een gebrek aan focus.

Hoe overzichtelijk is de documentatie?
Een groot verschil tussen de verschillende JavaScript frameworks is de documentatie. Niet alleen de officele API ducomentatie, maar ook boeken, tutorials en blogs. Slechte documentatie richt zich enkel en alleen op de syntax. Kijk voor een framework, waar in de documentatie voorbeelden van alle methodes en properties staan, en die voldoet aan de behoefte van een eventuele community. Onderzoek doen naar framework documentatie is redelijk simpel, en kan van levens belang zijn als je te maken hebt met strakke deadlines.

Is er een actieve community?
Een community garandeert geen kwalitatief goed framework, maar helpt het framework groeien.
Het karakter van de community geeft een goede indicatie van wat je mag verwachten als je een keer vast loopt. Zijn er fora, of een Google Group? Willen ervaren gebruikers helpen en zijn ze daartoe in staat, of word je snel doorverwezen? Schrijven de ontwikkelaars ook extensions (plugins), en/of dragen ze bij aan de basis van het framework? Allemaal belangrijke vragen.

* Hoe zijn de benchmark tests?
Niemand schept op over het opslurpen van systeem resources of het lekken van geheugen. Maar zonder benchmarks kom je daar dus niet achter. Een kleine verbetering in snelheid of een minimale vermindering van de bestands grote bij een nieuwe release kan dan opvallen.

* Is het framework uitbreidbaar?
Uitbreidbaarheid is typisch iets voor gevorderde programmeurs, en zelden belangrijk voor designers. Plugin ondersteuning is zeker een plus voor ieder JavaScript framework, maar ontwikkelaars willen meestal gewoon weten hoe lastig het is om de basis library te manipuleren. Functionaliteis lagen die beschikbaar zijn via een community maken een framework wel uniek, maar blijven een bijproduct en zijn zelden noodzakelijk.

* Wat vind je van de API stijl?
Dit is een belangrijke, maar lastige vraag en zal voor de meeste van jullie pas goed te beantwoorden zijn nadat je verschillende JavaScript frameworks hebt gebruikt bij diverse projecten. Klachten over frameworks zijn in de regel te wijten aan de stijl waarmee de API is ontworpen.

(* voor nu, minder van belang)

Progressive enhancement

B van der Sluis publiceert bij Adobe het artikel Developing Flash websites using progressive enhancement. En dat lijkt me niet alleen voor Flash ontwikkelaars verplicht leesvoer.

Progressive enhancement staat sinds kort in het principe van gelaagd bouwen binnen de webrichtlijnen voor de overheid. Dat zou voldoende reden kunnen zijn om het stevig te omarmen voor al je projecten.

 

Opdracht

Onderzoek samen met een klasgenoot (groepjes van 2) hoe je bepaalde functionaliteit in verschillende frameworks realiseert. Vergelijk hoe de verschillende frameworks 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

linken

Visual JQuery Magazine. In dit magazine een interview met de ontwikkelaar, een inleiding en tutorials.