Hast du dich schon mal gefragt, wie Doodle funktioniert?

Hast du dich jemals gewundert wie die roten und grünen Kästchen von deinen Freunden zu dir gelangen? Jeden Tag arbeiten die Entwickler von Doodle hart, um diesen Prozess so einfach und benutzerfreundlich wie seit jeher zu halten.

Es ist uns sehr wichtig, dass jede Person auf der Erde die Möglichkeit hat, Doodle zu benutzen wodurch Terminfindung zwischen allen Menschen ermöglicht wird. Deshalb unterstützen wir alle gängigen Browser inklusive IE8+. Auch die mobilen Geräte werden unterstützt mit nativen Apps für Android und iOS. Für alle mobilen Betriebssysteme steht zudem eine mobile Web-Ansicht zu Verfügung.

fe-words

Aber was passiert genau unter der Haube?

Wenn eine Seite von einem Browser angefragt wird, dann liefern unsere Server ein HTML Gerüst mittels Java ServerFaces (JSF) aus. Diese Seite besteht aus einfachen HTML, JSON Daten, Templates sowie einem initialen Javascript AMD Modul.

Dieses Modul ist der Eintrittspunkt für alles, was man auf Doodle sieht. Es lädt alle Abhängigkeiten mit Hilfe von RequireJS, es liest die zu Verfügung gestellten JSON Daten und anschliessend werden diese Daten mittels Mustache gerendert. Um Doodle ein modernes Aussehen zu geben, benutzen wir Bootstrap3 und personalisieren es mittels SCSS. Seitdem HD Bildschirme allgegenwärtig sind, wurde Doodle “Retina-tauglich”.

Ab diesem Punkt liegt es an dir – Die Doodle Scripts sind in deinem Browser geladen und erwarten nun Input. Sei es eine Umfrage erstellen, an einer teilnehmen oder einen Kommentar zu verfassen. Die meisten dieser Aktionen benötigen kein neu laden der Seite. Unsere Javascript Applikation behandelt deine Eingaben und Aktionen sofort und kommuniziert im Hintergrund asynchron mit unseren Servern über eine REST API. Diese API wird vom Java Jersey Framework (nach dem JAX-RS Standard) zu Verfügung gestellt. Die Antwort vom Server wird vom Javascript Client weiter verarbeitet und gibt dir sofort Rückmeldung. Dies geschieht mittels jQuery, welches DOM Elemente einfach verarbeiten kann.

Um die vielfältigen Funktionen von Doodle bereitzustellen, benutzen wir die folgenden Libraries: FullCalendar um die Umfragen im Kontext deines persönlichen Kalenders darzustellen. Feature-Erkennung (zur Unterstützung alter Browser) mit Modernizr. Schicke Input-Elemente mit ChosenJS und Select2.

Wie deine Doodle-Umfragen gespeichert werden und wie unsere Server-Infrastruktur aussieht wurde in diesem Blog Artikel beschrieben, während sich dieser Artikel mit dem Frontend-Teil befasst.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s