Comparing Frameworks: Hello World!

Fran Dios
Fran Dios
Oct 17, 2016 · 3 min read

The fact that Onsen UI is built on top of Web Components makes us proud to be framework agnostic. However, there are so many options out there that we can feel overwhelmed when it comes to choosing a front-end framework to develop with. Especially for those who don’t have a large background in web programming, deciding which framework works better for them could be a tedious task.

Have you already chosen your framework to work with Onsen UI? For those who still don’t have a preference, in this article we show how to make a simple Hello World app with some of the existing alternatives: Vanilla JavaScript, AngularJS, Angular 2+, React, Vue.js and Knockout.js.

Hello World example

The following are simple examples showing an alert dialog when clicking on a button. The solely purpose of this is showing the syntax and complexity differences between the included frameworks for a simple example. We are using the playground app to show the previews and code. If you didn’t know about it go and check it out, you will find more examples there. Moreover, we invite you to play around with the code you see in the tuts and modify everything!

Vanilla JavaScript

Since Onsen UI components behave like native DOM elements (Custom Elements) it’s really simple to deal with them with pure JavaScript or jQuery. We just have events, DOM elements, attributes and properties. Good old and plain JavaScript.

Onsen UI Hello World — Vanilla JavaScript

In Onsen UI, the right place to initialize a page is in its event. Simply set a listener and modify whatever you need. Follow this link to see the main view of the playground app and find more examples with Vanilla JavaScript using other components.

AngularJS (1.x)

For this example, we can set up an AngularJS controller linked to the main page. Our HTML behaves like a template accessing the scoped variables from the controller and thus displaying data. We use shortcut syntax, what is equivalent to (having set, of course).

Onsen UI Hello World — AngularJS 1.x

Here you can find more AngularJS + Onsen UI samples.

Angular (2+)

This is getting complex. We start using TypeScript now for Angular 2+. Here we must import our shopping list: , , , etc. Once we get all the ingredients we can safely start cooking our typed components.

Onsen UI Hello World — Angular 2+

This link has more tuts using Angular 2+ with Onsen UI.


React has its own way of doing things. We are using JSX syntax in this example and Babel for compiling it. Even thought it may seem complex, I personally like the React approach since it enforces modularity and, thanks to JSX, the “template” and the logic is directly connected.

Onsen UI Hello World — React

More examples with React Components for Onsen UI here.


Vue is a very powerful framework that keeps things simple. Or at least simpler than the previous two, in my personal opinion. In Vue, we have access to instead of object directly from the template.

Onsen UI Hello World — Vue

More information about Vue bindings here.


Another good option for simple (and maybe not so simple) apps. For basic Knockout.js usage, we don’t even need a bindings package since we can define the bindings as we want. In this case, we link a Knockout view model when a page is initialized directly in the event based on the page’s ID.

Onsen UI Hello World — Knockout

Want more about Knockout.js + Onsen UI? Have a look at this other example. It’s a bit more complex since it’s using Navigator and Tabbar at the same time.


We have seen how easy is to plug Onsen UI with some of the most common frameworks nowadays. Some of them are complex frameworks that need a lot of “bootstrap” code but become very handy when the app gets bigger and need a robust way of organizing data and views. Other frameworks are quite straightforward with a gentle learning curve but possibly don’t offer so much help for organization in complex apps. At the end of the day, this is more a matter of opinion and every developer has his/her own preference. And you, what’s your choice to work with Onsen UI?

Stars on Github, tweets and comments are very appreciated. Happy coding!

The Web Tub

Pushing the web current through hybrid mobile and PWA…

The Web Tub

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

Fran Dios

Written by

Fran Dios

I create apps from Tokyo with love. I also like tomatoes.

The Web Tub

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