Introducing AS3JS

It’s been quite awhile since my last post, so I figured it was time for something big. Today I’d like to introduce to you AS3JS!

 

This is a little project I’ve been developing on the side in an attempt to make HTML5 development a little easier. It’s a command-line tool built with Node.js (and leveraging my previous library- ImportJS) that can convert AS3 code files into valid JavaScript. While it’s not perfect (hence why I’m calling it “dumb” for the time being), it’s definitely something I’ve found extremely powerful in some some large JavaScript apps I’m working on right now. This article will go over some of it’s features, as well as why I created it. (You’ll have to excuse me if I rant a bit, I wanted to spare the Github documentation all the TL;DR )

Example AS3JS Project

In case you don’t feel like reading all of this, let me start off by linking you to a cool little project I built in AS3 that runs in pure JavaScript. I even exported a Flash version as well just for kicks.

https://github.com/Cleod9/ElevatorJS

I certainly hope the demo convinces you to read this rest of this article 😉

Why ActionScript?

To be frank, I’ve grown quite tired of two things:

Why can’t we make JavaScript easier without adding so much baggage to the language? I say let’s take a step back from ES6 for a second and examine another overlooked language with a ton of potential on the web. For those of you already familiar with ActionScript, I’m sure you’re already well aware of some of its awesome features:

  • Typed variables
  • Classes
  • Package import system
  • Encapsulation
  • Much less “this” everywhere

Why not use these same exact features on the web? I don’t mean to put down ES6 and some of it’s strong points, but ES6 is still evolving as we speak while ActionScript has been a stable development language for years. It’s only recently that we started seeing attempts to convert AS3 to JS, and I think at the very least we could learn from such a language. TypeScript is a prime example of positive AS3 influence on the JavaScript language, although it itself is starting to conform to ES6 standards.

But ActionScript is Flash right? Flash is evil/stupid/dead/obsolete!

Now calm down for a second and listen to yourself. ActionScript is not Flash, it’s a coding language. The language happens to be a superset of ECMAScript, and as such valid JavaScript syntax is valid in ActionScript. AS3JS is not about Flash, it’s about ActionScript. If you don’t want to assign types to all your variables you don’t have to! But the fact of the matter is that you can, and in doing so you can get some pretty powerful features from your IDE like code hints, auto-completion, and automated refactoring. Not to mention how easy ActionScript’s package system is to use.

Do you have a problem with JS/ES6 or something?

The short answer is yes. But for me it’s all about redundant code. The number one thing that bothers me about JavaScript is how often you have to write out the word “this”, when inside class-like structures there is technically enough information to infer where “this” needs to be used. In ActionScript the “this” is implicit (i.e. optional) in class files, and there are very few situations where you actually need it. As such, AS3JS will automatically take care of prepending “this” where it’s needed in its JS output.

Now don’t get me wrong, JavaScript is my favorite language next to ActionScript. My favorite part about JS is its simplicity, and the fact that it does very little for you out of the box. It pains me to see new constructs are being added to the next generation of JS (ES6) that, while admittedly save keystrokes, slowly eat away at the simplicity of such a dynamic and expressive language. I would rather encourage developers to get comfortable with vanilla JavaScript and not rely so much on fancy new symbols and keywords that require keeping up with a constantly evolving documentation.

But what about TypeScript / CoffeeScript / ES6 / FlexJS / Jangaroo / Dart etc.?

