Meer over LivPHP4: wat maakt LivPHP sneller dan normale websites?

LivPHP gebruikt vele technieken om compatibility en snelheid te behouden. Met oog op cross-browser compatibility is een groot deel van de client-side scripts gemaakt op het MooTools javascript framework. Het gebruik van mootools heeft een hoop code bespaard.

Mootools maakte het laden van de pagina echter eenmalig trager. 60kB+ aan javascript is gewoon teveel om iedere keer te moeten laden. Owke, er wordt gebruikt van een aJaX loader, maar dat betekend niet dat er dan meteen geen rekening meer gehouden hoeft te worden voor bij normaal gebruik: De pagina moet altijd tenminste 1x volledig geladen worden. Ook dit moet zo snel mogelijk gaan. Met het mootools framework duurde dat echter ietsje te lang nog.

Daar is een oplossing voor bedacht: een javascript on-demand loader. Bij het laden van de pagina wordt eerst een klein javascript-on-demand-loader-script geladen die vervolgens, NA weergave van de pagina, het mootools framework gaat laden. Na het laden van het mootools framework worden de rest van de scripts geladen: de scripts die je zelf hebt geschreven en natuurlijk de aJaX loader.

Dat houdt dus in dat de pagina vrijwel direct zichtbaar is, ook zonder aJaX. Dit is ook te zien in de onderstaande screenshot:

Screenshot van Firefox's Firebug plugin log van de website TheCCNS.com

Je moet de bovenstaande screenshot zien als een tijdlijn. Helemaal links is moment van de request en helemaal rechts is "nu". Daartussen zitten de momenten dat de afbeeldingen, scripts, css en HTML geladen en gelezen wordt.

Je ziet ook 2 lijntjes: een rode en een blauwe. De blauwe staat voor "DOM-content is geladen" en de rode staat voor "pagina is geladen".

Als je met die kennis weer naar de tijdlijn kijkt en naar de bestandsnamen kijkt zie je dat "theccns.com" (index.php) als eerste geladen wordt. Dat bevat de HTML-code. Terwijl deze HTML code doorgelezen wordt is firefox alvast aan de slag gegaan met het ophalen van de 2 CSS documenten: style.css en page.css. Dit wordt tegelijk geladen terwijl de rest van de HTML ingelezen wordt.

Vervolgens wordt "loader.js" geladen. Dit is de javascript-on-demand-loader: een klein bestandje van 3kB. Je ziet ook dat het laden van de javascript bestanden pas gebeurt zodra de gehele HTML code is ingelezen.

Wanneer "loader.js" geladen is wordt "init.js" geladen. Opnieuw zie je weer dat dit na elkaar geladen wordt. De browser zal javascript bestanden normaal gesproken nooit tegelijk laden; altijd achter elkaar volgens de volgorde zoals ze in de HTML staan.

Wanneer deze 2 scripts geladen zijn gaat de browser de pagina "tekenen". Wanneer ie daarmee klaar is zie je dat rode lijntje verschijnen.

In het script "init.js" staat een stukje code in een window.onload functie. In die functie worden mootools.js en is.js geladen door de on-demand loader. Ook wordt er aan de loader meegegeven dat ie na het laden history.js, page.js en ajaxloader.js moet laden.

is.js bevat gewoon enkele functies die vaak gebruikt worden maar niet voorkomen in het mootools framework. history.js, page.js en ajaxloader.js zijn de 3 scripts die de complete aJaX pagina loader bevatten.

Na het laden van die 3 scripts wordt tot slot nog eens main.js geladen. Dit script geeft ajaxloader.js alle url's een onclick attribute te geven die ervoor zorgt dat de link niet op de normale manier gevolgt wordt maar via aJaX. Wanneer dat gebeurt is worden de eventuele scripts geladen die je zelf hebt gemaakt.

Fijn om te weten allemaal, maar wat is nou het moraal van het verhaal?

Het bijzondere aan de gebeurtenissen die omschreven zijn in het verhaal hierboven is dat de meeste scripts en rekenopdrachten niet gebeuren terwijl de gebruiker zit te wachten op het laden van de pagina, maar pas daarna. Om nog voor een beetje duidelijkheid te geven:

Screenshot van Firefox's Firebug plugin log van de website Hyves.nl.

Hier is firebug ingestelt om alleen de javascript bestanden te laten zien; De complete log was door de hoeveelheid afbeeldingen veel te lang.

Hierboven zie je dat ALLE scripts na elkaar geladen worden voordat er ook maar iets zichtbaar is op de pagina. Dan werkt hyves ook nog eens zonder aJaX... dan mag je dus bij iedere pageview al die scripts weer gaan laden. Daarom is hyves niet altijd even snel.

Dit is nog maar het begin van het heel LivPHP. Het gehele verhaal hierboven omschrijft alleen maar het laden van de pagina op de normale manier. LivPHP's hoofd feature is nog niet eens besproken: aJaX-based browsing.

En hoe zit het dan met dat aJaX verhaal?

Door de hoofdfeature van LivPHP gaat er een wereld open voor webdevelopers: Het maken van applicaties in websites is opeens een stuk makkelijker geworden. Niet meer hoef je de status van je applicatie op te slaan in cookies o.i.d. en deze applicatie hoeft ook niet meer opnieuw gestart te worden bij iedere pageview. De pagina wordt namelijk via aJaX geladen: zodra de gebruiker op een link klikt worden alleen relevante delen geupdate en niet de gehele pagina.

