Menu hamburger icon

Onsen UI 2.0 is here!

Onsen UI is here!

It’s been a little over four months since we released the first RC version of Onsen UI 2.0. Since then we have gone through several iterations, ironing out the creases in order to deliver a great UI solution for all hybrid and mobile web app developers out there.

Onsen UI is an UI framework & tools to create native mobile apps with HTML5 hybrid app technology. It is designed to make it easy and efficient for developers to design apps. We aim to make the UI components easy to use while still giving developers a lot of power to customize their behavior.

While Onsen UI 1.x was based on AngularJS, the new version 2 has no library dependencies. This is the biggest change in Onsen UI 2.0. As well as increasing performance and making the file size smaller, it also makes it easy to include the components in any project, whether it’s written in React, Angular, Vue.js, some other framework or even pure JavaScript. There are so many exciting libraries and frameworks coming out lately and we want to make it possible for anyone to use Onsen UI in their apps!

With this version, we added Material Design components and we also added a feature that automatically styles components based on the platform so that apps made with Onsen UI 2.0 will look native on both iOS and Android.

With the new version, we also released a new website. Apart from a new and cleaner design, we have also made an effort to improve the documentation and add more content to make it easier to get started with Onsen UI.

Onsen UI is framework agnostic

Onsen UI is implemented in pure JavaScript and not dependent on any other framework or library. All components are created using the Custom Elements API. It’s a simple API that is used to define custom tags and add custom behavior to them. Think of it as a way to extend the HTML language. Custom Elements is part of a larger concept called Web Components that also includes Shadow DOM, HTML imports and the new <template> tag. It also means Onsen UI is future proof since it is living on the Web standard technology.

Onsen UI uses Web Components

Custom Elements are very easy to use. They are just like normal HTML tags and will be activated automatically when attached to the page. There is no compilation or bootstrapping required.

The following code will render a simple switch:

<ons-switch checked></ons-switch>
<p>Switch is <span id="state">on</span>.</p>

The Onsen UI elements work just like the built-in elements so we can attach some behavior to it with JavaScript:

var el = document.querySelector('ons-switch');
el.addEventListener('change', function(event) {
    var state = document.getElementById('state');
    state.innerHTML = event.target.checked ? 'on' : 'off';
});

These few lines of code renders into this:

See the Pen Switch example by Andreas Argelius (@argelius) on CodePen.

For more information on our reasoning behind removing the Angular dependency and going full Web Components, I recommend you read this great article written by Fran Dios, my fellow Onsen UI developer.

Designed for both iOS and Android

The Onsen UI components have styles for both iOS and Android. When running on Android they will automatically display as Material Design while on iOS they will look like native iOS components. It also works well on Windows Phone (Microsoft Edge) that renders iOS style.

Automatic styling in Onsen UI

One of the challenges when developing hybrid apps is to make them look and feel like the native apps that the users are accustomed to. With automatic styling there is no need to spend a lot of time styling the components. Instead, you can let Onsen UI do it for you while you focus on the important part: creating the actual app. See more details in our docs.

New and improved documentation

We have received feedback that the documentation on the previous website was hard to navigate and that it was sometimes difficult to know where to look for information about the components. Our new documentation has been simplified and we believe it is now a lot easier to find what you are looking for.

We have of course also updated both the guide and reference with all the new components that were added in Onsen UI 2.0. Since the documentation is one of the most important resources for Onsen UI developers, we will keep improving it going forward!

Another resource that we have added recently is the interactive Onsen UI tutorial. This page lets you learn how to use all the components in Onsen UI and also how to use them with different frameworks and libraries such as AngularJS and React. You can also change the source code to play around with the components.

Join the Onsen UI ecosystem

For questions about using Onsen UI we recommend you to check out our growing community forum. There are lots of knowledgeable and friendly people, eager to help you out.

If you want to request new features or if you have found a bug, please open an issue on our GitHub page. We try to answer as quickly as possible.

Help developers to get up to speed

Even with our effort to improve documentations, we know it is not perfect. And we need your help.

For those of you who already have Onsen 2.0 experience, please join the Onsen UI 2.0 Tutorial, Tips & Review Contest and create blog posts and videos to help new users.

The contest starts today and the first phase will close in 2 weeks. Please check out contest details now. By giving back to the developer community, you also have a chance to win a prize!

Spread the word!

We hope you are as excited about this release as we are. If you like Onsen UI and would like to support the project, please make sure to star us on GitHub. Also, we’d love it if you could help spreading this news far and wide.

Happy coding!

Comments