@ -19,8 +19,7 @@ This application is designed and implemented in a way which should be suitable f
## Architecture
The whole project is written using the next generation of JavaScript refered to as *ECMAScript 6* (also known as *ES6*, *ES.next*, or *Harmony*). Since not all the features introduced in this standard are implemented in today's modern web browsers (like classes and spread operators)
and hardly any are implemented in older versions of web browsers which are currently still in use, the source code is transpiled into the older standard *ES5* using [Babel.js](https://babeljs.io/) transpiler and bundled into a single script file using the [webpack](https://webpack.github.io/) moudle bundler. The need for a transpiler also arises from the usage of the *JSX* syntax for declaring React components. To read more about these these tools and their usage please refer to the [installation section](#Installation).
The whole project is written using the next generation of JavaScript refered to as *ECMAScript 6* (also known as *ES6*, *ES.next*, or *Harmony*). Since not all the features introduced in this standard are implemented in today's modern web browsers (like classes and spread operators) and hardly any are implemented in older versions of web browsers which are currently still in use, the source code is transpiled into the older standard *ES5* using [Babel.js](https://babeljs.io/) transpiler and bundled into a single script file using the [webpack](https://webpack.github.io/) moudle bundler. The need for a transpiler also arises from the usage of the *JSX* syntax for declaring React components. To read more about these these tools and their usage please refer to the [installation section](#Installation).
### Declarative UI components
@ -50,12 +49,14 @@ There are two basic types of React components - presentational and stateful comp
- **Components** display the new state to the user
- **User** decides on his/her next actions according to the updated information displayed by the *components*
*Redux* simplifies this architecture by allowing only a single *store* and introducing a special pure function called *reducer* which deterministically transforms *old* state to a *new* state according to the given *action*. The *state* of app is represented by one plain javascript object - a tree - inside the *store*. *Reducer* is commonly a function composed by many simple functions which handle only a small subtree of the whole state.
*Redux* simplifies this architecture by allowing only a single *store* and introducing a special pure function called *reducer* which deterministically transforms *old* state to a *new* state according to the given *action*. The *state* of app is represented by one plain javascript object (a tree) inside the *store*. *Reducer* is commonly a function composed by many simple functions which handle only a small subtree of the whole state.
## Installation
Web application requires NodeJS server as its runtime environment. Stable versions of 4th and 6th series are sufficient, using at least 6th series is highly recommended. Please check version of NodeJS in your distribution's repositories, there is often too old one. However there are some third party repositories for all main linux systems.
Web application requires NodeJS server as its runtime environment. This runtime is needed for executing JavaScript code on server and allowing for example prerender parts of pages before sending to clients, so the final rendering in browsers is a lot quicker. But some functionality is better in other full fledged web servers like Apache or Nginx, so common practice is to use tandem of both. NodeJS takes care of basic functionality of the app while the other server (Apache) is set as reverse proxy and providing additional functionality like SSL encryption, loadbalancing or caching of static files. The recommended setup contains both NodeJS and one of Apache and Nginx web servers for the reasons discussed above.
Stable versions of 4th and 6th series of NodeJS server are sufficient, using at least 6th series is highly recommended. Please check the most recent version of the packages in your distribution's repositories, there is often too outdated one. However there are some third party repositories for all main linux distributions.
The app depends on several libraries and components, all of them are listed in `package.json` file in source repository. For managing dependencies is used node package manager (`npm`), which can come with NodeJS installation otherwise can be installed separately. To fetch and install all dependencies run:
```
@ -67,18 +68,16 @@ To easy production usage there is additional package for managing NodeJS process
# npm install pm2 -g
```
For production it is also recommended to use full fledged web server like Apache or Nginx as a proxy providing HTTPS encryption and caching of static files.
## Configuration and usage
The application can be run in two modes, development and production.
The application can be run in two modes, development and production. Development mode uses only client rendering and tracks code changes with rebuilds of the application in real time. In production mode the compilation (transpile to _ES5_ standard and bundle into single file using webpack) has to be done separately prior running. The scripts for compilation are provided as additional commands for `npm`.
- Development mode can be use for local testing of the app. This mode uses webpack dev server, so all code runs on a client, there is no server side rendering available. Starting is simple command, default address is http://localhost:8080.
```
$ npm run dev
```
- Production mode us mostly used on the servers. It provides all features such as server side rendering. This can be run via:
- Production mode is mostly used on the servers. It provides all features such as server side rendering. This can be run via:
Petr Stefan
8 years ago