For example, when you create with some content, another is actually created internally and the content is moved there. Some components need to create inner elements and move their content around in order to work properly.
Moreover, the biggest issue we had is likely related to DOM manipulations. Fortunately, all of this was fixed with the version 1.0 of the polyfill (the one made by WebReflection) and now every browser is consistent in terms of Web Components (cross browser CSS is a whole different topic). However, other browsers without native implementation that were using the 0.x version of the polyfill presented several timing issues: Components were not loaded when they were supposed to be since they needed some extra cycles (remember that JavaScript is asynchronous). Some of them still persist until now and force us to make adjustments to the core library from time to time.Īt the beginning, Google Chrome was the only browser that natively supported Custom Elements and everything worked just right. We faced many issues that have been gradually fixed. While all of this sounds very cool, truth is that it was not a smooth change. This is just a project built on top of Web Components just like Onsen UI. If you are curious about this technology you can read further about it here.Īs a side note, Web Components is not the same as Polymer. We believe this makes Onsen UI super simple to use as you are working with real HTML Elements that have attributes, properties and methods just like in normal HTML5.They can be used with just pure JavaScript and it feels simple and easy.Ĭustom Elements reached its version 1.0 quite recently, improving their API and finalising some extra features. Thanks to it we are able to get an element by ID, tag name or class and directly use it as a normal DOM element: var newItem = document.createElement('ons-list-item') document.getElementById('my-list').appendChild(newItem) This is what allows us to create elements that inherits the original HTMLElement with extended behavior. To be precise, we don’t need everything in the Web Components specification, just the Custom Elements. Until then we just need a simple polyfill that implements the necessary features. These are browser standards still under development that hopefully soon will have a native implementation in every browser. Web Components is actually a set of different and separate technologies: Custom Elements, HTML Imports, Templates and Shadow DOM. However, over all of this, we thought the swap would still be worth it.
That’s the reason why we have now, for example, element instead of an attribute as we had before with the directives. As everything, this technology also has some minor drawbacks such as not being able to create custom attributes. With this technology are able to create real and reusable HTML components that behave in the way we want. At that time we found the Web Components project and in the team we all agreed it would be interesting to try it out. Even though performance mostly depends on the app developer’s skills, dropping a few hundred milliseconds by removing dependencies is quite significant for hybrid apps.ĭue to these and some other reasons we decided that Onsen UI 2.0 should move on and divorce from opinionated frameworks. Also, AngularJS is a great framework but we all know it doesn’t help too much with performance. Even if it was not used for the main part of the app, the dependency is still there running under the hood and compiling everything. Being built on top of AngularJS meant that every developer had to adapt to this framework in some way or another. While this was great to make an HTML-Elements based framework, it carried a few drawbacks. In AngularJS it is possible to define directives, markers on a DOM element (mostly as element names or attributes) that allows attaching a specified behavior to them. Onsen UI 1.x was built on top of AngularJS, a revolutionary framework for its time that is getting replaced nowadays by some more lightweight and newer ones. From AngularJS directives to Web Components
This is a short article that breaks down Onsen UI and some of the technologies behind it. 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. Onsen UI 2.0 final release is around the corner.
0 kommentar(er)
