Lition Energy Use Case Frontend
Lition is developing the only scalable public-private blockchain with deletable data features, made for commercial products. Designed with Lition's live P2P trading use case, and co-innovated with SAP.
There are several articles written by Lition Tech-Lead which describe the chosen approaches of development in full. Links to them can be found below:
Besides, Lition has its own UI-kit which is currently under development, but it is also based on React and Styleguidist.
Installation and start
First step is to install all application dependencies:
$ npm install
You have possibility to start standalone front-and app with local proxy server (by default
$ npm run start
or build static sources for production env via following command:
$ npm run build
After that check
The idea of this project is to keep everything simple and use as little dependencies as possible. So in the beginning the initial app structure was created with create-react-app.
Still there are some additional necessary tools used for this project development:
- Redux for state management.
- React-router for navigation and app-routing.
- Axios for handling AJAX requests.
- React-intl and moment.js for i18n.
To start development, there are several requirements that must be met first:
- React version >= 16.0.
- All variables should be declared under :root section.
- Every CSS file should be imported in a related component file.
- All necessary states of a component should be added to styleguidist.
On this project there are several sets of development rules that are highly recommended to be followed.
The first one concerns
- Build your solution across redux philosophy and separation of concerns.
- Do not use promises or async calls, all solutions based on unidirectional dataflow.
- For each domain entity and related CRUD you should create scripts with the same name, as follows:
/services/api/producers.js /services/api/__tests__/producers.test.js /reducers/producers.js /reducers/__tests__/producers.test.js /action_performers/producers.test.js /action_performers/__tests__/producers.test.js
The second is about the way in which
React components should be written:
- Use everywhere classic function declaration.
- Lambda/arrow function only for callbacks (through const is optional).
- Do not bind class methods, use lambda onClick="() => this.classMethod()".
- Cover all path via unit and integration tests, because a test coverage of 80% minimum is expected and needed in order to be able to commit any changes.
- Use prettier for single code style (configure your IDE).
- Make components independent from i18n messages and store, implement this kind of logic in containers
- Do not use middlewares
And the third one is about writing
HTML and CSS:
- Use semantic tags (like header, footer, section and other), it can be verified here.
- You can wrap a React component by a semantic element, not only by div.
- Use aria-attributes and https://www.w3.org/WAI/standards-guidelines.
- Work only with modern CSS, do not use any preprocessor (SASS or LESS).
- Setup font-size in rem and other properties in em units.
- Setup line-height in a number.
- Setup normalization, base and common variables in index.css file.
- Order your CSS properties by this way.
- Setup state classes with following names .menu-item--active (as modifier in BEM), for other cases try to use classic w3c selectors, do not use classes everywhere because it makes HTMl untidy and difficult to read.
- Setup all colors under :root section.
- Create new color variables, always use postfix -color, for background use infix -bg-, use standard pure color names (red, black) directly in component styles.
- All class names should use prefix ltn-
Start unit and system tests using following command:
$ npm run test
After test completion you can check coverage report here:
All application web components must be described through interactive documentation.
Run standalone documentation via following command (by default
$ npm run styleguide
or build static files:
$ npm run styleguide:build