Exporting LiveCode to HTML5: This Could Change Everything

One of the most recent and exciting developments in the LiveCode world is the ability to export LiveCode projects to HTML5. It's only available in experimental form currently, known as a "developer's preview" or dp version of LiveCode 8. The current version is dp 12 - dp 1 was released in August, 2015. When it was first released, I spent about 30 minutes playing around with it and immediately experienced some problems. I just tried again and, to my amazement, I was easily able to export one of my early prototype games - Crack the Code! - to HTML5. (Here is my original blog post about it.) Here, try it for yourself:

Click here to play "Crack the Code!"

Alert! It could take a little while to load.

The original game had sound and the option to change the word list. Unfortunately, neither of these options is working. I'm hopeful that I just don't know some important information about how to package sound for HTML5, so I'll probably post a question about this to the LiveCode forum dedicated to HTML5. (Sound provided very important feedback to this particular game, with a pleasant chime given when you correctly matched the secret word, and an appropriate "crash" when you did not.) I didn't see any mention of sound issues when I browsed the forum, but I did find some useful information about why cut/paste will not work. Apparently, there are strict and narrow restrictions on what elements of a web page can access the clipboard due to security issues. I read one person's suggestion for a workaround, so I might try that in an update. The amount of time it takes to download the HTML page is causing me some concern also. As I understand it, the entire LiveCode engine has been converted to javascript, so it's a big download. On my slow Internet connection at home, I had to wait about a full minute for the page to fully load.

Still, it's absolutely amazing that this works without the need for any sort of plug-in. It's all done using HTML5 and javascript. I made no changes to the program other than cosmetic. HTML5 is simply an export option. You select it, then choose to save as a standalone application. A folder is created with all of the needed resources, including a HTML page that runs the show. Upload that folder to a web server and you are ready to go. The LiveCode program is converted essentially to a javascript module.

Far From Perfect

The good folks at LiveCode have been careful to alert us that this feature is far from perfect and that there is still much work they need to do before we go from a developer preview version to a stable version. I have had some issues getting this project to work. Everything works fine when I run the HTML5 project locally, but it only works on the Internet when I run it from one of my accounts on a University of Georgia server. I have access to other servers, most notably the one housing my NowhereRoad.com site, but when I try running it from there, I get the error "Exception thrown, see JavaScript console." I presume that means my NowhereRoad server is not set up properly to run javascript, even though I thought it was. I obviously need to check into this.

My Q Sort prototype is an excellent candidate for HTML5 export. I tried exporting it, but a key feature does not work - the saving of data into a local text file. It would be fantastic if I could get this working as an online tool. I suspect that many programming techniques I've learned and now use for many of my projects will not work in HTML5 without substantial reprogramming. But, learning new techniques is all in the spirit of this blog. And, perhaps I'll uncover and report some important bugs or needed features that will help in the overall effort by the LiveCode team.

How Does This Change Anything?

The inability to deploy LiveCode projects over the Internet has been LiveCode's main distribution gap. But, it has been a huge gap - a bona fide gaping hole. I began using LiveCode when I had an interest in creating native mobile apps about six years ago. It's easy to develop iOS apps for iPhone and iPad, and even easier to develop for Android devices. It also does a great job if you want to distribute to desktop or laptop computers running MacOS, Windows, or Linux. But the inability to distribute over the Internet has been a serious limitation. Frankly, most of my students have had little interest in learning LiveCode precisely because they could not distribute their projects over the Internet. Similarly, their interest in Articulate Storyline has primarily been due to the fact that exporting projects to HTML5 is Storyline's strong suit.

I have written here before about my fundamental criticism of authoring systems such as Articulate Storyline and Adobe Captivate. A short recap is simply that although these software applications do some things extremely well, their underlying structure seriously narrows or constrains the range of software designs possible. Perhaps I should say that this comment is really not meant to be a criticism, but an observation. What they do, they do very, very well. But, if you have a creative or innovative idea for software design that doesn't fit the tight boundaries of these authoring packages, you are out of luck. Again, one of the things these systems do very well, especially Storyline, is deliver HTML5 compatible tutorials. Consequently, almost all of the projects that my students design are of this ilk. The important point to be made here is that their design ideas are all shepherded down a very predictable, narrow path.

Fortunately, it's easy to embed the HTML code needed to run a HTML5 LiveCode project into an existing web page, including one created by Storyline or Captivate. Here is an example of the minimum code needed for an HTML page to make it all work:

 <html>  
   <body>  
   <canvas style="border: 0px none;" id="canvas" oncontextmenu="event.preventDefault()"></canvas>  
    <script type="text/javascript">  
     var Module = { canvas: document.getElementById('canvas') };  
    </script>  
   <script async type="text/javascript" src="standalone-community.js"></script>  
  </body>  
 </html>  

If you play "Crack the Code!" you will see that it is enclosed in a default web page that was created by LiveCode during the export process. But, I hope you get the idea of how easy it would be to include a LiveCode app within any existing HTML document. So, one can envision a software design process that includes a suite of tools, such as Storyline and LiveCode.

Final Thoughts

I want my students - and all instructional designers - to be able to live up to my motto for why to learn computer programming: "If you can imagine it, you can build it." If LiveCode can perfect the export to HTML5 option, I think it will become a serious competitor to Storyline and Captivate. More importantly, it could lead to much higher quality - and diverse - software for learning in online environments.

The title of this post is obviously meant to convey tentativeness. The direction LiveCode is going could be a game changer in the world of creative online software design, particularly in educational or instructional contexts. However, we are not there yet, so it's still too early to pour the champagne. But I'm optimistically keeping a bottle chilled.