I thought pictures would speak louder than words here.

Check out my haXe code. Look familiar? It should if you use Robotlegs to make your code all pretty.

Now get a gander at mah DOM:

Yeah, my HTML is a little outdated, that’s why “HTML5″ is in quote marks above. But there’s nothing to stop you from using whatever newfangled tags you like. Declarative views FTW!

And lastly, what the generated JS looks like in Chrome Developer Tools:

The generated JS is not all as perfectly readable as the above, but it’s quite good enough. Peep the breakpoint you can set to debug your code.

OK, now I know you wanna check out the demo: 101 Icebreakers

I know, it’s corny and cheesy but hey it’s hard to come up with ideas for a weekend project :P You might have to hit “GET RANDOM ICEBREAKER” a few times before getting another one as there are only 3 in each icebreaker type dataset.

View the source here: At Github (Apology: Wrote and learned this all in a weekend so don’t expect all RL best practices to be followed or for the code to look that great. It’s just a demo meant to show the capabilities here)

PROS

Wow, too many to count really. A few to highlight: I am able to write clientside JS code and not have it be a nightmare. I can confidently write my code using RL’s clean architecture and know that it will work as designed. And, best yet, I can use any JS library out there, provided an extern has been written for it. jQuery comes with haXe JS, and there are externs already written for ExtJS, even node. I can use as much or as little JS as I want. There’s some really exciting stuff out there and I’m drooling, for example, at the thought of an Angular extern bringing in databinding capabilities (not sure if its possible) Really, it’s fun peoples.

CONS

Currently with cube automatic creation of mediators is not supported. So in addition to your mapping code, you have to do this for example:

agent.mediatorMap.createMediator( menuView );

whenever you create a view. This can be tricky as you will need a reference to “agent” in order to do this.

“Declarative Views”, as I call them above, is a bit misleading. At least the way I chose to take care of views for this example, it’s more like when you create Symbols in the flash IDE and write classes to control their behavior- inside the class, you have to tell it what DOM elements belong to it and what to use. There’s no protection here — you could access a div that doesn’t belong to the View you are writing — so you do have to be your own nanny a bit.

I preferred to write the views the way I did, inside the HTML, because I can clearly see what I’m creating; it feels like MXML to me. You could instead, as in the Cube Demo above, create your views directly from within view classes in haXe JS.

But I can definitely envision writing some sort of wrapper that cycles through your HTML and creates classes based on the elements it finds inside… perhaps it would be too slow… but someone will just have to write it and see!

main.js is pretty large. 215KB… though I haven’t run it through a minifier or even googled anything about how to make it smaller.

This isn’t really a con, but just as in writing real JS, use the jQuery library provided for you in haXe, otherwise you will be asking for a world of IE pain.

CONCLUSION

OK, I haven’t felt this excited in a while. I don’t claim to be an expert on language or compiler design, framework implementations, browser quirks, etc etc but I really can’t see a reason why I would NOT write my client-side code this way now and in the future. If you can, let me know in the comments… Otherwise, haXe JS – it’s you and me baby.

Lastly, this was a really rushed piece. I have a lot of work to do for my day job right now but was too excited not to get this out there. If you find any inconsistencies or inaccuracies don’t hesitate to smack me upside the head in the comments and I’ll update this post tout de suite.

—————————————-
Alright here’s the dilly, for those who want to try it out:

I used Flash Develop as my haXe IDE, it’s definitely the best way to go. Really worth booting up Virtualbox or Parallels for those of you with Macs.

I got great code-completion. You can jump to declaration (place your cursor and press F4) and there are a lot of other awesome shortcuts FD has that I don’t know about. But basically, haXe has static typing so your IDE experience is pretty close to perfect. The only thing is AFAIK no one has built refactoring support for FD yet.

You will need to install haXe and install xirsys_cube to get the demo source to build. After haXe is installed, you just go:

haxelib install xirsys_cube

from a command prompt.

There may be other libraries you need to install and I’ve forgotten, if so haXe will prompt you when you try to run the code.

After you get the example project into FD, right-click on src/build.hxml and select Execute. This will build your main.js file, which is in bin/ . That’s where index.html is also in, so you can view your work.

I used Cube, one of two Robotlegs ports that exist for haXe. Here is the demo that I used to get me going. The other port is RobotHaXe, but Cube had better examples for my use case so I went with that.



3 Responses to “Finally, “HTML5″ feels like Flex: haXe JS, Robotlegs, jQuery and “DOM is the new MXML””

  1. Hi,

    I hoped you enjoy the cube framework, It is designed to work with all targets that why there is no automatic creation of mediators as only the flash target has a stage add and remove events. JavaScript has no notion of this. If you got suggestion or improvements then please tweet us at @xirsys or on the cube github page.

    James

  2. Hi,

    Thanks for checking out Cube. There are a couple of bug fixes being worked on by Marcus Bergstrom (from the haXe list) that you might want to check out. I think, for the most part, they’re usability changes rather than actual bugs, but we are actively working on the framework.

    If you have any idea’s to make Cube better, including tools (like building Mediators from view elements in the HTML), feel free to drop me an email.

    Long term, there are idea’s bouncing around for creating rails like scaffold generators using Cube for JS applications development. If you’d like to help contribute to the project, we’d be more than grateful for the help.

    Regards,
    Lee

  3. admin says:

    James and Lee, thanks to you guys, I really did enjoy working w the Cube Framework. I found it really impressive that I can code virtually identically to the way I am used to coding day to day with Flex and RL. I am definitely interested in helping, I’ll shoot you guys an email soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes