Skip to content

Javascript Meetup Wiesbaden

Zum Barcamp Karlsruhe waren auch einige Teilnehmer aus dem Rhein-Main-Gebiet angereist, darunter Reto aus Wiesbaden. Da das letzte Treffen der Javascript User Group Frankfurt mittlerweile über ein Jahr zurückliegt, haben wir kurzerhand beschlossen, ein Javascript-Treffen in Wiesbaden auf die Beine zu stellen. Wir haben den Eindruck, dass es im Rhein-Main-Gebiet ein starkes Interesse an JS-Themen gibt und auch ein großes Know-How. Gerade weil sich der JS-Bereich momentan sehr dynamisch entwickelt, aber die Möglichkeit eines direkten Austauschs fehlt, haben wir uns in Rücksprache mit Björn, dem JSUGFRA-Organisator, für ein Meetup in Wiesbaden entschieden.

Um herauszufinden, wie groß das Interesse wirklich ist, ob sich regelmäßige Treffen lohnen, oder ob es vielleicht wieder zurück nach Frankfurt geht, habe ich ein kleines Formular erstellt. Wenn ihr Interesse an einem JS-Treffen (in Wiesbaden) habt, tragt euch doch bitte ein. Das Ganze dient uns nur dazu, unser Vorhaben besser einschätzen zu können - es ist kein Anmeldeformular! Ganz toll wäre es, wenn ihr selbst ein Thema vorstellen wollt, oder wenn ihr Ideen und Vorschläge für eine geeignete Location habt.

PHP-Treffen goes Javascript

9. Treffen der PHPUG RheinhessenBei unseren PHP-Anwendertreffen dreht sich normalerweise alles um PHP. Das überrascht wenig. PHP-Entwickler haben in ihrem Alltag aber mit einer ganzen Reihe von weiteren Programmiersprachen und Anwendungen zu tun: Datenbanken, Webserver, AJAX, XML, jQuery, um nur einige zu nennen, denen wir alle mehr oder weniger häufig begegnen.

Weil ein Blick auf PHP allein unsere Perspektive also einengen würde, haben wir von Anfang an beschlossen, offen für Anderes zu sein. Schließlich können und wollen wir immer dazulernen. So kam es am Dienstag zu einem User-Treffen, bei dem PHP nur eine kleine Rolle spielte. Vielmehr stand diesmal ein heimlicher, einstmals gar unpopulärer Star des Webs im Mittelpunkt: Javascript.

Sebastian Fastner, Cover Developer von Unify, einem Framework für plattformübergreifende Entwicklung mobiler Anwendungen, gab uns einen tiefen Einblick in dessen Möglichkeiten. Javascript, insbesondere das Qooxdoo-Framework, spielt dabei eine wichtige Rolle. Wir haben Sebastian mit vielen interessierten Fragen geradezu gelöchert, und er hat alle ausführlich und sehr kompetent beantworten können. Vielen Dank dafür nochmal!

Im Anschluss stellte ich node.js vor, ein serverseitiges Javascript-Framework, das ereignisgesteuerte Applikationen ermöglicht und von PHP-Entwicklern etwas Umdenken erfordert. Anhand eines kleinen Beispielskripts konnten wir uns das auch genauer ansehen.

Insgesamt wurden aus den anvisierten kurzen Vorträgen doch etwa drei Stunden intensiver Erfahrungsaustausch, der allen Beteiligten viel gebracht haben dürfte. Und es war eines der besten UG-Treffen bisher. So kann es gern weitergehen - auch mit PHP.

Dieser Artikel ist zuerst im Blog der PHPUG Rheinhessen erschienen.

Freier Routing-Dienst von MapQuest

