Inferno Examples and Benchmarks

Benchmarks

1k Components
This benchmark measures creation time of multiple functional components.
Rendering speed is heavily bottlenecked by patchStyle method.
Example | View source...

DBMonster
This benchmark measures time of patching same number of elements.
Example | View source...

UI Benchmark
InfernoJS implementation of UI Benchmark. This benchmark uses optimization patterns specific to InfernoJS only.
Example | View source...

UI Benchmark (Inferno-compat)
Same as regular ui benchmark implementation, but uses inferno-compat to track performance regressions in compatibility layer.
Example | View source...

UI Benchmark (Normalization)
This version of UI Benchmark tracks performance regressions in Inferno's normalization algorithm. Do not write code like this.
Example | View source...

UI Benchmark (Lifecycle)
This version of UI Benchmark tracks performance regressions in Inferno's lifecycle process. Do not write code like this.
Example | View source...

UI Benchmark (same as React)
This is InfernoJS implementation of UI Benchmark using identical application level code with React implementation.
Example | View source...

Examples

Animations demo
This demo uses inferno-animation to animate multiple elements of a card when it is added and removed from the DOM.
Example | View source... | View CSS...

Animating child when parent is mounted/unmounted
Here the animation is only performed on a child component of page when the page is mounted and unnmounted.
Example | View source... | View CSS...

Animations on mount and unmount
This is an implementation of inferno-animation where components are animated when added, removed or moved in the DOM.
Example | View source... | View CSS...

Global animations
Component exists on two different "pages" and when we switch between them it animates between the two positions.
Example | View source... | View CSS...

Async render
Render 2 x 2k rows using loop in componentDidMount.
Example | View source...

React Compatibility
Using React compatibility extension.
Example | View source...

Input Forms
Inferno and HTML-forms.
Example | View source...

Inferno and SVG
The tiger rendered with an SVG in Inferno.
Example | View source...