In this blog entry we will give you a summary of the technical side of our flag app: “What technologies are we going to use and why do we choose them.”

First of all we had to make a decision: “Are we going to make a native app, or a web app”.

We already summarized the differences between this approaches in an older blog post [1]. Due to the big workload (because of the many mini-games) and my lacking experience with native app developing we decided to do it the web-app-way. Common web technologies (html/css3/js) paired with a mobile-web-framework will cover all our requirements and thus our app can even be used with desktop browsers.

The Client Side
For best user experiences on mobile browsers we will use the web-app-framework jQuery mobile [2]. This way the mobile user gets a native feeling whereby there are also optimization possibilities for desktop users (with css3 media queries). We favour jQueryMobile over Sencha Touch because of the wider device support of jQueryMobile and the fact, that everything can be done in Html and css3 (JavaScript will mainly be used for the game logic). Furthermore we have the option to make our app native as well later (phonegap [3] for example, transforms any web app into a native iOS or Android App).

The Server Side
On the server side we primary need user handling/authentication, a database for storing informations like the user’s score. There are many ways to implement user handling, one is oAuth [4]. This way the user can login with his twitter/facebook/whatever-account and we don’t have to struggle with the registration part.
Besides, the majority of the game logic should be computed on the server. The advantage of this approach is that there is no way for the users to cheat (like looking up the sourcecode of the memory game to get informations about a card’s backside). Since we have to split the game logic into server and client parts it would be fine if we can use the same programming language on both sides.

Based on this requirements we are going to use node.js [5], a server-side javascript environment in combination with express [6], a web framework for Node.js. The authentication with oAuth (twitter) will be handled by everyauth [7]. The persistance layer can be filled with a nosql databse like couchDB [8] for data storage, but for the prototype we will use dirtyDB [9], a tiny & fast key value store with append-only disk log.

Communication between client and server
There are several informations that have to communicate between the clients and the server (e.g. user moves or highscores).
To archive a asynchronous real-time communication between the server and the clients we will use socket.io [10], which works perfectly together with nodejs. Socket.io is compatible with a wide range of browsers and in combination with json [11], a data interchange based on javascript, it’s a fast websocket solution  (with fallbacks for older browsers) with a minimal data overhead.

Server:

  • Node.js (JavaScript Server)
  • DirtyDB (file-based DB)
  • Express (Web-Framework)
  • Jade (Template-Engine)
  • Less (dynamic Stylesheets)
  • Everyauth (Twitter oAuth)
  • Socket.io (real-time Communication)
Client:

  • jQueryMobile (Mobile-Framework)
  • HTML5 (generated by Jade)
  • CSS3 (generated by Less)
  • jQuery (for game logic)
  • Socket.io (real-time Communication)

[1] https://fsln12group3.wordpress.com/2012/04/16/web-hybrid-or-native-app/
[2] http://jquerymobile.com (jQuery mobile example: http://www.professorcloud.com/supercharged/mobile/)
[3] http://phonegap.com
[4] http://en.wikipedia.org/wiki/OAuth
[5] http://nodejs.org
[6] http://expressjs.com/
[7] http://everyauth.com
[8] http://couchdb.apache.org/
[9] https://github.com/felixge/node-dirty
[10] http://socket.io
[11] http://en.wikipedia.org/wiki/JSON

Advertisements