SVG herboren

Het maken van een stamboom blijkt niet zo eenvoudig te zijn als het in eerste instantie lijkt, heb ik mij door onze techneuten laten vertellen. Het is namelijk niet een boom in de traditionele zin omdat we het over twee ouders en een kind hebben.

Het uitrekenen van posities van een persoon en diens relaties is geen probleem op zich. Het zijn de edge cases die ook nodig zijn die de ontwikkelaars recht achter hun computer doen zitten.
Dit is grotendeels een technische uitdaging. De uitdaging voor de front-ender is een hele andere: Met welke technieken en of technologieën kun je het beste een stamboom tekenen en interactief maken?

Welke opties zijn er?

1. HTML/PNG/Graphviz (meest generiek bestandsformaten)


2. Flash (Bijna iedereen, behalve iOS apparaten)


3. VML (Werkt alleen op Internet Explorer)


4. SVG (XML / inline HTML)


5. CANVAS (HTML5)

HTML+PNG
Er zijn bestaande tools zoals Graphviz die op basis van een zogenaamde dot notatie de complete genealogisch diagram voor je uittekenen.
Heel mooi voor wetenschappelijke rapporten, helaas niet zo mooi voor online interactie met consumenten. Ook is er specifieke maatwerk nodig om het interactief te maken en beperkte mogelijkheden om het te stijlen.

Flash
Dit lijkt het meeste voor de hand liggende keuze. Het is een technologie die op dit vlak zichzelf heeft bewezen. Het is helemaal gericht op het maken van vector tekeningen en de interactie daarvan. Ook heeft de vereiste browser plugin een bijzonder hoog markt penetratie. Geen ander platform komt maar zelf in de buurt. De knoop lijkt hiermee al te zijn doorgehakt, toch?
Actionscript is een heel aardige script taal die alleen werkt binnen de plugin van Adobe. Dus je stopt nog een software laag tussen de web stack en de back-end. Daarnaast heb je specifieke Flash kennis nodig op die drie lagen. Je hebt dus meer resources nodig en je voegt meer complexiteit toe op dit stamboom project.
Flash performance is een actueel en pijnlijk punt geworden voor Adobe. Daarnaast lijkt de plugin behoorlijk buggy te zijn. In hoeverre dit aan de plugin zelf ligt of aan de ontwikkelaars is ook niet altijd even duidelijk. En die onduidelijkheid is een probleem.
Over mobiele apparaten en Flash hoeven we het eigenlijk niet te hebben. Op iOS van Apple bestaat Flash überhaupt niet en op o.a. Android draait het wel maar in het praktijk valt het niet echt aan te raden. Neem in ieder geval je oplader mee.
Flash blockers, bedoeld om nare flash toepassingen buiten de deur te houden, worden steeds populairder op de desktop. Dat op zichzelf zegt al genoeg.

VML
Microsoft’s Internet Explorer heeft veruit het grootste browser marktaandeel. En in combinatie met Graphviz is het goed te stijlen en te scripten (JScript). Wellicht zou VML de mooiste optie zijn, ware het niet dat je een groot deel van je web gebruikers uitsluit. VML is namelijk alleen beschikbaar op browsers van Microsoft. Daarnaast is de browser platform van Microsoft behoorlijk verouderd en is VML een uitstervende relikwie van de jaren negentig. Dit ziet ook Microsoft en komt daarom binnenkort met een verbeterde web platform die het open web omarmt.

Open web:

SVG
Net zoals VML lijkt SVG een perfect kandidaat, ze lijken dan ook veel op elkaar. Net als VML is SVG een oude formaat en is van alle nodige opties voorzien voor vormgeving en interactie. Echter, net als VML werkt het vooralsnog alleen op bepaalde browsers die web standaarden ondersteunen. Een van de grote pluspunten is dat het een open standaard is, een web standaard. Microsoft heeft zich gecommitteerd om web standaarden te implementeren met IE9, dus ook SVG. Ineens staat de deur op een kier.

CANVAS
CANVAS is nieuw, snel (zeer snel), flexibel en uitermate geschikt om interactief te maken.
Canvas is een technologie om bitmap afbeeldingen te maken en of te manipuleren. Hiermee kun je alle elementen op een ‘canvas’ met javascript tekenen, manipuleren en interactief maken. Al onze initiële tests zijn dan ook met canvas gemaakt. Hoewel deze technologie niet werkt in Internet Explorer is het lang de koploper geweest om in productie te worden genomen.

Bibliotheken

De factoren om voor een bepaalde technologie te kiezen zijn legio. Duurzaamheid, onderhoudbaarheid wegen zwaar bij het implementeren van de front-end.
Daarnaast moet de web applicatie ook crossbrowser zijn. Strikt genomen blijven alleen de eerste twee genoemde technologieën overeind op de vereiste browsers. Met speciale speciale javascript bibliotheken wordt het met conversies naar Flash of VML mogelijk om SVG of CANVAS te implementeren. Met drie kandidaten voorop:
SVGweb (SVG of Flash)
ExplorerCanvas (CANVAS of VML)
Rapheal.js. (SVG of VML)

Converteren naar Flash lost het crossbrowser probleem op maar je krijgt ook de problemen rond het gebruik van Flash er voor terug. Niet ideaal maar voor maatwerk kan het een werkbare oplossing zijn.
Converteren van het nieuwe CANVAS (bitmap) naar het oude VML (vector) is zich wel raar omdat ze zo verschrikkelijk anders zijn. Het werkt wel maar de conversie script was/is buggy en relatief langzaam.
Rapheal.js converteert SVG naar VML waar nodig en omdat de twee technologieën op elkaar lijken is deze bibliotheek bijzonder stabiel en goed gedocumenteerd. Nog mooier is dat Rapheal.js SVG en VML niet direct manipuleert maar dit via een javascript api abstraheert. Hiermee heb je direct een stabiele en redelijk futureproof oplossing voor handen en je hoeft de code maar een keer in te kloppen zonder.

Met het oog op IE9 die destijds aankondigde SVG te gaan ondersteunen leek de keuze voor CANVAS nog minder aantrekkelijk*. En met het laten vallen van IE6 werden de performance voordelen van SVGweb minder belangrijk.

Onze keuze viel uiteindelijk op SVG en dit middels de api van rapheal.js te genereren. Los van nog wat performance issues met grotere stambomen in IE / VML is het snel en stabiel. 

*We wisten niet dat CANVAS ook zou worden ondersteund, dat werd later bekend gemaakt. Persoonlijk was ik toch wel wat verrast door de toevoeging van CANVAS in IE9. Dit lost overigens niet de problemen op rond de conversie script ExplorerCanvas.