Arkiv för kategori ‘Programmeringsspråk’

jQuery är snyggt

Publicerad 9 april, 2010 av Christian Lizell

Större delen av gårdagen ägnades åt en workshop (tack @stpe) kring frontendutveckling. Fokus var på YUI, men eftersom jag jobbat en del med det redan, men däremot inte hunnit dyka ner i jQuery på riktigt, valde jag det senare.

Min idé var att göra ett lajvflöde av Flickr-bilder och Twitter-postningar baserat på ett givet sökord eller tag.

JSONP

Både Flickr och Twitter har rika APIer i JSON-format som gör det lätt att åstadkomma det jag vill. Då dessa av naturliga skäl inte ligger på samma domän som min labb, kan jag inte göra ett vanligt XHR-anrop eftersom webbläsaren av säkerhetsskäl kastar ett same domain-policy-fel. Räddningen stavas JSONP, som helt enkelt wrappar hela JSON-svaret i ett metodanrop. Detta går vi inte in närmare på denna gång, utan konstaterar istället glatt att jQuery har stöd för detta och löser detta under ytan.

jQuerys effektköer

Planen är alltså att långsamt smyga in en bild, visa den ett tag, sedan dimma ner den och till sist ta bort den helt.

Sedan jQuery 1.4 finns det en toppenmetod för att hantera pauser i den allmänna effektkön, fx. Metoden heter delay() och låter mig åstadkomma önskat beteende på ett oerhört kompakt och tydligt vis.

$(img).fadeIn('slow').
    delay(1000).
    fadeTo('slow', 0.3).
    delay(2000).
    fadeOut('fast', function() { $(this).remove(); });

Det är ju nästan som att prata svenska (engelska)! Vi repeterar:

  • Smyg långsamt in bilden
  • Vänta en sekund
  • Dimma ner den litet
  • Vänta två sekunder
  • Smyg snabbt bort bilden och ta bort den

Koden

Vill du se hur det ser ut, kan du titta här eller ladda ner hela koden och labba vidare själv.

Etiketter: , , ,
Postat i Guider, Programmeringsspråk | Inga kommentarer »

JSON och MooTools för Web Workers

Publicerad 6 oktober, 2009 av Johan Beronius

MooTools är en trevlig verktygslåda som främst är tänkt för att skriva JavaScript-kod som manipulerar element på en webbsida och skapar animeringar och grafiska effekter. Därför är den starkt knuten till objekten window och document som finns i det globala kontextet när JavaScript-kod körs på en vanlig webbsida.

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.

Etiketter: , , ,
Postat i Kod, Programmeringsspråk, Webbutveckling | Inga kommentarer »

JavaScriptprestanda

Publicerad 1 oktober, 2009 av Johan Beronius

För moderna webbapplikationer där en större del av koden körs i webbläsaren blir det allt viktigare med bra prestanda för exekvering av JavaScript.
För att kontrollera text i formulärfält och liknande simpla uppgifter är inte hastigheten så avgörande, men vad händer om man försöker köra tyngre beräkningar? För att göra ett benchmark som testar prestandan i de vanligaste webbläsarna har jag skrivit ett program som löser Sudokus.

Ett program som löser Sudoku med JavaScript

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.

Tid för att lösa ett Sudoku med JavaScript i olika webbläsare

Etiketter: , ,
Postat i Kod, Prestanda, Programmeringsspråk, Webbutveckling | Inga kommentarer »

Potion, ett objekt- och mixin-orienterat språk

Publicerad 2 juli, 2009 av Peter Hellberg

Why’s Potion

Författaren, tecknaren, musikern, konstnären, och programmeraren Why the Lucky Stiff har under en tid jobbat med ett litet och snabbt språk som han döpt till Potion. Språket är inte på något sätt färdigt eller ens menat att tas på allvar, men jag tycker att det är roligt att experimentera med nya och annorlunda språk.

Mantrat bakom Potion

”Allt är ett objekt, men objekten är inte allt” samt tillägget ”Oh, och allt är en funktion”

Vad är speciellt med Potion?

  • Potion kompilerar ner programmen till maskinkod
  • Det inkluderar en liten ”generational near-exact garbage collector”
  • Det är två språk i ett: ett för kod, ett för data
  • Det består av färre än 10.000 rader C

Potion är inspirerat av språken Io, Ruby, OCaml, Lua, REBOL och C. I den ordningen.

Installation under Mac OS X

Först måste man installera Ragel och det gör man enklast genom MacPorts:

sudo port install ragel

Och sedan klonar man källkoden med Git:

git clone git://github.com/why/potion.git

Efter det kompilerar man koden:

make

Dags att skriva lite kod

Enklast möjliga

'Athega' print

Kommer helt enkelt att skriva ut strängen ‘Athega’ genom att man skickar meddelandet print.

Något lite roligare

loop: 'Athega' print.

I Potion startar man block av kod med kolon och avslutar med punkt. Kommandot loop kommer att inte helt oväntat loopa över blocket (en oändlig loop). Meddelandet print sänds till strängen ‘Athega’. Strängar är objekt, som allt annat. De tar emot meddelanden. Meddelanden är separerade från objekt med mellanrum. (I de flesta programmeringsspråk använder man punkt för att separera meddelanden, här (precis som i Svenska) representerar punkt ett avslut på något.)

Listor

('kaffet', 'på', 'h21', 'rockar') at (2) print

Nu skriver vi ut strängen ‘h21′. Allt inom parenteser är listor. Vi skickar meddelandet at. Alla listor har ett at meddelande som hämtar poster baserat på positionen i listan.

Notera att efter at meddelandet kommer det en till lista. (2) är ett argument till at. Den ser ut som en lista (och det är en lista,) men vi kallar den för ett argument eftersom den kommer efter ett meddelande.

Den funktionella sidan

  minus = (x, y): x - y.
  minus (y=10, x=6)

Här har vi en variabel som innehåller en funktion. Funktionen subtraherar y från x. I detta fall returneras -4.
(Detta liknar hur nyckelordsargument fungerar i Lua och Python)

Den objektorienterade sidan

Person = class: /name, /age, /sex.
 
Person print = (): 
 ('Mitt namn är ', /name, '.') join print.
 
p = Person ()
p /name = 'Peter'
 
p print

En subklass

Developer = Person class (language): /language = language.
 
Developer print = ():
  ('Mitt namn är ', /name, ' och jag gillar ', /language, '.') join print.
 
u = Developer ('Ruby')
u /name = 'Peter'
 
u print

Licks

Till sist har vi Lick vilket är dataspråket jag nämnde tidigare. Men varför skulle man vilja ha två språk i ett? En anledning är att det kan vara svårt att uttrycka data i kod.

Genom att ha ett separat litet dataspråk kan man bygga trädstrukturer av godtyckliga element, ungefär som i HTML. (Man kan se det som kod som har blivit tolkad men inte exekverad)

[name (attr1='string', attr2=10) 'TEXT HERE']

Varje lick kan ha ett namn, en tabell med attribut och en lista med barn. Listan med barn kan även vara av någon annan datatyp. (tex nummer eller sträng)

Vidare läsning

Etiketter: , , ,
Postat i Kod, Programmeringsspråk, Öppen källkod | Inga kommentarer »