Sep 30 2008

Die ultimative addEvent-Funktion

Tag: JavascriptPatrick @ 11:30 pm

Stephen Stchur veröffentlichte kürzlich in seinem Blog die “ultimate addEvent() function“.

Bereits seit mehreren Jahren beschäftigt sich Stchur mit Events und deren Umsetzungen in verschiedenen Browsern.

Mit der Erfahrung, die er sich in dieser Zeit aneignete, machte er sich nun ans Werk seine addEvent-Funktion zu überholen und zu optimieren.

Von den bisherigen Lösungen soll sich diese ultimative addEvent-Funktion durch folgende Punkte abheben:

  • funktioniert in allen gängigen Browsern
  • gewährleistet das korrekte Auslösen von Events (betrifft vor allem den IE)
  • zwingt den IE zum korrekten Umgang mit “this” in within-Eventhandler-Funktionen
  • standardisiert die Event-Befehle in allen Browsern (kein vorangestelltes “on” im IE mehr nötig)
  • führt die Events “mouseenter” und “mouseleave” für alle Nicht-IE-Browser ein
  • bietet die Möglichkeit über Plugins eigene Events zu definieren (zum Beispiel “mousewheel” oder “DOMContentReady”)

Die komplette Javascript-Funktion steht hier zum Download zur Verfügung.


Sep 29 2008

Qooxdoo 0.8 – Alles neu, besser und schneller

Tag: Ajax FrameworksPatrick @ 3:11 pm

Um das aus Deutschland stammende Ajax-Framework Qooxdoo, über das wir bereits berichteten, war es in den letzten Monaten still geworden. Vor einem Monat meldeten sich die Entwickler mit der grundlegend überarbeiteten Version 0.8 ihrer All-in-one-Bibliothek zurück.

Die Bereiche, die am meisten von der Überarbeitung provitieren, sind das “GUI Toolkit” und das “developer tool chain”.

Der Code des GUI-Toolkit wurde für Qooxdoo 0.8 komplett umgeschrieben. Das Toolkit soll damit auf dem aktuellen Technik-Stand sein und Unterstützung für alle gängigen Browser (IE, Firefox, Safari, Opera) bieten.

Das GUI-Toolkit besitzt eine Schichtarchitektur: Über einer niedrigeren DOM-basierten Ebene (die auch als unabhängige Bibliothek genutzt werden kann), werden eine Vielzahl von Widgets und Layout-Managern eingebunden.

Entwicker von RIA- (Rich Internet Applications) Umsetzungen können kinderleicht eigene angepasste Widgets und Layouts erstellen. Das Bearbeiten der Themes von Widgets ist völlig unabhängig vom eigentlichen Widget-Code und erlaubt nun unbgegrenzte Gestaltungsmöglichkeiten wie abgerundete Rahmen, Farbverläufe und Schatten.

Das neue Qooxdoo kommt mit zwei neuen schicken Themes daher. Diese können auf einfache Weise angepasst werden – völlig ohne CSS-Kenntnisse.

Neben den interessanten Änderungen an dem GUI-Toolkit, wurde auch das “developer tool chain” genannte Werkzeug gehörig aufgebohrt. Dieses integrierte Tool befreit den Web-Entwickler von lästigen und komplizierten Aufgaben und bietet zu gleich Hilfestellung während der Anwendungserstellung.

In der Vorgängerversion erfolgte der Entwicklungsprozess noch per Makefile und erforderte Windowsnutzer um Cygwin installieren und nutzen zu können, löste man sich nun in Qooxdoo 0.8 von diesen Voraussetzungen. Alles was jetzt noch benötigt wird, ist eine funktionierende Python-Installation, die auf jedem beliebigen Betriebssystem (einschließlich Windows) läuft und sich leicht konfigurieren lässt.

Weitere Höhepunkte der neuen Version von “Tool Chain” sind:

  • Verknüpfen von Grafiken
  • Unterstützung einer Vielzahl von Sprachen
  • JSON-basierte Konfiguration
  • Testen einzelner Segmente
  • umfangereiche API-Dokumentation

Einen leichten Einstieg in Qooxdoo bietet das Online-Handbuch (englisch).


Sep 25 2008

Google Developer Day 2008 in München

Tag: GoogleTobi @ 9:00 pm

