webionate Hackathon #1

Heutzutage gehört es für Unternehmen (nicht nur aus der IT) zum guten Ton, wenn man seinen Entwicklern für einen bestimmen Zeitraum frei gibt, um gemeinsam an einem oder mehreren Projekten zu arbeiten, welche nichts mit den eigentlichen Aufgaben im Tagesgeschäft zu tun haben. Wenn das Unternehmen dann auch noch (fast) komplett aus Entwicklern besteht, dann bietet sich so etwas auch wunderbar als Team bildende Maßnahme für die gesamte Belegschaft an.

Internet Status? Check!

Internet Status? Check!

Auch wir wollten diesem Trend in nichts nachstehen und so machten wir uns am 15. Februar auf den Weg nach Groß Schwansee, einem Örtchen in Mecklenburg Vorpommern und damit 1 1/2 Fahrstunden von unserem Hauptquartier in Hamburg entfernt, wo wir uns für die kommenden 27 Stunden in einem Ferienhaus einschlossen, um an einem neuen Projekt zu werkeln.

Bereits im Vorfeld hatten wir aus einer Vielzahl an Vorschlägen unseren Favoriten hierfür ausgesucht, denn wir wollten nicht unnötige Zeit mit der Findung einer Idee verlieren, die allen Beteiligten zusagte. In größeren Unternehmen bilden sich zum jeweiligen Hackathon meist kleinere Gruppen, um ein Projekt gemeinsam anzugehen, bei einem Team von gerade einmal 6 Leuten machte dies für uns allerdings nicht ganz so viel Sinn, so dass wir uns dafür entschieden, ein gemeinsames Projekt in Angriff zu nehmen.

Planungsphase Planungsphase

Das Projekt

Wer uns schon einmal in unserem Büro besucht hat, dem wird der [riesige] 60” Fernseher aufgefallen sein, der an einer unserer Bürowände hängt. Wir nutzen diesen, um jederzeit bestens informiert zu sein. Hierfür haben wir ein Chromebook an den Fernseher angeschlossen, auf welchem mehrere Browser-Tabs geöffnet sind, die unter anderem Flowdock, einige unserer Google Analytics Accounts (im Live-View) und andere Seiten, wie z.B. Google News anzeigen. Damit wir nicht per Hand ständig zwischen den einzelnen Tabs wechseln müssen, ist in Chrome eine Extension installiert, welche diese Arbeit für uns übernimmt.

IMG_1427

Doch das ständige wechseln zwischen den einzelnen Browser-Tabs bringt einige Nachteile mit sich. Je nachdem, wie die jeweilige Website aufgebaut ist, wird sie auf einem so großen Gerät mehr oder weniger gut angezeigt. Ein großer Fernseher ist halt nicht das, was (Web-) Entwickler im Kopf haben, wenn sie sich Gedanken über die Geräte (ihrer Zielgruppe) machen. Hinzu kommt, dass sich die Extension zum wechseln der Tabs nicht so detailliert einstellen lässt. Eine Eingrenzung, dass nur bestimmten Tabs nach dem Wechsel neu geladen werden, ist leider nicht möglich. Schade, denn bei vielen Seite wäre dies überhaupt nicht von Nöten, da sie ihre Daten per AJAX aktualisieren (wie z.B. Google Analytics).

IMG_1428

Hier wollten wir mit unserer App (Codename “Houston”) nun ansetzen und den Nutzern eine Möglichkeit bieten, die für sie relevanten Daten auf einem großen Display bestmöglich zu präsentieren. Die Idee war es, einen offenen Dienst zu bauen, an den andere Entwickler/Anwender ihre eigenen (web)Hooks, wie zum Beispiel github, anbinden können. Die Grundidee sollte auf flowdock basieren, aber anstatt des statischen 2-Spalten-Designs, wollten wir unsere Lösung – wie bereits erwähnt – auf großen Geräte anzeigen lassen und so eher zu einer Art Dashboard machen, welches einen Überblick über die Geschehnisse in der eigenen Firma (und der restlichen Welt) bietet.

Hierfür sollte es neben der eigentlichen Timeline möglich sein, verschiedenste so genannte “Widgets” einzubinden, welche die Daten entsprechend des jeweiligen Services auf vordefinierte Art und Weise darstellen.

Happy Group Hacking

Happy Group Hacking

Direkt nach unserer Ankunft starteten wir mit unserer ersten Planungsphase, um herauszufinden, was wir in den kommenden Stunden überhaupt erreichen konnten/wollten. Sofort wurde uns klar, dass wir zunächst einmal ein “Basis-Framework” würden erstellen müssen, um sogenannte “Events” entgegen zu nehmen, diese dann weiter verarbeiten und schlussendlich darstellen zu lassen.