Mapping ist ja einfach nur ein Hobby von mir. Seit ich vor einigen Jahren die Community-betriebene Openstreetmap entdeckt habe, faszinieren mich die unterschiedlichen Facetten dieses Themenkomplexes ungemein. Regelmäßig lese ich einige Mapping-Blogs, unter anderem OpenGeoData. Dort wurde gestern ein Hinweis auf ein neues, offenes Routing-API von MapQuest gepostet. Routing und Navigation waren bisher eigentlich immer so die Punkte, die ich als noch zu jung und experimentell und meist für den Praxiseinsatz unbrauchbar empfand. Das könnte sich nun ändern, denn der frei zugängliche Routingdienst von MapQuest setzt im Hintergrund auf Daten der Openstreetmap.

Interessehalber habe ich die Dokumentation mal überflogen und dieses Beispiel minimal abgewandelt, um den Dienst testen zu können. Funktionert 1A! So sieht das Ergebnis aus (bitte auf "Route berechnen" klicken)

API-Schlüssel in YQL Storage sicher speichern

YQL LogoVorhin habe ich etwas mit YQL herumgespielt und versuchsweise das API von last.fm angezapft. Der Aufruf der einzelnen Methoden setzt einen API-Schlüssel ("API Key") voraus, den man problemlos bei last.fm beantragen kann. Ich habe mich lange gefragt, wie ich diese Methoden mit reinem Javascript auf einer öffentlich zugänglichen Webseite aufrufen kann, ohne meinen API Key ebenfalls öffentlich zu machen. Denn beim Testen innerhalb der YQL Console ist er Teil des SELECT-Statements, auf meiner Seite darf er das nicht mehr sein. Im folgenden zeige ich, aufbauend auf einem Artikel von Nagesh Susarla, was zu tun ist, damit man den geheimen API-Schlüssel geheim halten und dennoch für seine YQL-Abfragen nutzen kann.

Damit kann ich beispielsweise meine wöchentlichen Top-Künstler von last.fm abrufen kann, reichen mir ein paar Zeilen Javascript-Code, einen eigenen Webserver benötige ich dafür gar nicht. Als Grundlage dient mir das offizielle YQL-Tutorial First YQL Application, das ihr euch vielleicht ansehen solltet, falls ihr noch nie mit YQL zu tun hattet. Die Daten, sprich meine Top-Künstler, beziehe ich aus der Community Table lastfm.user.getweeklyartistchart (dort auf Test klicken).

Um nun an meine Liste heranzukommen, schicke ich folgende Abfrage ab:

select '*' from lastfm.user.getweeklyartistchart where user = 'numblog' and api_key = 'API_KEY'

In der YQL Console ausführen (ihr benötigt einen gültigen API Key) - Hinweis: Die Hochkommata um das Sternchen bitte weglassen; die stehen da nur, weil sonst das Syntax-Highlighting kaputt geht.

Wollte ich diese Abfrage in meine Webseite einbinden, wäre der API Key für alle lesbar:

Ich will natürlich vermeiden, dass Dritte mit meinem API Key auf last.fm zugreifen. Hier kommt Yahoo! Sherpa ins Spiel, ein Key-Value-Store in der Cloud. Dieser kann ebenfalls via YQL angesprochen werden und bietet die üblichen Vorteile (und Nachteile) einer Cloud-Lösung. Zwei Open Data Tables werden angeboten, yql.storage und yql.storage.admin, wobei yql.storage.admin die Tabelle unserer Wahl ist, weil sie nur nach erfolgter OAuth-Anmeldung oder über die YQL Console befüllbar ist. Mehr Info dazu bietet die Dokumentation.

Aber gehen wir noch einmal einen Schritt zurück. Anstatt den API Key in der WHERE-Bedingung zu übergeben, könnten wir auch folgendermaßen vorgehen und die Variable schon vor unserer Abfrage setzen:

use 'http://www.datatables.org/lastfm/lastfm.user.getweeklyartistchart.xml' as lastfm.user.getweeklyartistchart;
set api_key='API_KEY' on lastfm.user.getweeklyartistchart;
select "*" from lastfm.user.getweeklyartistchart where user = 'numblog';

Wenn wir dies nun mit der Tabelle yql.storage.admin verbinden und in der YQL Console (in eingeloggtem Zustand, ihr benötigt also auch einen Yahoo!-Account) die Daten mit dem entsprechenden Statement in die Cloud schreiben:

