Why do not use open ttd codes?

My topic is Firebase + transport tycoon - mmo. There is the open TTD project. So I teoreticly could use free codes form this project (c++) and convert it to JS by emscripten. But my topic is firebase and the front end is not so import. Thats why I use only sheetengine to show how my application work throught firebase.

AngularJS + Firebase = AngularFire

I am using AngularJS for displaying data (except map data) from firebase.
There are alternatives of AngularJS. I decide for AngularJS because it´s provided by Google and also I agree with this comment:

"I am a developer on Angular, and I don't know enough about emeber.js so i may be biased.
Martin Wawrusch - Placing too much logic into HTML
It is true that placing logic into HTML is a bad idea, and we don't recommend that. But Angular only places bindings not the logic. We recommend placing logic in controllers. But bindings is information as well. That information has to live some place. There are three choices:
The code: this is essentially what jQuery does with CSS selectors. This has broven very problematic, since the HTML is very tightly coupled with the code and re-skinning an application becomes very difficult.

1. The HTML: This is what angular does. No, we are careful that you should not do anything but place connection information. Any logic should not go here as it will cause problems down the line. I think Angular does the binding rather well.
2. Meta-data file: while i am not aware of anyone doing this, it would basically double the problem, since you would have to connect both the HTML location with model location in the code.

Building applications without a framework is possible, but frameworks are developed to make this easier. 
I personally think that AngularJS is unique in that it embraces HTML/CSS. It follows the spirit of what HTML is. Where as other frameworks diverge from HTML by providing their own API. The result is that AngularJs is most declarative out of all of the frameworks out there, and I believe that declarative is a good fit for UI, where as imperative (JS) is a good fit for logic.
AngularJS allows you to extend the HTML vocabulary, so hopefully any limitation you run into with angularJS can be easily overcome."


Firebase integrates AngularJS, Ember, etc...
I think combinate Firebase and  these frameworks is awesome.

Combination Firebase and AngularJS equals angularFire - http://angularfire.com/

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.