Each of these examples is a minimal, single-page application that demonstrates key features of Backdraft. Each uses the source version of Backdraft making it easy to explore the code in the debugger.
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