Benny Wan
Benny Wan
Jul 13, 2018 · 4 min read

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

A good example of transpiling is TypeScript -> JavaScript; two high-level programming languages. ( image source )

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 preview and 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).

At long last, both versions of Angular join the battle!!

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:

Monaca Live News™

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:

New level of testing is now possible!

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!

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Khemry Khourn

Benny Wan

Written by

Benny Wan

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade