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 [http://omniscientjs.github.io/ Omniscient.js] or [http://facebook.github.io/react/blog/2015/02/20/introducing-relay-and-graphql.html Relay/GraphQL]. [http://getbootstrap.com/ Bootstrap] styles and [http://react-bootstrap.github.io/ React Bootstrap] components have been implemented in the view.


== Project Structure ==

The application was scaffolded using [http://yeoman.io/ Yeoman], and [https://github.com/newtriks/generator-react-webpack react-webpack] generator. This produces an initial webpack and [http://gruntjs.com/ Grunt] configuration. The Javascript source files are currently ES5 and [https://facebook.github.io/jsx/ 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 ([http://bower.io/ Bower] components) files.


''src/''
	''scripts''
		components - React component classes (entry-point Main)[[BR]]

		mixins - React mixins[[BR]]

	''styles'' - CSS/SASS stylesheets[[BR]]

	''mappings'' - [https://github.com/highsource/jsonix JSONIX] mapping and schema files (JSON - XML)[[BR]]

	*.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 [http://webpack.github.io/ Webpack], the application can be run locally using the [https://github.com/webpack/webpack-dev-server 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 [http://rackt.github.io/react-router/ 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.


[http://karma-runner.github.io/0.12/index.html 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 [https://github.com/facebook/react-devtools React devtools]. If Jasmine tests are intended to be used further, they can be implemented also with mocking using [https://github.com/jhnns/rewire-webpack rewire]. Alternative, is to use [http://facebook.github.io/jest/ 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, [https://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter 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 [https://github.com/meaton/react-webpack-comp-reg 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]


[[../FrontEndSpec|Front end specification]]


[http://www.clarin.eu/content/component-metadata]

== Component Hierarchy ==
[[Image(compreggliffy_screen.jpg)]]