The deliteful experience is based on delite, discover below what are the key benefits to its architecture
For maximum interoperability and faster learning curve, all our element architecture are built on top of the following Web Components standards:
- Custom Elements
- Pointer Events
- ES5 getter & setters
- ES6 Promises
- ES7 Object.observe
- WAI-ARIA accessibility specification
In particular, relying on custom elements makes deliteful UI elements fully interoperable with other custom elements including Polymer elements.
Multi Channel Architecture & Browsers Support
Our elements architecture has been thought to scale from the mobile devices to the powerful desktops. In particular we do provide cross-device theming based on Bootstrap Less variables as well as responsive layouts adapting to the various form factors.
Deliteful elements have been thoroughly tested and are supported on the following platforms:
- Windows IE9 and above
- Windows and MacOS Chrome, Firefox ESR 24+
- MacOS Safari 7 and above
- Android 4 and above, Stock & Chrome browsers
- iOS 6 and above, Safari & Chrome browsers
- IE10 on WindowsPhone 8
Built for Performance
Delite and deliteful have been designed to balance functionality and adherence to standards with code size and performance.
A typical example of this trade-of strategy is that even if we do love the scoping principle behind Shadow DOM scoping we are not ready to pay the price for it until this is natively implemented on all our supported platforms.
Another example would be the binding engine for our elements templates. This binding engine leverages handlebars syntax but is designed with code size and runtime performance in mind, providing just the feature set needed by most elements. For those with more advance needs in terms of binding our architecture is open enough to be able to leverage any other binding engine if required. For advanced high performance data binding capabilities, delite can be used with liaison or easily integrated with other popular data binding engines.
Consistent Approach to APIs
We did our best to make sure all the elements we are providing are sharing a common approach to their APIs so you can get consistent experience across the various elements.
For example all our data-enabled elements such as list are sharing the same approach to connect to data leveraging the dstore project.
Similarly all our elements do automatically import their CSS styling in a similar manner using our theming aware CSS AMD loader.
Globalization and Accessibility
Our elements are fully enabled for globalization, including string translations as well as bidirectional and mirroring support. Bidirectional & mirroring code is optional to limit element code size and can be opt-in if needed.
Our toolchain leverages industry standards, starting with scaffolding your application with Yeoman, customizing elements style using Less, building it with Grunt and loading it through RequireJS AMD loader.
Openness & Integration
We are working in the open. Our all our code is available on Github under BSD license and we do welcome patch contributions under the Dojo Foundation CLA. Would you encounter a bug, need a missing feature or want to contribute feel free to enter issues or pull request on our issues list.
Our projects are designed to integrate with other current popular open source front end projects, so you can begin to bring the benefits of emerging formal standards-based web programming into your current workflow and skills. Here are some examples of integration with other open source projects. Please let us know if you have added integration with your library and we’ll add it to the list!
- delite(ful) elements wrapped into AngularJS directives as part of the angular-delite project.
- delite(ful) elements work with any AMD / RequireJS modules.
- delite detects when Polymer or native browser implementations of underlying standards (eg. Chrome) are present and can delegate to these alternative implementations.