Planets: sample application using JayData’s WebSQL provider

Author: Viktor Lazar April 30th, 2012

, , , ,

Planets is an app prototype, demonstrating HTML5 – CSS3 – JavaScript features and using the JayData JavaScript Language Query (JSLQ) framework to store the application data in the browser’s local database.


The right tools for your needs

Choosing the right tools is the first and most important task before starting to develop an application of your needs. Deciding which approach is the best seriously affects the performance and maintenance time of the application.

HTML5 Canvas is a great tool to draw things in the browser, but it’s a little bit slow on mobile devices. If you can change the canvas content to simple HTML representation, it will perform better, because you don’t have to redraw the graphics with JavaScript. Use the native rendering engine of the browser anywhere you can.

Creating planets

In this sample application, the planets are just plain DIV elements, with tricky, but simple CSS3 styling on them. A circle can be easily made by using the border-radius property and some fancy looking colorized box-shadow style applied, just to be more than plain filled circles.

The rotating animation of the planets is simple with the use of the native keyframe-animation CSS3 feature of modern browser engines like WebKit. Stacking the DIVs together, we can create a simple representation of complex solar systems.

Starfield background image

The background image is procedurally generated in real-time. It uses the data URL feature. You can draw freely on a canvas element (you can work just in memory), and put the image data as Base64 encoded string into the background-image URL source. Repeating a large enough pattern of the stars gives the good looking result of an old-school starfield background. With a drop of more keyframe-animation goodness, the parallax starfield background is full and ready.

Database management

JayData is the ideal tool for JavaScript database management, even for a small application, like the Planets sample. Declaring the database structure and using it is really easy.

This app is so simple, it uses only one entity type. The entity type contains all the information about the planets and the solar systems (you can create infinite) are recursively built up from the children-parent definition.

Here is the plain simple $planet.Types.Planet entity and the $planet.Types.PlanetContext definition block:

The entity contains only simple field types, just the Id property has field type definition properties, because this property will be the entity key in the database and will be computed automatically by the database engine.

Using the JavaScript Language Query (JSLQ)

The JavaScript Language Query (JSLQ) is fairly simple and common, if you worked with LINQ or Entity Framework before. You take an entity set and call filter and mapping functions on that, finally call an execute method on them, like toArray, forEach, single, etc.

But first of all, you have to create an instance of the entity context. The context has an onReady function, where you can define your callback, which fires when the context is up and ready to go.

The code is really self-explanatory, and that is one of the great features of the JavaScript Language Query (JSLQ). It’s certainly easier to read this like dirty SQL strings.

This part already contains a query. It’s checking the database and if there is no data, then generates test data based on our little solar system.

Insert, update and delete with the JavaScript Language Query (JSLQ)

Insert, update and delete commands are so easy to execute with JayData! If you want to insert a new planet, you only have to add a new entity instance to the context’s proper entity set and call the saveChanges function. In the callback, you can handle post-insert actions, like UI update.

Update is much of the same, but you have to attach the entity, which you want to get updated. The saveChanges function call is the same.

Finally database delete is the same way as insert and update, this time calling the remove function on the entity set. Again, finally calling the saveChanges function.

As you can see, the database handler code part of the example is only a few lines of the app code. You don’t have to deal with the database directly, which is good for application or game developers with no SQL experience.

, , , ,