Menu hamburger icon

Announcing the Onsen UI 2.0 Beta

Announcing Onsen UI 2.0 Beta

After several months of hard work we are happy to announce the release of the Onsen UI 2.0 beta version. This release comes packed with new features and beautiful UI components. We have created a webpage solely dedicated to the Onsen UI 2.0 beta, complete with documentation and design patterns.

One of the new features we are most excited about is the introduction of Material Design into Onsen UI. Material Design lets you easily create a native-like experience for Android users. Of course, the original flat theme is still included so you can now easily create apps that look good and native on both iOS and Android.

Although this is a completely new version of Onsen UI, we realize that a lot of users have apps made using Onsen UI 1.x and want to upgrade. For this reason we want to make migration as easy and painless as humanly possible. We provide a binding library for AngularJS that is almost 100% backwards compatible.

We have also added a new component called the <ons-splitter> that can be seen as a swiss army knife of mobile app layouting. In a single component it combines the features of both the <ons-split-view> and the <ons-sliding-menu>.

What is Onsen UI 2.0?

Onsen UI 2.0 is a UI framework for mobile/hybrid apps. It provides native-like UI components as well as utility functions that help when developing HTML5 mobile apps. It’s designed to create hybrid apps with Cordova but can be used to create mobile web sites as well.

It provides a native-like UI for mobile apps using HTML5, CSS and JavaScript.

So how is it different from Onsen UI 1.x? Apart from adding many more features, we have also made a few fundamental changes to the framework.

ES6 and Web Components

The biggest change is that we have reimplemented all components as Web Components instead of AngularJS directives. Onsen UI 2.0 is no longer dependent on AngularJS. The core library has no external dependencies as it has been implemented in pure JavaScript.

This means that it can easily be integrated in apps built with other frameworks. While Onsen UI 1.x was tied to AngularJS, we aim to make Onsen UI 2.0 compatible with all the popular frameworks.

Another change we made was to implement the core library using ES6 instead of ES5. This makes the code a lot cleaner and for the distributed version we transpile the code using babel so it can be run in all browsers and devices. We have also added a bunch of polyfills to make it work in Windows Phones as well as older versions of Android and iOS.

The library being written in ES6 does not imply that Onsen UI apps must be written in ES6. You are free to use plain JavaScript, ES6 or any language that compiles to JavaScript.

For a complete list of changes, please refer to the changelog.

Getting Started

We have set up a simple “quickstart” repository so you can get your feet wet.

We have also created a website solely dedicated to the beta where you can find documentation for all the components as well as code examples and design patterns both for the new Material Design components as well classic iOS flat design patterns.

The site contains

Finally we have updated the CSS Components Theme Roller so you can easily customize the colors of the components to add personality and branding to your apps.

We realize that the documentation is not as extensive yet as the one for Onsen UI 1.x. During the beta phase we will, with the help of you the users, work on creating a great user guide for Onsen UI 2.0.

Migration from Onsen UI 1.x

As mentioned earlier we will also provide a binding library for AngularJS. We wanted to make migrating to 2.0 as painless as possible so this library is almost 100% compatible with Onsen UI 1.3.

The file structure has been altered slightly so I will give a rundown here. The names of the CSS files have not changed since 1.3, so you can just include them as usual:

<link rel="stylesheet" href="onsenui.css">
<link rel="stylesheet" href="onsen-css-components.css">

However, for the JS files we have made some small changes. The file named onsenui.js now only contains the core library with the Custom Elements, but not the Angular bindings. We have added a new file called angular-onsenui.js that provides directives and services for AngularJS.

To use Onsen UI 2.0 with the Angular bindings you should import the files in the following order:

<script src="onsenui.js"></script>
<script src="angular.js"></script>
<script src="angular-onsenui.js"></script>

To make the download more compact we do not bundle Onsen UI with Angular, so it needs to be downloaded separately.

Also, the newly added components have Angular bindings so you can write things like:

  <ons-material-input label="Name" ng-model="name"></ons-material-input>
  </p>Hello, {{ name }}!</p>

In the documentation, attributes and methods that are only available when using the Angular bindings have been explicitly labeled.

Material Design

With Onsen UI 2.0 we introduce Material Design components alongside the classic iOS flat design components.

An easy way to take a look at the new Material Design components is our Theme Roller. For information about how to use them, please take a look at the JavaScript reference.

For some components it’s as easy as adding a modifier attribute:

<ons-switch></ons-switch>

will render as a iOS switch while if we write

<ons-switch modifier="material"></ons-switch>

it will be rendered as a Material Design switch.

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

For some components we have added a new custom element instead of just a modifier. The reason for this is that some components are impossible to implement using only CSS, and need some JavaScript to get them to work.

One example is the Material input element, which needs some JavaScript to implement the floating label. In this case we have created a new element called <ons-material-input>.

See the Pen Material Input by Andreas Argelius (@argelius) on CodePen.

To check out some of the new components, take a look at the Onsen UI 2.0 docs:

We have already written an article about the components. Feel free to check it out for more information about the new components.

The <ons-splitter> component

The new <ons-splitter> component is a truly versatile tool that we hope will help developers when creating responsive layouts in their hybrid apps. On phones it can be used to create a layout with a swipeable menu while the same code will automatically transform into a two-column on larger screens like tablets. The <ons-splitter>

The <ons-splitter> component.

It actually has many more features than that. For a more in-depth look please refer to this blog bost.

Onsen UI 1.x Support

Releasing Onsen UI 2.0 does not mean that we are dropping support for Onsen UI 1.x. On the contrary, we will keep releasing bug fixes and platform fixes as long as our users demand it. We realize that there are a lot of apps already in the app stores built with earlier versions of Onsen UI and we don’t want to force anyone into migrating to 2.0.

Stable version

So when will the stable version be ready? We have not decided on a fixed date yet. We want to collect as much feedback as possible before releasing the final stable version. It might take a couple of months before we are content enough to release.

We want to make this version of Onsen UI as good as we possibly can. Please help us by reporting bugs and suggesting features on our GitHub issues page. We also love getting pull request. If you want to fix a bug or add a feature, please feel free to open a pull request.

You can also help by fixing one of the current issues and submitting a pull request. Please take a look at the list and see if there’s anything you feel you can solve. If you have any questions or want to discuss something you can come to our Gitter channel.

Comments