Jag är ett stort fan av Unobtrusive Javascripts där man strävar efter att helt separera scriptdelen från sin html-content. Jag använder i dagsläget nästan alltid jQuery när jag kodar javascript. Jag tänker inte gå inte gå in djupare på hur det fungerar i denna bloggpost. Generellt när jag jobbar strävar jag åt DDD-hållet så att alla namespaces innehåll enkelt kan förstås av kunden, även om han inte har någon teknisk kunskap. (Självklart ligger oerhört mycket mer i konceptet DDD)

I mitt scenario jobbar jag med ett projekt som kallas ”Acme”. Jag utgår därför från en scriptfil som jag döper till ”acme.js”. I den lägger jag funktionalitet som är gemensam för hela sidan. Den skulle kunna se ut såhär;

 
var acme = function() {
 
	// Initierare
	var init = function() {
		// Initiera eventuella kontroller etc.
		// Anropa eventuella andra privata funktioner
		somePrivateFunction();
	}, 
 
	// Denna funktionen blir "privat" eftersom den inte returneras
	somePrivateFunction = function() {
 
	}
 
	return {
		init: init
	};
}();
 
$(function() {
	acme.init();
});

När denna scriptfil körs på sidan kommer automatiskt init anropas efter dom:en har laddats. Då kan man där i manipulera dom:en eller kanske binda något event osv.

Säg sedan att mitt projekt innehåller ett forum som behöver specifik javascriptlogik som bara gäller för forumet. Jag skapar därför en ”acme.forum.js” som skulle kunna se ut såhär;

acme.forum = function() {
	var someVariable,
 
	// Initierare, bind knapphändelser m.m
	init = function() {
		$("#someButton").click(validateEmail);
	},
 
	// Validerar e-postadress
	validateEmail = function(event) {
		// Logik för validering
	}
 
	return {
		init: init
	};
}();
 
$(function() {
	acme.forum.init();
});

Här bygger jag vidare på ”acme” variabeln som vi tidigare skapat (eller ”namespacet” om ni nu så vill). Enligt detta tänk fortsätter jag med alla delar av projektet.

När koden sedan skall ut i produktion brukar jag se till att minifiera och kombinera alla mina javascript (även tredjepartsbibliotek t.ex jQuery) till en enda fil vid namn ”acme.min.js”. Detta gör jag för att få ner antalet requests så mycket som går och även få ner storleken på dem. Jag har haft nöjet att jobba ihop med Robert Nyman som har en bra bloggpost om vilka minifierare som finns att tillgå i denna posten.

I mitt fall har jag använt YUI Compressor for .NET som ett ”post build-event” som även sköter minifiering av din CSS. Ett tips är att endast inkludera den minifierade CSS:en när det inte är debugg-kompilerat så blir det oerhört mycket enklare i utvecklingsprocessen.

MooTools i Worker-kontext

Men MooTools har även hjälpmedel för att skriva objektorienterad kod samt en del utökningar och förbättringar för språket som sådant. Om man vill dra nytta av detta för kod som körs i ett annat sammanhang där window och document inte finns tillgängliga, t.ex. i en Web Worker tråd, vad gör man för att få mootools att fungera då?
En variant är att skapa mock-up objekt för att maskera det faktum att objekten inte finns, tomma skelett som bara innehåller det nödvändigaste för att mootools skall kunna laddas utan fel. Självklart ger inte detta tillgång till någon funktionalitet som är beroende av dessa objekt men övriga funktioner finns på plats.

// If we're in a worker we need to masquerade the global context and load mootools
if (self.importScripts) {
	document = {
		prototype: function() {},
		createElement: function() {},
		getElementsByTagName: function() {return []}
	};
	window = {
		document: document,
		Document: document,
		Element: { prototype: function() {} },
		Window:  { prototype: function() {} },
		addEventListener: function() {},
		attachEvent: function() {},
	};
	self.importScripts('mootools.js');
}

Skicka objekt till Workers

Eftersom Web Workers är helt isolerade från webbsidan, dvs. inte har tillgång till något delat minne, går det inte att skicka objekt till dem hur som helst. Enda sättet att kommunicera är genom att posta meddelanden som bara kan överföra strängar. Självklart kan man då serialisera objekten till JSON och skicka med dem.

Varför heter det JSON?

Vad jag då skulle vilja reflektera över är varför det kallas JavaScript Object Notation. Ett objekt är ju en sak som vet vad den är och kan göra saker själv, dvs. en datastruktur med tillhörande kod som beskriver hur den skall uppföra sig.
När man serialiserar ett objekt till en JSON-sträng försvinner alla kodreferenser, dvs. objektets metoder, kvar har man bara datastrukturen. Därför kan det tyckas vara mer korrekt att det borde kallas JavaScript Data Notation

