ComponentJS Demo  

Test-Drive ComponentJS with Model, View and Controller components

← Back

The Demo App Run-Time

Google Chrome was started, its debugger opened as an embedded view (F12 on Windows or Alt+Cmd+I on Mac OS X) and then the ComponentJS Demo App was loaded. The Demo App then caused a separate window to be opened (usually had to be manually approved by user once) which shows the ComponentJS Debugger. At the top you see the component tree (at the state once the whole dialog was rendered) and at the bottom is ComponentJS' debug output the Demo App requested. In addition to the manual interaction with the login dialogs, two scripted interactions were performed. Once manually in the Console of the Google Chrome Debugger. With the three commands...

cs("//login3/model").value("data:username", "foo")
cs("//login3/model").value("data:password", "foo!bar!quux")
cs("//login3/model").value("event:button-clicked", true)

...the model of login dialog named "login3" was manipulated which as a result both updated the view and triggered a business service which in turn causes the following console output:

STATUS: login from "/ui/panel/model/view/login3" with realm "foo", username "foo" and password "foo!bar!quux"

Finally, the index.js was started on the shell with Node.js which also performed a similar scripted interaction with another instance of the Demo App, but this time running in a true head-less mode, i.e., without any DOM at all!


This should convince you that with ComponentJS you have full control of even complex run-time models (the component tree) because you can easily monitor it in real-time while your UI executes.

Additionally, you hopefully also find it stunning that with ComponentJS you can execute your whole HTML5 UI even fully head-less, too. This allows you to create regression tests for your UI which check that all presentation logic works as intended.