Loading the Haxe way vs Vanilla JS

In this example we are going to compare the different ways to load data with Haxe and vanilla js.

We saw in a previous example the Haxe way of loading data: json example. We loaded a Json with haxe.Http. The reason to do so is because this class is accessable in all Haxe targets. So eventually you can use it in Node, PHP, JavaScript, etc. But there might be reasons to use the native version, and with Haxe you can!

Check the code folder for more comments.

In this example we are going to use VanillaJS and read and use a .json file.

How to start

Create a folder named foobar (please use a better name; any name will do) and create folders bin and src. See example below:

+ foobar
    + bin
    + src
        - Main.hx
    - build.hxml

The MainJS.hx

First we will show the vanilla / native JavaScript code, and check out MainJS.hx for the complete code.

Lets isolate the code that does all the work: read more about XMLHttpRequest. And of course you can use Haxe with XMLHttpRequest

    var url = "http://ip.jsontest.com/";
    var req = new XMLHttpRequest();
    req.open('GET', url);
    req.onload = function() {
        var result:IpAddress = haxe.Json.parse(req.response);
        trace('[JS] Your IP-address: ${result.ip}');
    };
    req.onerror = function(error) {
        console.error('[JS] error: $error');
    };
    req.send();

In this example we are going to get our ip from http://ip.jsontest.com/ in JSON.

This little typedef is to extract that data from the response data.

typedef IpAddress = { ip:String }

Quite simple and the result will return you IP address.

Compare the Haxe code and the transpiled JavaScript and you will see there is almost no difference!

The Main.hx

Now lets check out the same example but now with the haxe.Http class.

You can find the complete code here

    var url = "http://ip.jsontest.com/";
    var req = new haxe.Http(url);
    req.onData = function (data : String) {
        var result:IpAddress = haxe.Json.parse(data);
        trace('[Haxe] Your IP-address: ${result.ip}');
    };
    req.onError = function (error) {
        console.error('[Haxe] error: $error');
    };
    req.request();

The typedef is the same as the one from vanilla JS code.

Quite simple and the result will return you IP address.

Let see the difference between Haxe Http and Haxe vanilla JS, very simular right!

But when you compare the transpiled code from Haxe code to example_haxe.js you might think Haxe is a bad idea.

Remember: if you use a library to load data it will look simular except it will be in an external library not in your code. And if you prefer that, you can do that with Haxe: check out Example NASA where we use JQuery to load a JSON file. But any loading lib can be used with externs or (if you don't want to write externs) just with untyped.

The reason for a longer file is that some features in Haxe are not in JavaScript or are different and so they need to be created. Like Lambda, List, EReg and Http. And there something called IE that always works different from the rest of the browsers, so that needs to be adressed. No different with other libraries.

But this is a small example, so all that "Haxe" stuff looks HUGE... With a normal code base you will not notice this extra code, better yet I normally don't look at the transpiled code. The dead code elimation (DCE) of Haxe cleans up my code, and once you minify your code nobody wants to read it!.

The Haxe build file, build.hxml

There are a lot of different arguments that you are able to pass to the Haxe compiler. These arguments can also be placed into a text file of one per line with the extension hxml. This file can then be passed directly to the Haxe compiler as a build script.

# // build.hxml
-cp src
-main Main
-js bin/example.js
-dce full

Because we have two files here to export, we just add

--next

-cp src
-main MainJS
-js bin/example_js.js
-dce full

Build js with Haxe

To finish and see what we have, build the file and see the result

  1. Open your terminal
  2. cd to the correct folder where you have saved the build.hxml
  3. type haxe build.hxml
  4. press enter

results matching ""

    No results matching ""