Välsigna datastrukturer

Vad gör vi då för att kunna använda datastrukturer som blivit deserialiserade från JSON som fullfjädrade objekt? Vi kan välsigna dem tillbaka till sin klasstillhörighet genom att koppla ihop datastrukturen med metoderna från klassen igen. Därför skapar vi en en konstruktor som heter bless i basklassen för alla klasser Class som tar en datastruktur och utökar en ny instans av klassen med denna.

// Contructor that returns a new instance of this class
// extended with all properties of the given data structure
Class.prototype.bless = function(data) {
	return $extend(new this(), data);
};

Då kan vi sedan göra exempelvis så här:

var MyClass = new Class({
	myData: "Hello, world!",
	doStuff: function() {
		alert(this.myData);
	}
});
 
var myObject = new MyClass();
var string = JSON.encode(myObject);
 
var data = JSON.decode(string);
// data.doStuff();  <--- Not possible here
var newObject = MyClass.bless(data);
newObject.doStuff();

På så vis kan man återskapa objekt som är identiska med de som skickades trots att de har blivit omvandlade till och från en ren textsträng på vägen.

För att jämföra de olika webbläsarna har jag kört denna Sudoku-kombination och jämfört tiden det tar att räkna fram alla möjliga lösningar på just min dator. Resultatet är ganska häpnadsväckande, som ni kan se i grafen nedan så utklassar Safari Internet Explorer med nästan en faktor på tio-till-ett. Chrome hamnar inte långt efter och både Firefox och Opera placerar sig hyffsat bra. Och då används inte ens Web Worker-trådar som har visat sig ha potential att dubbla prestandan och ytterligare öka försprånget för alla andra webbläsare framför Internet Explorer.

Det bubblar av exempel på och demonstrationer av vad som är möjligt med webbläsare som har stöd för HTML5. I skrivandets stund kan man slarvigt säga att det är de flesta större alternativen till Internet Explorer som visar framfötterna. Firefox, Safari och Opera är alla långt framme vad gäller stöd för HTML5. Microsoft är inte riktigt med i matchen ännu. men jobbar på det, i alla fall enligt egen utsago. Tyvärr är det ju så att IE måste med, för att vi ska kunna börja använda oss av HTML5-specifika funktioner på riktigt.

Den populära spegeleffekten

Vi ska titta på hur man kan skapa en spegeleffekt av exempelvis en bild med hjälp av canvas-taggen. Jag har använt två canvas-taggar, en för huvudbilden och en för den reflekterande ytan. Huvudbilden hade kunnat visas med en vanlig img-tagg, men jag ville ha möjligheten att ”rita” och animera bilden också. Bilden föreställer min yngsta son, Carl.

Principen är enkel; skapa en canvas-tagg med vanlig markup, rita i den med JavaScript.

1. Skapa canvas-taggar

Börja med att definiera två canvas att rita i.

<canvas id="myCanvas" width="164" height="258">
  <p>Din webbläsare har inte stöd för canvas-taggen</p>
</canvas><br/>
<canvas id="mirrorCanvas" width="164" height="258"></canvas>

Innehållet i canvas-taggen är valfritt, men är tänkt att visas för äldre webbläsare eller webbläsare som helt enkelt inte har stöd för canvas-taggen (Varning: tidiga versioner av Safari visade dock detta innehåll). För att enkelt komma åt canvasytorna ger vi dem varsitt ID och en definierad storlek.

2. Ladda huvudbilden

var mainCanvas = document.getElementById('myCanvas');
var mainCtx = mainCanvas.getContext('2d');
 
var img = new Image();
img.src = 'carl.jpg';
img.onload = function() {
  mainCtx.drawImage(img, 0, 0);
};

För att komma åt pixlarna i canvas-ytan, hämtas ett 2d-kontext, som sedan används av drawImage för att rita bilden.

3. Skapa spegeleffekten

var mirrorCanvas = document.getElementById('mirrorCanvas');
var mirrorCtx = mirrorCanvas.getContext('2d');
 
var mainData = mainCtx.getImageData(0, 0, mainCanvas.width, mainCanvas.height);
var mirrorData = mirrorCtx.getImageData(0, 0, mirrorCanvas.width, mirrorCanvas.height);
 
var gradientStep = 70 / mainData.height;
for (var x = 0; x < mainData.width; x++) {
	var currentAlpha = 0;
	for (var y = 0; y < mainData.height ; y++) {
		var mainIdx = (x + y * mainData.width) * 4;
		var mirrorIdx = (x + (mainData.height - 1 - y) * mainData.width) * 4;
		for (p=0; p<3; p++) {
			mirrorData.data[mirrorIdx+p] = mainData.data[mainIdx+p];
		}
		mirrorData.data[mirrorIdx + 3] = currentAlpha;
 
		currentAlpha += gradientStep;
	}
}
 
