Server-Side JavaScript with Rhino, Jetty and MySQL

Published July 11, 2007 in JavaScript, Jetty, MySQL, Rhino, Server-Side JavaScript

Today I continued developing a chicken scratch version of a server-side web framework in JavaScript. Yesterday I joined the Jetty Server to the Rhino JavaScript engine to create a simple HTTP response. That was the front end. Today the back end and the last of the three main pieces joins in the fun: the database. I used MySQL because there is a good chance you have already installed on your Mac.

Installing MySQL

Installing MySQL on OS X. Make sure you read the note at the bottom of the section on installing MySQL about adding a password to the root user.

Create a Database for the Example

Here we create a MySQL database called blog_development with two articles. All the example web app is going to do is show a list of all the articles in the database so we need to seed the articles table.

$ mysql -uroot -p
Enter Password: *****

mysql> CREATE DATABASE blog_development;
Query OK, 1 row affected (0.00 sec)

mysql> GRANT ALL ON blog_development.* TO 'dev'@'localhost' IDENTIFIED BY 'pass';
Query OK, 0 rows affected (0.00 sec)

mysql> quit;
Bye

$ mysql -udev -p
Enter Password: ****

mysql> CREATE TABLE articles (id INT NOT NULL AUTO_INCREMENT PRIMARY KEY, title VARCHAR(255) NOT NULL, body TEXT NOT NULL);
Query OK, 0 rows affected (0.04 sec)

mysql> INSERT INTO articles (title, body) VALUES ('On JavaScript', 'JavaScript is a great language. Here is why...');
Query OK, 1 row affected (0.03 sec)

mysql> INSERT INTO articles (title, body) VALUES ('About Rhino', 'Rhino is the Mozilla JavaScript implementation in Java.');
Query OK, 1 row affected (0.00 sec)

mysql> select * from articles;
+----+---------------+---------------------------------------------------------+
| id | title         | body                                                    |
+----+---------------+---------------------------------------------------------+
|  1 | On JavaScript | JavaScript is a great language. Here is why...          |
|  2 | About Rhino   | Rhino is the Mozilla JavaScript implementation in Java. |
+----+---------------+---------------------------------------------------------+
2 rows in set (0.02 sec)

mysql> quit;
Bye

With that the database is ready for the example

Rhino, Jetty & MySql Example

You can download today's example. When you unzip this example then you just have to go into the unzipped directory and type one command at your terminal prompt.

$ ./server

The list of blog articles should be visible in your browser at http://localhost:3000/

Poke around in the JavaScript files. It should be relatively easy to see what is happening.

I started with the zip I posted yesterday and modified the code. Now there is the hint of a model-view-controller framework with routing and database connection. You might notice there is an extra .jar file for connecting to MySql from Java. I found this file at the MySQL site.

With an example of the server, app code and database all working together what is stopping you from writing your own Rhino on Rails? Really...better you than me!

Appendix 1: a plain Java app that talks with the database

A good page where I learned most of this stuff.

I'm using the same blog_development database

Make a directory for this example.

$ mkdir ~/Desktop/javaAndDb
$ cd ~/Desktop/javaAndDb

Download the Official Java Connector from the MySQL site. You need an account but if you have MySQL installed maybe you already have an account. If you downloaded the main zip in the main section of this blog article then you already have this jar file. After unzip the downloaded file look inside for a file called mysql-connector-java-3.0.17-ga-bin.jar which is the one we want. Move it to the directory you just created and that will have the following Java file.

Write the Java file for this example

$ mate Connect.js

with the following contents

import java.sql.*;

