Using Angular 2/React/Vue.js on Monaca’s New Cloud IDE
Among the countless Software Frameworks available on the web, many people view Angular, React and Vue as THE BIG 3 for JavaScript. These frameworks not only provide a developer with useful, reusable functionalities built for all sorts of purposes, but they also implement a whole different way of coding with new notations. In some ways, using a software framework is like integrating another programming language into vanilla JavaScript.
There are many benefits to using a framework: they can speed up development time, improve organization of the codebase, improve reliability (as the frameworks and its API are built and tested by experts)… just to name a few. Here at the Monaca team, we encourage developers of all level to try these brilliant frameworks. Nevertheless, with great power comes great r̶e̶s̶p̶o̶n̶s̶i̶b̶i̶l̶i̶t̶y̶ setup.
The Need to Transpile
Before you can even run programs written in this kind of frameworks, your source code files must first be transpiled (converted) into pure HTML/CSS/Javascript; it is the only way that the web browser can understand them.
In the past, to use Angular 2/React/Vue.js in a Monaca project, additional tools such as Monaca Localkit & Monaca CLI must be used. But finally, the time has come. Thanks to the new embedded terminal feature, it is now possible to develop Angular 2/React/Vue.js projects entirely on the new Cloud IDE!
About Monaca’s Transpile Functionality
The mechanic behind Cloud IDE’s transpile functionality relies on being able to execute Monaca CLI commands using the new terminal feature; specifically the monaca preview command.
You can read more about
monaca previewand other Monaca CLI commands here.
As a part of its functionality, monaca preview set watches on the files’ status. Whenever a source code file that requires transpiling is edited & saved, Monaca will also run the transpile function on it. This in effect allows the Previewer to update itself, reflecting any changes automatically. This is possible thanks to Monaca running webpack internally.
Transpiling in Action on the Cloud IDE
When you create a new project in the Dashboard, the Template Selection screen will show up. There, templates under the Angular, React & Vue sections can now be selected (we’ll be using “Onsen UI V2 Vue Navigation” as an example for this article).
Upon opening a project, you should be able to see the Debugger & Preview Log tabs in the bottom of the screen ( some people might even have the Terminal tab opened! In that case, you deserve a gold star for being a true programmer! /s ).
Within the Preview Log tab, Monaca will proceed to “print” terminal-like lines.
You might see
Running npm install:, followed by a bunch of complicated looking text — this is normal.
Among these, Running monaca preview -p 8080 will be one of the last ones. Voilà, this is the Monaca CLI command we mentioned earlier in action.
With this command, a HTTP server for previewing the application is running. Using the Previewer (right-hand-side of Cloud IDE by default), we can view the content of our app.
As expected, when you make any change to the source code (i.e., the files in the src folder): Monaca Cloud IDE will detect this, transpile the source code into the www folder, and finally update the Previewer. In fact, this process is also reflected in the Preview Log tab too:
Hot Reload
In the old IDE, the entire app will always reload itself whenever the user makes a change. However, if you are developing a transpilable project using the new IDE, Hot Reload will be utilised instead. Let’s look at an example:
Here, I have added an extra chunk of code into Page2.vue of the standard Onsen UI V2 Vue Navigation template.
<div style="text-align:center">
<input type="text">
</div>This simple piece of code allows me to demonstrate that with Hot Reload, the state of the app is kept even when the source file has been changed. i.e., updated are injected into the app.
In this scenario, the previewer of the old IDE would return to Page 1 & the text typed into the text field will be lost.
Summary
For those who wanted to try out these modern JS frameworks but were put off because of incompatibility on the Cloud IDE; now’s your chance! Normally, setting up a transpiling-environment is no easy task… but here in Monaca, we have taken care of all the hard work so that you can jump straight to coding your next big app! It’s as easy as a couple of clicks!
So please, by all means, make use of the new Cloud IDE and try your hand at developing in Angular 2/React/Vue.js today!
