Menu hamburger icon

Onsen UI 2.2.6: recent updates and iOS stability improvement

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.

Stability on iOS has been significantly improved (2.2.3)

In case you are not familiar with it yet, Onsen UI uses a technology called Custom Elements which, although well-supported by Android, was lacking a bit in iOS. For that reason it could at times prove to be not as 100% safe and stable as you’re accustomed to by now.

However, good news! The Custom Elements’ developers managed to solve this situation last February. As a result, the stability of Onsen UI has been even more improved, especially when used together with frameworks such as AngularJS. A more detailed technical explanation on this matter is provided further down this article.

If you are using Onsen UI 2.2.2 or older, please consider updating it to the latest version. The update methods are the same as you’re used to. If you are using angular2-onsenui, react-onsenui or vue-onsenui, please do not forget to update them to their latest version as well. And of course let us know if you run into any kind of trouble.

New animations for ons-splitter (2.2.5)

Onsen UI provides sliding side menus and screen splitters through the ons-splitter element. Before we were providing only an overlay animation but since Onsen UI 2.2.5 push and reveal animations are also available.

Animation name Detail
overlay (default) Side page overlays content page.
push Side page pushes content page.
reveal Content page is slided and then side page is revealed.

See the Pen Onsen UI 2.2.5 - New animations of ons-splitter by Naoki Matagawa (@asial-matagawa) on CodePen.

Background of the improvements on iOS

Following the increasing attention given to Web Components, we would like to give more detailed information for Web Components enthusiasts.

The stability improvement of Onsen UI on iOS is a consequence of the improvement of the Custom Elements v1 polyfill. Custom Elements v1 can be used in Chrome 54+ or Android System WebView 54+ in the case of Android, and can be used in Safari / UIWebView of iOS 10.3 in the case of iOS. Onsen UI is using a polyfill for Custom Elements v1 which enables even old browsers to work with ons-* elements.

As of May 2017, the following 2 packages have been developed as polyfills for Custom Elements v1:

Back in January both of the polyfills asynchronously called lifecycle callbacks of custom elements (called custom element reactions) against Element#appendChild and Element#setAttribute for performance reasons. This means they were delaying the process by a few milliseconds after the moment an ons-* element was appended under the body element. Originally the lifecycle callbacks should be called synchronously and in fact that is strictly described in the official specification of Custom Elements v1 by W3C and WHATWG.

Hence in February @webcomponents/custom-elements made a change in 1.0.0-rc.2 so that the lifecycle callbacks were instead called synchronously. Thanks to this change a polyfill for Custom Elements v1 which correctly matches the specification was released. We have immediately adopted @webcomponents/custom-elements@1.0.0-rc.2 and launched it with Onsen UI version 2.2.3. After the update many issues on iOS which were hard to fix thus far were all solved and the test case passing rate was increased from 58% to 99%.

Have you ever wondered why Web Components are rarely used even when they are gradually getting more attention? That’s actually due to circumstances such as this, related to polyfills in the background.

Nevertheless the problem of polyfills is a transition-period problem. As soon as we’re able to use powerful features without jQuery (thanks to recent browser updates), we will be able to use Custom Elements v1, Shadow DOM v1 and other modern features without polyfills. At most by 2019-2021 it will be a certainty.

We will continuously improve Onsen UI while looking ahead to the future of Web standards. If you sympathize with our philosophy, we would be glad if you give a GitHub star to our OnsenUI repository (thanks to your support, we expect to reach ⭐️ x 5000 soon).