You may recall that 2 months ago (March 14) we released Onsen UI 2.2.0. Since then we have continuously worked hard to improve Onsen UI according to the feedback we’ve been receiving (e.g. GitHub issues). That effort culminated in the latest version, 2.2.6.

In this post we’d like to explain what the most recent updates of Onsen UI are all about.

Onsen UI is a UI component library built on top of Web Components. Web Components is an emerging standard that is designed to make it easy to create reusable UI components using APIs that are native to the browser. One clear advantage of this is that the components that you make are not tied to a single library or frontend framework.

In this article we will take a look at the advantages of using Web Components and also at the Custom Elements v1 API that was recently finalized and is looking to become the de facto standard for registering and adding behavior to custom tags.

Web Components is in my opinion not only a technology for writing encapsulated components that can be plugged into our apps, it is also a way to help us stop reinventing the wheel and implement the same components for every framework or library out there.

Onsen UI 2.0 has just been released and Onsen users often focus on building mobile apps. But Onsen UI provides a full-stack ecosystem for developing beautiful cross-platform apps including web development. No matter your focus, we believe strongly in standards-based open source tools like Web Components. This is a fantastic way to future-proof your development environment as JavaScript development continues to expand from web to mobile platforms.

Onsen UI 2.0 final release is around the corner. We’ve come a long way since we started implementing this version and we want to explain you here what were our reasons and issues. This is a short article that breaks down Onsen UI and some of the technologies behind it.

Recently we’ve started using the Web Components API for Onsen UI. The API gives the developer the power to create new tags and extend the HTML vocabulary. We’ve rewritten some of the simpler Onsen UI components as Web Components but we’re not going to stop at just that. The goal is to rewrite the core functionality of Onsen UI as Web Components and provide Angular 1.x support in the form of wrappers.

The reason why we’re doing this is that we don’t want the Onsen UI components to be usable only for AngularJS developers. We want you to be able to use Onsen UI regardless if you’re a Angular 1.x, React.js or a jQuery developer. We’re very excited about the upcoming Angular 2.0 as well which is built on top of Web Components standard.

In this tutorial we we’ll take a look at the API and implement a simple component. Let’s learn Web Components while making a “favorite button” / “favorite star”!