Changes between Version 2 and Version 3 of ComponentRegistryAndEditor/ReactFrontEndProtoType


Ignore:
Timestamp:
06/22/15 15:03:26 (9 years ago)
Author:
Mitchell Seaton
Comment:

url refs

Legend:

Unmodified
Added
Removed
Modified
  • ComponentRegistryAndEditor/ReactFrontEndProtoType

    v2 v3  
    1212== Application Architecture ==
    1313
    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 Bootstrap components have been implemented in the view.
     14React.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.
    1515
    1616
    1717== Project Structure ==
    1818
    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 (Bower components) files.
     19The 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.
    2020
    2121
     
    5353== Development & Testing ==
    5454
    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.
     55Utilising [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.
    5656
    57 The application has defined routes which are configured and handled by react-router. Since our application is loaded in a single page, we require that route paths work correctly, and are tested locally and in the server deployment.
     57The 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.
    5858
    5959
    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].
    6161
    6262
    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 filter configuration should be completed in Tomcat (with DELETE method enabled), to enable valid ajax() requests to the REST service backend.
     63The 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.
    6464
    6565
    6666== Source code ==
    6767
    68 Source code is available from the Github repo, and may be forked for further development and testing.
     68Source code is available from the [https://github.com/meaton/react-webpack-comp-reg Github repo], and may be forked for further development and testing.
    6969
    7070