Javascript OOP, callback, etc...

It´s important to know how JS works. Here is about JS callbacks. In JS is only one thread.

Some articles about OOP in JS:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Mapping firebase data (datasnapshot) in JAVA

There is a few options of getting value from firebase datasnapshot. I think the most clear one is mapping data to Java classes. It describe here in the answer better than documentation.

Listen to firebase

There are event described in firebase manual. Some diffrencies:

value 
- load all childs at  first
- if something is changed/create/remove
- always load all child
child_added
- load all childs at  first
- only if child is created
- load only created child
child_removed
- only if child is removed
- load only removed child
child_changed
- if something is changed
- if is create or remove child´s child - but only if the remove don´t remove all child
- load only changed child

Firebase map

How to mapped fields in firebase storage to map in webbrowser?

What do we need?

1.Initial load with listener.
2. catch changes
3. move camera or zoom - create and remove fields and listener

Many fields in a few queries

I started with idea, that i should load so much data as possible (Whole displayed fields and one listener on it).

Example:
I am looking to position [2,2]. So i need a radius for instance 1 field around it. That means I want to load field ([1,1],...,[3,3]) = 9 fields.
You can Querying and Limiting Data (by priority, element.name). But with these parametres you can select only one collum. If we insert into firebase elements with priority X and name Y :

firebaseRef.startAt(1, 'x1').endAt(1, 'x4').on('value', cb); //select fields [1,1]..[3,1]

There are three queries (for each row) with principe we mention above, which  give us Example result.

But ideal is to ask only one for the whole rectangle of data. So i was looking for some other solution and i found Geohash. There is also JS api for using geohash in firebase. It is callled geoFire (introduce article in firebase web). GeoFire (geoHash) works with GPS locations but we are using 2D locations. So we will create a new class based on GeoFire. In geoFire is function for get fields, but we have to create new one to catch only fields which were changed. Interface of geoFire satisfies our requiest (one ask for whole rectangle). When you look at the implementation you find out that there is in worth case as queries as fields we we wanted.

1. initial load cost
- in worst case n*ASK (in best way only one)
- n*create listener (in best way only one)
- loads c*n fields
where n is num of fields and c is constant for number of fields with same prefix

2. catch changes cost
- only changed field is load

3. move camera or zoom - create and remove fields and listener cost
- remove fields no ask or load
- remove listener on whole area - in worst case for each fields - N unloads (in best way only one)
- in worst case n*ASK (in best way only one)
- n*create listener (in best way only one)
- loads c*n fields

A field in many queries

Simply solution is ask for each fields to firebase and sets Listener for each fields too.

Structure in firebase for this case could be fields/x/y.

1. initial load cost
- n*ASK
- n*create listener
- loads n fields
where n is num of fields

2. catch changes cost
- only changed field is load

3. move camera or zoom - create and remove fields and listener cost
- remove fields no ask or load
- remove listener only from remove fields (W)
- W*ASK
- W*create listener
- loads W fields

So very important is question whether many simple ASKs is slower then one big ASK. Then for high N and W near to N should be better use "Many fields in a few queries" technique otherwise "A field in many queries".

Here is a answer. Data size and network bandwidth are the consideration here, not the number of connections. So my testing:
100* 
9 fields with unload (each field separately)
-The first fields come in 900ms and the last in 2,600ms.
all in one
-The first fields come in 1600ms and the last in 1900ms.

Some other features for our map

Zoom
Our Isoengine supports zoom. We will trigger zoom on mouse roll button.

Loading map dynamically

We have a big map. We will need to slide to next fields. We will load fields dynamically. 

When user overcome boundry, we will give him new data from firebase and set new boundry.

For better efficiency we will destroy fields out of the boundry.

Caching fields in browser
There is also option don´t destroy whole out of view field, but only destroy it from canvas. It will save a data transfer.

Java EE Architecture with Firebase

The architecture for our game probably would be different from a typical Java EE architecture (displayed below) due to of firebase. 

A typical Java EE application architecture

