Scaling JS++: Abstraction, Performance, and Readability

Sometimes, people will argue that C++ scales better than C for development teams and large projects because it has classes. While code organization is certainly helpful, Linus Torvalds will argue it is unnecessary because there are other ways of achieving code organization – such as prefixing function names with a “namespace.” JS++ is influenced a lot by C++ and Bjarne Stroustrup’s philosophies. While most people point to classes as the reason for C++’s success and scalability, there is a more subtle reason it scales so well: readability.

The C++ STL provides a level of abstraction without sacrificing performance. Stroustrup said he wanted std::vector to be as fast as C arrays. You can implement these details yourself, but why not just use std::vector?

While working on the JS++ Standard Library, Stroustrup’s philosophies have once again come into play.

As an example, think about converting a JavaScript number from decimal (base 10) to hexadecimal (base 16). Can you think – off the top of your head – how it would be done? There is a certain pleasure derived when you can read through someone else’s code as clearly and effortlessly as you might be able to read a book. We enforce these standards internally at Onux, and I’m going to reveal how it influences the design of JS++.

Getting back to the example, this is how it’s done in JavaScript:

var x = 97;
x.toString(16);

I’ve argued that we need to deprecate JavaScript’s Number.prototype.toString(base). Instead, we are proposing a toBase(unsigned int base) method to convert from base 10 (decimal) to a specified arbitrary base. Consider the readability of the following functions:

x.toString(16);
x.toBase(16);

Both functions do the same thing, but I’ve argued that no programmer will ever have to look up what toBase(16) means versus toString(16). The beauty of a compiled language is that we have full control over optimization. Of course, in JavaScript, you can do this:

function toBase(number, base) {
    return number.toString(base);
}

All else being equal, and you care about performance, wouldn’t you much rather have this?

x.toString(base);

In JS++, we can perform this exact optimization in a process known as “function inlining”. Here’s an example from Wikipedia. In other words, even though JS++’s toBase(16) is clearer than toString(16), there is no loss of performance because toBase just gets compiled to toString with no additional function calls; the toBase method basically doesn’t even exist in the final generated code.

We can take this one step further. Converting from base 10 (decimal) to base 16 (hexadecimal) is quite common. Why not provide a Standard Library function to do this?

char x = `a`;
x.toHex();

In this case, toHex() is just an alias for toBase(16), which is in turn an alias for toString(16). With each layer of abstraction, we gain more clarity and readability in our code. This makes it easy for others to work on our code, it makes it easy to scale development for teams, and – most of all – each layer of abstraction results in no performance loss. In fact, toHex() just gets compiled to toString(16).

Think for a moment. You’re tired, groggy, and unmotivated. Would you rather read code that looks like toString(16) or toHex()? This readability gain has only been focused on 1-3 lines of code so far. What we want to achieve with JS++ will expand across your entire code base.

When I meet programmers and they say they have problems with “spaghetti code”, I almost always guess (correctly) that they’re working at a JavaScript house. Classes – by themselves – won’t stop developers from writing unreadable code. We need abstraction… without sacrificing performance. This is what’s coming with the JS++ Standard Library. Here’s to a better future!

JS++ 0.5.1: ‘foreach’

We just released JS++ 0.5.1, which features the foreach keyword.

Basic usage is as follows:

external console;

int[] arr = [ 50, 40, 30 ];

foreach (int value in arr) {
    console.log(value);
}

// Output:
// 50
// 40
// 30

More complex usage, such as arrays of objects, are also possible:

external console;

class Foo
{
	string bar() {
		return "bar";
	}
}

Foo[] foo = [ new Foo(), new Foo(), new Foo() ];

foreach (Foo value in foo) {
    console.log(value.bar());
}

// Output:
// "bar"
// "bar"
// "bar"

Additionally, the for-in keyword has been implemented. It is a counterpart to the foreach keyword in the sense that it enumerates keys rather than values.

JS++ 0.5.0: Basic Classes