Via aJaX kan je toch nog alles veranderen. Je zou de complete layout kunnen veranderen. Ook kan je dynamisch CSS documenten invoegen en verwijderen. Hetzelfde voor javascript bestanden. Dit gaat allemaal heel simpel; je geeft gewoon in 1 bestand op welke CSS documenten en welke JS documenten in een bepaalde pagina horen. Als dit document nog niet eerder ingevoegd was zal deze ingeladen worden. Als een bepaald CSS document wel voorkomt op de ene pagina maar niet op de te laden pagina, dan wordt dat document gewoon uit de <head> tag verwijderd. Andersom wordt deze gewoon dynamisch ingevoegd via HTML-DOM wanneer het CSS document nog niet voorkwam in de <head> tag. Via firebug kan je op TheCCNS in detail zien hoe het aJaX systeem in werking gaat bij het laden van een andere pagina.

Ook formulieren gaan via aJaX. Formulieren die via POST werken worden via aJaX verzonden en het resultaat wordt opgehaald en geupade. Dit gebeurt ook zonder het opnieuw laden van de pagina. Je zou dus een mooi javascript applicatie kunnen maken met versleepbare venstertjes - waar nog een javascript framework voor komt - of je kan wat anders verzinnen. De mogelijkheden zullen in ieder geval sterk vergroot worden.

En werkt dat nou een beetje? zijn er nadelen?

Het is werkend en succesvol getest in de meeste gangbare browser. Internet Explorer 6 gaat er zelfs, tegen mijn verwachtingen in, prima mee om. Er is niet eens rekening gehouden met IE6, alleen met IE7 en IE8. Ook safari, chrome, firefox en opera werken er prima mee.

Zoekmachines zouden normaal gesproken niet om kunnen gaan met al die javascript. LivPHP is echter zo ontwikkeld dat het aanmaken en indelen van de pagina zowel op de server kan gebeuren als op de client's browser. Zelfs zonder javascript werkt de website vlekkeloos. Alleen je fancy javascript applicaties zullen niet werken, maar de website zelf wel. Omdat het niet afhankelijk is van javascript kunnen pagina's dus gelezen worden door Google. Verder worden normale links via javascript aangepast. Dat houdt dus in dat zonder javascript alle links gewoon normale links zijn. Wanneer javascript is ingeschakeld worden de links via HTML-DOM aangepast zodat de links de aJaX-loader aan het werk zetten.

Dan is er nog een nadeel met client-side applicaties: Wanneer je een link aanklikt die alleen maar javascript code uitvoert zal de browser-history niet aangepast worden. Dit houdt in dat de vorige/volgende knop niet werken zoals ze normaal zouden werken. Ook de URL in de URL-balk blijft hetzelfde. Dit is tijdelijk opgelost met het unFocus.EventManager script, gemaakt door ene Kevin Newman. Later zal er een eigen script komen.

Ook de URL-balk past zich aan. Via aJaX rondbrowsen en vervolgens via copy-paste de url kopieren en via e-mail of chat aan een ander geven werkt vlekkeloos: de juiste pagina wordt gewoon geladen. Het huidige prototype doet dat niet echt netjes: eerst wordt de index pagina geladen en vervolgens wordt via aJaX de juiste pagina geladen. In een toekomstige versie zal dit netter werken en niet met een tussenstap gaan.

De knop "vernieuwen" werkt ook nog gewoon.

Geen nadelen dus?

Je zult moeten scripten over LivPHP. Ondanks dat ik mijn best doe het zo makkelijk mogelijk te maken zal er altijd een leercurve zijn. Het overstappen op LivPHP kost dus eventjes wat extra tijd maar je zal beloond worden met een goede website.

Je wordt beperkt in je vrijheid omdat je verplicht bent gebruik te maken van de functies binnen het framework. Vooral bij het maken van de layout zit je nu nog met beperkingen. Ik zal mijn best doen deze beperkingen te verminderen in toekomstige versies. Er staan genoeg ideeen op de plank die uitgevoert kunnen worden om het maken van een layout zelfs makkelijker te maken dan normaal.

Maar zijn er nou nog nadelen voor de gebruiker of niet?

Als jij nadelen weet te noemen waar de gebruiker last van kan hebben, neem dan a.u.b. contact met me op.

Opensource? Ik las ooit iets over opensource?

Opensource, Gratis, noem maar op. LivPHP is 100% gratis en je mag het voor alles gebruiken. Verder komt er een uitgebreide documentatie met voorbeelden en demo's. Zo kan je makkelijk leren werken met LivPHP.

Alles is in het Nederlands...

Mijn Engels is niet goed genoeg om lange goede begrijpbare en nette verhalen mee te schrijven. Ik zal de documentatie daarom in het Nederlands schrijven en de gebruiker de mogelijkheid geven deze te vertalen naar andere talen.

Heb je nog hulp nodig?

Ja! je kan me helpen. Ik ben een arme gozer zonder baan. Ik heb €0,- en ik leef op de zak van mn Pa. Tijd voor een eigen inkomen. Als je een mooie website wilt met een LivPHP basis en je hebt geld teveel... twijfel niet en neem meteen contact met me op. Als je heel toevallig nog een macbook pro over hebt is ie ook handig. Ik zit nu met windows... Doneren mag ook. Graag zelfs.

Ook heb ik problemen met Engelse versie van de documentatie. Je kan me later helpen door zoveel mogelijk te vertalen, te beginnen met deze tekst.

Hulp met het scripten en coderen van LivPHP zelf heb ik niet echt nodig; Dat doe ik het liefst zelf. Het blijft een hobby van me.

Tot slot, je kan me helpen door reclame te maken voor TheCCNS.com! Liefst ook op Engelse sites. Reclame maken voor LivPHP is natuurlijk ook handig.