Deploying C++ to JavaScript using Emscripten

If you paid attention during the post-GDC news, you probably heard that Epic Games and Mozilla teamed up to get the Unreal Engine running in the browser, without plugins, in a matter of four days. The secret? Emscripten.

Alon Zakai has worked three years on Emscripten, and its an amazing piece of software.

Literally, you take C++ (or technically, something that compiles to LLVM), and out comes JavaScript. Not only can you do basic code, you can take large, complex projects with myriad dependencies, and actually run it in the browser.

Let’s take one of my previous samples, and port it to the browser. Ready? Continue reading Deploying C++ to JavaScript using Emscripten

Getting Started with Haxe/JS in MonoDevelop

If you have not done it already, go to this post and install Haxe and MonoDevelop on your system.

It is easy to start writing haxe JS using MonoDevelop. Create a new solution by going to File > New > Solution in the menu.

Let’s start with something simple:

js.Lib.alert ("Hello World");

This will display a Javascript alert. Although this is slightly more verbose than a traditional alert, you may notice code completion can speed things up. Having a clean API, and not having to keep it memorized is a huge benefit. This style of code completion will work even for your own code you write. It is even possible to receive code completion for existing Javascript libraries, like jQuery or Sencha Touch. Continue reading Getting Started with Haxe/JS in MonoDevelop

Sencha Touch 2 Example (haxe JS)

As I mentioned before, I set out to build an automated parser for Sencha Touch. Thankfully, the framework is designed to work with JSDuck for outputting type information, which has been tremendously useful for creating automated externs.

I am happy to announce that buildjs has been refactored to more easily support other types of object parsing in the future, and also supports a “-senchatouch” flag for automating the tweaks I’ve applied to polish some rough edges on the data that came from JSDuck for the Sencha Touch 2 preview I have. The next time they make a release, it will be possible to update the haxe JS class completion instantly, or with a few minor tweaks to the special parser optimizations I made.

That said, here is a sample application, based on the “Getting Started” example that was provided with the Sencha Touch 2 developer preview. Instead of doing a direct conversion, I refactored the code a little to better take advantage of classes in haxe JS. Even though the sample is simple enough that it would not be terribly confusing to have all the code in one file, when you begin to build a large application it becomes essential to separate components more cleanly and think about one piece at a time. Continue reading Sencha Touch 2 Example (haxe JS)

Use buildjs to Make Externs for haxe JS Automatically

If you create code in haxe JS, you receive code completion and error checking. Awesome!

…but what if you want to use another library, particularly a third-party framework like Sencha Touch? haxe supports a feature called an “extern class”, which provides type information for objects or classes that already exist at runtime.

I have made extern classes by hand a few times. It’s very simple and can be very rewarding. However, as I began to measure the API for Sencha Touch 2, I realized that parsing 250+ files (for an API that is not set in stone yet) would be time-consuming. Surely there is a faster way?

Thanks to James Pearce over at Sencha (thanks James!) I learned that Sencha builds their documentation using a tool called JsDuck. In goes the Javascript, out goes type information. The cool thing about this tool is that it should work for other libraries as well, particularly if they are well formatted or documented. Continue reading Use buildjs to Make Externs for haxe JS Automatically

Haxe Roundup 60

via twitter:

via mailing list

  • NME has a new website, celebrating the 3.0 release. Check it out!
  • Actuate 1.32 is now on haxelib, includes better performance and effect tweens

Haxe Roundup 59

Skial Bainn has asked that I help post the Haxe Roundup for this week and the next. You can see previous issues here.

via twitter:

via mailing list:

Enyo Screencast Is Now Online

There is a new screencast online, building from a blank project template to an Enyo application with buttons, sliding views, events, custom kinds and more. This is a great introduction if you’d like to see Enyo code completion in action, or want to learn more about Enyo developer with Haxe Javascript.

http://www.joshuagranick.com/videos

The template I am using in the screencast is available for download, here.

Style Matters for Haxe JS, a “Kitchen Sink” Enyo Example

For many who are familiar with webOS development, “Style Matters” is a household name.

The original Style Matters was written by Tomomi Imura for the Palm Mojo framework. It was my favorite, “go to” reference when searching for standard CSS styles or deciding which widgets I wanted to use in my application. Following suit, the new Style Matters for Enyo is a wealth of widget and style samples.

The screenshot above illustrates check boxes. The source code for the application is broken up so that you can easily find the code which generated this page, and implement the same in your own projects. Continue reading Style Matters for Haxe JS, a “Kitchen Sink” Enyo Example

Building My First Enyo Application, Thoughts on the Framework

Over the past few days, I have taken Enyo for a test-drive, seeing if I can create a tablet version of Bible Reader, and if Enyo is a good fit for it.

So far, I have been very impressed with Enyo. Having code completion has made it much easier to get into the framework. There is still a certain measure of “magic” that goes on under the hood — I wish that it were possible to use Enyo with more of a prototype/class-inheritance model than the factory model, but it does a great job of letting you create re-usable components. Enyo is very easy to copy-and-paste.

The first thing that I had to get used to was the concept of “object definitions” and “object instances”. In a traditional model, you have a class and an instance. They are both pretty much one-in-the-same. However, because of the way the “enyo.kind” factory operates, the result has some changes from what you originally put in.

For example, a property called “caption” might not be editable when it comes out of the factory. Instead, a method called “setCaption” will be available which allows you to update this property. I am not sure if I should add these functions to my completion files for Enyo, or if I should assume that this is just one of the things you need to know about the framework? Another example are exposed events. For an event called “onSelect”, you can subscribe to the event by setting “onSelect” to the string name of the function handler. To trigger this event, you call “doSelect” … not entirely unintuitive, but again, something which flies below the radar of normal code completion.

Once I kept my mind around these concepts, I was able to remember that in my class constructor I am defining my object, and when the “create()” method or one of the event handlers are called, I am dealing with instances of my object and its children. Continue reading Building My First Enyo Application, Thoughts on the Framework

Support for Jo and Enyo are now on haxelib

I have submitted support for both Jo and Enyo to haxelib.

This means that you will be able to download and update the files, easily from a command line:

haxelib install joapp
haxelib install enyo

I have updated both of my previous examples to reference the Jo and Enyo completion files from haxelib, rather than including them directly in each sample:

http://www.joshuagranick.com/code/haxe/js/JoSample.zip
http://www.joshuagranick.com/code/haxe/js/EnyoSample.zip

I believe that support for Jo is already 100%, and support for Enyo is improving. You can now use Enyo’s standard “depends.js” system for including multiple JS files, and completion for more of the core functions and components have been added.

If you have not tried these samples before, you will need Haxe installed (its easy to do), and ideally a code editor with good code completion and syntax highlighting for Haxe. The Jo sample should work out-of-the-box, while the Enyo sample needs the webOS SDK installed on your computer.

Enjoy!