public class Connect {
    public static void main (String[] args) {
        Connection conn = null;

        try {
            // make the connection
            String userName = "dev";
            String password = "pass";
            String url = "jdbc:mysql://localhost/blog_development";
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            conn = DriverManager.getConnection(url, userName, password);
            System.out.println("Database connection established");

            // do something with the connection
            Statement s = conn.createStatement();
            s.executeQuery("SELECT * FROM articles;");
            ResultSet rs = s.getResultSet();
            while (rs.next()) {
                int idVal = rs.getInt("id");
                String titleVal = rs.getString("title");
                String bodyVal = rs.getString("body");
                System.out.println(
                        "id = " + idVal
                        + ", title = " + titleVal
                        + ", category = " + bodyVal);
            }
            rs.close();
            s.close();
        }
        catch (Exception e) {
            System.err.println ("Cannot connect to database server");
        }
        finally {
            if (conn != null) {
                try {
                    conn.close();
                    System.out.println("Database connection terminated");
                }
                catch (Exception e) { /* ignore close errors */ }
            }
        }
    }
}

Compile and run this Java code

$ javac Connect.java
$ java -classpath .:mysql-connector-java-3.0.17-ga-bin.jar Connect
Database connection established
id = 1, title = On JavaScript, category = JavaScript is a great language. Here is why...
id = 2, title = About Rhino, category = Rhino is the Mozilla JavaScript implementation in Java
Database connection terminated

Appendix 2: talking with the database from the Rhino shell

Doing the same thing as Appendix 1 but this time from inside Rhino.

I'm using the same blog_development database again.

Make a directory for this example.

$ mkdir ~/Desktop/rhinoAndDb
$ cd ~/Desktop/rhinoAndDb

Make sure you copy the mysql-connector-java-3.0.17-ga-bin.jar into the new directory (see Appendix 1).

Create the Java file that can create a connection

$ mate JsConnection.java

with the following content

import java.sql.*;

public class JsConnection {
    public JsConnection() {}

    public Connection open(String host, String database, String username, String password) {
      Connection c = null;
      try {
          Class.forName("com.mysql.jdbc.Driver").newInstance(); // What does this next line do?
          c = DriverManager.getConnection("jdbc:mysql://" + host + "/" + database, username, password);
          return c;
      }
      catch (Exception e) {
          return null;
      }
    }

    public void close(Connection c) {
      try {
        c.close();
      }
      catch (Exception e) {}
    }
}

Create the JavaScript that will be run in the Rhino Shell

$ mate example.js

with the following content

var jsConnectionObj = new Packages.JsConnection();
c = jsConnectionObj.open('localhost', 'blog_development', 'dev', 'pass');

if (c) {

  print('connected');

  var s = c.createStatement();
  s.executeQuery("SELECT * FROM articles;");
  var rs = s.getResultSet();
  while (rs.next()) {
      var idVal = rs.getInt("id");
      var titleVal = rs.getString("title");
      var bodyVal = rs.getString("body");
      print(
              "id = " + idVal
              + ", title = " + titleVal
              + ", category = " + bodyVal);
  }
  rs.close();
  c.close();  
}
else {

  print('not connected');

}

Compile the Java code and run the JavaScript.

$ javac JsConnection.java 
$ java -classpath .:mysql-connector-java-3.0.17-ga-bin.jar org.mozilla.javascript.tools.shell.Main example.js
connected
id = 1, title = On JavaScript, category = JavaScript is a great language. Here is why...
id = 2, title = About Rhino, category = Rhino is the Mozilla JavaScript implementation in Java

Comments

Have something to write? Comment on this article.

Breton Slivka August 1, 2007

Hey there. I have been working on (thinking about, rather) a Javascript web application framework for the past month. Now I'm searching and find this. Synchronicities. It seems a lot of people are thinking about server side javascript lately.

The information on this site will be incredibly valuable to me. I've found quite a few little 100% javascript platforms in my research. the main ones I'm interested in are Google Gears, POW, Apple Dashboard widgets (with the sqlite plugin supplied in wikitywidget), and the big fish, a true server side javascript solution. The lofty goal I'm setting for myself is to abstract out the database access, and server output to a certain extent so that the same application code can run on all of the above. I'm probably dreaming, but it doesn't seem too out there right now.