mirrorCtx.putImageData(mirrorData, 0, 0);

Vi börjar med att hämta pixelarrayer för både huvudbilden och den spegelvända bilden. Detta görs med funktionen getImageData. Den returnerar en platt array med fyra poster för varje pixel. Dessa är i turordning värden för pixelns röda-, gröna-, blåa- och alphavärden.

Huvudbildens pixlar stegas sedan igenom kolumnvis, så att vi kan skapa en reflektion genom att gradvis öka värdet på alphakanalen från 0 till 70 (255 är max). Jag läser uppifrån och ner i huvudbilden, men ritar nerifrån och upp i spegelbilden och får på så sätt bilden spegelvänd.

Till sist uppdaterar vi spegelytan med den modifierade pixelarrayen genom att anropa putImageData.

4. Ett fungerande exempel

Här finns ett fungerade exempel. För att visa att spegelytan är levande, har jag lagt till en animering som startas och stoppas genom att klicka i bilden. Tänk på att du behöver en hyfsat uppdaterad webbläsare som inte är Internet Explorer.

HTML och JavaScript:

• canvas_mirror.html
• canvas_mirror.js

Avslutningsvis, några imponerande canvas-exempel

Realtidsrendrering av 3D-modell av en iPod Touch

Ett fullt fungerade Asteroids implementerat endast med Canvas och JavaScript

Ett canvas tillsammans med bland annat video-taggen för att analysera var de två iPhone-telfonerna är och i realtid uppdatera innehållet mellan dem med exempelvis innehållet från en annan video-tagg.

Läs mer

• Mozilla Developer Tutorial
• Bloggat om canvas på hacks.mozilla.org
• Canvas Cheat Sheet

Responstid före och efter jag bytt ut ancerstorview-taggen

Vad är ancestorView?

ancestorView används för att skapa en hierarkisk vy av sektioner utgående från den sektion du anger. Inget speciellt avancerat eller konstigt. Det borde inte heller vara jobbigt för systemet att skapa vyn, tyvärr sker något under ytan som ställer till det. Berätta gärna vad i kommentarerna.

Hur det kan se ut (före)

Ett vanligt sätt att använda sig av ancestorView är för att exempelvis bygga en sökväg till en navigering:

<section:ancestorView id="sectionView" section="${article.homeSection}" includeRoot="true"/>
<menu:use id="navigation" treeName="myMenuName">
	<c:set var="count" value="1"/>
	<view:iterate id="item" name="sectionView">
		<menu:item id="current" sectionId="${item.id}"/>
		<c:choose>
			<c:when test="${count eq 1}">
				<c:set var="sectionPath" value="${current.text}"/>
			</c:when>
			<c:otherwise>
				<c:set var="sectionPath" value="${sectionPath}/${current.text}"/>
			</c:otherwise>
		</c:choose>
		<c:set var="count" value="${count+1}"/>
	</view:iterate>
</menu:use>

Skapa en lättviktig ersättning till ancestorView

En enkel väg till ett liv utan ancestorView-taggar är att skapa en mycket enkel custom tag. Nedanstående implementation har inte stöd för precis allt du kan göra med Escenics variant, men den gör jobbet för de flesta användningsfallen. Jag döpte den till ancestors.tag och la den i /WEB-INF/lib/tags/section.

<%@tag body-content="empty"%>
<%@tag import="neo.xredsys.api.Section, java.util.ArrayList"%>
<%@attribute name="id" required="true" rtexprvalue="false"%>
<%@attribute name="section" type="neo.xredsys.api.Section" required="true"%>
<%@attribute name="includeRoot" type="java.lang.String" required="false"%>
<%@variable name-from-attribute="id" alias="sectionPath" scope="AT_END"%>
<%
	final ArrayList sections = new ArrayList();
	if (section != null) {
		do {
			sections.add(0, section);
			section = section.getParent();
		} while (section != null && ("true".equals(includeRoot) || section.getParent() != null));
	}
	jspContext.setAttribute("sectionPath", sections);
%>

Det enda som egentligen sker här är att jag bygger upp en lista med föräldrasektioner i omvänd ordning genom att anropa Escenics API. Detta går av någon anledning massor med gånger snabbare.

Hur det kan se ut utan ancestorView

