Getting Started with Meteor.js (Review)

Overall

The book Getting Started with Meteor.js JavaScript Framework by Isaac Strack provides a valuable resource to complement the online documentation for the Meteor.js framework. It features plenty of examples and integrates these into one comprehensive scenario; the implementation of a simple lending library. I would have loved to see some more background and advice on how to build large applications with Meteor and some patterns/solutions for common architectural level problems. But, hey, it’s not like there are hundreds of books out there on Meteor.js so these issues might be something for a sequel!

Background

Meteor.js is an emerging JavaScript framework which aims to simplify communication between application servers and JavaScript clients.

Traditionally, we would deploy some form of RESTful service (or SOAP, for the brave) on the server, which is then consumed through AJAX calls from the JavaScript application. Thus, we end up with two idiosyncratic applications: one for the server and one for the client. Often, these two applications would be implemented using different languages; such as Java or C# on the server-side and, naturally, JavaScript for the client side. As a more recent development, node.js is employed to remedy some of the difficulties arising from this arrangement by allowing both the client and the server to be implemented using one language: JavaScript.

Meteor, building on node.js, goes one step further than the common node.js application and allows JavaScript clients direct access to the application database (a MongoDB database, to be precise). Since JavaScript clients should sensibly not be given full authorization to the database, privileged database operations can be performed by JavaScript scripts applications running on the server. Meteor allows to write both client-code and privileged code in one JavaScript file and takes care that only appropriate code is available to the client.

Meteor is thus quite different to the traditional way of building web applications. As such, some problems which we came used to expect cease to be of relevance, while new and different problems might come to the fore. Thus, when reading the book Getting Started with Meteor.js JavaScript Framework by Isaac Strack, my prime interest was in the following two points:

  • Does the book serve as useful manual for navigating the basics of Meteor.js? and
  • Does the book point to possible medium-term to long-term problems and provides pattern/solutions of dealing with these.

Navigating the Basics of Meteor.js

The book definitely gives a good foundation to start using Meteor.js and overcoming various roadblocks one might encounter. This ranges from the very basics covered in chapter 1 ‘Setup and Installation’ (note, the book covers only setup and installation for Linux and Mac and not the new deployment for windows) to more elaborate questions discussed for instance in chapters 4 ‘Templates’ and chapter 7 ‘Packaging and Deploying’. Everything is explained clearly and concisely with lots of practical advice, links pointing to further resources, plenty of code examples and additional background explanations.

I especially like that the chapters 2 to 7 explore an exhaustive example of building a Meteor application, a simple lending library:

Using Meteor, we’re going to build a Lending Library. We’ll keep track of all our stuff, and who we lent it to, so that the next time we can’t remember where we put our linear compression wrench, we can simply look up who we last lent it to, and go get it back from them.

This application is brought up to a fairly sophisticated level, adding database persistence and support for multiple users including login screen etc!

Problems, Patterns and Solutions

The book does a very good job at explaining the motivation and benefits of the Meteor platform in chapter 3 accordingly named ‘Why Meteor Rocks!’. This chapter in particular explores the benefits of the MVVM (Model View View-Model) enabled by Meteor. However, there is little information on what kind of medium-term or long-term issues might arise in developing an application for Meteor.js and how these could be mitigated, for instance in form of design pattern. But, then, the very title of the book focusses on ‘Getting Started with Meteor.js’ so I guess it’s fair enough if these more abstract and complex issues are omitted.

Overall

See above!

Disclaimer: I’ve created Appjangle, which some might say is similar to Meteor.js. However, I would disagree, since Appjangle is more of a cloud platform and focusses on supporting Java and JavaScript, while Meteor is a more of a framework with a strong focus on JavaScript. In any case, I think Meteor is great and thus consider my judgment unblemished J. Further, thanks to Packt Publishing for a free copy of this book!

Tutorial: Upload from Java, Download from JavaScript

This tutorial.describes how a simple unit of data, the text ‘Hello, Java!’ can be uploaded from a Java application and retrieved with a JavaScript application. 

Upload from Java

This section lists all steps required to create a small application that store the text ‘Hello, World’ in the Appjangle cloud database.

Step 1: Download Client Libraries

First download the latest version of the Appjangle client libraries from this page.
Chose the ‘Appjangle Client with Nextweb API’. The Nextweb API is more declarative in nature than the more low-level onedb API and therefore allows in most cases to write more concise code.
If you use Maven in your project, you can also use the provided Maven dependencies to link the library to your project.

Step 2: Link Client Libraries

