Is it good to use Onsen UI

Onsen UI is a good open-source UI framework which support to HTML5 components for hybrid application developments. It’s initially released in 2013 and still do releases from Monaca, Inc. / Asial Corporation. The best thing is this framework can be used with JavaScript, AngularJS, Anguler 2+, React and Vue.js. Onsen owns 8.5K github starts.

Let’s discuss what are the pros and cons. Here I’m especially talk about using pure html and JavaScript solution. Some pros and cons might be behave differently with other mobile frameworks.

First thing first. Let's talk about Pros.

Pros.

1. Components

Yes, Onsen delivering a complete set of component from simple buttons to circle progress. Also, they have their own pop-up alert system and dialog system, which is great.

2. Native lookalike UI components

This is another best thing I saw in Onsen UI. Almost all the components are pretty much similar to native iOS and Android.

3. Auto styling

For Android, the UIs use material theme and for iOS it uses native like UI. It will automatically switch while you are using it on your mobile by knowing your browser and OS. Also the coolest thing is you can force UI design if you want. To do that, you can use the following piece of code after loading the “onsenui.js”

HTML:

        <script src="lib/onsenui/js/onsenui.min.js"></script>

JS:

        ons.disableAutoStyling();
        ons.platform.select('ios');

4. Light and Dark

Onsen now support dark theme. So you can find Dark, Default and Old theme from their website.

5. Theme Roller

Onsen supports online theme colour edit with its theme roller page

6. Rich List component

A good list component is bundled with this UI set. You can see their page to get a full idea about the list component. It’s included tappable components, icons or images, forward chevrons, sub title support and so on.

7. Web tester

One of the best thing you can find on the onsenUI website is the HTML editor. With that, you can easily try-out their components, styles, modifies and so on without put it in to your code. You can find it with any component description, because onsen provides an example for all of it.

Although, there are many pros, I see some cons as well.

Cons.

1. Doesn’t have colour themes.

If you are familiar with Angular material UIs, you probably wander how I can use “Accent” or “Warning” colours. Onsen doesn’t have that capability. Therefore, you have to do it manually in css and use it where you need. However, you can find a modifier call “cta" which is a stand for "call to action". You can have different colour for that. But, this can be only found with button component.

2. Switching colour themes

Onsen doesn’t provide an easy way to switch between light and dark colour themes. Therefore you have to add an id attribute to style element and when ever you need, you have to inject the flip side theme URL by using DOM injection commands.

HTML:

<link id="theme" rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">

JS:

document.querySelector('#theme').setAttribute('href', 'lib/onsenui/css/dark-onsen-css-components.css');

3. Card component isn’t rich at all

Onsen have very basic card component including Title and body. So if you compare it with material UI kind of UI set, you can see there are a lot of options with it. Therefore, in Onsen you have to do it manually.

4. Overriding CSS

This is pain in my ### I found while developing using Onsen. Some components are really insane when need to override CSS. Especially, checkbox and radio component. I think Onsen team can provide easy way to do this either using attributes, but they didn’t do it yet.

5. Modifiers not inheriting

I feel this as a problem because, if you want to use any modifier which related to the UI, it doesn’t apply for all the children. For instance, if you are given a material modifier to the list-item component, it doesn’t reflect on the radio inside. You have to mention the material modifier to radio control as well.

6. DOM manipulation

As I mention earlier, Onsen have set of UI components. So you can find some html tags which are not common. That means those are their tags. So if you closely analyse the UI after it gets rendered, some component are different from the original code. While rendering the application, Onsen is manipulating the DOM and injecting some html tags. So I found this was a worst when do CSS. You might need to worry about this if you are using Angula, React or Vue.

Final Thoughts,

In my point of view, onsen UI is a good, faster alternative for many other UI frameworks. Since it supports many Web Application frameworks, there are a lot of tutorials and case studies you can find all over the internet. Also, it's growing and updating.