JS++ now supports the ‘class’ keyword. As promised, we would have classes available by Q1 2017. Notably, we are providing “basic” classes, so the following features are supported:

  • ‘class’ keyword
  • Inheritance
  • Constructors (including private/protected constructors that limit instantiation/inheritance)
  • Static Constructors
  • Instantiation
  • Fields
  • Methods
  • ‘this’ keyword
  • ‘super’ keyword
  • Method Overloading
  • Constructor Overloading
  • Getters and Setters (via ‘property’ keyword)
  • Type system support
  • Debugger support for classes (via source maps)

What did we consider to be outside the scope of basic classes? The following features are currently not available yet:

As an example of what you can do with JS++ classes, we included an example with the Tiled Map Editor:

Tiled Map Editor

The included sample for Tiled can be found in the ‘Samples/Classes/tiled-loader’ directory with JS++ 0.5.0. Currently, it will load all maps exported to JSON with orthogonal tiles. It’s just a small but powerful example of what you can start doing with JS++ for early adopters.

I am also happy to inform that the backend for the JS++ website is written completely in JS++, and it has now run stable for one week without a single crash or error (other than 404 errors).

Finally, we have made the decision to not include the Mac/Linux installer… yet.

Be sure to check out the documentation on the ‘class’ keyword to get up to speed on JS++ classes.

Download JS++ 0.5.0 from our home page.

Website Backend Now Powered by JS++

As of 8 March 2017, the backend for the JS++ website is powered by the JS++ programming language itself (in conjunction with Node.js). The backend is developed using JS++ with classes, which will be available in the next release.

We wanted to wait at least 24 hours to ensure stable operations before making this post. Based on our logs, it is clear everything is running smoothly.

Our website frontend is not completely written in JS++. It will likely be migrated in the future if the code becomes more complex.

Mac/Linux Installer Coming for JS++ 0.5

The next version of JS++ will feature the ‘class’ keyword and is expected for Q1 2017.

In addition, Mac and Linux users will benefit from a JS++ installer:


The installer is completely optional. However, it will be useful if you don’t want to manually install JS++ and various editor plugins. We auto-detect which editors are installed on your system, and, if a plugin is available, we will attempt to install it for you.

JS++ for Mac OS X Updated to Latest Version

During our Christmas release, we had to release one version down (0.4.2.3) for Mac OS X. I’m happy to announce that – now that our staff are back from their breaks – JS++ for Mac OS X has been updated to the latest version and is in sync with JS++ for Windows and Linux.

Please note that, as of 0.4.2.4 for Mac OS X, JS++ defaults to the 32-bit binary. The 64-bit binary is available as jspp-x64.

You can download JS++ for Mac OS X from our homepage.

A JS++ Christmas: AJAX, js++Unit, Mac compiler, Tutorials

Merry Christmas from JS++!

We have multiple “gifts” and announcements for you this Christmas. We have lots of new libraries written with JS++ and a new version.

Version 0.4.2.4 and Mac Support

We have released version 0.4.2.4 which supports callback conversions, array conversions, and C-style casts such as:

int x = (int) y;

For a long time now, we have not provided Mac support. That’s going to change beginning this Christmas. We’ve released 0.4.2.3 for Mac OS X. It is one version down from the latest release for PC, but this was due to the fact that I let our staff off on holiday, found a bug with auto-boxing, and patched it at the last minute.

If you want access to our new libraries, you will need to download the new versions.

Library: js++Unit

js++Unit is an xUnit testing framework for automated testing in JS++. js++Unit currently works best for Node.js and is inspired by the Mocha test framework. It doesn’t really support the browser yet, but we’ll get there. We’re taking open source contributions for js++Unit too!

js++Unit also comes with a full-featured assertion framework (Vendor.JSPPUnit.Assert) and will do neat things like working with cycles for deepEqual.

You can download js++Unit from GitHub.

Library: ConsoleStyle

If you have a terminal emulator that supports ANSI escape codes, we have a library for you to provide colors to your console output. Download the ConsoleStyle library from GitHub. js++Unit depends on it and you need to link ConsoleStyle to use js++Unit.

Library: AJAX