Wie angekündigt, war ich in München, um am Google Developer Day 2008 im ICM auf dem Messegelände in München teilzunehmen. Pünktlich um 06:00 Uhr in der Frühe ging mein Flieger ab Dresden. Obwohl ich bereits 08:30 Uhr vor Ort war, konnte ich mich schon registrieren. Neben meinem Namensschild bekam ich einen lustigen USB Stick, auf dem sich Daten zum Event befinden.

Punkt 09:00 Uhr war dann Einlass. Bereits vor Beginn der Eröffnungsrede wurden wir Teilnehmer mit Getränken und kleinen Snacks verpflegt. Die Themen der Konferenz waren die Maps API, YouTube API, Visualization API, App Engine, Web Toolkit, OpenSocial, Android, Gears und nicht zu vergessen Google Chrome. Neben den Breakout Sessions gab es auch Codelabs, in denen man sich mit der Programmierung von Anwendungs-Szenarien auseinander gesetzt hat.

Ich selber habe bisher nur mit der Maps API und vereinzelt auch mit der Visualization API gearbeitet, deshalb beschloss ich das Maps Codelab zu besuchen. Interessant fand ich, dass man dank eines Plugins die Google Earth API mit der Maps API nutzen kann. Ebenso kann Streetview verwendet werden. Nach dem Codelab war dann auch schon Mittagspause. Während der Mittagspause gab es einen zusätzlichen Vortrag über den neuen Webbrowser Google Chrome und die V8 Engine.

Nach der Pause besuchte ich den äußerst interessanten Vortrag über die YouTube API. Mit dieser API kann man in der Tat ohne großen Aufwand seine eigene Video Community erstellen. Als nächstes wollte ich mich über die App Engine informieren. Das tat ich dann auch einige Minuten, bis ich mangels Interesse in einen anderen Konferenzraum zum Thema Android wechselte. Dort wurde die zum selben Zeitpunkt laufende Pressekonferenz in New York zum neuen Mobiltelefons “G1″ per Live Stream übertragen.

Danach war es auch schon 17:30 Uhr und Zeit für die Schlussrede. Diese wurde größtenteils von Chris DiBona geführt, der nochmal einige Features von Android OS, welches eine offene Entwicklungsumgebung bietet, zeigte.

Zum Abschluss des Tages standen die Google Mitarbeiter für Gespräche oder auch ein Spielchen am Kickertisch zur Verfügung.

ICM in München Google USB Stick Ansprache mit Chris DiBona Google Maps Codelab Synchronisation von Youtube API und Maps API

Update 26.09.2008:
Soeben bekam ich eine Mail von Google. Hier gibts ein Fotoalbum vom Developerday in München.


Sep 25 2008

Eine einfache Javascriptbibliothek: Pi

Tag: Ajax Frameworks,AllgemeinesPatrick @ 8:11 pm

Pi ist eine leichtgewichtige Javascriptbibliothek, die für die Bedürfnisse von JS-Programmieren entworfen wurde.

Pi wurde zum einen entwickelt um eine nützliche Entwicklungsumgebung zu bieten, zum anderen um speziell die Unterschiede der verschiedenen Browser zu minimieren.

Die umfangreiche pi.element-Klasse ermöglicht es, komplexe Benutzerschnittstellen leicht und systematisch zu erstellen.

Die extend-Methode erlaubt das objektorientiertes Erzeugen und Erweitern von Klassen. Dazu steht ein Tutorial zur Verfügung.

Ajax-Anwendungen werden mittels pi.xhr-Klasse entwicklerfreundlich entwerfen.

Mit pi.get() lässt sich einfacher auf Elemente zugreifen. Zudem stellt pi.util.Element eine Menge Methoden zum intuitiven Manipulieren der DOM-Syntax zur Verfügung.

Mittels pi.env kann der Browser des Webpage-Besuchers abgefragt werden.

Als Beispielanwendungen, die auf Pi setzen, wären der Javascript-Debugger Firebug Lite und ein Realtime-Chat zu nennen. Wobei letzterer noch den Pi-Plugin Comet nutzt.


Sep 23 2008

Webkit SFX schlägt zurück

Tag: TrendsPatrick @ 7:57 pm

