Comparing Frameworks: Hello World!

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 init 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 ons.bootstrap() shortcut syntax, what is equivalent to angular.module('myApp', ['onsen']) (having ng-app="myApp" 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: platformBrowserDynamic, NgModule, OnsenModule, 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

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.js

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 $ons.notification instead of ons.notification object directly from the template.

Onsen UI Hello World — Vue

More information about Vue bindings here.

Knockout.js

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 init 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.

Conclusion

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!