For most programmers data goes hand in hand with the applications that they create. Typically the application will read data, allow a user to update or to add information and then store the data. The typical desktop application will store this data on the user's computer in a database but web applications are slightly different.
They can only store limited data (such as cookies) on the user's PC and have to resort to databases stored on a central server (for example using PHP and MySQL). It is impossible for a client language (such as Javascript) to communicate directly with database (such as SQLite) and a programmer is unable to write code such as:
< input type=button value=”Run SQL” onclick=”Javascript: run_query (select * from myTable);” />
However, with HTML5 that's all changed. Programmers can now work with databases stored on their users' computers. An application can: create tables; carry out select, insert, update and delete statements. And the programmer can use standard SQL queries.
A Database with Every Web Browser?
At the time of writing only Safari and Chrome have incorporated the HTML5 Web SQL Database (or to be more correct, the WebDatabase API – a subset of the popular SQLite database) and it unclear if other browser will make use of this. In fact, it is likely that Firefox will use the IndexedDB database but have not, to date, produced a browser with an incorporated database.
And This is a Standard SQL Database, Isn't It?
There is just one small point that's worth pointing out about the Web SQL Database. Any queries are carried out asynchronously not synchronously. Whilst this techniques is incredibly powerful, it does mean that many programmer will need to rethink the way in which they way in which they structure the flow of their programs.
Adapting to Asynchronous Programming
A typical script that a Javascript programmer would start with is:
< script language=”Javascript” >
function run_query (sql) {
db.transaction (function (tx) {
tx.executeSql (sql);
});
}
run_query ('create table if not exists user (id unique, username)');
run_query ('insert into user (id, username) values (1, "fred")');
< /script >
The workings of this script are quite simple in that a function is called twice: initially to create a table; secondly to load the table with some data. In a synchronous program there is no problem – the first call is carried out and once that's completed then the second will start.
However, there is a potential problem in an asynchronous script. In an asynchronous script the first call is made followed by the second without waiting for the first to complete. It is possible, therefore, for the second call to complete before the first has finished. In this case that would mean that the script would attempt to insert data into the table before it was actually created even though the insert command is called after the create command.
The advantage of asynchronous programming in a web page is that multiple areas of the page may be updated in parallel with the results of a few SQL statements being sent to different divs at the same time. A slow query would not stop subsequent queries from running.
The important point is, of course, that is now possible to create a client database providing the programmer with a powerful new application development tool.
Mark Alexander Bain - Mark Alexander Bain is a writer, Mo Bro and consultant for all aspects of software development at dsquared. He has also written regularly ...