Peter Michaux August 2, 2007

Brenton,

I'm glad the information is helpful. Good luck with your project!

Tiago Bastos August 9, 2007

Hi Peter, do you know why your example do not work with new rhino release (R6)?

Thanks and congratulations, excellent work

Peter Michaux August 9, 2007

Tiago,

Sorry but I haven't tried Rhino 1.6R6. This was really just an experiment and hopefully will jumpstart someone else's experiments.

Jonas Galvez August 17, 2007

Ew, depending on Rhino is a big turn off. I'rather use something like python-spidermonkey + TwistedMatrix(evented networking library) or a simple web.py/FCGI/Nginx setup. This would be a really cool web development environment :)

Chris Anderson October 27, 2007

very exciting. I'd like to see one with a couchdb backend. I guess now I have something to look forward to next time I get a hack day!

Peter Michaux October 27, 2007

Chris, If you want to have some code as a starting point, today I rewrote the the previous example which I think has a much better architecture now. I plan on rewriting this example soon.

Maks October 30, 2007

Hi Peter,

Not sure if someone has already pointed you to it already, but Helma (http://dev.helma.org) is a mature and quite advanced server side JS framework. Its MVC-based though its "routing" is a little different to RoR, but overall I think there are enough similarities to consider it the equivalent of Rails for serverside JS. Helma also has quite an impressive ORM system that is again "like" ActiveRecord in its approach but really in my view is even better integrated into the framework.

Also I note that your latest code in the other related blog post mentions that you don't necessarily want to "port" Rails routing system and I would agree and encourage you to look at Helma's way I personally prefer it.

Chris December 14, 2007

Peter,

Finally got this to work on the mac by merging this example with your updated first example.

I've been manipulating the file structure to be more organized. I have a question though.

I would like to server public type files such as images and css. How would I setup the jetty handler to recognize the request as a public file and serve it from the public folder?

thanks in advance for your great work. its pretty inspiring to be able to move javascript to the server.

Peter Michaux December 16, 2007

Chris, It is worth investigating a proxy server (eg. nginx) in front of Jetty. The proxy first checks if the file exists and sends it if it does. If the file does not exist the proxy passes the request to Jetty to create a response.

guyven March 2, 2008

hi how to insert javascript code into a mysql database.

Peter Michaux March 2, 2008

guyven,

You can put text into a database and JavaScript is just text. I'm not sure why you would want to put JavaScript into the database.

ToolmakerSteve March 9, 2008

For a mature commercial-quality open source server-side Javascript solution, I recently learned about http://whitebeam.org

They have a full-fledged Web Application Server based on XML and DOM. Persistent sessions, scalability, abstracted database access.

Today I had the brainstorm to help upgrade that to Mozilla/Tamarin (evolving into Ecmascript 4).

My particular interest is targeting Flash Player 9, which uses Tamarin (== ActionScript 3) as its scripting language. Couple that with whitebeam's structured approach; I think the result would be very powerful, with a lot less to master than alternative ways to get everything needed both client & server for rich media internet apps.

Who'd a thunk Javascript would evolve into a fully modern OO language, useable everywhere?!

Chris March 27, 2008

Peter,

I've taken your start and have been building a server-side framework with mootools as the server-side library to help with building classes. So far I've managed to get it working with the database access based on your model idea, but I want to expand that a bit. I've also got sessions working, templating system (using tenjin), and jetty authentication integrated. I also setup a namespacing scheme similar to java so the classes can include whatever other classes they need to work. its still a bit rough, but its working now and I'm plugging away. Just wanted to say thanks for your work which got me inspired.

Chris

lorenzo July 22, 2008

A similar approach is described in the article:

http://today.java.net/pub/a/today/2005/09/23/dynamic-web-app-interaction.html

Have something to write? Comment on this article.