Kinoma Create now supports JavaScript 6

Kinoma Create, for fast prototyping IoT devices

Kinoma Create is a very interesting device for fast-prototyping IoT solutions. Coupled with it’s IDE Kinoma Studio and the underlying development kit, Kinoma simplifies the implementation of IoT applications on the device side. Makers who are familiar with JavaScript should definitely adopt it, especially that Kinoma Create is now shipping with JavaScript 6 support!

Showcasing some of the new JavaScript 6 features

At scriptr.io we have been early adopters of Kinoma Create and we are excited to be able to leverage JavaScript 6 on the device side. So, in the remainder of this post, we will showcase some of the new features of JavaScript 6 on Kinoma Create, by implementing a simple SDK to scriptr.io.
We will start from the code sample below, available on scriptr.io’s main page, and see how it can be improved thanks to the new features:

var url = "https://api.scriptrapps.io/welcome";
// Create completion callback using Kinoma container
var container = new Container();
var containerBehavior = new Behavior();
containerBehavior.onComplete = function(container, message, data) {
   trace("Response " + data);
};
container.behavior = containerBehavior;
// Build Kinoma Message instance
var message = new Message(url);
message.method = "POST";
message.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
message.setRequestHeader("Content-Length", 0);
message.setRequestHeader("Authorization", "bearer UThEOTkwNkY5OQ==");
container.invoke(message, Message.TEXT);

Messages now have promises

Kinoma applications communicate with each other and with the external world using messages. In the former versions of Kinoma Create, only Content, Container and Handler objects where able to send messages and receive the corresponding response, as you can see it in the above sample.

Now, thanks to JavaScript 6’s “promises”, using Messages is much more straightforward since Message instances are only what you need to send a message and receive a response. Using promises, we can get rid of the container object and the above code is turned into the following:

var url = "https://api.scriptrapps.io/welcome";
var message = new Message(url);
message.method = "POST";
message.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
message.setRequestHeader("Content-Length", 0);
message.setRequestHeader("Authorization", "bearer UThEOTkwNkY5OQ==");
var promise = message.invoke(Message.TEXT); // Ask the Message instance to invoke the resource at the specified URL. This returns an instance of "Promise" 
promise.then( // The "then" callback is automatically invoked upon reception of a response. 
   function(response){ // The callback has to be associated to a handler function
     trace(response);
   }
)

Arrow functions

Arrow functions are an elegant way to resolve two former annoying problems in JavaScript: (1) using the “function” keyword when defining anonymous functions, and (2) finding workarounds to using the “this” keyword on changing scopes. So let’s apply this to our anonymous function above:

promise.then( (response) => {
     trace(response);
   }
)

Class and elegant code

Although object-based, JavaScript is – or was – a prototype based language, which made the creation of classes a bit awkward for developers used to other languages such as Java. This is now history thanks to the class and contructor keywords that allow for the definition of a class.
Let us see how we can leverage this by wrapping all of the above code in a reusable class:

// A new Scriptr class
class Scriptr {

	constructor(token) {
	
		this.token = token;
		this.url = "https://api.scriptrapps.io";
	}
	
        // we create a "send" method into which we place the code to create and send messages
	// in the process, we enhance our initial code to accept an api name and a callback
	send(apiName, callback, params) {
	
		var message = new Message(this.url + "/" + apiName);
		//message.requestText = buildQueryString();
		message.method = "POST";
		message.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		message.setRequestHeader("Content-Length", 0);//message.requestText.length);
		message.setRequestHeader("Authorization", "bearer " + this.token);
		var promise = message.invoke(Message.TEXT);
		promise.then((response) => {
				callback(response);
			}
		);
	}
}

String templates

If you have been developing for the web with JavaScript, you know that customizing strings content with parameters can be tedious. JavaScript 6 has this covered and introduces template strings, where you can replace the former “bla bla ” + someVariable + ” bla bla” string concatenations with nicer `blabla ${someVariable} blabla`. Notice the use of the backtick (`) instead of the double-quotes (“) to delimit the string.

So let us apply this to our class above:

class Scriptr {

	constructor(token) {
	
		this.token = token;
		this.url = "https://api.scriptrapps.io";
	}
	
	send(apiName, callback, params) {
	
		var message = new Message(`${this.url}/${apiName}`); // using a string template
		message.method = "POST";
		message.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		message.setRequestHeader("Content-Length", 0);
		message.setRequestHeader("Authorization", `bearer ${this.token}`); // using a string template
		var promise = message.invoke(Message.TEXT);
		promise.then((response) => {
				callback(response);
			}
		);
	}
}

Check out for more enhancements

In the above paragraphs, we covered some of the cool features of JavaScript 6 that are now supported by Kinoma Create. We recommend checking the list of all the nice enhancements you can benefit from and the great features of Kinoma Create on Kinoma’s web site.

Note: if you are interested in a using a more complete scriptr.io client for Kinoma Create, you might want to check the simple client module on Github.