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.
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!
In Onsen UI, the right place to initialize a page is in its
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).
Here you can find more AngularJS + Onsen UI samples.
This is getting complex. We start using TypeScript now for Angular 2+. Here we must import our shopping list:
OnsenModule, etc. Once we get all the ingredients we can safely start cooking our typed components.
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.
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
$ons.notification instead of
ons.notification object directly from the template.
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
init event based on the page’s ID.
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?