Changes between Version 2 and Version 3 of ComponentRegistryAndEditor/ReactFrontEndProtoType
- Timestamp:
- 06/22/15 15:03:26 (9 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
ComponentRegistryAndEditor/ReactFrontEndProtoType
v2 v3 12 12 == Application Architecture == 13 13 14 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 Bootstrapcomponents have been implemented in the view.14 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. 15 15 16 16 17 17 == Project Structure == 18 18 19 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 (Bowercomponents) files.19 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. 20 20 21 21 … … 53 53 == Development & Testing == 54 54 55 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.55 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. 56 56 57 The application has defined routes which are configured and handled by react-router. Since ourapplication is loaded in a single page, we require that route paths work correctly, and are tested locally and in the server deployment.57 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. 58 58 59 59 60 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.60 [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]. 61 61 62 62 63 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 filterconfiguration should be completed in Tomcat (with DELETE method enabled), to enable valid ajax() requests to the REST service backend.63 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. 64 64 65 65 66 66 == Source code == 67 67 68 Source code is available from the Github repo, and may be forked for further development and testing.68 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. 69 69 70 70