I have my project where I load the complete world as a playable grid map. The first implementation I made was following the default way of how the AP’sI and the web applications work nowdays, which is as you can imagine:
1.New request arrived
2.Do a DB call and retrieve all the data from the database.
3.Pack it as a JSON and send to the client.
4.Let the frontend do its job, and assemble the world.
Seems right? Well… Depends, if you are planning to display 10 products on your page yes, I agree this is okay approach, the only difference is that I have to send over 28053 rows to render the world map.
Just as an example I haven these colums:
`id`, `name`, `owner_id`, `position_x`, `position_y`, `px_position_x`, `px_position_y`, `color`, `type`, `region`, `neighbors`, `plots`, `plotsBase`, `createdAt`, `updatedAt`, `onsale`, `price`, `gold`, `iron`, `stone`, `wood`, `coal`, `citizens`, `food`, `weapons`, `horses`, `infantry`, `cavalry`) VALUES (1, NULL, 0, 0, 129, 1045, 0, ‘rgba(75, 143, 199, 0.1607843137254902)’, ‘W’, ‘world’, ‘5,6,7’, ‘W,W,W,W,W,W,W,W,W,W,WGM,S,WW,WRM,WW,S,S,WW,S,WW,S,S,WPIFO,S,WRM’, ‘W,W,W,W,W,W,W,W,W,W,WGM,S,WW,WRM,WW,S,S,WW,S,WW,S,S,WPIFO,S,WRM’, ‘2021-10-31 05:56:36’, ‘2021-10-31 05:56:36’, 0, 0, ‘0.00’, ‘0.00’, ‘0’, ‘0’, ‘0’, 0, ‘0’, 0, 0, 0, 0), (2, NULL, 0, 0, 131, 1055, 0, ‘rgba(205, 224, 240, 0.9803921568627451)’, ‘S’, ‘world’, ‘7,8,9’, ‘W,W,WW,S,WW,S,S,WRM,WW,W,WPIFO,S,S,WGM,WGM,WPIFO,S,S,S,S,WGM,S,S,S,S’, ‘W,W,WW,S,WW,S,S,WRM,WW,W,WPIFO,S,S,WGM,WGM,WPIFO,S,S,S,S,WGM,S,S,S,S’, ‘2021-10-31 05:56:36’, ‘2021-10-31 05:56:36’, 0, 0, ‘0.00’, ‘0.00’, ‘0’, ‘0’, ‘0’, 0, ‘0’, 0, 0, 0, 0)
And this is one of the pixels you can see on the picture.
Each of the pixels can be clicked on, and it will show you what is on that piece of land, here is an example:
After investigating how can this be actually performant, where eventually I could update realtime for all the users I realized couple of things:
1. JSON IS BAD (at least for this);
2. DB calls are expensive;
3. I made a mistake by following the “standard” approaches.
So Let’s fix this up!
First thing would be to prevent to go to the DB to get the map when someone joined.
This is easy nowadays, We have these amazing machines with huge amount of memory so I will store the world in the memory instead, because:
From the frontend I had to load 18mb (!!!!!!) as data and it took almost 15 seconds even though the server, db and the client were on the same machine!
I did a quick change so that I preload the world into a memory and still supplying the same JSON as before. Keep in mind the only difference is that I do not use the DB to retrieve the data before passing back to frontend:
MINDBLOWING 11.08 SECONDS FASTER ! – and this is not even the thing I wanted to optimize in the first place.
I will continue the process in the next post and I promise there will be some surprises from which everyone can learn from!
