ls-cool
Problem
- Framework without improvements
- File structures
- Refactoring
- Build tool
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654848/CMHwsdWWcAQtXlM.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654497/pasted-from-clipboard.png)
React
We use
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654508/pasted-from-clipboard.png)
SASS/COMPASS
MaterialUI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654515/pasted-from-clipboard.png)
+
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654518/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655014/images.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654497/pasted-from-clipboard.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655017/react-diff-tree.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655026/flux-in-cqrs-terms.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655026/flux-in-cqrs-terms.jpg)
We use
"dependencies": {
...
"babel",
"i18n-webpack-plugin",
"immutable",
"webpack",
...
},
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1654802/kogda-s-dedom_71911068_orig_.jpg)
es6
es7
Creating application with
We use
"devDependencies": { ... "eslint",
"karma",
"karma-sinon", "karma-mocha", ...
"react-hot-loader", "redux-devtools", ... },
ToolBox
- Hot Reload
- Redux DevTools
- BEM
- SASS
- Tests (reducers)
- Localization
- Feature folders
- Webpack
- Middleware
Redux DevTools
import _ from 'lodash';
import ApiClient from 'api/ApiClient';
import tokenService from '../TokenService';
let api = new ApiClient(tokenService);
export default function apiMiddleware(getState) {
return next => (action) => {
// wrap functions with api and getState params
if (_.isFunction(action)) {
next(action(api, getState));
} else {
next(action);
}
};
}
Middleware
+---api
+---app
| +---features
| | +---feed
| | +---login
| | | \---assets
| | | \---images
| | +---main
| | | \---components
| | | +---loader
| | | | \---assets
| | | \---menu
| | | \---assets
| | | \---images
| | +---purchased
| | \---shared
| | +---assets
| | | \---sass
| | \---components
| | \---auth
| \---utils
| \---middlewares
+---assets
| +---fonts
| \---sass
\---lib
Feature folders
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655069/14125853101847.jpg)
Own generator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655084/46ea2dd8b1bdd31a8ba61044cb5b6ebe_400x400.png)
npm install generator-redux-component
![](https://s3.amazonaws.com/media-p.slid.es/uploads/364812/images/1655043/image.png)
deck
By Jenya Terpil
deck
- 3,162