Der Sommer diesen Jahres ist geprägt vom Wettstreit der Browserentwickler um die schnellste Javascript-Engine. Das Stichwort dabei lautet ganz klar “Virtual Engines”.

Nachdem erst Mozilla ankündigte in der 4. Firefox-Generation eine virtuelle JS-Engine einzusetzen, meldete sich prompt das Safari-Lager und stellte in Form des aktuelles WebKit-Browsers ihre SquirrelFish-Engine vor, die die Vorteile von “Virtual Engines” eindrucksvoll demonstrierte und alle bisherigen JS-Verarbeiter in den Schatten stellte.

Inzwischen setzte der Internetriese Google mit dem hauseigenen Chrome-Browser zum Gegenschlag an. Die V8-Javascriptengine von Chrome beeindruckte in vielen Benchmarks und schien die Performancekrone inne zu haben.

Nun kontert WebKit erneut und stellt mit SquirrelFish Extreme (kurz SFX) eine nochmals ein gutes Stück schnellere Javascriptengine vor.

Im Vergleich zum Vorgänger wurde an 4 Bereichen sehr hart gearbeitet. Diese wären: weitere Bytecode-Optimierung, polymorphes Inline-Caching, ein schlanker, schneller und theardbasierter JIT (just in time)-Compiler und die neue Engine für reguläre Ausdrücke (regular expressions), die von der JIT-Infrastruktur gebraucht macht..

Die Benchmark-Ergebnisse sprechen für sich allein.

Der Wert gibt an, wie oft in einer Minute der Sunspider-Benchmarktest durchgeführt wurde.

JS-Engine Sunspider / Minute Zuwachsfaktor
WebKit 3.0 5,4 -
WebKit 3.1 18,8 ~ 3,5x
SquirrelFish 29,9 ~ 5,5x
SquirrelFish Extreme 63,6 ~ 11,8

Ich habe am heutigen Tag selbst einen kurzen Benchmark mit Dromeao durchgeführt um mir ein Bild der aktuellen Browserversionen in Sachen Performance machen können.

Browser Ergebnis (in ms) Unterschied (in ms)
Webkit R36766 4421,40 -
Chrome 0.2.152.1Beta 5489,20 +1067,80
WebKit R34380 6173,60 +1752,20
Safari 3.1.2 6836,00 +2414,60
Firefox 3.0.2 7910,40 +3489,00
Firefox 3.0.1 7928,40 +3407,00
Opera 9.6Beta (10433) 9049,00 +4627,60
Firefox 3.1Beta (TraceMonkey) wird nachgeholt

Übrigens:

Mozilla gab heut die Beta-Firefox Versionen 2.0.0.17 und 3.0.2 frei.


Sep 22 2008

Dojo Toolkit in Version 1.2 RC1 erschienen

Tag: DojoPatrick @ 10:31 pm

Das Dojo-Entwicklerteam hat eine erste Releaseversion ihres Tookits der Version 1.2 veröffentlicht.

Reichlich Updates und neue Features finden sich in diesem Release:

  • mehr als 1000 Änderungen, Verbesserungen und Bugfixes im Vergleich zu Version 1.1.1
  • enorme Verbesserungen der Schnittstelle Dijit (einschließlich der attr()-Methode zum Abfragen und Ändern von Attributen) und eine Generalüberholung aller Widgets
  • neue und sehr verbesserte Dojo Grid-Funktion (inklusive viller dojo.data-Integration)
  • erweiterte Möglichkeiten zum Erstellen von Diagrammen, Tooltips, Animationen, Legenden und Ereignissen

Weiteren neue Features:

  • Multi-File-Uploader
  • weiterentwickelte Grafik-Widgets (Lightbox, Slideshow und so weiter)
  • schneller XML-Parser
  • schnellerer Weg um Google Analytics einzubinden
  • verbesserte Sicherheit (zum Beispiel für windowName und dojox.secure)
  • volle JSON-Unterstützung

Dies soll eine wirklich nur kleine Auswahl der Änderungen sein. Wer mehr darüber erfahren möchte, kann einen Blick in die Release Notes werfen.

Dojo 1.2 RC1 steht auf der entsprechenden Entwicklerseite zum Download zur Verfügung.


Sep 19 2008

Pacman mit YUI umgesetzt

