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 that show an alert 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 interactive tutorial 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 to cook our typed components.
This link has more tuts using Angular 2 with Onsen UI.
React has its own way to do things. We are using JSX in this example and Babel for transpiling 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
$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, we can just 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 to organise 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?