Events können dabei von verschiedenster Art sein, wie zum Beispiel der erfolgreichen Bestellung eines Kunden, in einem unserer (Spree Commerce) Onlineshops oder auch dem push einer Codeänderung in einem unserer Repositories, welche auf github mit Houston verbunden sind. Wir wollten außerdem eine Möglichkeit schaffen, Google Analytics sinnvoll in die App einzubinden, damit unser Shopmanager [Claus] die Werte seiner geliebten KPIs auf einen Blick bewundern kann.

IMG_7255 IMG_1449

Tech, Tech, Tech:

Nach der Planung wurde die erste “Recon-Phase” gestartet, um herauszufinden, mit welchen Technologien wir unsere Ideen überhaupt umgesetzt bekommen bzw. welchen OpenSource Code wir weiterverwenden können, um das Rad nicht neu zu erfinden, wenn dies nicht nötig ist. Dass wir als WebFramework Rails 3 verwenden wollten, stand bereits im Vorfeld fest und erweitert wurde es durch unseren aktuellen Software-Stack: SASS, CoffeeScript, HAML und Foundation von Zurb.

Ein zentraler Teil unserer Lösung musste ein passendes Messaging-System sein, welches die aufgelaufenen Events an eine unbegrenzte Anzahl an Clients im Frontend schickt. Hier entschieden wir uns relativ schnell dazu, FAYE zu verwenden, weil es uns viele lästige Dinge in diesem Bereich abnahm und von Haus aus bereits in die gängigen Browsern läuft. FAYE baut eine Websocket-Verbindung mit dem Client auf, sofern dieser Websockets unterstützt. Ist dies nicht der Fall, so wird auf eine der anderen Methoden (Long-polling via HTTP POST, Cross Origin Resource Sharing, Callback-polling via JSON-P) umgeschwungen, um den Transport der Informationen sicher zu stellen.

Blick auf den ersten Prototypen

Prüfender Blick auf den ersten Prototypen

Die Datenkommunikation zwischen Back- und FrontEnd sollte per JSON erfolgen. Damit wir im FrontEnd die Antwort des Servers nicht auch noch per Hand verarbeiten müssen, entschieden wir uns dazu, die JavaScript Rendering Engine Tempo einzusetzen. Dank dieser müssen wir uns um das Verarbeiten des an den Browser zurückgesendeten JSONs keine Sorgen machen, da Tempo die Daten direkt in die jeweilig Struktur unseres Templates integriert. Einfach das nötige JS-File integrieren und die Daten über einen simplen Aufruf in der Form Tempo.prepare(element).render(data); in das Template rendern lassen. Fertig!

Der aktuelle Stand

“Houston, wir haben zu wenig Zeit!” – Ziel unseres Hackathons war es nicht, eine Release-fähige Version der Software fertig zu bekommen. Dafür würde die Zeit nicht reichen. Aktuell haben wir einen Stand, der zwar noch eine sehr frühe Phase darstellt, aber wir können über Testaufrufe Daten erfolgreich in unsere Event-Queue pushen. Wir haben ebenfalls bereits angefangen, eine Anbindung der Google Analytics API zu bauen und können Daten aus unseren Accounts in einem passenden Widget darstellen. Derzeit sind unsere Prioritäten allerdings ein wenig anders gesetzt, so dass wir Houston aktuell ein wenig auf Eis gelegt haben, um uns anderen Dingen zu widmen. Wer weiß, ob es uns nicht in ein paar Wochen wieder überkommt und wir uns erneut an das Projekt wagen. Es gibt bereits schon erste Gedanken darüber, ein anderes Messaging-System als FAYE zu verwenden, aber dazu vielleicht mehr an einer anderen Stelle.

IMG_7285 IMG_7279

Fazit

Wir hatten auf unserem ersten webionate-internen Hackathon eine Menge Spaß und haben viel (miteinander) gelernt, das uns in Zukunft behilflich sein wird, unsere Kunden noch besser beraten zu können. Nicht zuletzt hat dieser Event dazu beigetragen, alle Beteiligten weiter zusammen zu schweißen und das war auf alle Fälle eines unserer erklärten Ziele.

AddOns

  • Dank Karsten haben wir uns bestens ernährt, denn er kochte uns ein wundervolles Abendmahl bestehend aus Lachs an Tomaten und Rosmarin mit Nudeln, Fenchel und frisch geriebenem Parmesan.
  • Auch Entwickler brauchen (ein wenig) Schlaf, und nachdem wir am Freitag bis 4 Uhr morgens gewerkelt hatten, waren wir um 8 schon wieder auf den Beinen und hackten vor uns hin
  • Um ein wenig Sauerstoff zu tanken und uns die Gegend anzusehen, haben wir am Samstag vor unserer Abfahrt auch noch einen gemeinsamen Spaziergang unternommen (s. Fotos)
  • Dank RedBull und Extreme-Coffee von Claus wurde die Aufmerksamkeitsspanne aller Beteiligten um mehrere Stunden erweitert ;)
IMG_7294 IMG_7298