(Resource: http://www.javaworld.com/javaworld/jw-01-2008/jw-01-tomcat6.html)

There are a few technique how to do asynchronous communication between clients and server (Websockets, AJAX).

The basic usage of Firebase is on client tier (JS), in this scope we don´t need Data Tier and Bussiness Tier from image above. We can only post HTML page with JS to client and then everything is let on clients web browser. At first user log in (firebase support simply login) and then only communicate with firebase.

In our project is nessesery server synchronization, so that  there is Firebase like a serial bus.
1, choice - firebase like a serial bus and main datastorage. Server reads from queue (first firebase) and counts using date from firebase. Then push data to second firebase for showing at client.
Here could be a typical Java EE architecture, but there is a problem with asynchronous getting data from firebase. Solution is waiting for data - that will be very slowly when you will need a lot of diffrent data from firebase for counting (solution should be a DTO).
The another solution is change architecture a little bit. Before Service layer add new layer, which prepare data for service layer. So service layer use dao layer only for create, update, delete.

2, choice - server reads from queue but counts from his local data (in-memory,rdbms) which it reached from firebase callbacks before. This is very efficient concept. But it dont be using scaling of firebase. And my master thesis is about firebase.

I decide to use the first choice. And data from firebase load and write throught prepare data/service/dao tier.

Isometric front-end

My topic for master thesis is Firebase. But for displaying data we have to deal with front end. It is possible to use some table for displaying output data. But it will be much more prettier to use isometric engine.

There are a lot of isometric engine. Some of them are for free and the others for purchase.
http://www.isogenicengine.com/
http://craftyjs.com/
etc...

https://code.google.com/p/jgen/ - there is not very good documentation and it doesn´t work in all major browsers.
http://www.prelude-prod.fr/demo/pp3diso/ - very simple, but there are some limitation (described at projekt page)

For our project the most suitable seems to be Sheetengine (dynamic loading, rendering with zoom, etc.).
There is a documentary on home sites as well as a project crossyard with tutorial for developers.

We will need to change engine for showing textures:
For anyone else needing textured base sheets, I changed line 738 in sheetengine.js to the following:

if(basesheet.img) {
  ctx.drawImage(basesheet.img, 0, 0, basesheet.width, basesheet.height);
} else {
  ctx.fillRect(0,0,basesheet.width,basesheet.height);
}

We publish source code on GitHub.com

You can find it here. There is the first commit with initial source code and some hello TTDMMO page.

There was a little issue with setting commiter in NetBeans. The solution is to add lines below to your local .git/config file. 

[user]

    name = lastuvka

    email = xlastuvka@gmail.com

There was also created new action (specific in nbactions.xml) for deploying frontend on WildFly 8.0.

<?xml version="1.0" encoding="UTF-8"?>
<actions>
    <action>
        <actionName>CUSTOM-deployToJBOss</actionName>
        <displayName>deployToJBOss</displayName>
        <goals>
            <goal>jboss-as:deploy</goal>
        </goals>
    </action>
</actions>

Which IDE with WildFly?

In our project we will use a WildFly 8.0 server. It can be downloaded from here.  there is not "Getting started" for 8.0 because it´s a Beta version. However you can use a manual for AS 7.0. There is how to run server or create new user (admin).
The question is, whether use command line + NetBeans, eclipse with JBoss Tools or JBoss Studio to deploy our project.

For deploying we will use plugin for maven jboss-as.

Process throw the command line is clear. Above is manual to start server and maven plugin jboss-as. When you go to the directory with project and run command mvn package jboss-as:deploy (next time you can run command mvn jboss-as:deploy to redeploy) and in browser (localhost:8080/your-app/) you should see your app.

JBoss Studio
You can download it here. It´s based on Eclipse. So the using of WildFly here is very similar to using it in Eclipse with JBoss Tools plugin. Eclipse will be probalby better for us because it is much more general.

Eclipse
How was meantioned above, there is JBoss Tools plugin for eclipse. For starting server and deploy click on Run as... -> Run on Server. There is also plugin for GWT, thats why we will propably decide to use this.

The result of this article is use IDE as usually because the work is faster with known enviroment than the new one. Deployment is almost same. :)

Let´s start!

Our plan (and our master thesis) is to create a MMO game based on the same princip as Transport Tycoon.