Start writing ECMAScript 6 ready code with Codeanywhere
While ECMAScript 6 (ES6) is still in the process of being finalized, there is a lot of talk about it in the JavaScript community, and a lot of tutorials on how to write an ES6-ready code are already available.
ES6 improves JavaScript and makes it a better language for creating complex applications, libraries, code generators, etc. With ES6, you can use classes, collections, iterators, modules and numerous other equally important improvements.
However, the purpose of this blog post is not to try to teach you how to use ES6 in your next project, but rather to show you how to prepare your Codeanywhere DevBox to run your next ES6-ready project. There are great tutorials on ES6 features available on the Net, so you can dive in right away after reading this post.
How to Run ES6 Code on Today's Browsers
Today's browsers support ES6 only partially. So how can you run ES6 applications? The answer is by using transpilers such as Traceur or Babel.
A transpiler will turn your ES6 (and above) code into an ES5-friendly code, so you can start using it right now without having to wait for browser support. You can go on and install them manually, but we will use jspm instead.
jspm.io – Frictionless Browser Package Management
NodeJS developers are accustomed to writing modular applications. Now you can do the same thing on the client side. jspm is a package manager for the SystemJS universal module loader, built on top of the dynamic ES6 module loader.
Using jspm is, in my opinion, the simplest way for you to start writing your next ES6 application.
Creating Your ES6 Ready DevBox
Start by creating your DevBox and selecting HTML Stack. After your DevBox instance is created, focus on the SSH Terminal Console and follow the procedure.
sudo npm install jspm -g
After successful jspm installation, type
jspm init
and just complete the jspm init wizard
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [.]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Which ES6 transpiler would you like to use, Traceur or Babel? [traceur]:
If you refresh your DevBox in the File Explorer, you will see that jspm has created necessary files and folders to run.
Now there is just one more thing to do before you are ready to start writing your first ES6 application!
Open Preferences->Settings and from the Linting Options section turn off "esnext" option. That will prevent linter to treat ES6 syntax as invalid.
Create an index.html file (in project root) with the following content:
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('lib/main');
</script>
Then create the lib folder and the main.js file inside that folder. Try writing some ES6 code in that file and have a look at the preview in your browser.
To install packages, for example jquery, just go to your SSH Terminal and type:
jspm install jquery
jspm will download and install the package. To use jquery inside your application, type this at the beginning of the main.js file:
import 'jquery';
It’s that simple! You don’t need to write script tags in your HTML file.
To learn more about jspm, visit the following link
https://github.com/jspm/jspm-cli/wiki/Getting-Started
There you have it. So go on and play with ES6 today!