DIO
A Library For Building User Interfaces.
- ~8kb
Support
- Edge
- IE 9+
- Chrome
- Firefox
- Safari
- Node
Installation
Direct Download
CDN
NPM
npm install dio.js --save
Getting started
dio
Links
Features
The following is an overview of the features afforded.
-
### Rendering
- Elements
- Components
- Primitives
- Fragments, Arrays, Iterables
- Comments, Portals, and Promises
-
### Components
- Functional stateful components
- Class stateful components
-
### Events
- Functions, EventListener or an Array of either.
-
### Errors
- Error boundaries marked by the
componentDidCatch
lifecycle.
- Error boundaries marked by the
-
### setState
- Object
- Promise
-
### Async Lifecycle
- async componentWillUnmount
- async getInitialState
Example
The following overloaded example presents a few features detailed above, namely – error boundaries, an implicit setState return, Promise setState and rendering Promises & Fragments.
// error boundary { return error: true } // isomorphic async getInitialState async { return value: 'Hi!' } // implicit promise setState async { return value: targetvalue } // rendering promises async { // error state if error return // fragments return } dio
Goals
Public react compatibility with an edge, this should mean that most react libraries can work as long as they does not make use of undocumented/public features, for example API's prefixed with unstable_
and vice-versa.
Comparison, React
Custom Renderer, Factory
Affords the same ability as React to create your own renderer.
Portals, Event Bubbling
Events bubble in Portals as you would expect them to in the DOM, this avoids issues such as #11387 where bubbling through the virtual tree has some unintended behaviors.
In addition createPortal
supports string selectors and server-side rendering portals, a feature that might also make it into react: related issue.
Events, Delegation
In contrary to the assumed pros of event delegation a general purpose event delegation model is intentionally avoided to avoid the performance and memory pitfalls that come with re-implementing this at the level of abstraction that JavaScript affords, when considering the standard event bubbling behaviour that the host platform implements. That is to say, implementing such a system involves doing more work than the host platform would otherwise do.
Hydration, Self Correction
Hydration goes the whole 9 yards to correct differences when hydrating, where React might otherwise error or ignore.
Error Messages
As opposed to React, the concept of developer warnings in a development build does not exist, The semantics that surround error boundaries help provide error messages when they occur at runtime.
Tradeoffs
Community.
React has a big community.
Warnings
React has developer build warnings.
Edge
Supporting Promises
The ability to render Promises makes support for code-splitting and lazy loading straight forward when supported at the library level. The ability to use a Promise for initial state makes data fetching more declarative and the ability to update state with a promise allows you to deal with async services without cutting back on the declarative nature that is afforded to other first-class citizens.
async { return await } async { return await } async { return }
Supporting Delayed Unmount
It is no surprise that declarative entry and exit animations in React are not at its best compared to other first-class citizens.
Allowing a means to declaratively define a delayed unmount that can enqueue exit animations before an unmount goes a long away in reducing the abstractions that go into dealing with this in its absence.
async { return { nodeonfinish = resolve } } async { return value: 'Initial value!' } async { return value: targetvalue } async { return }
Event "this"
React events outside of createClass
components have an infamous relationship with .bind
. The implementation details allow us to avoid this relationship and additionally allow multiple event handlers for a single event.
{ this instanceof Input } { this instanceof Input } { return }
Async Generators
Support for async iterators works much like regular iterators, but instead of a sequence of elements involve a sequence of states. This allows synchronous designs to emerge from otherwise asynchronous programs.
async * { 'Loading...' const data = await }
Server Side Renderer
Rendering promises/awaiting promise states is afforded to components within the context of renderToNodeStream
allowing both the previous example uses of async getInitialState
and Async Generators to render just as well when delivering a rendered payload from a server.
Custom Components
Custom components are components that instantiate their own host elements. Within a DOM context a custom element constructor might fall under this group of components.
// ...customElements
This allows us to render the given WordCount
custom element without afore knowledge of its defined localName
.