Playing with ECMAScript.Harmony Modules using Traceur

As aI was a preparing a presentation on AMD and RequireJS I started looking ahead at the modules proposed for ECMAScript.Harmony.  In Addy Osmani's article Writing Modular JavaScript With AMD, CommonJS & ES Harmony he mentioned called Traceur which is a JavaScript compiler for ECMAScript Harmony syntax. This allows developers to give the future of JavaScript a test drive today.

One of the new features coming in Harmony that has me excited is modules. Modules will be a way to encapsulate code and explicitly define its dependencies and public API. ES Harmony gives us three new keywords for modules: module, import, and export. The module keyword is used to initialize a new module, the import keyword declares dependencies to import from a module into a context, and the export keyword explicitly declares public properties that will be available for other modules to import.

In addition Harmony modules:

• are statically scoped
• have the this keyword bound to the global object

Traceur

Before we are able to write modules today we'll need an environment that supports Harmony syntax. For this we'll use Google's Traceur compiler. In order to implement Traceur you'll need three things:

1. Traceur library file
2. Traceur bootstrap file
3. Harmony code

Adding the Traceur library and bootstrap to an application is as easy as adding the scripts to a web page:



Now that we have a compiler in place we just need some code for it to compile. To do this simply create a script block with a type of script/traceur.



When the page loads Traceur will compile your Harmony code to JavaScript that works in today's modern browsers.

For your convince I've created a JS Bin with Traceur ready to go on JS Bin. In addition there is an online compiler you can use here: http://traceur-compiler.googlecode.com/git/demo/repl.html

Now that we have an environment that supports Harmony to work in lets take a look at modules.

Playing With Modules

First I'd like to point modules aren't meant to be classes, there the class keyword for that. According to the ECMAScript Wiki modules are a

"Standardized mechanism for creating libraries"

Modules do not create a new execution context, the this keyword in a module is bound to the global object. Looking at the code that Traceur outputs for a simple module definition shows this:



Even though a module does not get a new execution context , it does get a new static scope. In the following code I am creating a new module called carFactory that exports a variable named ford into the global namespace. Calling ford.wheels results in '4' and trying to access carFactory's internal wheels variable results in an error:

JS Bin

Its also important to note that doing an import * will import the variables from the modules with the same names the have in the module.

A module can also have multiple exports as shown in the following code (note the syntax for importing multiple exports in a single statement):

JS Bin

A module also doesn't only have to export objects, it can export anything:

JS Bin

Variables that are imported can also renamed the from modules using the following syntax:

JS Bin

Lastly modules can be nexted. Nested modules have privileged access to their parent modules scope. Nested modules are also private to their parent modules scope unless they are explicitly exported. Here is an example of a public nested module that accesses its parents scope:

JS Bin

Conclusion

Modules in Harmony look like they are going to be very useful and there's a lot you can do with them.  They help reduce the need for the overuse of the function keyword and reduce the need for patterns like AMD and complex loaders RequireJS and CurlJS (of which I am currently a huge fan).   For more reading on modules I suggest checking out the modules section on the ECMAScript Harmony WIKI.

jsonmé: A Simple HTML and JavaScript Resume Generator

It's been forever since I updated my resumé so I decided to turn my GitHub page into my living resumé.  Being a web developer I wanted to so something unique yet simple.  After playing around with a few concepts I decided to put all of my resume's data into a JSON file and create a small web app that would read it via AJAX and display its contents.  I was so happy with the result that I decided to extract out the code and put it up on GitHub and the result is jsonmé.

I wanted jsonmé to have a small footprint yet work in all browsers back to IE6.  I decided to use the Sizzle.js selector engine since it has such a proven track record in jQuery.  I also needed a small library for doing normalized AJAX requests.  I settled on snack.js, its a small and well written utility library with AJAX capabilities that also gives me a normalized document ready function.  

The resulting application is a simple and easy to implement application.  The easiest way to create your jsonmé is to fork the GitHub repository and rename it to .github.com.  For instance my personal resume is at http://bittersweetryan.github.com.  

The code is completely Open Source and licensed under the MIT license so feel free to grab it and do whatever you want with it.  If you do something awesome with it I'd love to hear about it or even get a pull request for it.

The source can be found at: https://github.com/bittersweetryan/jsonme

