June 2015
Mitchell Seaton

Component Registry React.js Prototype

Technical description

Component Registry React.js prototype is a front-end, single-page web application developed as a replacement to the existing Flex application currently used in production. The prototype uses the React.js javascript library to develop the user interfaces of the application, with a model of reusable React components, integrated mixins, and other library or module dependencies.

Application Architecture

React.js has a coupled web framework architecture called Flux, that emcompasses a dispatcher, stores, and React-view constructs. Note, that the Flux architecture has not been implemented in this application. Although, some mixins act as dispatchers to the Component Registry REST service, and callbacks return data or results to the view. We do not implement the use of stores in the front-end application, rather maintain the data in the view-components state. Due to the complexity of the CMDI schema data structure, and limitations of React.js one-way dataflow, binded methods were implemented for the editor functionality, to pass data changes (that occurred to the local state via actions) up the hierarchy in an inverse data flow. It should be considered in any further development to alter this model, and implement either ​Omniscient.js or ​Relay/GraphQL. ​Bootstrap styles and ​React Bootstrap components have been implemented in the view.

Project Structure

The application was scaffolded using ​Yeoman, and ​react-webpack generator. This produces an initial webpack and ​Grunt configuration. The Javascript source files are currently ES5 and ​JSX, and hot loading has been implemented with the webpack development configuration. Javascript libraries loaded in the index.html header are currently loaded from CDNs. Optionally, this can changed to local static (​Bower components) files.

src/

scripts

components - React component classes (entry-point Main)

mixins - React mixins

styles - CSS/SASS stylesheets

mappings - ​JSONIX mapping and schema files (JSON - XML)

*.json - static data or config files

index.html - single HTML page for loading application

test/ - Karma helpers and component test files

Gruntfile.js - Grunt configuration

package.json - NPM deps and package configuration

karma.conf.js - Karma configuration

webpack.*.config.js - Webpack configuration

Development & Testing

Utilising ​Webpack, the application can be run locally using the ​webpack-dev-server. Production builds are also produced with Webpack via registered Grunt task (ie. grunt build), to distributable files.

The application has defined routes which are configured and handled by ​react-router. Since the application is loaded in a single page, we require that route paths work correctly, and are tested locally and in the server deployment.

​Karma as a test runner has been configured, but not many tests have been implemented in the current source. Most testing can occur in the browser for this application, using console output, DOM structure and ​React devtools. If Jasmine tests are intended to be used further, they can be implemented also with mocking using ​rewire. Alternative, is to use ​Jest.

The prototype application should be tested deployed in Apache/Tomcat? and integrated with REST backend, maintaining a authentication session with the application server. There is a single configuration file, config.js, that has set values for REST service location and dev mode boolean flag. If the application is deployed on a Node web server, this can be configured by NODE_ENV setting, however deployed elsewhere this should be manually set (false). A value of true, applies additional settings to jQuery ajax() calls, to accommodate CORS requests, when testing locally. Note, ​CORS filter configuration should be completed in Tomcat (with DELETE method enabled), to enable valid ajax() requests to the REST service backend.

Source code

Source code is available from the ​Github repo, and may be forked for further development and testing.

Additional Resource Links

​https://www.clarin.eu/sites/default/files/CE-2014-0474-Component_Registry_workplan.pdf

Front end specification

​http://www.clarin.eu/content/component-metadata

Component Hierarchy