Create a new project in your favorite IDE. This example will make use of eclipse.
Copy the downloaded .jar file into a your project directory (e.g. ‘lib’) and add the library to the classpath/ build path.

Step 3: Write App to Upload Data

Create a new class with the name ‘Upload’. Add a Java main method to the class as follows:
import io.nextweb.Query;
import io.nextweb.Session;
import io.nextweb.jre.Nextweb;

public class Upload {

    public static void main(String[] args) {
        Session session = Nextweb.createSession();

        Query hello = session.seed().append("Hello, Java!");

        System.out.println("Created:\n"+hello.get());

        session.close().get();
    }

}
Running this application should result in an output such as the following:
Created:
node("http://slicnet.com/seed1/seed1/2/1/2/h/sd/Hello__1", 
  class java.lang.String)
You can now access the created node using the reported URI. For instance, by opening http://slicnet.com/seed1/seed1/2/1/2/h/sd/Hello__1 
in a web browser.

Download from JavaScript

This section lists all steps required to create a small application that store the text ‘Hello, World’ in the Appjangle cloud database using JavaScript.

Step 1: Download and Extract Appjangle Bootstrap

Head over to github to download the Appjangle Bootstrap project or, even better, fork it if you are familiar with github.
Extract the project and open app.html in your faverioute HTML/JS editor.

Step 2: Write App to Download Data

Replace the text // Your JavaScript here with the following application:
<body>
    <script
        src="http://appjangle.com/js/v01/appjangle/appjangle.nocache.js">
    </script>

    <script>
        window.onNextwebOnedb = function() {
            var session = Nextweb.createSession();
            var hello = session
                    .node("http://slicnet.com/seed1/seed1/2/1/2/h/sd/Hello__1");
            hello.get(function(node) {
                document.body
                        .appendChild(document.createTextNode(node.value()));
            });
        }
    </script>
</body>
Save app.html and close your editor.

Step 3: Upload App to Appjangle

Open the TextSync JAR file in the appjangle-bootstrap directory (for instance, by double clicking on the file if supported by your OS).
Drag and drop the file app.html onto the files list in the TextSync App and click [Synchronize].
Note: You will need to get an Appjangle account in order to use the TextSync App. All your uploaded applications will be stored under this account.

Step 4: Open Application

Open app.html again. In the beginning of the file, copy the URL to the right of one.upload .
Past the URL into your web browser. Add to the end of the URL .value.html and replace https with http at the beginning of the URL.
Loading the page should result in the output (also see an example deployed app here):

Hello, Java

It’s not ‘Hello, JavaScript’ since here we are loading the node created by the Java Hello, World application described above. Check out the Nextweb.io API docs to find out how to change the text stored in the Appjangle cloud to a more fitting ‘Hello, JavaScript’.
This tutorial is also published on the Appjangle blog.

Copy and Paste from HTML Tables with Empty Cells

Problem

You would like to copy a HTML table into a spreadsheet processing application like Google Spreadsheets.

However, the table you would like to copy contains empty cells. Just as in the ‘Start_Time’ column in the image shown below:

If you paste this table, the rows which contain empty cells are not copied correctly. The empty cells are simply omitted and thus the later column headings do not match the cell values correctly.

Solution

You can solve this problem easily when you have some influence on the rendering of the HTML table in question.

Just place in any empty cell the character &nbsp;

For instance, instead of creating cells such as

<td></td> or

<td> </td>

Represent empty cells as:

<td>&nbsp;</td>

Background

As can be seen in the first screenshot, I’ve been working on a tabular data view for hyperdata on Appjangle. This view should make it easier to analyse structured and semi-structured data. In the example above, data created using the web time reporter is to be analyzed using Google Spreadsheets.

 

Start JTreeMap from Command Line

In the course of writing up my thesis, I wanted to perform a simple source code analysis on the Appjangle code base. Since most of the code is as of now stored in a SVN repository, I used StatSVN for this purpose. StatSVN is really easy to use and generate some very nice statistics and diagrams.

However, one of the visualization, the Repo Heatmap, requires a Java Applet based on JTreeMap to be run on the page. Most current browsers are a bit picky about running Java Applets, and also I have quite a number of Java versions floating about in my machine – in consequence, it would be quite a hassle to configure my browsers to start the Java applet.

Thus, I wanted to load the Repo Heatmap using the JTreeMap standalone Swing Application. Now, most of the documentation on the JTreeMap homepage focusses on its use as an Applet, but it’s really quite easy to launch it as standalone application as well.

