Playing with haXe JS

Ever since I had the wonderful opportunity to meet Philippe Elsass and his family while I was visiting France, I have been eager to experiment with haXe and Javascript.

There are many things to like about Javascript, but I wish sometimes that I could use it more like compiled languages I am used to — strong data types, formal class structures, compile-time error checking, or quality code completion. A couple posts ago I created an application that runs in Flash and C++. This is a compelling use-case for some applications, but many applications do not need to work cross-platform. What does haXe look like for pure Javascript development?

I was surprised when I started to write Javascript using haXe. I had forgotten that I installed a gedit plugin for haXe code completion, so the first moment that I typed “Lib.document”, I saw a list of child properties instantly, like anchors, appendChild, blur, body, and so on. This is really cool. You begin to forget how great code completion can feel when you work without it.

I also got to receive error messages before testing my code in the browser. When I tried to access a property that does not exist, like “document.foo”, I received this message:

App.hx:16: characters 2-18 : js.Document has no field foo

index.html

<!doctype html>
<html>
<head></head>
<body>
	<div id="haxe:trace"></div>
	<div id="main"></div>
	<script type="text/javascript" src="App.js"></script>
</body>
</html>

App.hx

package;
 
import js.Dom;
import js.Lib;
 
class App {
 
	function new () {
 
		var div:HtmlDom = Lib.document.createElement ("div");
		div.innerHTML = "Hello World!";
		div.style.fontWeight = "bold";
 
		Lib.document.body.appendChild (div);
 
	}
 
	static function main () {
 
		new App ();
 
	}
 
}

App.hxml

-js App.js
-main App

I am very interested to see what kinds of things I can do with haXe JS. Being able to use data typing, code completion and compile-time error checking in a Javascript application seems like a great experience. I would really like to test this out with some Javascript frameworks, to provide code completion.

Similar to the how an experienced user can fly on a command prompt or terminal, code completion enables you to develop applications without memorizing everything, and to allow your editor to complete text for you, dramatically reducing the amount of typing you need to write your applications. Compile-time error checking allows you to spot mistakes and errors immediately, rather than discovering them part-way into your application.

FlashDevelop and FDT both provide support for haXe completion, and as I re-discovered today, so do editors like gedit or vim through the use of plugins.

If you would like to run my sample, make sure that you have haXe installed on your computer. You do not need to install any additional libraries to compile to Javascript, like hxcpp or nme. You may be able to double-click the “App.hxml” file that is included to compile the sample. Otherwise you can run “haxe App.hxml” from a terminal.

http://joshuagranick.com/code/haxe/js/App.zip

This seems promising so far. I am interested to put it to the test with a full application.

  • Yanis Benson

    Just so you know, “:HtmlDom” part in
    var div:HtmlDom = Lib.document.createElement (“div”);
    is not required. If you write just
    var div = Lib.document.createElement (“div”);
    HaXe will resolve it to the same type since createElement returns HtmlDom.

  • http://www.joshuagranick.com Joshua Granick

    Ah, good to know!

    I had seen some examples of haXe for Javascript that did not include the type, but I had forgotten that haXe would still give you completion for these values. In Actionscript, even if you could define values without specifying the type, you won’t get code completion, so it is a habit to define everything.

    Very cool. Another advantage of compiler-based completion :)

  • http://www.facebook.com/tarwinss Tarwin Stroh-Spijer

    Would be pretty sweet to make externs for all the WebOS stuff as well! Good to see you using more of what haxe offers.

  • Michiel Crefcoeur

    if you like using haXe’s JavaScript target, you also might want to take a look at this library I wrote

    http://code.google.com/p/jstm/
    any feedback is very much appreciated!

  • Pingback: luottoa()