Examples

This application defines a Backdraft component that has a public interface to set a language property ("English", "French", and so on) and then dynamically renders a translation of "hello, world" to the document as the language property mutates. The example is discussed in the section "Hello, World" in the tutorial.

See it here: hello world example

The code: hello world code in GitHub

This application displays a static grid of filenames, timestamps, sizes, and a rename button. Pressing the rename button presents a rename dialog. Lastly, there is a log that displays all of the name changes. All three user interface features--the grid, the rename dialog, and the log--are implemented as Backdraft components.

See it here: rename dialog example

The code: rename dialog code in GitHub

This application displays Little League game schedule with an interactive header that provides an interface to sort the schedule by team and date. It's a nice demonstration of how easy it is to create non-trivial, dynamic components with Backdraft. It also demonstrates how Backdraft's programming model provides for high performance manipulation (in this case, reordering) of components with many children (like grids).

See it here: schedule example

The code: schedule code in GitHub

This application displays a polygraph in SVG. A set of controls is provided to dynamically set he number of axes and their value. As the controls are manipulated, the polygraph instantly reflects their values. It is a great example of how data can be dynamically reflected into the DOM without employing a virtual DOM while the program expression is even cleaner than competing examples.

See it here: polygraph example

The code: polygraph code in GitHub

This is an implementation of the TodoMVC exercise with Backdraft.

See it here: to-do MVC

The code: to-do MVC code in GitHub

This is an implementation of the js-framework-benchmark exercise with Backdraft.

See it here: js-framework-benchmark

The code: js-framework-benchmark code in GitHub