Ever wondered how Doodle works?

Have you ever wondered how the red and the green boxes are getting from your friends to you? The engineers at Doodle work hard each day to keep this process as easy and straightforward as it always has been. The infrastructure and back-end architecture has been explained by this Blogpost; so this post will focus on the front-end part of the web app.

It is very important to us that every person all over the globe is able to use Doodle to make scheduling possible between all kinds of people. This is why we support all major browsers (IE8+). Mobile devices are covered by native Apps (Android & iOS) or our mobile web version for other smartphones.

fe-words

But what exactly is happening under the hood?

When a page is requested by a browser, our servers are serving a skeleton HTML page using JSF. This page includes some basic HTML, JSON data, templates and an initial JavaScript AMD module.

This module is the starting point for everything you see on Doodle. It loads all its dependencies with the help of RequireJS, reads the provided JSON data and finally renders the data with the Mustache template engine. To give Doodle a modern face we use the famous Bootstrap3 framework and customize it with SCSS. Since HD screens become common we are building Doodle to become Retina-ready.

At this point it’s on you – the Doodle scripts are loaded in your browser and now await your input; be it creating a poll, participating in one, or adding a comment. Most of these actions do not need the page to be reloaded, since our client handles your input and actions immediately and communicates asynchronously with our servers in the background using a RESTful API that is provided by the Java Jersey framework implementing JAX-RS. The responses of the server can be handled again by the JavaScript and give you immediate feedback using jQuery to handle the DOM easily.

To offer the huge variety of all our features we use the following third-party-libraries: FullCalendar to show you the polls within context of your personal calendar. Feature detection (legacy support) with Modernizr. Fancy Input elements with ChosenJS and Select2.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s