Tag: Spiele,YahooPatrick @ 7:56 pm

Kris, Betreiber des Blogs digitalinsane.com, stellte vor kurzem eine Yahoo! User Interface-Umsetzung des Spieleklassikers Pacman vor.

Wie Kris selbst eingesteht, ist das Spiel nicht perfekt, der Code noch optimierbar und enthält noch etliche Fehler. Dafür läuft das Game jedoch auf allen modernen Browsern und kommt dabei ohne Flash aus.

Die künstliche Intelligenz der vier Geister, die den Spieler erwischen wollen, ist ebenso noch nicht ausgereift. So kann es vorkommen, dass sie “davonlaufen” sobald sie Pacman gefunden haben.

Gestartet wird das Spiel mit Drücken der Enter-Taste. Mittels Pfeilstasten bewegt man die Spielfigur von Level zu Level durch die Spielwelt.

Alle Freunde von Nostalgiespiele werden ihre Freude daran haben. Viel Spaß beim Spielen.

Pacman mit YUI umgesetzt


Sep 02 2008

Google stellt eigenen Browser Google Chrome vor

Tag: Google,TrendsPatrick @ 11:12 pm

Der Internetriese Google breitet sich in den Weiten des World Wide Web weiter aus.

Am heutigen Dienstag stellte das Unternehmen mit der gleichnamigen Suchmaschine einen eigenen, auf WebKit basierenden Browser namens Google Chrome als Beta-Version der Öffentlichkeit vor.

In Sachen Ausführungsgeschwindigkeit von Javascript ging man jedoch eigene Wege und ließ in Dänemark die JS-Engine V8 entwickeln.

Die Gründe dafür liegen in der Tatsache, dass zu Projektbeginn nicht abzusehen war, dass die WebKit-Entwickler mit SquirrelFish bereits an einer virtuelle Javascript-Engine arbeiten, die einen enormen Performanceschub bringen soll.

Die virtuelle V8-Engine erzeugt dynamisch aus dem Javascript-Code Maschinencode, der direkt vom Prozessor ausgeführt wird.

Vor allem in modernen, javascriptlasten Webanwendungen – wie GoogleMaps – soll V8 dadurch seine Stärken ausspielen können.

Wie der gesamte Browser, nutzt V8 auch die Vorteile von Mehrkernprozessoren zur weiteren Performancesteigerung.

Durch das dynamische Optimierungsverfahren “Hidden-Class-Transition” werden JS-Objekte mit gleichen Eigenschaften um nicht sichtbare, geteilte Klasse erweitert.

Innerhalb von Google Chrome wird jeder Tab in einem eigenen Prozess ausgeführt.

Dadurch wird zum einen das Speicherleckproblem umgangen, da nach jedem Schließen eines Tabs der Speicher vom Betriebssystem selbst freigegeben wird, und zum anderen verhindert man so den Komplettabsturz des Browsers bei unerwarteten Fehlern beim Öffnen von Internetseiten.

Aus Webentwicklersicht ist der eingebaute Prozessor-, Speicher- und Netzwerk-Ressourcenmanager das eigentliche Highlight, der für jeden einzelen Tab – und damit für jede Website separat – die Systembelastung anzeigt.

Ebenso wie Safari und Microsofts Internet Explorer 8 bietet Google Chrome das Surfen über einen “Privacy Mode” an. Wird dieser für einen Tab aktiviert, werden weder Cookies, noch Einträge in der Chronik oder sonstige Spuren hinterlassen, die Dritten Aufschluß über das Surfverhalten des jeweiligen Nutzers bieten könnten.

Mit dem “Omnibox” genannte Feature vereint der Suchmaschinenriese die Adressleiste mit dem in der Konkurrenz meist zu findenden, unabhängigen Eingabefeld für Suchanfragen.

Im Großen und Ganzen bietet Google einen Browser auf dem Stand der Zeit mit ansonsten allen bekannten Features wie Phishing- und Malware-Filter zum Schutz des Users vor Betrügern.

Wer Interesse hat, kann den Google Chrome hier downloaden.

Über die weiteren Pläne und Visionen wird Google auf dem Google Developer Day berichten, der am 23. September in München stattfinden wird. Tobias und ich werden vor Ort sein und über Neuigkeiten und Eindrücke berichten.