Introduction to Haxe

First of all, I apologize for my probably bad English. Currently I’m working on improving my English skills that’s why I need to write articles in this language.

Being Flash developer, everyday I come across with HTML5. There a lot of discussions about HTML5 vs. Flash. I decided to take a closer look to HTML5. After playing with canvas and audio I realized that I’m missing strictly typed OO language. JavaScript is good language, but for me it’s more comfortable to write code in such languages as ActionScript 3 or Java. Fortunately, there are a plenty of tools which could help you to avoid using JavaScript directly, for instance:

  • GWT (Google Web Toolkit). Java code compiles to JavaScript;
  • Jangaroo. ActionScript 3 => JS
  • Script#. C# => JS
  • Haxe. Haxe => JS.

and others. I tried GWT, Jangaroo and Haxe and choose the last one.

What is Haxe?

Haxe is programming language that is compiled to another languages:

  • JavaScript;
  • Actionscript 2 & 3;
  • C++;
  • PHP;
  • Java (beta feature);
  • C# (beta feature).

For example, you have html-based client and php-based server - both of them can be written in one language and share the same code. The great example of Haxe power is HaxeNME. This is free open-source framework that uses Flash API. Target platforms for HaxeNME:

  • Windows;
  • Linux;
  • MacOS;
  • HTML5;
  • Flash;
  • iOS;
  • Android;
  • Blackberry.

Application written with HaxeNME doesn’t need any special runtime like Adobe AIR or JVM. Source code compiles to native code for each platform. For example, for Windows or Linux it would be C++, for HTML5 - JavaScript, for Flash - ActionScript 3. You just need to select target platform during compilation and as result you will receive apk-file for Android or html+js for HTML5. Source code stays untouched. But let’s start from the beginning.

Installation of Haxe

Installers are here: http://haxe.org/download

Haxe compiler is cross-platform and now you can write Haxe apps on Windows, Linux, Mac OS or just in your web-browser. I use Haxe on Windows and Linux (Ubuntu). It’s a bit tricky to install Haxe on 64-bit Linux. In this case it’s better to use this installer http://www.haxenme.org/download/ It will install proper version of Haxe for your Linux system and installs HaxeNME framework. Although, in latest Haxe 2.10 installer this issue could be fixed, but I didn’t try it.

After installation open command line, type “haxe” and press Enter. If you’ll see something like “Haxe Compiler 2.10…”, everything is fine. Otherwise, try to reboot your system. And if it wouldn’t help try to use Google to find solution or just leave it. In last case further reading doesn’t make sense for you.

Now we need choose the code editor or IDE to write Haxe code. In my opinion the best IDE for Haxe is FlashDevelop. But it have one minus: only Windows compatible. As for cross-platform IDE: Intellij IDEA, MonoDevelop and Eclipse - all of them have plugins to add Haxe support. Certainly, I can’t forbid you to use your favorite text editor and compile code from command line.

Enough talking. Let’s create simple haxe project. For better understanding I’ll not use IDE but simple text editor. First, we need to create project structure. Nothing extraordinary here:

HaxeProject:
-bin
  |-index.html
-src
  |-Main.hx
-compile.hxml
  • bin - destination folder for compiled files.
  • src - folder with source files.
  • compile.hxml - build file, contains instructions for haxe compiler.
  • Main.hx - main and only class of our project, hx - extension for all haxe source files.
  • index.html - html which includes js file compiled by haxe. We need to create it manually because haxe compiles only js files.

Main.hx:

//package of class. It’s empty because Main class is in root of source folder.
package;

class Main
{
  //first method called after launching application. Like main in Java or in C++.
  public static function main():Void
  {
    //this method will print string “Hello Haxe!” to console, like in ActionScript 3.
    trace("Hello Haxe!");
  }
}

compile.hxml:

#haxe will compile js-file located in “bin” folder and named “haxe.js”
-js bin/haxe.js

#folder with source files
-cp src

#main class of our project
-main Main

index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Haxe Sample</title>
    </head>
    <body>
        <script src="haxe.js"></script>
    </body>
</html>

Now we are going to run:

haxe compile.hxml

Then open index.html in your browser and open JS-console (Ctrl+Shift+I in Google Chrome). And there we will see “Hello Haxe!” message. Let’s look at the JS code generated by Haxe. haxe.js size is 6 944 bytes and it has 275 rows - too much for one simple console.log operation. By default haxe compiler doesn’t optimize the code and compiles all auxiliary classes. To avoid it we need to add “–dead-code-elimination” flag to our compile.hxml and run haxe compile.hxml. After that size of haxe.js was reduced to 95 bytes and has only 5 rows. That looks better.

That’s all for now. Next time I’m going to write about interaction with HTML5 canvas using haxe.

Links:

http://haxe.org/ - official site of Haxe programming language.

http://try.haxe.org - try Haxe in web browser.

http://www.haxenme.org/ - HaxeNME framework.

http://www.flashdevelop.org/ - FlashDevelop, IDE for Haxe and Flash/Flex

http://www.eclihx.org/ - plugin for Eclipse

http://fdt.powerflasher.com/ - FDT, IDE for Haxe and Flash/Flex

http://plugins.jetbrains.net/plugin/?pluginId=6873 - plugin for Intellij IDEA (Community version not supported). You can  install Haxe plugin via embedded Plugin Manager.

http://monodevelop.com/ - IDE for C# and other .NET languages. You can install Haxe plugin via embedded Plugin Manager.

comments powered by Disqus