flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Michael Schmalle <apa...@teotigraphix.com>
Subject Re: [FalconJx] New JavaScript runtime format prototype
Date Thu, 20 Dec 2012 18:23:55 GMT

Quoting Frank Wienberg <frank@jangaroo.net>:

> Hi folks,
> as mentioned in another thread, I have been working on a new JavaScript
> "runtime", which is what I call the way the generated JavaScript code looks
> and works like. While this thread's title has [FalconJx] in it, there is no
> reason the proposal could not be used for FalconJS, too, but I understood
> that for now, using Google Closure is a given.

Hi Frank,

Just so you know I read this, I wanted to write a couple things.

FalconJS uses the JBurg BURM which was donated by Adobe. I choose the  
route of an AST visitor framework that is handcoded for the sake of  
development ease and allowing myself to try something with the time I  
can a lot for this development. As far as I see, FalconJS is not being  
developed by anybody beyond the fact I read everywhere that it  
produces "js code". I guess if FlaconJS is going to be considered an  
alternative, there has to be developers that can work on it, I'm not  
one of them. I spent 1+ years learning antlr grammar and not about to  
figure out all the other prerequisites of the FalconJS code.

That being said, I have to be honest that I am in no position to  
either agree or argue with what you have produced. Besides the years  
of hands on experience you have with JavaScript and ActionScript  
issues. I would say you have a thing or to to add here. :)

It seems that right now, there are a handful of developers/community  
members involved in this topic of AS -> JS. I don't know what will  
change that but, it seems like we will need to decide on something  
that works sooner than later.

The truth is, for me to understand what you have done and have an  
opinion I would probably need 2 or more weeks to understand what you  
have done. :)

I'm probably in the position of, "Show me what you want to generate  
based on the semantics involved and I will generate it" mode.

For me, my goal as it stands is to use what I have written to generate  
fully compilable ActionScript source code from Falcon's AST model.  
Once I have unit tested this, I can focus on the JavaScript side  
without thinking about what I have to implement to cover all the AS  

I wonder what Erik has to say... I would be interested since he has  
put time into investigation as well.

So in closing, I really have not developed javascript applications.  
I'm interested in this project because having an HTML/JS target for  
Flex would allow me to do some of my audio experiments with an HTML  
Flex framework in the future for mobile applications.

This allows me the excuse for myself to put as much time into it as I am. :)


> I had the following design goals:
>    - Support ActionScript 3's "differentiator" features: private members,
>    interfaces + is/as, lazy class initialization, method binding,
>    getter/setter functions
>    - work in IE < 9 (except for getter/setter functions)
>    - Produce debuggable JavaScript code that can also be optimized for
>    deployment. The debuggable code should be very similar to the original
>    ActionScript source code for every line containing executable code
>    - Dependency management: load/bundle only the needed classes. Every
>    compilation unit to debug should load as a separate request
>    - Minimal to no runtime overhead, even in debug mode
>    - Support trace()
> I took the following design decisions:
>    - For private members, a mix of JavaScript lexical scope and field
>    renaming like in Jangaroo is used
>    - To implement an efficient "is" operator, all interfaces a class
>    implements are determined once for the class. I use a prototype chain to
>    inherit the interfaces implemented by the super class
>    - Lazy class initialization uses a very efficient technique refined by
>    Olaf Kummer: Wherever a constructor or non-private static member  
> is called,
>    the "self-destructing" class initialization function is checked for
>    existence and, if still existing, called ("guarded" call)
>    - Method binding is again borrowed from the Jangaroo Runtime: the bound
>    function is "cached" at the object under a different but unique name so
>    that it keeps its identity. This is important e.g. to be able to remove
>    event listeners
>    - Getter/setter functions map to Object.defineProperty("...", { get:
>    ..., set: ...}), thus no support in IE < 9
>    - To make everything else work in IE < 9, I use polyfills for ECMAScript
>    5 Object, Array and Function API
>    - For keeping generated code in separate JS files, expressing
>    dependencies between these files, loading them separately at runtime and
>    linking them statically into a single JavaScript file, I chose to use
>    Asynchronous Module Definitions (AMD) and RequireJS (version 2.1.2) as the
>    concrete implementation of AMD. AMD is preferred over CommonJS because it
>    better fits web applications, as e.g. argued here:
> http://blog.millermedeiros.com/amd-is-better-for-the-web-than-commonjs-modules/To
> link and optimize the application, RequireJS provides an optimizer
> tool
>    simply called "r.js".
>    - To conditionally load polyfills (for IE < 9), I use the "shim"
>    RequireJS plugin
>    - To achieve minimal runtime overhead, I only use helper functions to
>    define the class structure once (defineClass and defineInterface). As soon
>    as the complete application structure is set up, all code executed is
>    inlined
>    - Since all modern browsers seem to support a "console" object with a
>    "log" method, trace() is simply implemented to check for the existence of
>    console.log() by trial-and-error (try... catch). It then String-converts
>    and concatenates all its arguments like its ActionScript sibling
> *About the Example*
> To specify how I think FalconJx-generated JavaScript output should look
> like, I created an ActionScript example, consisting of two classes and
> three interfaces. Every language feature supported by the new runtime
> format gives an appearance in the code (well, I didn't add a private static
> method, because it works like a private method, only simpler).
> The whole thing is a public GitHub project at
> https://github.com/fwienber/as-js-runtime-prototype.
> To download all files in one go as a zip or tar.gz, please use the tag
> page: https://github.com/fwienber/as-js-runtime-prototype/tags.
> A live demo is available on the corresponding GitHub pages at
> http://fwienber.github.com/as-js-runtime-prototype/index.html
> From there, you can reach all ActionScript example sources and the proposed
> JavaScript equivalent (so far, hand-coded :-)).
> To see the example in action, use the three bottom links which start the
> same application in three flavors:
>    - debug: Each JS file corresponding to an AS class or interface and the
>    main bootstrap file is loaded with a single request. This gives you a nice
>    1:1 mapping of source to output in the JavaScript debugger. Additionally,
>    there are some "infrastructure" files: require.js itself, the RequireJS
>    plugin "shim" (shim.js, shims.js), my AS3 runtime helpers defineClass.js
>    and defineInterface.js, and a couple of built-in AS3 functions (bind, as,
>    is, trace). If loading in IE < 9, the shim plugin loads several ES5
>    polyfills.
>    - linked: The whole application is merged into one JS file using the
>    RequireJS optimizer "r.js" without optimizations. Thus you only have two
>    requests: require.js and hello-worls-all.js are loaded. In IE < 9, the
>    polyfills are still loaded one-by-one (I didn't bother to optimize this
>    case, but of course, it can be done).
>    - minified: Same as "linked", only that require.js and
>    hellow-world-all.js are minified by Uglify2. This can easily be achieved
>    using "r.js" with the parameter optimize=uglify2.
> For the demo, I redirected trace() from the JavaScript console (backed-up
> in trace-console.js) to the DOM, so that you can see the log messages
> directly.
> Just look into the code and observe how it works in Firebug or any other
> JavaScript debugger of your choice, and let me know if anything is unclear,
> missing or if you need more reasoning for the design decisions taken.
> I know there are still several issues to be fleshed out (e.g. interaction
> with "native" JavaScript or package-scope variables, just to name two), but
> I think the current state is a solid core of how a modern, efficient,
> self-contained, extensive and still concise JavaScript runtime format for
> Apache Flex could look like.
> Please tell me what you think!
> Have fun,
> -Frank-

Michael Schmalle - Teoti Graphix, LLC

View raw message