blob: 1f079f5568b0859cb9ef2459552872215c675d4a [file] [log] [blame]
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="CACHE-CONTROL" content="NO-CACHE"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Hello Node: How to transpile ActionScript 3 for Node.js</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="/css/styles.css"><link rel="shortcut icon" href="/img/favicon.ico"></head><body class="page post" id="main"><header class="docs-header"><div class="container"><div class="topbar"><div class="topbar-left"><a href="/"><span class="site-title">Apache Royale</span></a></div><div class="topbar-center"></div><div class="topbar-right"><button class="topMenu-dropbtn"><i class="fa fa-bars"></i>&nbsp;Menu</button><ul class="topMenu"><li><a href="/features">Features</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/download">Download</a></li><li><a href="/docs">Docs</a></li><li><a href="/blog">Blog</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> GitHub</a></li></ul></div></div><div class="post-header"><h1>Hello Node: How to transpile ActionScript 3 for Node.js</h1><div class="post-meta">by Josh Tynjala on October 03, 2018</div></div></div></header><div class="page-content"><div class="container"><article><blockquote><p><strong>Note:</strong> This tutorial was originally published in <a href="https://twitter.com/joshtynjala">Josh Tynjala</a>'s NextGen ActionScript website, but is now donated to Apache Royale. The tutorial has been adapted to correct the things that changed in Apache Royale since it was published.</p></blockquote><p>Over the years, many developers have dreamed of using ActionScript on both the client and the server. Today, the Apache Royale™ SDK finally makes it possible.</p><p><img src="/img/blog/apache-royale-node-js.png" alt="Apache Royale and Node.js logos"></p><p>Let's learn to use <strong>asnodec</strong> to write <em>ActionScript</em> code that runs in the popular server-side JavaScript environment, <a href="http://nodejs.org/">Node.js</a>.</p><p><img src="/img/blog/nodejs-terminal@2x.jpg" alt="Screenshot of Node.js console output running in the terminal"></p><p>With <strong>asnodec</strong>, we'll get full access to all Node.js APIs, and it's even possible to require npm modules in ActionScript. We'll start with a simple example.</p><h2>Requirements</h2><p>For this tutorial, you should install <a href="https://nodejs.org/">Node.js</a>. The newest Long Term Support (LTS) release is recommended.</p><p>Additionally, you will need <a href="https://royale.apache.org/download">Apache Royale 0.9.4 or newer</a>. Use the <a href="https://royale.apache.org/download">downloads page</a>, or download it from Node Package Manager with</p><pre><code class="language-sh">npm install -g @apache-royale/royale-js
</code></pre><h2>Create a new project</h2><ol><li>Create a new, empty folder for your project, and name it <em>HelloNode</em>.</li><li>Inside the new project, create a new folder named <em>src</em>. This is where our ActionScript classes will go.</li><li>Inside the <em>src</em> folder, create a file named <em>HelloNode.as</em>, and add the following code:</li></ol><pre><code class="language-as3">package
{
public class HelloNode
{
public function HelloNode()
{
console.log(&quot;Hello&quot;, process.release.name, process.version);
dns.lookup(&quot;localhost&quot;, null, dnsLookupCallback);
}
private function dnsLookupCallback(error:Object, address:String):void
{
console.log(&quot;The address of localhost is:&quot;, address);
}
}
}
</code></pre><p>In this class, we're doing two things. First, we're printing the version of Node to the console. Then, we're using Node's built-in <a href="https://nodejs.org/api/dns.html"><strong>dns</strong></a> module to look up an IP address.</p><blockquote><p>It is not necessary to call <code>require()</code> for built-in Node modules in ActionScript. The compiler will detect when a module is used, and it will generate the appropriate call to <code>require()</code> automatically when generating the final JavaScript. (<code>require()</code> is necessary for custom modules)</p></blockquote><h2>Compile the project on the command line</h2><p>Inside the Apache Royale SDK, the <em>js/bin</em> folder contains several different exeuctables used to transpile ActionScript to JavaScript.</p><p>What do each of those executables in <em>js/bin</em> do?</p><ul><li><strong>asjsc</strong> compiles pure ActionScript to JavaScript with access to web browser APIs like the HTML DOM.</li><li><strong>asnodec</strong> compiles pure ActionScript to JavaScript with access to Node.js APIs to create server-side or command line projects. <em>We'll use this one.</em></li><li><strong>mxmlc</strong> compiles applications that use the Apache Royale framework components.</li></ul><p>Use the <strong>asnodec</strong> executable to transpile the <code>HelloNode</code> ActionScript class that you created above for Node.js.</p><pre><code class="language-sh">asnodec src/HelloNode.as
</code></pre><p>This will produce a folder named <em>bin</em> containing <em>js-debug</em> and <em>js-release</em> folders. The <em>js-debug</em> folder contains JavaScript that is easy to read, and each class is loaded at runtime from a separate file. The <em>js-release</em> folder contains JavaScript that has been concatenated and minified for production.</p><p>The project should now contain the following files and folders:</p><p><img src="/img/blog/node-project-files@2x.jpg" alt="Screenshot of project files, including bin/js-debug, bin/js-release, and src/HelloNode.as"></p><p>Finally, let's try running our code with Node.js.</p><h2>Run the project</h2><p>Inside the js-debug folder, a file named index.js will be created as the entry point for your Node.js project. You can run this script using the <code>node</code> executable:</p><pre><code class="language-sh">node bin/js-debug/index.js
</code></pre><p>You should see the following output in your console:</p><pre><code>Hello node v6.11.0
The address of localhost is: 127.0.0.1
</code></pre><p>(The Node version number might be different, obviously!)</p><h2>What's Next?</h2><p>This is just a simple example, but it gives you a glimpse of how developers can bring ActionScript server-side using Apache Royale and Node.js. By using an established ecosystem like Node.js, ActionScript developers can take advantage of all of the libraries published to NPM and join a large, vibrant community.</p></article></div></div><footer class="footer"><div class="footer-row"><div class="footer-column"><ul class="footer-list"><li class="apacheroyale"><a href="/">Apache Royale</a></li><li><a href="/">Home</a></li><li><a href="/features">Features</a></li><li><a href="/download">Download</a></li><li><a href="/ides">IDEs and Editors</a></li><li><a href="/showcase">Showcase</a></li><li><a href="/blog">Blog</a></li><li><a href="/team">Team</a></li><li><a href="/thanks-to">Thanks To</a></li><li><a href="https://apache.org/logos/#royale"><i class="fa fa-external-link-square"></i> Logos</a></li><li><a href="https://www.apache.org/licenses/"><i class="fa fa-external-link-square"></i> Apache License v2.0</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="documentation"><a href="/docs">Documentation</a></li><li><a href="https://apache.github.io/royale-docs/get-started">Get Started</a></li><li><a href="/docs">Docs</a></li><li><a href="/asdoc">API Reference</a></li><li><a href="https://github.com/apache/royale-asjs/wiki"><i class="fa fa-github"></i>Wiki</a></li><li><a href="https://stackoverflow.com/questions/tagged/apache-royale"><i class="fa fa-stack-overflow"></i> StackOverFlow Tag</a></li></ul><ul class="footer-list"><li class="community"><a href="/get-involved">Community</a></li><li><a href="/get-involved">Get Involved</a></li><li><a href="/mailing-lists">Mailing Lists</a></li><li><a href="/faq">FAQ</a></li></ul><ul class="footer-list"><li class="development"><a href="/source-code">Development</a></li><li><a href="https://github.com/apache/royale-asjs/wiki/Apache-Royale-Source-Code-Repositories"><i class="fa fa-github"></i> Github</a></li><li><a href="https://github.com/apache/royale-asjs/issues"><i class="fa fa-github"></i> Issues</a></li><li><a href="/source-code"><i class="fa fa-code"></i> Source Code</a></li></ul></div><div class="footer-column"><ul class="footer-list"><li class="social_t">Social</li><li><a href="https://twitter.com/apacheroyale"><i class="fa fa-twitter"></i> Twitter</a></li><li><a href="https://facebook.com/ApacheRoyaleSDK/"><i class="fa fa-facebook"></i> Facebook</a></li><li><a href="https://www.linkedin.com/groups/12118437"><i class="fa fa-linkedin"></i> LinkedIn</a></li><li><a href="/feed/index.xml"><i class="fa fa-rss"></i> RSS</a></li></ul><ul class="footer-list"><li class="apache"><a href="https://www.apache.org/">Apache</a></li><li><a href="https://www.apache.org/"><i class="fa fa-external-link-square"></i> Apache</a></li><li><a href="https://www.apache.org/foundation/contributing.html"><i class="fa fa-external-link-square"></i> Donations</a></li><li><a href="https://www.apache.org/events/current-event"><i class="fa fa-external-link-square"></i> Events</a></li><li><a href="https://www.apache.org/foundation/sponsorship.html"><i class="fa fa-external-link-square"></i> Sponsorship</a></li><li><a href="https://www.apache.org/foundation/thanks.html"><i class="fa fa-external-link-square"></i> Thanks</a></li><li><a href="https://www.apache.org/security/"><i class="fa fa-external-link-square"></i>Security</a></li></ul></div><div class="aboutusdiv"><p class="aboutus">About Us</p><p class="aboutus_p"><img class="aboutus-logo" src="/img/apache-royale-logo-footer-circle-grey.svg"><a href="/" class="aboutus_a">Apache Royale™</a> is a highly productive open source application technology for building expressive frontend applications that outputs to different formats and deploy consistently on all major browsers, desktops and devices.</p><p><img class="aboutus-apache-logo" src="/img/Apache_PoweredBy.svg"> <a href="/" class="aboutus_a">Apache Royale™</a>, <a href="https://www.apache.org" class="aboutus_a">Apache™</a> and the <a href="https://www.apache.org/foundation/press/kit/" class="aboutus_a">Apache feather logo™</a> are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners. Read more about our privacy policy on our <a href="/privacy-policy">Privacy Policy page</a>.</p></div></div><div class="asf">Copyright &copy; 2017-2022 <a href="https://www.apache.org">The Apache Software Foundation</a>, Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a></div></footer></body></html>