Well since you asked, I’ll gladly comment on each of them:

  • TypeScript – To be honest, if I didn’t have the ability to write AS3JS (or if I didn’t know what AS3 was) I probably would get into TypeScript. But I’ve been developing in ActionScript for a decade and TypeScript looks eerily similar, so I thought “wouldn’t it be cool to use the language I have a preference for on the web?”. Also, TypeScript seems to be adopting many concepts from the ES6 spec, and it’s gotten the point where the two look virtually identical (minus the type safety). If that’s the case, I’d choose ES6 over TypeScript if presented with no other options.
  • ES6 – ECMAScript 6 is the latest version in the JavaScript spec. While it attempts to solve many “problems” in the JavaScript language, to me a lot of it just doesn’t look like JavaScript to me anymore and it feels like a lot of concepts from other languages being crammed into one. In other words, it’s as if everyone wants to satisfy audiences that come from completely different programming backgrounds. Things such as arrow functions, generators, destructuring (ugh, yes it’s less code but boy is it confusing), and the like, are great features for experienced developers but can become a serious obstacle for newbies. In addition, a lot of these constructs that were added can already be built without ES6, so why not standardize some JS libraries instead of building these things into the language just to save a few characters of text?
  • CoffeeScript – Let me just say that I think the syntax of CoffeeScript is the main turn off for many people, and as with TypeScript it has adopted many concepts from ES6. I personally find the code takes longer to comprehend at a glance without the curly braces, and the symbols it uses to save a few bytes of text just isn’t worth it to me. You could argue it just takes some getting used to, but you can say that just about any language. In a higher level coding language like JS I would prefer to code in a format that resembles its output form a little more.
  • Dart – Since Dart is newer than most of the other languages I listed above, the only argument that comes to mind for me is that this is just yet another language to learn. I think developers could benefit from mastering existing languages before adopting new languages that they are based on.
  • FlexJS – While it’s technically an AS3->JS converter there are several issues with FlexJS, the biggest of which is that it’s designed around the Flex SDK and is still in alpha. Flex also implies the Flash Player, and I think this is a turn off to many JavaScript developers. Why not let the AS3 language work independently from the Flash/Flex platform?
  • Jangaroo – This one is another AS3->JS compiler. Not only have most people not even heard of this, but I personally think the compilation process is overly complex since it relies on Java. The project also does not seem to be maintained all that well. I think Node.js is a much more suitable platform for converting any language to JavaScript since JS devs can jump right into it, and the JS community can even chip in themselves.

Final Thoughts

So in conclusion, I think it’s important we consider the potential of ActionScript as a native web development language. Even if my AS3JS tool doesn’t become widely used, I would find comfort if members of the JavaScript community (and Adobe) would take ActionScript seriously as a language for the web. As we slowly move away from browser plugins, let’s make sure the alternative moves us forward instead of backward.

ImportJS and OOPS.js ported for Node.js!

Update: ImportJS has been upgraded to 3.0 and has a dedicated site! See here: http://importjs.org/

I’ve assembled Node.js version of the previous two libraries I’ve submitted to GitHub! They work really well together, so I suggest you check it out if you’re familiar with Node. I won’t be going into any details of Node.js for this post, however I can at least say that the functionality for both libraries is exactly the same as it would be on the front-end. So feel free try it out, and let me know if you decide to use it in your own project!

ImportJS for Node on GitHub

OOPS.js for Node on GitHub

Both libraries are available via npm install importjs and oopsjs respectively.

Also just a heads up, I will soon be releasing a fun little interactive toy I made in JavaScript to demonstrate the power of ImportJS+OOPS.js combined. More is on its way!

Introducing ImportJS

Update: ImportJS has been upgraded to 3.0 and has a dedicated site! See here: http://importjs.org/

So I’ve gone ahead and cleaned up my GitHub account to make room for this new JavaScript library I’ve made called ImportJS!

ImportJS is a library with 3 primary features:

  • Batch preloading external JavaScript files (with ready and error callbacks)
  • Organizing definitions into anonymously scoped functions represented as “classpaths
  • Resolving dependencies between definitions (including circular references!)

At first glance this might soundsimilar to RequireJS or JSClass, but I’ve tried to simplify it as much as possible by having it resemble a Flash AS3-like syntax. My goal with this library was to simulate how ActionScript 3 packages work, but at the same time add some preloading functionality so that you could potentially run an entire application through a single line of code (e.g. “new Main()”). I personally find libraries like RequireJS or JSClass to have more features than I need, and are a bit confusing to understand. So I hope you’ll try out my library and use it as a packaging system of your own!

(Another cool feature is that if you don’t care for the packaging features you can use ImportJS solely as preloading library with guaranteed load order! 😉 )

Here’s some quick examples:

//Assume we have our files under js/com/project/ directory
ImportJS.preload({
    baseUrl: 'js',
    files: {
        com: {
            project: {
                CircRef: 'CircRef.js',
                Class1: 'Class1.js',
                Dependency: 'Dependency.js'
            }
        }
    },
    ready: function(arr) {
        console.log('Loaded files: ' + arr.join(', '));
        //Create a new instance of Class1 and print some info
        var Class1 = ImportJS.unpack('com.project.Class1');
        var myClass = new Class1();

        myClass.init();
        myClass.circRef.init();

        console.log(myClass.toString()); //Prints "[Class1] (has CircRef instance: [Object])"
        console.log(myClass.circRef.toString()); //Prints "[Class1] (has Class1 instance: [Object])"
        console.log(myClass.dependency.toString()); //Prints "[Dependency]"
    },
    error: function(arr) {
        console.log('Error loading files: ' + arr.join(', '));
    }
});

