ComponentJS Tracing

Run-Time Tracing for ComponentJS

Overview

This is a Node.js based tracing application to support development with ComponentJS, a powerful Component System for hierarchically structuring the User-Interface dialogs of complex HTML5-based Rich Clients (SPA).

The ComponentJS Tracing application consists of three major components:

• A forwarding proxy service for instrumenting the target ComponentJS application
• A Websocket service for routing the tracing information between the target ComponentJS application and the tracing UI.
• An origin webserver delivering a tracing UI for collecting the tracing information, provisioning constraint sets and applying constraint sets once or continuously against the tracing information.

Screenshots

Architecture

The diagram below illustrates the underlying architecture of the ComponentJS tracing application.

Links:

• User Interface
• Server Module
• Plug-ins
• Transpiler

Installation

1. Install Node.js

2. Use Node.js's NPM to install ComponentJS Tracing:

    $ npm install -g componentjs-tracing
       

3. Clone the latest version of PegJS to your local machine

4. And use NPM to install it globally: $ npm install -g .

Update Existing Installation

$ npm update -g componentjs-tracing

Usage

$ componentjs-tracing [options]

The following command-line options can either be supplied on the command line or in the included server.ini file.

• --version, -v: Print tool version and exit
• --help, -h: Print this help and exit
• --addr, -a: IP address to listen
• --port, -p: TCP port to listen
• --backlog, -b: TCP socket connection backlog
• --componentjs, -cjs: Regex matching the url of the ComponentJS file
• --components, -cmps: Regex matching the urls of the components files of the SPA
• --proxyaddr, -A: IP address to bind to
• --proxyport, -P: TCP port to listen in on
• --latestcjs, -lcjs: Overwrites applications ComponentJS file with the supplied version
• --proxyfwd, -F: Host and port of forwarding proxy (eg when you are behind a corporate proxy)
• --config=<cfg>: Adds the specified section of the ini file to overwrite defaults
• --runfile, -rf: Directs the traces to a separate runfile bypassing the websocket logic and thus the user interface
• --symbol, -s: Defines the symbol that makes ComponentJS available
• --methods, -m: ComponentJS life-cycle methods defined in the transitions
• --console: Display logfile also on console
• --app, -X: url:dir of application

Recommended setup

In order to direct the traffic through the proxy server we recommend the Google Chrome Plug-In Proxy SwitchySharp. It provides an easy way to specify the websites which you want to be routed through the proxy server. The example below shows a configuration for the ComponentJS Demo Application in 3 simple steps.

Step 1

We need to tell the Plug-In which proxy server we have at hand.

(Hint: Do not forget to press "save")

Step 2

Now we define which website should be routed through the proxy. We use wildcard syntax which means that every request containing "componentjs.com/demo" will cause a hit for this rule.

(Hint: Do not forget to press "save")

Step 3

The final step is to enable the Auto Switch Mode, so only the specified pages are affected by the proxy settings.

Limitations

The ComponentJS Tracing application can only be used in combination with the Google Chrome browser, because we had to use Chrome-specific functionalities:

• Inspecting the stacktrace is necessary for the tracing plug-in.
• CSS dimension calculation is based on the calc method.
• Native Websockets are used since we don't want to provide any ugly Flash fallbacks.
• HTML5 FileReader API is used.

License

Copyright (c) 2013 Ralf S. Engelschall (http://engelschall.com)

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file. You can obtain one at http://mozilla.org/MPL/2.0/.

Authors

• Ralf S. Engelschall ([email protected])
• Christian Vaas ([email protected])