Rapid Single Page Application development with typescript, couchdb and domo

OK, this might be a pretty odd way of creating applications. But this method met a few goals I had for rapid application creation:

  1. Create it in Typescript only.
  2. Use some kind of document database from client side javascript.
  3. Run and debug locally.
  4. Publish easily.

My application iterations looks like this:

  1. Make code changes in Typescript.
  2. Test it locally.
  3. Publish to Github. Test it online.
  4. Update one single file to the live web server (Iriscouch).

The database is the web server

The web server is actually a Couchdb instance running on host Iriscouch (free for small usage). Couchdb is a document database that can host html, js and other web resources.

The entire application in one file
The full (compiled) application is bundled into one javascript file. Other than that I only use a minimal html that references that js. Even the css and the html are created from within the javascript application, it does so with the help of Dōmo “Markup, style, and code in one language”.

In my couchdb instance I have a database document named “test”. And within that I have three file attachments:

  • index.html
  • couchapp.min.js
  • github.html

index.html is the base html document that hosts my script, it looks like:

<!doctype html>
<html>
  <script src="couchapp.min.js"></script>
</html>

A nice file structure within Visual Studio + one click build everything into one js

The bundled script contains (for now) jquery.js, jquery.couch.js, domo.js and my own scripts mymodule.js and app.js.

app.js is the main application file, within that I call functions in the referenced files.

Both my own javascript files are compiled from Typescript. They are bundled on build in Visual Studio with the help of Web Essentials – so whenever I build the project I get an updated couchapp.js (and couchapp.min.js).

The couchapp.js.bundle looks like this

<?xml version="1.0" encoding="utf-8"?>
<bundle minify="true" runOnBuild="true">
  <!--The order of the <file> elements determins the order of them when bundled.-->

  <file>/lib/jquery.js</file>
  <file>/lib/jquery.couch.js</file>
  <file>/lib/domo.js</file>

  <file>/scripts/mymodule.js</file>
  <file>/scripts/app.js</file>

</bundle>

When I have made a new version I need to manually upload the bundled js to iriscouch. However before I do that I can run the github.html from iriscouch, which runs the current script from my github repository. Github.html looks like this:

<!doctype html>
<html>
  <script src="https://raw.github.com/joeriks/couchapp/master/couchapp.js"></script>
</html>

The source is at Github : https://github.com/joeriks/couchapp

You can see the application live at https://joeriks.iriscouch.com:6984/docs/test/index.html

And the “develop version” is at https://joeriks.iriscouch.com:6984/docs/test/github.html

Current version of the source

///<reference path="../defs/jquery.d.ts"/>
///<reference path="../defs/couch.d.ts"/>
///<reference path="../defs/domo.d.ts"/>
///<reference path="mymodule.ts"/>


function opacity(pct) {
    return { opacity: String(pct / 100), filter: "alpha(opacity=" + pct + ")" }
}

HTML({ lang: "en" },
  HEAD(
    TITLE("A sample of a typescript application within a couchdb"),
    STYLE({ type: "text/css" },
      STYLE.on("body", { textAlign: "center", fontSize: 50 }),
      STYLE.on("h1", opacity(50), { background: "#000", color: "#fff" })
    )
  ),

  BODY(
    H1("A sample of a typescript application within a couchdb"),
    DIV({ id: "databases" }),
    DIV(
        LABEL("name"),
        INPUT({ id: "name" })
        ),
    DIV(
        LABEL("value"),
        INPUT({ id: "value" })
        ),
    
    BUTTON({ id: "create" }, "Click to create new document"))
);

$("#create").click(() => {

    $.couch.login({ name: 'test', password: 'test' });
    $.couch.db("docs").saveDoc(
        {
            name: $("#name").val(),
            value: $("#value").val()
        }, {
            success: (data) => {
                alert("Saved as " + data.id);
            }
        });
});
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s