Project Avatar: Twitterwall Demo

May 11, 2014

Tags: #webdevelopment #javascript #avatar #nashorn #nodejs

Schon zu unserem Vortrag auf der JavaLand hatte ich diese Applikation mit Project Avatar erstellt: eine kleine, einfache Twitterwall, die einfach alle Tweets zu einem bestimmten Suchbegriff darstellt. Die Oberfläche sieht zwar nicht schön aus, beinhaltet dafür aber ein paar Features, die man so zeigen kann und ie bei einem "schönen" UI nicht enthalten wären. So werden die Tweets z.B. in einer Tabelle dargestellt, die sich des Table-Widgets bedient, darin werden die Profil-Bilder der Twitter-User angezeigt, welches nur über ein Custom-XHTML-Widget möglich wurde. Auf der einen Seite deprimierend, dass ein Frontend-Framework kein Widget für dynamisch zu erzeugende Bilder mitbringt, andererseits eine gute Gelegenheit die Custom-Widgets zu zeigen.

Weiterhin habe ich eine Art Master-Detail-View hinzugefügt: Mit Klick auf den Usernamen wird eine User-Detail-View angezeigt, die mehr Infos über den User zeigt. Die Details werden hier über URL-Parameter übergeben (über URL-Rewriting, typisch für eine Single-Page-App), leider kann man hier keine URLs als Parameter übergeben, sonst hätte ich die Details auch noch etwas mit User-Bildern "aufhübschen" können. Hier scheint etwas mit dem Encoding noch nicht ganz zu stimmen. Sollte ein Issue-Ticket Wert sein.
Ebenfalls ein Ticket wird die Sache mit den Themes, mindestens aber was für die Mailingliste... Eigentlich sollte es lt. Doku sehr einfach sein, ein Custom-jQueryUI Theme zu installieren und zu verwenden. Leider funktioniert das aber nicht. Oder ich mache irgendwas falsche, weiß aber nicht was. Schade. Das Custom-CSS, welches für die Applikation (nicht für ein Theme) geschrieben wird, wird leider auch zu einem falschen Zeitpunkt geladen und teilweise von jQueryUI-CSS Eigenschaften wieder überschrieben. Sollte man noch ändern.
Im Backend verwende ich auch einige Komponenten, die so eigentlich überflüssig wären, aber auch der Demonstration einiger Funktionen und Möglichkeiten dient: Die Tweets werden in JavaScript mittels der Twitter4J Java-Library von Twitter abgerufen (Nashorn Feature: nahtlose Integration von JavaScript und Java). Diese Java-Objekte (in JavaScript) dann mit Hilfe von Googles Gson Bibliothek serialisiert, um sie anschließend gleich wieder zu einem JSON-Objekt deserialisieren zu können. Diese benötigt man, um die Objekte im DataProvider wieder serialisieren zu können, bzw. auch bei der Übertragung zu den Clients.
DataProvider war das nächste Stichwort. Jeder über den Stream empfangene Tweet wird in einem FileItemDataProvider (der Einfahheit halber, könnte auch der JPADataProvider sein) gespeichert. Über einen Server-Sent-Events Service werden dann (asynchron zum Speicher der Daten) die jeweils 25 neuesten Tweets an die Clients übertragen, die diese in der bereits oben beschriebenen Tabelle anzeigen. Über einen REST-Service wird der Suchbegriff und damit das Starten des Streams gestartet, bzw. der Twitter-Stream auch wieder gestoppt.
Insgesamt also eine, für eine Avatar-Demo, umfangreiche Sammlung an Funktionen und Features des Projektes. Es ginge natürlich auch deutliche einfacher und schlanker, aber einfach kann ja jeder. ;-)

Der Demo-Code auf GitHub: https://github.com/dasniko/avatar-twitterwall
Die Slides zum Vortrag: http://slides.com/dasniko/avatar

Den Avatar-Vortrag halten wir demnächst auf mehreren Konferenzen.

« Video & Slides unseres Meteor JavaScript Platform Talks auf der #BEDCon 2014 IoT and me... - Espruino? »