Are you tired of having to include the entire jQuery library just to send an AJAX request? In JS++, you no longer have to. Since JS++ features dead code elimination, if you import an AJAX library that defines functions for HTTP GET and POST requests and you only use GET requests, the logic for POST requests will not be compiled into your final application.

You can download the AJAX library here. (It also ships with the latest version of JS++.)

Tutorial: What Are “Type Guarantees?”

The Getting Started guide has been completely re-written. We now explain how to use JavaScript libraries from JS++. We go one step further and explain what “type guarantees” are and how you can take advantage of them from JS++ using a new “RGBtoHex” tutorial.

The RGBtoHex tutorial shows an “untyped” JavaScript library. We teach you how to use it from JS++ – without ever adding types to your code. We gradually begin to add types (without compromising the soundness of the type system). Finally, we end with fully typed code and a re-usable function.

RGBtoHex is an ideal tutorial. RGB values are limited to the values 0 to 255. This is the JS++ byte data type. In the RGBtoHex tutorial, we show you how JS++ will guarantee your values will remain within the 0 to 255 range.

Check out the Getting Started tutorial now.

Merry Christmas!

JS++ 0.4.2.2: Debugging with Source Maps

JS++ 0.4.2.2 is being released today with support for in-browser debugging via source maps. Source maps allow you to debug your JS++ programs from a web browser of your choice that supports source maps debugging: Google Chrome, Mozilla Firefox, Microsoft Edge (untested), etc. With source maps, you can set breakpoints, log messages, and more with all locations pointing back to the original source JS++ file—rather than the generated .jspp.js file.

At the time of this writing, the recommended web browser to use for source maps debugging is Google Chrome.

In order to leverage source maps, compile your JS++ files with the --debug (or -d) flag:

Compiling source maps with JS++

This will generate a .map file, which maps the generated code back to the original JS++ source code.

When you run the generated code in your web browser, you will notice that console.log statements point to the original source .jspp file’s location rather than the locations of the generated code:

Source Maps - console.log Original Location

In addition, you can set breakpoints, step into, step over, step out and use all the features you’d expect from your debugger:

Source Maps - Set Breakpoint

Finally, we have worked to improve Microsoft Windows integration even more. In JS++ 0.4.2, we gave you Windows context menu integration. However, due to restrictions in Windows, this only allowed compilation of one file. JS++ is a multi-file, modular programming language. Thus, we needed users to be able to select multiple files and compile them. You can now do this in the latest version of JS++:

jspp-windows-multifile

Another problem with Windows integration was that the JS++ CLI compiler would pop up and immediately exit. If you had an error, there was no way to know what to fix. With the latest version of JS++, you will now receive a popup dialog notifying you of the compilation results:

jspp-windows-multifile2

Get the latest download of JS++ by navigating to our home page.

Under the Hood: GLR Parsing and Disambiguation

Today I want to talk about GLR parsing and the internals of the JS++ parser.

The Problem

In JS++, there is the potential for code to be “ambiguous”. For instance, consider the following example:

Foo<bar> baz;

There are two interpretations for the above statement:

1. A comparison operation: Foo is less than bar is greater than baz.
2. A variable declaration with type Foo<bar> (where Foo is a generic type with type argument bar)

Since JS++ is a superset of the JavaScript programming language, we would naturally expect the first case since JS++ inherited this from JavaScript. However, in order to achieve a concise syntax for generic types, we also need to consider how we can enable the second case.

Continue reading “Under the Hood: GLR Parsing and Disambiguation”

JS++ 0.4.2.1 – Minor Bug Fix Release

JS++ 0.4.2.1 has been released. This is a minor bug fix release. The following issues have been fixed:

1. Checking for permissions. Compiler now checks if the user has permission to read input files and write to output directories.
2. Segmentation faults for built-in modules (e.g. `Externals.DOM`)
3. Dead Code Elimination (DCE) algorithm updates so parent modules do not get eliminated.
4. Error 0119 was incorrectly being raised on function parameters. This has been fixed so assignments to parameters can be done.
5. Parser bug for regular expression literals.

In the next release, 0.4.2.2, we will be including free, open-source libraries for AJAX and real-time streaming.

The latest version can be downloaded from the JS++ homepage.