Difference between revisions of "Orion/Library Independence"

Revision as of 16:29, 7 November 2012

For Orion 2.0, we are investigating client side implementations that do not depend on a particular javascript library, and instead use raw HTML5/CSS3 constructs where possible. For UI components, or widgets, that we need in the UI, we will consider small, library-independent implementations of the functionality, as well as considering our own implementation. This document outlines what would be needed to reduce or eliminate our dependence on dojo in favor of adopting newer HTML5 conventions, independent/small UI components, or homegrown small UI components.

Advantages of library independence

• Orion consumers wish to make their own choices regarding javascript libraries and UI plugins, and do not wish to bring in other libraries (such as dojo) when they depend on a different library.
• Orion consumers who use the same libraries as us (such as dojo) wish to switch versions at their own pace.
• Size reduction and performance improvements as we eliminate library methods that are already available in the browser
• Simplification of styling so that we aren't combining a library theme with our own themes
• Simplification and consistency of coding practices so that we aren't wrestling different conventions/life cycles in the UI (dijit lifecycle vs. Orion, dijit layout vs. raw CSS, etc.).

Existing dependencies and proposed replacements

The remainder of this document categorizes our dependencies and gives status on the replacement candidates.

JavaScript utilities

DOM manipulation

We have many dom utility methods sprinkled throughout the client code. Many of these are now available in our supported browser set. The following list shows method usage and replacement (this may expand to its own page).

• dojo.byId, dojo.query element.querySelector and element.querySelectorAll
• dojo.addClass, removeClass, toggle class element.classList.remove/add/toggle/contains

Other (non DOM) JavaScript utilities

• dojo.hitch Function.bind

Deferred / Promise support

dijit UI components

• dijit BorderContainer, ContentPane, Splitter for page layout.
  • BorderContainer, ContentPane and splitter were removed and replaced with CSS and an Orion-specific splitter.js
• dijit DropDownMenu, MenuItem
• dijit Tooltip
• dijit TooltipDialog
• dijit Dialog