Or alternatively, if you want to write all your code in the same file:

ImportJS.pack(‘com.project.Class1’, function() {
//Initial imports
var Dependency = ImportJS.unpack(‘com.project.Dependency’);
var CircRef; //We make the reference now, import later

//Class definition (Can be named whatever)
var Definition = function() {
this.dependency = null;
this.circRef = null;
this.init = function() {
this.dependency = new Dependency();
this.circRef = new CircRef();
}
this.toString = function() {
return “[Class1] (has CircRef instance: ” + (this.circRef != null) + “)”;
}
};
//Return as an array
return [Definition, function() {
//Now it’s safe to import
CircRef = ImportJS.unpack(‘com.project.CircRef’);
}];
}, false); //<-False to specify this is an "uncompiled" class ImportJS.pack('com.project.CircRef', function() { //Prep import var Class1; //Class definition var Definition = function() { this.class1 = null; this.init = function() { this.class1 = new Class1(); } this.toString = function() { return "[CircRef] (has Class1 instance: " + (this.class1 != null) + ")"; } }; return [Definition, function() { //Safe to import Class1 = ImportJS.unpack('com.project.Class1'); }]; }, false); ImportJS.pack('com.project.Dependency', function() { //Class definition (simpler so we'll return right away) return function() { this.toString = function() { return "[Dependency]"; } }; }); //<- no false passed since this class does not need to be compiled //Compile all ImportJS.compile(); //Create a new instance of Class1 and print some info var Class1 = ImportJS.unpack('com.project.Class1'); var myClass = new Class1(); myClass.init(); myClass.circRef.init(); console.log(myClass.toString()); //Prints "[Class1] (has CircRef instance: [Object])" console.log(myClass.circRef.toString()); //Prints "[Class1] (has Class1 instance: [Object])" console.log(myClass.dependency.toString()); //Prints "[Dependency]"[/code] With ImportJS loaded in your browser you can paste the above text into your browser console to see the output. For the full documentation with more examples, check out the repository on GitHub: https://github.com/Cleod9/importjs

(P.S. This also works great with my last library I made, OOPS.js!)

Paste Pasta Public Release!

paste_pasta_logo

 

I’m now opening Paste Pasta registration to the public!!

In case you missed my original post, Paste Pasta is a copy-pasting web tool I created earlier this year to practice my front and back-end coding skills. It has been in beta up until now and I’ve decided to finally open it up to the public. So if you’re like me and are a big fan of copying and pasting text all the time just to save a few seconds, then this is the tool for you! Visit the registration link below to sign up!

http://www.pastepasta.com/register

Enjoy!

OOPS.js – A Library to Assist w/ JavaScript OOP Principles

Long time no update!

Today I’m releasing a small library I wrote called OOPS.js, which stands for “Object Oriented Programming Structure” for JavaScript. The purpose of this code is to allow a simple, hassle-free way to code in a more traditional way. This solution doesn’t offer everything a typical OOP language would offer (such as public/private member declarations for example) though it’s designed to be flexible and easy to use. I’ve seen plenty of similar code written for stuff like this throughout the internet (such as Prototype.js), but I’ve decided to release this one I’ve written myself since it’s lathered in plenty of comments explaining how it all works. Not to mention I can decide on my own how I’d like to expand upon it.

Anyway, the biggest reason for this post is that any future JavaScript I write will very likely be built from OOPS.js. If I ever decide to do HTML5 game tutorials on top of the AS3 tutorials I have planned, you’ll be able to see how a lot of the principles I use here will overlap. Don’t be surprised when I post some JS ports of AS3 code I’ve written onto GitHub next! You can download the source code below:

Full Package: https://github.com/Cleod9/oopsjs

OOPS.JS Example Script: https://github.com/Cleod9/oopsjs/blob/master/oops-examples.js

Download the full package to see OOPS.js in action. And since it’s on GitHub you can feel free to fork it and make contributions if you wish! 🙂