JTreeMap is bundled in a single JAR file. However, plugging this file into a call to ‘java –jar’ does not yield much good; since there is no MANIFEST.MF file is not configured appropriately for this. Luckily, the application can easily be started using the ‘-cp’ parameter:

java –cp jtreemap-1.1.0.jar net.sf.jtreemap.swing.example.JTreeMapExample

Once the application is launched, you can open a data file. For instance, the data file generated by StatSVN: repomap-data.txt.

Then, you can view the heat map, even without having to install the Java plugin:

Appjangle: New Homepage (Again)

After I had recently completed a first version of interactive showcases for the Appjangle platform, it was now about time to give a little rework to the homepage. Arguably, it was a bit dull and, more importantly, not very informative – in particular in regards to giving an overview of what Appjangle is good for and what it does.

This is how the last version of the homepage looked like:

The redesign, accomplished in 350 min (yes, I am slow and I also love to measure time), focused on the following objectives:

  • Allow to understand what the Appjangle platform does.
  • Provide an overview of the benefits of the platform.
  • Give a clear indication of what a visitor can do next.

Well, this is how the new page looks like:

I believe that this new design meets the described objectives much better than the old version. However, there are still plenty of steps which stand between this version and ‘perfect’.

Now, I am certainly not what I would call a naturally gifted graphics artist. However, I think it’s often a diversion from my usual occupations of writing code and writing academically to move around some pixels. Also, it’s nice to see a design develop over time. Actually I started working on this ‘entry page’ in November 2011 – at that time Appjangle was still called ‘Nx Framework’, and the Introduction was somewhat wordy: Nx Framework Introduction.

Anyway, next on my list are the sign up screen and the hosting options– when my thesis will grant me some time.

This post is also published on the Appjangle Blog.

Google’s 10 Minute Test Plan – Attributes

James A. Whittaker, of considerable testing fame, has published both on the Google Testing blog as well as in IEEE Software an article on the so called ’10 Minute Test Plan’. This test plan is also described in detail in the book ‘How Google Tests Software’ (Whittaker, Arbon, and Carollo, 2012). I read all three versions and I think the article on IEEE Software is the quickest and most pleasant to read (however, you will either have to pay for the article or be part of an institution that has subscribed to IEEE xplore).

Now, there are a couple of things I really like about this ’10 Minute Test Plan’. Chiefly, the idea to use attributes as key building blocks to create test plans.

The test plan described by Whittaker is established in a process named ACC; an acronym composed of attributes, components and capabilities, which are to be elicited in the given order. Components and capabilities are rather ‘standard’ in my mind, describing modules of the software under test and desired functionality respectively. Attributes, on the other hand, seemed at first counterintuitive to me. Attributes, in the ACC framework, are simple adjectives or adverbs, which describe what differentiates the software under test from competitors.

First, I thought this is overly simplistic, given that a single adjective might be too broad a concept to describe anything meaningful. However, while applying this ACC process to the Appjangle platform, I found the attributes to be of particular value! Maybe it’s one of those things one needs to try out to appreciate the value. Below, I have collected three examples of adjectives, which could be used to describe a range of products:

Product Attributes Source
Google Sites Searchable

Sharing

Quick

No Technical Knowledge

Customization

Rich Content

(Whittaker, 2012)
King (A Tool to Estimate Network Latency) Accurate

Easy to Use

Fast

Lightweight

(Gummadi et al., 2002)
Appjangle Scalable

Portable

Testable

Connected

One thing I noticed while creating a set of attributes is that there can be lower level (technical) and higher level (business) attributes. For instance, ‘portable’ is a more technical attribute that can easily be verified. ‘Agile’ could be another valid attribute. However, it is one that is arguably more difficult to measure and verify. In that, I found that multiple technical attributes can be thought of as supporting one higher level business benefit. For instance:

Business Attribute Supported By
Flexible Scalable

Modular

Portable

Testable

Concise

Apart from a set of ‘technical attributes’ enabling business attributes, ‘higher level’ business attributes themselves can be enabled by a set of ‘lower level’ business attributes. For instance, for a product to be adaptive, it needs to be both flexible and agile:

Business Attribute Supported By
Adaptive Flexible

Agile

I think both ‘technical’ and ‘business’ attributes are a great way to describe the benefits of products, as well as to assert these benefits through directed tests. However, one thing I didn’t like so much about the ’10 Minute Test Plan’ is the idea to create a test plan in 10 minutes. To come up even with the most rudimentary set of suitable attributes took me hours – but then maybe I’m just too slow!