insert into yql.storage.admin (value) values ("use 'http://www.datatables.org/lastfm/lastfm.user.getweeklyartistchart.xml' as lastfm.user.getweeklyartistchart;
set api_key='API_KEY' on lastfm.user.getweeklyartistchart;")

dann erhalten wir dem folgenden ähnliches XML zurück:

    
        store://I2KUjXfoobarAzIw0v3vfv
        store://p6QZPnGmgyoafoobarNimz
        store://jTfoobarMLleWbJoMY8phd
    

Dieses Ergebnis solltet ihr euch gleich mal in einen Editor kopieren, denn das benötigen wir gleich wieder zur Abfrage auf unserer Webseite. Kurz erklärt:

  • Der execute-Schlüssel kann nur zur Ausführung von Abfragen verwendet werden. Die hinterlegten Daten werden nicht ausgegeben.
  • Der select-Schlüssel sollte geheim bleiben, denn damit lassen sich die Einträge aus yql.storage auslesen.
  • Der update-Schlüssel erlaubt das Verändern dieser Einträge; somit sollte auch er geheim bleiben.
Mithilfe des execute-Schlüssels, den wir als Umgebungsvariable übergeben, lässt sich unsere Abfrage nun ohne Angabe des API Key ausführen:

Ihr könnt in der YQL Console auch gern die Sicherheit des execute-Schlüssels testen und werdet einen Permission-Error zurückbekommen:

select * from yql.storage where name='store://I2KUjXfoobarAzIw0v3vfv'

In der YQL Console ausführen.

Somit steht dem clientseitigen Anzapfen diverser APIs nichts mehr im Wege, auch wenn ein API Key verlangt wird. Momentan gibt es bereits weit über 800 Open Data Tables, über die Daten von den verschiedensten Diensten abgerufen werden. Viele davon sind frei zugänglich, andere benötigen einen API Key. Fragt ihr diese vom Server aus ab, stellt das kein Problem dar. Eine rein clientseitige Lösung im Browser hat aber auch ihren Charme. Es wird kein Server benötigt und daher auch nicht belastet, Yahoo! übernimmt im Hintergrund viel Arbeit (Caching, Fehlerbehandlung, ...) für euch, und möglicherweise ist alles viel schneller. Und jetzt auch sicher.

Hier die simple Ausgabeliste meines einfachen Beispiels:

<div id="yql_lastfm_results" style="margin-left:1em;"></div>
<script src="http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20lastfm.user.getweeklyartistchart%20where%20user%20%3D%20'numblog'&format=json&diagnostics=true&env=store%3A%2F%2FI2KUjXc5O0hZAzIw0v3vfv&callback=top_stories"></script>

Session: Efficient Javascript

"Wie code ich richtig in Javascript?" von Wolfram Kriesing. Code Conventions usw. Brauchbare Editoren: Komodo, Aptana, Eclipse, Netbeans wegen Code Completion, Syntax Check, Code Analyzer (JSLint, findet z.B. IE traps [in phing? svn? your IDE?]) und alles, was für andere Programmiersprachen auch zutrifft. Templates für Code-Strukturen, für das ganze Team. Testen mit Hilfe der Firebug-Konsole nicht vergessen, die auch Auto-Completion mitbringt und das komplette API anzeigen kann.

Watch the traffic: Neben Fiddler und HTTPLiveHeaders existiert auch noch Charles. Nützlich sind auch Debugger, neuerdings auch innerhalb von Eclipse (PDT). Im Sourcecode: debugger; ist ein selbstgesetzter Breakpoint. console.time() und console.timeEnd() und andere console-Methoden. functionName.toString() gibt im Firebug den Sourcecode einer Funktion aus. Firebug hat einen Profiler. Dojo hat einen DocTest.

Update: Wolfram, mit dem ich mich auf der BarCamp-Party am Samstag noch sehr nett unterhalten habe, hat mittlerweile die Slides seiner beiden Vorträge online gestellt.