<%@ taglib prefix="sec" tagdir="/WEB-INF/tags/section" %>
<sec:ancestors id="sectionView" section="${article.homeSection}"/>
<menu:use id="navigation" treeName="myMenuName">
	<c:forEach var="item" items="${sectionView}" varStatus="itemStat">
		<menu:item id="current" sectionId="${item.id}"/>
		<c:choose>
			<c:when test="${itemStat.first}">
				<c:set var="sectionPath" value="${current.text}"/>
			</c:when>
			<c:otherwise>
				<c:set var="sectionPath" value="${sectionPath}/${current.text}"/>
			</c:otherwise>
		</c:choose>
	</c:forEach>
</menu:use>

Eftersom jag inte längre arbetar med en vy av sektioner, kan jag iterera över listan med föräldrasektioner med en vanlig c:foreach med fördelar som varStatus, mm.

Slutsats

Om du använder Escenic i någon 4.x-version och om du får några träffar när du söker på ancestorView i din kodbas, finns all anledning att se över ett byte!

JRuby on Rails – Nick Sieger (SUN Microsystems)

Presentationen: jruby-railsconf-2009.pdf

Huvudpunkterna på föreläsningen var:

• Installation
• Utveckling
• Prestandatestning
• Interaktion med Java
• Testning

Jag hade gärna sett att han gått in lite mer på djupet om skillnaderna
mellan JRuby och MRI, Olika sätt att deploya (Han visade GlassFish,
med tveksamt resultat)

Ett verktyg jag helt klart kommer att använda mig av i framtiden är VisualVM.

A Hat Full of Tricks with Sinatra – Blake Mizerany (Heroku)

Det första som händer är att Christian Neukirchen,
huvudutvecklaren av Rack sätter sig brevid mig.

Första fjärdedelen av Blakes föreläsning handlar inte om
Sinatra över huvud taget utan om just Rack.

Minimal Rack-applikation

run lambda { |env| [200, {'Content-Type' => 'text/html'}, ['Hello']] }

Minimal Sinatra-applikation

require 'sinatra'
 
get '/' do
  'Hello'
end

Rekomenderade böcker

• Agile Software Development, Principles, Patterns, and Practices

Exempelkod

• Modulen sinatra-captcha

Relaterade länkar

• http://blogs.sun.com/arungupta/entry/rails_conf_2009_day_1

Sedan några timmar så kan man köra Phusion Passenger under Nginx!

Phusion Passenger och Apache har under en tid varit det populäraste sättet att enkelt driftsätta Ruby on Rails och Rack-applikationer. Nu kan man alltså välja att köra Passenger under den ryska (och tokigt snabba) Nginx.

Det enda man behöver göra är:

1. Installera gem: sudo gem install passenger
2. Köra Nginx installern: sudo passenger-install-nginx-module
3. Konfigurera (Det mesta sköts automagiskt)
4. Starta

Mer ingående instruktioner finns på Phusion’s blogg

Phusion Passenger

Hongli Lai och Ninh Bui presenterade Phusion Passenger (också känd som mod_rails) under RailsConf 2008, det var då jag verkligen fick upp ögonen för projektet.

I den nya versionen har Phusion-grabbarna förutom att man nu kan använda sig av två olika webbservrar för att köra Passenger lagt till:

• Stöd för ”chunked file uploads”
• Stöd för Capistranos sätt att sköta driftsättning (Symlänkning av current osv.)
• Förmåga att ladda application_controller.rb från en icke-standard sökväg
• ”Worker process event hooks” för Rack

Nginx

Nginx driver ett flertal stora webbplatser, såsom WordPress, Hulu, Github, och Ohloh. Den serverar mer än två miljoner webbplatser och är därmed den näst populäraste webbservern under Linux.

Modulen hittar ni här: Geo::SweGrid

Saker som går att återanvända och andra kan ha nytta av delar vi gärna med oss av. Ett exempel på detta är Perl-modulen Geo::SweGrid som används för att konvertera geografiska koordinater mellan det system som används globalt och det som används på vissa svenska kartor.

Det distribuerade arkivet för Perl-moduler heter CPAN, dit kan alla bidra med sin kod. När en modul väl finns i arkivet kan den lätt installeras på vilken dator som helst så här:

[user@host ~]$ sudo cpan
 
cpan shell -- CPAN exploration and modules installation (v1.9304)
ReadLine support enabled
 
cpan> install Geo::SweGrid

Funktionen är liksom Bloggportalen i övrigt byggd i Java med Struts som applikationsramverk och Hibernate som ORM / Object-relational mapping och persistenslager. Data hämtas som XML över nätet från en webbtjänst hos Sesam. Sedan används XPath för att välja ut relevant data att presentera.

Detta sätt att presentera information och funktionalitet från flera olika källor på en och samma webbplats kallas ibland för en ”mashup”. Ett annat exempel på detta är kartorna på Bloggportalen som skapas med hjälp av en tjänst från Google Maps.