I’ve seen the future, it is in my browser. Hiermee begon het Masters In Microsoft event bij Avanade dat ik onlangs bijwoonde. Op dit halfjaarlijkse evenement worden de nieuwste Microsoft-technologieën door de ‘Microsoft Certified Masters’ van Avanade toegelicht. Ditmaal was html5 het onderwerp.
Html5 is de vervanger van Flash (Adobe) en Silverlight (Microsoft). Maar wat houdt html5 eigenlijk precies in? Oké, het is een nieuwe versie van html, maar buiten het introduceren van een paar nieuwe tags valt het eigenlijk wel mee. Of toch niet? Html5 is eerder een paraplu van allerlei nieuwe technologieën, zoals html/css 3/JavaScript, met één gemeenschappelijk doel: een betere gebruikerservaring.
Responsive web design
Waarom hebben we een nieuwe versie van html nodig? Tegenwoordig heb je overal devices; game consoles, smartphones, tv’s enz. Allemaal hebben ze verschillende schermgroottes en -resoluties. Met smartphones loop je ook tegen de uitdaging aan dat er verschillende talen zijn waarmee ontwikkelaars apps kunnen maken. Met html5 worden veel van deze uitdagingen opgelost. Doordat veel van deze devices een browser hebben, is het ontwikkelen van apps met html5 een fluitje van een cent. Met html5 hoef je niet per device een aparte app te ontwikkelen en te onderhouden. Een belangrijk onderdeel hierin is het responsive web design. Met responsive web design reageert de webpagina op de grootte van het scherm. Een te groot element wordt op een kleiner scherm kleiner of helemaal niet getoond. Hierdoor wordt de pagina op elk scherm op een correcte manier getoond.
Om dit te bereiken is een goede samenwerking nodig tussen html-onderdelen, css-opmaak en optioneel JavaScript voor animatie en acties. Om deze samenwerking optimaal te laten zijn is het van belang dat de verschillende onderdelen zich alleen focussen op hun eigen taak. Tijdens het event kwam naar voren dat we snel geneigd zijn om met JavaScript een element wel of niet te tonen. Hierin is het probleem dat je overal stukjes css krijgt. Dit is zeer lastig te stylen met css. De best practice hierin is dat je het stylen alleen met css doet. Het al dan niet tonen van een element doe je vervolgens door het toevoegen of verwijderen van een css class.
Mvc-framework en Twitter Bootstrap
Als laatste werd een ontwikkelpatroon aangestipt: het mvc (model view controller)-framework. Door gebruik te maken van mvc houd je de View (html)-kant gescheiden van de rest van de applicaties. Door middel van data-bindings wordt de view gevuld met informatie. Om deze communicatie goed te laten verlopen zijn er allerlei frameworks ontwikkeld. Deze frameworks/tools werden behandeld in het tweede onderwerp van de avond.
Doordat html5 steeds meer wordt omarmd binnen ict komen er allerlei nieuwe frameworks op de markt. De tip van Michael van Rooijen was om deze frameworks te gebruiken en niet het wiel opnieuw uit te vinden. Hij wees ons op de volgende site: http://www.infoq.com/research/top-javascript-mvc-frameworks. Op deze site wordt een lijst weergeven met de bekendste JavaScript mvc-frameworks. De laatste tool die ik wil aanstippen is Twitter Bootstrap. Dit is geen mvc-framework en staat derhalve ook niet op de site. De Bootstrap-tool helpt enorm tijdens het opzetten van een goede view met forms en dergelijke.
Na de presentaties van Michael van Rooijen en Bryan Sumter hebben we in Almere tijdens de borrel nog rustig nagepraat over de mogelijkheden van html5 met de groep van zeventig aanwezigen.
Rick Neeft, Sharepoint-developer bij The Triple A Company
Het lijkt wellicht een detail maar HTML5 is eigenlijk geen vervanger voor Flash, Silverlight en Java Applets. Het vult eerder het gat op dat deze eerder genoemde produkten hebben laten vallen omdat adoptie door de markt te beperkt bleef. Overigens is de groeispurt van HTML5 grotendeels gestoeld op de evolutie van Javascript waar met name Google en open-source een redelijk grote rol in hebben gespeeld. Punt van aandacht is de huidige wildgroei van javascript frameworks.
Wat ontwikkeling betreft heeft de HTML5 standaard nog steeds niet het probleem van browser compabiliteit opgelost en het is zeer aannemelijk dat dit ook nooit zal gebeuren. Dan nog is het qua functionaliteiten een subset en zal de toepassing beperkt blijven in vergelijk met een ouderwetse desktop applicatie.
Html5 is zeker niet de vervanger van Flash en/of Silverlight maar een gedefinieerde standaard waarbij een browser, die dat ondersteunt, geen flash of silverlight meer nodig heeft.
Wie html/css3/JavaScript als nieuwe technologien betitelt, loopt een paar jaren achter,
html 4 stamt uit 1997, in januari 2008 is de eerste publicatie over html5 verschenen
css3 is sinds 2000 in ontwikkeling in in 2012 was er al sprake van css4.
Javascript stamt grofweg uit 2009, citaat uit Wikipedia „In January 2009, the CommonJS project was founded“
Responsive webdesign wordt gemaakt met behulp van zogenaamde „media queries“ in css, dat bestaat ook al enige tijd, citaat:
„The first public working draft for Media Queries was published in 2001,[5] and the specification became a W3C Recommendation in 2012 after browsers added support“
Dat in dit expertverslag met geen woord over media queries gesproken wordt is merkwaardig.
Elementen wel of niet tonen doen we al jaren met css
„Dit is zeer lastig te stylen met css„ – het kommando {display:none;} of {display:block;} kan dat al jaren en is zeker niet „lastig“.
Een MVC-framework is niets anders als een methode om software-ontwikkeling te bekijken en te struktureren, dat bestaat al jaren.en is niet specifiek voor Webapplicaties.
Relatief nieuw is het gebruik van „grids“ in responsive webdesign ofwel dat ook niets anders is als het gebruiken van standaard HTML en CSS.
Twitter bootstrap is een soort kodegenerator voor web-effekten die met html-css-javascript gemaakt worden en als kant-en-klaar oplossing aangeboden worden, de naam „bootstrap“ is misleidend en een gruwel omdat deze uitdrukking normaal gebruikt werd voor het starten van computers.
Wat opvalt is dat het hele artikel voorbij gaat aan het gebruik van PHP, dat is toch de basis van webapplicaties waarmee op de server routines worden afgehandeld. Javascript wordt over het algemeen gebruikt om aan de client-kant het een en ander te regelen zoals sliders, vergroten van de schrift etc.
Dat een deel van de gebruikers javascript uitgezet heeft en daarmee deze effekten helemaal niet ziet ,wordt niet genoemd.
Wanneer ik zie dat het presenteren van een video op de eigen website momenteel betekent dat die video in 4 formaten op de site moet komen.
Dat er gebruik gemaakt moet worden van een terugval-systeem naar het voorbeeld: als de browser dit niet kan, doe dan dat, kan de browser dat niet doe het volgende etc.
Dat voor het bedienen van Internet explorer 6, 7, 8, 9, 10 altijd speciale kode ingevoegd moet worden omdat Microsoft zich nooit gestoord heeft aan webstandaards alhoewel ze zelf zitting hebben in het W3C consortium.
Dan kan ik slechts konkluderen dat deze „nieuwe techniek“ niet erg uitgerijpt is en dat dit artikel te weinig bijdraagt aan inzicht in HTML5 en het gebruik daarvan.
@Jan: Petje af, mooie reactie.
De kracht van de browser zit erin dat iedere device er wel 1 heeft.
Het voordeel dat je geen installaties nodig hebt, op elk platform kan draaien ondanks de onderlingen verschillen tussen browsers, maakt dat de belofte enorm is.
Het nadeel van de browser is dat een rijke gebruikerservaring bijna rocket science is, en door de onderlinge verschillen is het best een duur proces om compliant te zijn. Ook kost een rijke ervaring nog zeer veel investering in tijd en geld.
De browser is door het cross-platform en standaarden strijd ook in mijn ogen relatief primitief ding.
Programmeren en het realiseren van rijke gebruiksvriendelijk applicaties -browser, app of lokale installatie- blijft een draak en veelal een wilde westen. Om gebouwen te bouwen heb je meer dan 200 jaar ervaring over hoe je dat aanpakt, applicaties maken is relatief jong en griezelig onderhevig aan verandering. Slechte ervan is dat er veel troep bestaat, samen met een sausje internet onveiligheid, zal het nog jaren het wilde westen blijven.
back on-topic: Ja er zit toekomst is de browser, maar het blijft een hobbelige weg en native apps zullen ook niet zomaar verdwijnen. Er zit nog genoeg onvoorspelbaarheid voor ons…
HTML5 is slechts een ‘enabler’; de interpretatie van de standaard door zowel applicatiebouwers als web-browser-bouwers is cruciaal!
Ook vorige HTML versies waren standaard, maar de oudere jongeren onder ons hoef ik denk ik weinig te vertellen over incompatibiliteit bij bepaalde combinaties van webservices/applicaties en browsers.
Momenteel test ik websites/webapplicaties op IE 6, 7, 8, 9, 10 en 11 komt nu ook, verder Chrome, Firefox, Opera, Safari en omdat ik met Linux (KDE) werk ook Konqueror.
Het is nauwelijks voor te stellen wat voor onverwachte effekten je af en toe te zien krijgt zelfs wanneer de html en de css gevalideerd hebt.
Zo verspringt een div in win7 met IE 10 en niet in Win8 en IE 10, een oorzaak is niet te vinden, te verhelpen is het door de win7 IE10 in compatibiliteitsmodus te zetten . . .
Ook ik ben overtuigd van applikaties via de browser, met of zonder cloud, echter schrik ik wanneer ik zo af en toe kontroleer wat er in het web geplempt wordt. Een WordPress installatie met een kant en klaar template is snel gemaakt en ziet er optisch goed uit maar technisch is het vaak een hoop ellende, langzaam en een verhouding text/kode van ongelofelijke 10%, daar gaat je bandbreedte. Bij het versmallen van het browservenster wordt responsive zo vertaald dat onder de 600 pixel inhoud over elkaar schuift, dat is rommel.
Soms droom ik wel eens dat Microsoft zich aan standaards houdt maar dat zal wel een droom blijven.
De ‘vlag’ op dit artikel dekt de lading uitstekend.
Het maken van applicaties ‘in de browser’ heeft inderdaad de toekomst.
Dat neemt niet weg dat er op dit moment nog zaken zijn die niet in elke browser en op elk platform goed werken.
Wanneer we echter geen gebruik maken van ‘bleeding edge’ features en geen pixel-perfect resultaat willen zijn eenvoudige applicaties goed realiseerbaar.
Kreten als ‘mobile first’, ‘content first’ en ‘less is more’ zijn meer dan holle frasen maar geven de richting aan waarin gewerkt wordt of kan worden.
Tot slot: Zelfs Microsoft houdt zich steeds meer aan standaarden hoewel er telkens weer kleine ‘verrassingen’ zijn 😉
@Jan: Er zijn heel weinig gebruikers met Javascript uit, het gros weet niet eens dat het uit kan of hoe dat moet en meer dan 50% van de websites zijn onbruikbaar als Javascript uit staat.
@Jan 2: dat er aan de serverkant ook van alles gebeurt is zeker waar maar valt buiten de strekking van het artikel. PHP is natuurlijk niet de enige server-side component in het totaalplaatje.