Using the Partial Application Pattern in ColdFusion 10

The partial application pattern has been popular in JavaScript for some time now, Ben Alman has a great article on it: http://benalman.com/news/2012/09/partial-application-in-javascript/.   While refactoring some particularly redundant code I decided to try this pattern in ColdFusion using the power of closures and the function datatype.

The Partial Pattern

Lets start by taking one of Ben's examples and converting it to ColdFusion. Minuse a few syntactical changes we could almost copy and paste his code into ColdFusion. Lets start of by looking at a simple add function:

Now lets say we use that function to add one to a few numbers:

Instead of passing the parameter one to each function call wouldn't it be nice to have a function called addOne that just adds one to whatever argument is passed in? Simple. We can just create a new, more specialized, function that returns the invocation of our add function that always passes one as its first parameter:

Thats great. What if we want to add other numbers? We'd have to create a separate function for each number. What if those numbers aren't always known when we are writing our code, are we going to write a million different utility functions? Of course not. We can take the concept of creating a specialized function step further using the function datatype and closures to create a partial application that will help us construct new helper functions on the fly:

Looking at the code there are a few important concepts to note. First look at how this new function returns a function, this is a new datatype on ColdFusion 10 so this code will not work in any version less than 10. Second, and most importantly, look at how this new function is a closure. When we invoke the makeAdder function the inner function that is returned has access to makeAdder's argument even after makeAdder is invoked.

Since the makeAdder function returns a function we need to set a variable equal to the makeAdder's result to use it. Once we do that the new function can be invoked just like any other function:

Real World Example

In my application I had a function that took a long list of arguments which was called multiple times with only a few of the arguments changing between each call. This created some ugly code that was getting to be a pain to maintain. Instead of calling this function multiple times passing in all the arguments each time I decided to use the partial application pattern to clean up some of my code. This is what my new partial function looked like:
Instead of having one function that has 7 arguments that is called multiple times I have one function that takes 5 arguments that is called once. This function returns another function that gets called with only 3 arguments:

When ColdFusion first got closures I was unable to make the mental connection to how I was using closures in the JavaScript code I was writing. Slowly I am starting to write my ColdFusion more like I write JavaScript.

NCDevCon "The Art of JavaScript" Presentation Links

This is just a real quick post so I can share the link to my NCDevCon presentation slides and video.

The slides can be found at:

http://bittersweetryan.github.com/art-of-javascript/

The video can be found at (sorry, its in Silverlight format only):

http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=02c7fe6174654f96b78a6194d3dbbe9d1d

One more thing, I was mentioned in the KeyNote!  You can watch that here, I'm mentioned in the second section about: "ColdFusion Today":

http://textiles.online.ncsu.edu/online/SilverlightPlayer/Default.aspx?peid=9c64b0db237e4240847875f95795138d1d

Please if you enjoyed let me know, or if you have any questions or suggestions how I can make this presentation better please let me know!

ColdFusion Quickie : Using the Ternary Operator To Pass Conditional Argument Values

Its been awhile since I've done a ColdFusion quicke post and I found this trick to be quite useful  especially when dealing with ORM domain entities.

Lets say that we have a domain object called User that gets populated out when a user signs up for an account.  This object has some simple properties; fullName and email (lets not get into object purity here and say that those should be a member of a Contact object).  Lets also assume that when a user signs up all only an e-mail address is required, they can leave their name blank if they choose to.  The important thing to note here is that when a user object is loaded from the database the fullName property may hold a value of null.

When a user signs up for an account our application calls a function that will send a welcome message to a user that has a signature of: sendWelcomeMessage(required String name, required String email) (for arguments sake lets say that we don't have the ability to change.  If this function is invoked using implied getters from the User object we'll run into problems if getFullName() returns null. This is where the ternary operator can quite useful in sending a default value to a function:

sendWelcomeMessage( 
    (!isNull(person.getFullName()) ? user.getFullName() : "User" , 
    user.getEmail
);

The ternary operator takes a value or expression that can be evaluated to a Boolean and returns one of two things based on the result of that expression. The ternary operator's signature looks like this:

(expression) ? trueStatement : falseStatement

As you can see in our example, we check if person.getFullName()does not return null and pass that value if its true, otherwise pass in a default value of "User".