Firefox 3.1 var startskottet på vad som skulle bli en över sex månaders lång tävlan mellan Firefox och övriga webbläsare om att skapa den snabbaste läsaren. Resultatet blev att Javascript i dag exekveras över 30 gånger så snabbt som tidigare, hårdvaruaccelererad 3d är på väg till webben och vi kan utveckla program som fungerar lokalt i webbläsaren utan någon anslutning till internet.
Fördelarna med att köra program i webbläsaren är många. Du behöver inte någon lokal installation annat än en webbläsare, programmet installeras en gång på webbservern och uppdateras på ett ställe och du kan fokusera på att säkra webbservern i stället för hundratals klienter.
När du utvecklar för webben krävs i många fall helt nya verktyg. Gamla ramverk som Qt, GTK+, Dotnet och Java existerar fortfarande, men först och främst är det Javascript du måste bekanta dig med.
Om du utvecklar det som tidigare kallades för en ”hemsida” ska du inte längre koda allt själv från grunden utan se dig om efter en stabil, men flexibel, grund att bygga på. Med färdiga ramverk och öppna tekniker drar du nytta av andra utvecklares jobb och blir betydligt mer effektiv.
En trevligare upplevelse
Asynkront Javascript och xml, Ajax, är en beprövad teknik som används för att bygga hemsidor och webbtillämpningar som påminner mycket om lokalt installerade program. Genom att låta Javascript sköta den bakomliggande kommunikationen med servern och uppdatera enskilda sidelement när informationen väl är laddad behöver hela sidan aldrig laddas om. Upplevelsen för användaren är betydligt mer behaglig.
Problemet med Ajax är bara att olika webbläsare har olika syntax för hur kommunikationen ska gå till. Av den anledningen bör du undvika att koda renodlad Ajaxkod själv och i stället luta dig mot ett eller flera av de färdiga ramverk för Javascript som finns tillgängliga.
Kan kännas som försämring
Om du har en bakgrund som utvecklare där du har arbetat med Java eller Dotnet kommer Javascript tyvärr att kännas som ett riktigt nedköp. Språket saknar riktig objektorientering och har extremt lösa datatyper som gör det svårt att avlusa din tillämpning. I språk som Dotnet och Java har du en rik flora av klasser du använder för att snabbt bygga din tillämpning. Javascript ger dig i stort sett bara hammare, spik och brädor.
Lösningen på Javascripts tillkortakommandon är att använda färdiga klassbibliotek som utökar funktionaliteten. Ett ramverk kan ge dig funktioner som animering, effekter, händelsehantering, dra och släpp, fjärrförfrågningar (rpc), tidsstyrning, slumptalsgeneratorer och objekthantering.
Ramverk eller ramvärk
Problemet är att det finns hundratals ramverk som slåss om din gunst och inget av dem är på något sätt standardiserat. Ser vi däremot till vilka som är de största kan vi begränsa oss till en dryg handfull.
Jquery och Jquery UI. Ett kraftfullt och utbrett ramverk. Jquery klarar namespaces, vilket gör det möjligt att producera kod mer lämpad för miljöer där tredjepartsleverantörer skickar med egen Javascriptkod, exempelvis annonsnätverk. Jquery UI, där UI står för user interface, rymmer en mängd ögongodis som animationer, dra och släpp, så kallade widgets (grafiska föremål) med mera.
Prototype och script.aculo.us. Prototype är inspirerat av Ruby och släpptes som en del av Ruby on Rails. Prototype är bottenplattan och ramverket script.aculo.us är biblioteket du använder för alla fräsiga effekter.
Moo Tools. Moo Tools står för My object oriented tools och har hämtat mycket av sin inspiration från Prototype. Moo Tools utökar funktionaliteten i Javascript så att du får en form av enkel objektorientering. Moo Tools är ett populärt ramverk som du bland annat hittar i innehållshanteringssystemet Joomla.
Dojo. Ramverket har en stor mängd färdiga widgets du kan använda i dina tillämpningar, bland annat en grafisk redigerare som liknar Tiny MCE. Här finns också menyer, tabbar, trädstrukturer och rutiner som underlättar formulärhantering.
Dojo är ett ramverk för Javascript med en mängd grafiska element. Här är ett exempel som visar hur en e-postklient kan byggas enbart med hjälp av Dojo.
SWF Object. Ett simpelt ramverk du använder om du behöver blanda Flash med Javascript.
Yahoo! User Interface Library, YUI. Ett öppet ramverk byggt av Yahoo. Förutom de vanliga komponenterna och en stor mängd grafiska widgets har YUI en Javascriptkomprimerare som du definitivt har användning av även om du utvecklar i ett annat ramverk. Komprimeraren raderar alla blanktecken och radbrytningar och förvandlar din kod till något som nästan kan liknas vid ett binärt format.
Vilket ramverk du väljer är en smaksak och oavsett vilket du använder har du gjort ett bra val. Alla utvecklas fortfarande och alla har sina styrkor. Det viktiga är att börja använda åtminstone ett av dem och sluta försöka koda plattformsoberoende Ajax för hand.
Korta startsträckan ytterligare
De ramverk vi har nämnt är kraftfulla verktyg för att bygga helt skräddarsydda lösningar snabbt och relativt enkelt. Är du däremot ute efter ett mer generellt ramverk att bygga vidare på kan du titta på ett system för innehållshantering.
Ett system för innehållshantering, eller content management system, cms, är en nästan färdig lösning där du sedan utökar funktionaliteten med insticksmoduler som andra har gjort eller moduler du själv utvecklar efter givna riktlinjer.
![]()
Tusentals gratismoduier
Joomla och Drupal är två populära och öppna system för innehållshantering som i stort är likvärdiga. Båda bygger på php och My SQL, båda har tusentals kostnadsfria moduler för vissa specifika funktioner och båda ger dig möjlighet att bygga egna moduler enligt mvc-modellen (model view controller). Utseendet på webbplatsen utformar du genom att plocka fram en mallsida. Du kan också köpa en färdig mall och utgå från någon av de otaliga webbplatser som erbjuder snygga teman.
Joomla känns mer färdigt från start och har sin styrka i över 4 000 insticksmoduler som du hittar på http://extensions.joomla.org. Drupal kräver lite mer handpåläggning och känns lite råare i sin utformning, men har ett bättre system för åtkomstkontroll.
Drupal kan du även installera med databasen Postgresql som bas. Ett nytt förbättrat rättighetssystem är på gång i Joomla 1.6, som ska släppas i höst.
Joomla är ett öppet system för innehållshantering som du kan bygga vidare på och integrera egna moduler i. Joomla är php-baserat. Bygger du med asp.net kan du titta på Dotnetnuke och bygger du med Python är systemet Plone ett alternativ.
Hacka inte i källkoden
Gör inte dig själv en otjänst och ”fulhacka” direkt i källkoden. Lär dig och använd de regelverk som respektive plattform sätter upp för att skapa en modul. Kliver du utanför ramarna kommer du att få problem nästa gång det är dags att uppdatera. Att inte uppdatera är ingen lösning, eftersom många uppdateringar är säkerhetsrelaterade.
Det finns många system för innehållshantering, Drupal och Joomla är bara två av dem. Kommersiella alternativ är exempelvis Episerver, Microsoft Office Sharepoint Server eller den öppna och Javabaserade motsvarigheten Alfresco 3.2.
I stort sett alla system för innehållshantering går att installera i Windows. Några kommersiella system finns endast för Windows och kan inte installeras i Linux.
Utvecklarnas värsta gissel har alltid varit den mängd plattformar som finns, med deras olika begränsningar och möjligheter. Flera ramverk har plockats fram, med varierande resultat, för att lösa plattformsberoendet. Qt från norska Trolltech, som köptes upp av Nokia, är ett sådant ramverk för C++. Qt gör det möjligt att från en kodbas skriva tillämpningar som kan köras på Mac, Windows och Linux med respektive plattforms karaktäristiska utseende.
Java är också plattformsoberoende, men är behäftad med en typisk ”Javalook” som inte faller alla i smaken. Eclipseprojektet The standard widget toolkit (SWT) tog på sig uppgiften att skapa ett klassbibliotek som får Javaprogram att se ut som ett vanligt, binärt program kompilerat för Windows, Mac eller GTK+ (Linux). Projektet har också försökt att ta tekniken till webben, men har inte lyckats något vidare.
I vårt exempel exekveras det mesta av koden i webbläsaren via Javascriptbiblioteket Moo Tools. Servergenererad information skickas i json-format, som formateras och presenteras i webbläsaren. Med den här modellen behöver du aldrig blanda skriptspråk som php, Python, jsp eller asp.net med html på serversidan. Resultatet är snyggare, snabbare och mer separerad kod som är enklare att underhålla.
Minsta gemensamma nämnare
Lyckats har däremot Google gjort. Företaget har tagit tankesättet bakom SWT och byggt ett ramverk de kallar Google Web Toolkit, GWT. GWT är för webben vad Qt är för lokala program. På samma sätt som Qt och SWT är minsta gemensamma nämnare för skrivbordstillämpningar är GWT minsta gemensamma nämnare för webben.
Program du utvecklar i GWT fungerar i Internet Explorer (från version 6 och framåt), Firefox, Safari, Opera och Chrome. Du behöver alltså inte tänka på vilka webbläsare som klarar vilka funktioner eller hur syntaxen ser ut för en specifik webbläsare. Allt sådant tar GWT hand om när ditt program sedan genereras.
Kan infogas i valfri Javamiljö
För en utvecklare låter det i början lite konstigt, eftersom du i GWT inte utvecklar i Javascript utan i Java. I GWT bygger du logiken i din webbtillämpning med en mer strikt Javasyntax som underlättar betydligt när det är dags för felsökning. Kompileringsfel spårar du oftast omedelbart, vilket gör felsökningen betydligt enklare än om du skulle skriva programmet i det mer förlåtande Javascript. Du kan också sätta ”breakpoints” för att gå in i minnet under programkörning och spåra variabelvärden.
GWT är inte bundet till någon specifik utvecklingsmiljö utan kan infogas i valfri Javamiljö, exempelvis Netbeans, Jdeveloper eller Intellij. Google tillhandahåller insticksmoduler framtagna för Eclipse, vilket gör den utvecklingsmiljön mer lämpad om du inte redan är inkörd i någon annan.
Java och asp.net för tungviktarna
De tekniker vi hittills har behandlat har främst varit lämpade för enklare tillämpningar. Kliver du upp en nivå och bygger verksamhetskritiska lösningar med krav på spårbarhet, möjlighet att backa eller rulla fram transaktioner och mer avancerad identitetshantering har du vuxit ur kostymen. Då är det dags att titta på tyngre grejer som J2EE eller asp.net. De ger dig de verktyg du behöver för att skapa affärslogik som klarar verksamhetens krav.
Däremot finns det inget som hindrar dig från att bygga den bakomliggande logiken med de här tyngre verktygen och sedan öppna gränssnitt mot den form av lösningar vi har presenterat. Har du bara sett till att den bakomliggande meddelandehanteringen sker med öppna standarder kan du relativt enkelt bygga widgets eller portlets som hämtar information från dina bakomliggande system.
Hårdvaruaccelerering i sikte
Är du nyfiken på vad nästa stora grej på nätet blir ska du kasta ett öga på Googles gränssnitt för hårdvaruaccelererad 3d, O3D. O3D utvecklas i ett samarbete mellan Google, Mozilla och Khronos. Khronos är den organisation som bestämmer vad som hamnar i open gl, hårdvaruaccelerering för vanliga skrivbordsprogram och spel.
O3D finns i skrivande stund enbart i källkodsform på code.google.com/apis/o3d/ och väger in på imponerande 500 megabyte. Slutresultatet, den kompilerade insticksmodulen, tar bara några megabyte i anspråk.
Gränssnittet i O3D är en serie Javascriptbindningar som är en bantad uppsättning av gränssnitten i open gl. Startsträckan för utvecklare av vanliga hårdvaruaccelererade tillämpningar är alltså minimal.
Hos Google hittar du också en uppsjö kodexempel som visar hur du importerar en 3d-modell, animerar den, bestämmer kameravinkel, lägger på texturer och interagerar med 3d-världen. Eventuellt kommer tekniken att införlivas direkt i Google Chrome och Mozillas Firefox.
Beach Demo visar hur hårdvaruaccelererad 3d är på väg in i webbläsaren. Google, Mozilla och Khronos arbetar med att ta fram en standard som binder ihop Javascript och open gl.
Eclipse 4 lurar bakom krönet
De två största plattformarna för utveckling är i dag Microsofts Visual Studio och Eclipse, som är öppen källkod. I slutet av juli släpptes en tidig alphaversion av vad som kommer att bli nästa års Eclipse. Fokus i Eclipse 4 ligger på utveckling av webbaserade tillämpningar eller närmare bestämt på tillämpningar som lika gärna kan köras på webben som på din lokala dator.
Exempelprogrammen som följer med Eclipse 4 alpha visar hur gränssnittet modelleras på samma sätt som när du arbetar med cascading style sheets, css, på webben. Du kan också använda en form av Javascript för att i efterhand ändra elementen på exakt samma sätt som i en webbläsare.
Eclipse 4 är fortfarande under utveckling och den version som är ute nu ska ses som en förhandstitt på vad som kan komma under nästa år. Den är på inga sätt mogen för ditt dagliga arbete.
I alfaversionen av Eclipse 4 följer det med två exempelprogram som visar hur framtidens utveckling är tänkt att gå till. Utvecklingen blir mer en form av modellering och presentationen sköts av css, samma teknik som för webben.
TechWorlds slutsats
Exakt vilken utvecklingsmiljö du ska satsa på, vilket programmeringsspråk du bör köra på serversidan och vilket Ajaxramverk du bör använda finns det inget enkelt svar på. Precis som det tidigare fanns en uppsjö ramverk för skrivbordstillämpningar har du i dag ett ännu större utbud av ramverk för webbutveckling.
Vad vi däremot kan säga med bestämdhet är att de tillämpningar du för tillfället har lokalt installerade är på god väg att bli antikviteter från en svunnen era. Välkommen in i molnet.
Grafik: Jonas Englund
» Så går du vidare
Fördelarna med att köra program i webbläsaren är många. Du behöver inte någon lokal installation annat än en webbläsare, programmet installeras en gång på webbservern och uppdateras på ett ställe och du kan fokusera på att säkra webbservern i stället för hundratals klienter.
När du utvecklar för webben krävs i många fall helt nya verktyg. Gamla ramverk som Qt, GTK+, Dotnet och Java existerar fortfarande, men först och främst är det Javascript du måste bekanta dig med.
Om du utvecklar det som tidigare kallades för en ”hemsida” ska du inte längre koda allt själv från grunden utan se dig om efter en stabil, men flexibel, grund att bygga på. Med färdiga ramverk och öppna tekniker drar du nytta av andra utvecklares jobb och blir betydligt mer effektiv.
En trevligare upplevelse
Asynkront Javascript och xml, Ajax, är en beprövad teknik som används för att bygga hemsidor och webbtillämpningar som påminner mycket om lokalt installerade program. Genom att låta Javascript sköta den bakomliggande kommunikationen med servern och uppdatera enskilda sidelement när informationen väl är laddad behöver hela sidan aldrig laddas om. Upplevelsen för användaren är betydligt mer behaglig.
Problemet med Ajax är bara att olika webbläsare har olika syntax för hur kommunikationen ska gå till. Av den anledningen bör du undvika att koda renodlad Ajaxkod själv och i stället luta dig mot ett eller flera av de färdiga ramverk för Javascript som finns tillgängliga.
Kan kännas som försämring
Om du har en bakgrund som utvecklare där du har arbetat med Java eller Dotnet kommer Javascript tyvärr att kännas som ett riktigt nedköp. Språket saknar riktig objektorientering och har extremt lösa datatyper som gör det svårt att avlusa din tillämpning. I språk som Dotnet och Java har du en rik flora av klasser du använder för att snabbt bygga din tillämpning. Javascript ger dig i stort sett bara hammare, spik och brädor.
”Javascript kan
kännas som ett riktigt
nedköp.”
Lösningen på Javascripts tillkortakommandon är att använda färdiga klassbibliotek som utökar funktionaliteten. Ett ramverk kan ge dig funktioner som animering, effekter, händelsehantering, dra och släpp, fjärrförfrågningar (rpc), tidsstyrning, slumptalsgeneratorer och objekthantering.
Ramverk eller ramvärk
Problemet är att det finns hundratals ramverk som slåss om din gunst och inget av dem är på något sätt standardiserat. Ser vi däremot till vilka som är de största kan vi begränsa oss till en dryg handfull.
Jquery och Jquery UI. Ett kraftfullt och utbrett ramverk. Jquery klarar namespaces, vilket gör det möjligt att producera kod mer lämpad för miljöer där tredjepartsleverantörer skickar med egen Javascriptkod, exempelvis annonsnätverk. Jquery UI, där UI står för user interface, rymmer en mängd ögongodis som animationer, dra och släpp, så kallade widgets (grafiska föremål) med mera.
Prototype och script.aculo.us. Prototype är inspirerat av Ruby och släpptes som en del av Ruby on Rails. Prototype är bottenplattan och ramverket script.aculo.us är biblioteket du använder för alla fräsiga effekter.
Moo Tools. Moo Tools står för My object oriented tools och har hämtat mycket av sin inspiration från Prototype. Moo Tools utökar funktionaliteten i Javascript så att du får en form av enkel objektorientering. Moo Tools är ett populärt ramverk som du bland annat hittar i innehållshanteringssystemet Joomla.
Dojo. Ramverket har en stor mängd färdiga widgets du kan använda i dina tillämpningar, bland annat en grafisk redigerare som liknar Tiny MCE. Här finns också menyer, tabbar, trädstrukturer och rutiner som underlättar formulärhantering.
SWF Object. Ett simpelt ramverk du använder om du behöver blanda Flash med Javascript.
Yahoo! User Interface Library, YUI. Ett öppet ramverk byggt av Yahoo. Förutom de vanliga komponenterna och en stor mängd grafiska widgets har YUI en Javascriptkomprimerare som du definitivt har användning av även om du utvecklar i ett annat ramverk. Komprimeraren raderar alla blanktecken och radbrytningar och förvandlar din kod till något som nästan kan liknas vid ett binärt format.
”Alla ramverken
utvecklas och har sina
styrkor.”
Vilket ramverk du väljer är en smaksak och oavsett vilket du använder har du gjort ett bra val. Alla utvecklas fortfarande och alla har sina styrkor. Det viktiga är att börja använda åtminstone ett av dem och sluta försöka koda plattformsoberoende Ajax för hand.
Korta startsträckan ytterligare
De ramverk vi har nämnt är kraftfulla verktyg för att bygga helt skräddarsydda lösningar snabbt och relativt enkelt. Är du däremot ute efter ett mer generellt ramverk att bygga vidare på kan du titta på ett system för innehållshantering.
Ett system för innehållshantering, eller content management system, cms, är en nästan färdig lösning där du sedan utökar funktionaliteten med insticksmoduler som andra har gjort eller moduler du själv utvecklar efter givna riktlinjer.
Så kommer du igång – ett exempel
Här får du ett exempel att bygga vidare på. Enda kravet är att du har Python installerat. Exemplet fungerar med både Windows, Mac och Linux, men eventuellt får syntaxen för sökvägarna ändras.
Exemplet är en modifering av Moo Tools demo för fjärrförfrågningar med Json. I vårt exempel genererar vi informationen dynamiskt på serversidan för att sedan presentera på klienten.
I exemplet använder vi Python på serversidan, eftersom språket har en tydlig syntax, är kraftfullt och har en egen webbserver. Det gör att du inte behöver gå in i Apache eller IIS. Använder du portar över 1 024 behöver du inte heller administrativa rättigheter för att köra tillämpningen.
På klientsidan använder vi ramverket Moo Tools med två insticksmoduler. Fx.Slide expanderar och minimerar vår widget och Request.JSON hämtar vår dynamiska information från servern och presenterar den i våra widgets.
» Webbservern är den absolut enklaste tänkbara och ryms på fyra rader. Döp filen till cgi-server.py och skriv in:
#!/usr/bin/python
from BaseHTTPServer import HTTPServer
from CGIHTTPServer import CGIHTTPRequestHandler
HTTPServer((‘localhost’, 8000), CGIHTTPRequestHandler).serve_forever()
» Skapa därefter en underkatalog med namnet cgi-bin där du lägger filen tail.py.
#!/usr/bin/python
print “Content-type: text/plain\n”
myfile = open(“/var/log/messages”,”r”)
mylines = myfile.readlines()
myfile.close()
print “{\”lines\”:[“
for line_no in range(1,9):
print “{\”content\”:\””+mylines[len(mylines)-line_no].replace(“\””,”\\\””).rstrip()+”\”},”
print “{\”content\”:\””+mylines[len(mylines)-10].rstrip()+”\”}”
print ”]}”
» Tail.py öppnar filen /var/log/messages, hämtar de sista tio raderna och markerar dem i en Json-syntax som du sedan läser in och bearbetar i webbläsaren. Json står för Javascript object notation och är ett sätt att skicka Javascriptobjekt över nätet utan att protokollet blir så ”tjatigt” som xml.
Notera att vårt exempel bara lämpar sig för mindre loggfiler eftersom hela filen laddas i minnet. Är dina loggfiler för stora kommer du att råka ut för minnesproblem. Du måste då bygga om exemplet för att använda buffring och seek i stället.
I hemkatalogen, katalogen där filen cgi-server.py ligger, skapar du filen index.html.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Vi testar MooTools</title>
<script type=”text/javascript” src=”/mootools/mootools.js”></script>
<script type=”text/javascript” src=”/js/widgets.js”></script>
</head>
<body>
<a href=”#” title=”Ladda in data” id=”loadJson”>Visa loggfil</a>
<div id=”doTail”></div>
</body>
</html>
» Som du ser finns det ingen programmeringslogik på sidan utan enbart ett ensamt sidelement med identifieraren doTail. All logik ligger i externa Javascriptfiler. Filen mootools.js hämtar du från projektets hemsida och filen widgets.js ska se ut så här:
window.addEvent(‘domready’, function() {
var doTail = $(‘doTail’);
var addLines = function(lines) {
lines.each(function(line) {
var el = new Element(‘div’, {‘class’: ‘preview’});
var name = new Element(‘div’, {‘html’: line.content}).inject(el);
el.inject(doTail);
});
};
$(‘loadJson’).addEvent(‘click’, function(e) {
e.stop();
var request = new Request.JSON({
url: ’/cgi-bin/tail.py’,
onComplete: function(jsonObj) {
addLines(jsonObj.lines);
}
}).send();
});
});
» Widgets.js är filen där magin skapas. Via referensen till $(’loadJson’) kopplar du på en händelse som reagerar på musklick. När du klickar kommer funktionen att skicka en förfrågan till ditt Pythonskript tail.py som exekveras dynamiskt och hämtar de tio senaste raderna i /var/log/messages. Raderna kommer sedan via funktionen addLines att läggas till i ditt sidelement doTail via referensen $(’doTail’).
» När du är klar med filerna startar du din webbserver med kommandot ./cgi-server.py. Därefter öppnar du webbläsaren, går in på http://localhost:8000/, trycker på ”Visa loggfil” och verifierar att raderna dyker upp i webbläsaren.
» Mycket text för några enstaka rader kan du kanske tycka, men hela modellen går ut på att du interagerar med en bakomliggande server, via Ajaxanrop, utan att hela sidan laddas om och utan att du behöver skriva in fem sidor Ajaxkod. Dessutom kan du med relativt små modifieringar skicka med variabler till servern och på så vis bygga små, enkla och kraftfulla lösningar. Modellen gör det också möjligt att lägga in den här typen av dynamiska ”widgets” i dina existerande hemsidor med minimalt kodande. I stort sett behöver du bara en <div>-tagg där du presenterar din widget och en referens till det Javascript som ska köras.
Exemplet är en modifering av Moo Tools demo för fjärrförfrågningar med Json. I vårt exempel genererar vi informationen dynamiskt på serversidan för att sedan presentera på klienten.
I exemplet använder vi Python på serversidan, eftersom språket har en tydlig syntax, är kraftfullt och har en egen webbserver. Det gör att du inte behöver gå in i Apache eller IIS. Använder du portar över 1 024 behöver du inte heller administrativa rättigheter för att köra tillämpningen.
På klientsidan använder vi ramverket Moo Tools med två insticksmoduler. Fx.Slide expanderar och minimerar vår widget och Request.JSON hämtar vår dynamiska information från servern och presenterar den i våra widgets.
» Webbservern är den absolut enklaste tänkbara och ryms på fyra rader. Döp filen till cgi-server.py och skriv in:
#!/usr/bin/python
from BaseHTTPServer import HTTPServer
from CGIHTTPServer import CGIHTTPRequestHandler
HTTPServer((‘localhost’, 8000), CGIHTTPRequestHandler).serve_forever()
» Skapa därefter en underkatalog med namnet cgi-bin där du lägger filen tail.py.
#!/usr/bin/python
print “Content-type: text/plain\n”
myfile = open(“/var/log/messages”,”r”)
mylines = myfile.readlines()
myfile.close()
print “{\”lines\”:[“
for line_no in range(1,9):
print “{\”content\”:\””+mylines[len(mylines)-line_no].replace(“\””,”\\\””).rstrip()+”\”},”
print “{\”content\”:\””+mylines[len(mylines)-10].rstrip()+”\”}”
print ”]}”
» Tail.py öppnar filen /var/log/messages, hämtar de sista tio raderna och markerar dem i en Json-syntax som du sedan läser in och bearbetar i webbläsaren. Json står för Javascript object notation och är ett sätt att skicka Javascriptobjekt över nätet utan att protokollet blir så ”tjatigt” som xml.
Notera att vårt exempel bara lämpar sig för mindre loggfiler eftersom hela filen laddas i minnet. Är dina loggfiler för stora kommer du att råka ut för minnesproblem. Du måste då bygga om exemplet för att använda buffring och seek i stället.
I hemkatalogen, katalogen där filen cgi-server.py ligger, skapar du filen index.html.
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>Vi testar MooTools</title>
<script type=”text/javascript” src=”/mootools/mootools.js”></script>
<script type=”text/javascript” src=”/js/widgets.js”></script>
</head>
<body>
<a href=”#” title=”Ladda in data” id=”loadJson”>Visa loggfil</a>
<div id=”doTail”></div>
</body>
</html>
» Som du ser finns det ingen programmeringslogik på sidan utan enbart ett ensamt sidelement med identifieraren doTail. All logik ligger i externa Javascriptfiler. Filen mootools.js hämtar du från projektets hemsida och filen widgets.js ska se ut så här:
window.addEvent(‘domready’, function() {
var doTail = $(‘doTail’);
var addLines = function(lines) {
lines.each(function(line) {
var el = new Element(‘div’, {‘class’: ‘preview’});
var name = new Element(‘div’, {‘html’: line.content}).inject(el);
el.inject(doTail);
});
};
$(‘loadJson’).addEvent(‘click’, function(e) {
e.stop();
var request = new Request.JSON({
url: ’/cgi-bin/tail.py’,
onComplete: function(jsonObj) {
addLines(jsonObj.lines);
}
}).send();
});
});
» Widgets.js är filen där magin skapas. Via referensen till $(’loadJson’) kopplar du på en händelse som reagerar på musklick. När du klickar kommer funktionen att skicka en förfrågan till ditt Pythonskript tail.py som exekveras dynamiskt och hämtar de tio senaste raderna i /var/log/messages. Raderna kommer sedan via funktionen addLines att läggas till i ditt sidelement doTail via referensen $(’doTail’).
» När du är klar med filerna startar du din webbserver med kommandot ./cgi-server.py. Därefter öppnar du webbläsaren, går in på http://localhost:8000/, trycker på ”Visa loggfil” och verifierar att raderna dyker upp i webbläsaren.
» Mycket text för några enstaka rader kan du kanske tycka, men hela modellen går ut på att du interagerar med en bakomliggande server, via Ajaxanrop, utan att hela sidan laddas om och utan att du behöver skriva in fem sidor Ajaxkod. Dessutom kan du med relativt små modifieringar skicka med variabler till servern och på så vis bygga små, enkla och kraftfulla lösningar. Modellen gör det också möjligt att lägga in den här typen av dynamiska ”widgets” i dina existerande hemsidor med minimalt kodande. I stort sett behöver du bara en <div>-tagg där du presenterar din widget och en referens till det Javascript som ska köras.
Tusentals gratismoduier
Joomla och Drupal är två populära och öppna system för innehållshantering som i stort är likvärdiga. Båda bygger på php och My SQL, båda har tusentals kostnadsfria moduler för vissa specifika funktioner och båda ger dig möjlighet att bygga egna moduler enligt mvc-modellen (model view controller). Utseendet på webbplatsen utformar du genom att plocka fram en mallsida. Du kan också köpa en färdig mall och utgå från någon av de otaliga webbplatser som erbjuder snygga teman.
Joomla känns mer färdigt från start och har sin styrka i över 4 000 insticksmoduler som du hittar på http://extensions.joomla.org. Drupal kräver lite mer handpåläggning och känns lite råare i sin utformning, men har ett bättre system för åtkomstkontroll.
Drupal kan du även installera med databasen Postgresql som bas. Ett nytt förbättrat rättighetssystem är på gång i Joomla 1.6, som ska släppas i höst.
Hacka inte i källkoden
Gör inte dig själv en otjänst och ”fulhacka” direkt i källkoden. Lär dig och använd de regelverk som respektive plattform sätter upp för att skapa en modul. Kliver du utanför ramarna kommer du att få problem nästa gång det är dags att uppdatera. Att inte uppdatera är ingen lösning, eftersom många uppdateringar är säkerhetsrelaterade.
Det finns många system för innehållshantering, Drupal och Joomla är bara två av dem. Kommersiella alternativ är exempelvis Episerver, Microsoft Office Sharepoint Server eller den öppna och Javabaserade motsvarigheten Alfresco 3.2.
I stort sett alla system för innehållshantering går att installera i Windows. Några kommersiella system finns endast för Windows och kan inte installeras i Linux.
Utvecklarnas värsta gissel har alltid varit den mängd plattformar som finns, med deras olika begränsningar och möjligheter. Flera ramverk har plockats fram, med varierande resultat, för att lösa plattformsberoendet. Qt från norska Trolltech, som köptes upp av Nokia, är ett sådant ramverk för C++. Qt gör det möjligt att från en kodbas skriva tillämpningar som kan köras på Mac, Windows och Linux med respektive plattforms karaktäristiska utseende.
Java är också plattformsoberoende, men är behäftad med en typisk ”Javalook” som inte faller alla i smaken. Eclipseprojektet The standard widget toolkit (SWT) tog på sig uppgiften att skapa ett klassbibliotek som får Javaprogram att se ut som ett vanligt, binärt program kompilerat för Windows, Mac eller GTK+ (Linux). Projektet har också försökt att ta tekniken till webben, men har inte lyckats något vidare.
Minsta gemensamma nämnare
Lyckats har däremot Google gjort. Företaget har tagit tankesättet bakom SWT och byggt ett ramverk de kallar Google Web Toolkit, GWT. GWT är för webben vad Qt är för lokala program. På samma sätt som Qt och SWT är minsta gemensamma nämnare för skrivbordstillämpningar är GWT minsta gemensamma nämnare för webben.
Program du utvecklar i GWT fungerar i Internet Explorer (från version 6 och framåt), Firefox, Safari, Opera och Chrome. Du behöver alltså inte tänka på vilka webbläsare som klarar vilka funktioner eller hur syntaxen ser ut för en specifik webbläsare. Allt sådant tar GWT hand om när ditt program sedan genereras.
Kan infogas i valfri Javamiljö
För en utvecklare låter det i början lite konstigt, eftersom du i GWT inte utvecklar i Javascript utan i Java. I GWT bygger du logiken i din webbtillämpning med en mer strikt Javasyntax som underlättar betydligt när det är dags för felsökning. Kompileringsfel spårar du oftast omedelbart, vilket gör felsökningen betydligt enklare än om du skulle skriva programmet i det mer förlåtande Javascript. Du kan också sätta ”breakpoints” för att gå in i minnet under programkörning och spåra variabelvärden.
GWT är inte bundet till någon specifik utvecklingsmiljö utan kan infogas i valfri Javamiljö, exempelvis Netbeans, Jdeveloper eller Intellij. Google tillhandahåller insticksmoduler framtagna för Eclipse, vilket gör den utvecklingsmiljön mer lämpad om du inte redan är inkörd i någon annan.
Java och asp.net för tungviktarna
De tekniker vi hittills har behandlat har främst varit lämpade för enklare tillämpningar. Kliver du upp en nivå och bygger verksamhetskritiska lösningar med krav på spårbarhet, möjlighet att backa eller rulla fram transaktioner och mer avancerad identitetshantering har du vuxit ur kostymen. Då är det dags att titta på tyngre grejer som J2EE eller asp.net. De ger dig de verktyg du behöver för att skapa affärslogik som klarar verksamhetens krav.
Däremot finns det inget som hindrar dig från att bygga den bakomliggande logiken med de här tyngre verktygen och sedan öppna gränssnitt mot den form av lösningar vi har presenterat. Har du bara sett till att den bakomliggande meddelandehanteringen sker med öppna standarder kan du relativt enkelt bygga widgets eller portlets som hämtar information från dina bakomliggande system.
Hårdvaruaccelerering i sikte
Är du nyfiken på vad nästa stora grej på nätet blir ska du kasta ett öga på Googles gränssnitt för hårdvaruaccelererad 3d, O3D. O3D utvecklas i ett samarbete mellan Google, Mozilla och Khronos. Khronos är den organisation som bestämmer vad som hamnar i open gl, hårdvaruaccelerering för vanliga skrivbordsprogram och spel.
O3D finns i skrivande stund enbart i källkodsform på code.google.com/apis/o3d/ och väger in på imponerande 500 megabyte. Slutresultatet, den kompilerade insticksmodulen, tar bara några megabyte i anspråk.
”Är du nyfiken på nästa stora grej
ska du titta på Googles gränssnitt för
hårdvaruaccelererad 3d, O3D.”
Gränssnittet i O3D är en serie Javascriptbindningar som är en bantad uppsättning av gränssnitten i open gl. Startsträckan för utvecklare av vanliga hårdvaruaccelererade tillämpningar är alltså minimal.
Hos Google hittar du också en uppsjö kodexempel som visar hur du importerar en 3d-modell, animerar den, bestämmer kameravinkel, lägger på texturer och interagerar med 3d-världen. Eventuellt kommer tekniken att införlivas direkt i Google Chrome och Mozillas Firefox.
Eclipse 4 lurar bakom krönet
De två största plattformarna för utveckling är i dag Microsofts Visual Studio och Eclipse, som är öppen källkod. I slutet av juli släpptes en tidig alphaversion av vad som kommer att bli nästa års Eclipse. Fokus i Eclipse 4 ligger på utveckling av webbaserade tillämpningar eller närmare bestämt på tillämpningar som lika gärna kan köras på webben som på din lokala dator.
Exempelprogrammen som följer med Eclipse 4 alpha visar hur gränssnittet modelleras på samma sätt som när du arbetar med cascading style sheets, css, på webben. Du kan också använda en form av Javascript för att i efterhand ändra elementen på exakt samma sätt som i en webbläsare.
Eclipse 4 är fortfarande under utveckling och den version som är ute nu ska ses som en förhandstitt på vad som kan komma under nästa år. Den är på inga sätt mogen för ditt dagliga arbete.
TechWorlds slutsats
Exakt vilken utvecklingsmiljö du ska satsa på, vilket programmeringsspråk du bör köra på serversidan och vilket Ajaxramverk du bör använda finns det inget enkelt svar på. Precis som det tidigare fanns en uppsjö ramverk för skrivbordstillämpningar har du i dag ett ännu större utbud av ramverk för webbutveckling.
Vad vi däremot kan säga med bestämdhet är att de tillämpningar du för tillfället har lokalt installerade är på god väg att bli antikviteter från en svunnen era. Välkommen in i molnet.
Grafik: Jonas Englund
» Så går du vidare
- http://wiki.eclipse.org/E4 – På den här sidan hittar du en tidig version av nästa generations utvecklingsmiljö Eclipse 4.
- http://code.google.com/webtoolkit – Google Web Toolkit är en korskompilerare som omvandlar Java till plattformsoberoende Javascript.
- http://code.google.com/apis/o3d/ – Hårdvaruaccelererad 3d för webben är nästa stora grej. Här får du veta hur det fungerar.
- http://jquery.com/ – Jquery är ett populärt Javascriptramverk som bland annat används av Google, Mozilla, CBS och Netflicx.
- www.youtube.com/watch?v=uofWfXOzX-g – Googles demo av O3D.
- www.dojotoolkit.org/ – Dojo är ett ramverk för Javascript. Klicka på ”See it in action”.
- www.dotnetnuke.com/ – System för innehållshantering byggt på asp.net.
- tools.mozilla.com/ – 136 bra verktyg för webbutvecklaren.
Molnigt på idg.se?
Tack! - (HesaPesa) 2009-11-13 20:31
Tack! - (Magnus, TechWorld | MikroDatorn) 2009-11-13 20:42
Tack! - (HesaPesa) 2009-11-13 20:42
Kvalitetsjournalisti k som vanligt - (Jakob Persson) 2009-11-13 21:12
Tack! - (MCE) 2009-11-13 21:45
Web 3.0 - (MatsEriksson) 2009-11-13 21:56
hehe - (Ninjan) 2009-11-13 22:25
Joomla 1.6 - (Zello) 2009-11-13 22:49
Joomla 1.6 - (Zirro) 2009-11-14 00:06
Web 3.0 - (SiggeLund) 2009-11-14 02:17