News

Open Source Mobile Dev Tool Onsen UI Breaks Free from AngularJS Dependency

• By David Ramel
• September 15, 2016

Monaca today announced Onsen UI 2.0, a UI framework and tools for building HTML5-based native mobile apps, is now JavaScript framework-agnostic, having broken from its AngularJS dependency roots.

The open source Onsen UI is itself based on the popular open source Apache Cordova/PhoneGap projects, which facilitate creating native iOS and Android apps with one codebase based on technologies usually used for Web development: HTML5, JavaScript and CSS.

"While Onsen UI 1.x was based on AngularJS, the new version 2 has no library dependencies," said Monaca's Andreas Argelius in a blog post today. 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."

Now, those projects can include pure JavaScript, AngularJS, Angular 2 (just released today), React, Vue.js and Meteor.

"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," Argelius said.

In the updated tool, all project components are created with the Custom Elements API. "It's a simple API that is used to define custom tags and add custom behavior to them," Argelius said. "Think of it as a way to extend the HTML language." That capability is itself part of the Web Components group of technologies that provides reusable UI widgets.

In a separate post published last week, Monaca developer Fran Dios explained the reasoning behind the switch to Web Components from AngularJS, which Dios described as "a revolutionary framework for its time that is getting replaced nowadays by some more lightweight and newer ones."

Onsen 2.0 also sees the addition of support for Material Design, the design philosophy advocated for building Android apps by Google. Material Design support comes with new functionality that automatically styles iOS and Android components to provide a native look and feel.

Summing up these and other enhancements, Monaca provided the following list of the main features of Onsen UI 2.0:

• Full stack development environment for hybrid (Cordova/PhoneGap) and mobile Web app development when combined with Monaca tools CLI, debugger, remote build, browser-based IDE, local development tools and multiple key cloud services.
• Open source, utilizing standards-based Web Components, so applications can be built using HTML elements familiar to Web developers.
• Framework agnostic, can be used with any front-end JavaScript framework but provides a binding library for Angular 1 and 2, React and Vue.js making it easy to integrate Onsen UI with these frameworks.
• Flat (iOS) and Material Design (Android) flavors available, with automatic styling via Onsen CSS Components, a free resource of UI templates with "theme roller" functionality.

Also new is a revamped Web site sporting a new design, improved documentation and more content, Argelius said.

Dios said there is still work to be done to improve Onsen UI 2.0.

"We are aware of some parts that still need to improve," he said. "For example, we want to expose and document an API for extending the core library so everyone can easily create custom bindings for other frameworks. We are also working on exposing an API for animations in order to make it easier to plug an external router and let Onsen UI handle the page transition animations."

Instructions for getting started with Onsen 2.0, and links to associated tooling and components, can be found here. The source code is also available on GitHub, and more information can be found on the company's forum.