Tic Tac Toe

The a Tic Tac Toe demo illustrate the creation of a reactive Tic Tac Toe using the <a-tagDef> tag to define a board (<my-board>) and a square (<my-square>) web component.
You can test it here and download the source code here. The example can run in a local file on the file system. Just set the correct path to a.js in the head script tag.

The demo uses watched variable shared between ancestors and children to manage the state of the game and the user interface. After each move, the state of the game is saved in the browser history, allowing you to navigate steps back and forth.
To illustrate that the components are correctly isolated, two boards are added to the page.

a.js Playground

The a Playground demo illustrate the creation of a very basic a.js playground using the <a-tagDef> tag to define a playground (<my-playground>) and uses several <import> tags in the a-tagDef to retrieve code or style.
You can test it here, download the base source code here and the playground tag definition there. The example can run in a local file on the file system. Just set the correct path to a.js in the head script tag.

The demo uses an iframe to run the a.js code you write/paste in the textarea. You can use it to try and run most of the code shown in the documentation on this site.

Simple reactive table

The Simple reactive table demo illustrate the creation of a reactive table inside a <a-closure> tag.
You can test it here and download the source code here. The example can run in a local file on the file system. Just set the correct path to a.js in the head script tag.

The demo uses a local watched variable for the table content which is reactively bound to the user interface by the element generating notation (...). Using the buttons you can create random lines in the tables, or remove them at the start or the end, or change the text, which is all done simply by manipulating the underlying array, using standard javascript array functions. The buttons are added to the <a-closure> currentElement using the element appending notation {(...)}.

Tag redefinition

The Tag redefinition demo illustrate how you can override an existing <a-tagDef> defining a specific custom tag <my-csv-display>.
You can test it here and download the source code here. The example can run in a local file on the file system. Just set the correct path to a.js in the head script tag.

The demo display random CSV like content as a table with the first definition, and as an ensemble of divs and spans with the second definition. Using the buttons, you can change the definition currently used, and experiment usage of the custom tags replay function.
We suggest you first "Append a new <my-csv-display>", to see how it display with a table based definition, then "Set my-csv-display definition as divs and spans" and "Append a new <my-csv-display>". See how it displays differently, but the first instance hasn't changed. If you then "Update existing my-csv-display with current definition", you'll see both instances now have the same appearance.

Watched (animation) demo

The Watched animation demo illustrate a simple case of a watched function changing one of it's watched variables by itself, thus causing to call itself again. Coupled with reactive UI, it creates a simple filling bar.
You can test it here and download the source code here. The example can run in a local file on the file system. Just set the correct path to a.js in the head script tag.

Note that you absolutely should not do this if you want to animate such a bar. CSS animations do the job very well, and are far more appropriate. But it's a nice visual illustration of what's going on.
The example does expose the returned value of the call to watch() in the console of the browser developper tools as watchResult. You can experiment with it, to see how the return value of the function is live updated in the object, or how setting suspend to false stop the reactions from triggering.

This site

This site is powered as a SPA on a static pages webserver by a.js, extended with a simple a.js fetch extension to help manage the part of the static pages that are useless in the Single Page Application context before any parsing by the browser. It leverages the singleton and waitfor functionalities of a.js to ensure the content is always loaded at the right spot in the layout. It uses a-tagdef to define the menu <my-menu> and some routing functionalities in cooperation with the a-tagdef define <my-link>. You can download and check the a.js extension script here the layout source here, the menu tag definition here and a sample page there Note that this is a quick and dirty example of what can be done with a.js while extending it. If you plan to use it to manage a production full SPA site, we don't recommand using the example here as a base.