-
Notifications
You must be signed in to change notification settings - Fork 2
Development
Here is a list of packages that this application is built on (please see package.json for a full list of dependencies):
- React: A library for component-based development
- Redux: A state container for managing application state
- Redux Saga: A library for managing side effects such as loading data
- Reselect: A selector library for accessing Redux state
- ImmutableJS: A library for immutable data collections
- Styled Components: Low-level styling constructs for styling components
- react-vis: a system for composable data visualisation components based on d3
- react-hash-route: simple hash-based routing
- Webpack: for bundling JavaScript files and assets
- React Styleguidist: for generating React component and other code documentation
- documentation.js: for other code documentation
yarn/npm install
yarn start/npm start to start dev server with hot reload, it's live on localhost:3000.
yarn run build/npm run build to build prod bundle, it includes both treeshaking and uglify to optimize the code as much as possible.
yarn run doc/npm run doc
The generated code documentation can be viewed online on RawGit
The application source code structured following a container/component architecture (see also Architecture) with the following folders for JavaScript:
- src/containers/: 'smart' components connected to Redux store, as well as all other high-level 'path' containers (see also Sitemap)
- src/components/: 'dumb' components without store access and primarily concerned with layout and presentation
- src/styles/: primitive Styled Components for re-usable styles
- src/utils/: JavaScript helper functions
It also contains the following noteworthy JavaSript files:
- src/index.js: kicks off the application and defines hash routes for the different pages (see Sitemap)
- src/store.js: configures the Redux store
- src/global-styles.js: defines global application styles, includes normalize.css for styled components
The generated code documentation can be viewed online on RawGit
In addition there are folders for graphics and text:
- src/assets/: application graphics
- src/text/: application text, including all labels and static editorial content (see also Text)
Contains example data for development and testing.
The compiled application bundle for integrating in data.govt CMS page template.
The generated code documentation as raw HTML files. See RawGit to view online.
src/index.js is the application entry point that renders the application into a 'root' HTML element <div id="root"></div>. It also sets up and synchronises the application store, global styles and hash routing.
The application state is the single source of truth and kept in the Redux store. Any changes to the store can only be made by reducers that respond to predefined actions) that components can dispatch.
Connected, 'smart' components can read data from the store using selectors. In fact these smart components respond to any state changes with the selected data-subset and automatically re-render.
Sagas, like reducers, also respond to actions and kick off side effects. The loadDataSaga is responsible for requesting data either from the data.govt API (if (value.source === 'api')) or from example CSV files (if (value.source === 'api'))
The data endpoints both for API (path and resource Ids) and CSV requests are configured in the application constants. Simply change the value for API to false to load the example test data.
navigateSaga, another saga, is responsible for navigating within the application by triggering path or query changes using react-hash-route's route function.
Once the route is updated, src/index.js will load the relevant path component, and also update the store which in turn will trigger any connected components and their children to re-render.