Productive development with react js
-
Upload
tim-dev-tim-zadorozhniy -
Category
Software
-
view
1.425 -
download
2
Transcript of Productive development with react js
![Page 1: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/1.jpg)
Productive development with ReactJs
How to boost developer’s productivity?
Tim Zadorozhniy betterstack.org
![Page 2: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/2.jpg)
![Page 3: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/3.jpg)
Developers Productivity
![Page 4: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/4.jpg)
Soft skills:- planning- good communication
- right goals- motivation- discipline
![Page 5: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/5.jpg)
Technical part:- automation- language/framework- code quality- best practices- code review- Tests/TDD- ???
![Page 6: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/6.jpg)
Tech part
![Page 7: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/7.jpg)
Automate as much as you can
If you don’t automate, you do more work than needed
But, What could be automated?
![Page 8: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/8.jpg)
Builds, tests, code analyze/linting, code/styles hot swap, reporting, assets
compilation, deployments, etc ...
![Page 9: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/9.jpg)
To automate stuff we need some tools, libs and
methodologies
![Page 10: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/10.jpg)
Code
![Page 11: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/11.jpg)
Write code in text editor
Reload browser
Bring app to certain state
Iterate
![Page 12: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/12.jpg)
Write code in text editor
Reload browser
Bring app to certain state
Iterate
![Page 13: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/13.jpg)
Webpack- Simple configuration
- CommonJS, AMD modules out or the box
- Loaders for anything (ES6, (S)CSS, Fonts)
- Robust bundle management
- Webpack dev server
- Hot reload with webpack dev server
- 9000+ plugins
![Page 14: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/14.jpg)
Babel
- Transforms ES6(7) code to ES5
- Robust
- Highly configurable
- Works well with webpack
- https://babeljs.io/
![Page 15: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/15.jpg)
Webpack simple config
{ context: __dirname + "/app", entry: "./index", output: { path: __dirname + "/dist", filename: "bundle.js" }}
Starting point if the app
Output bundle
![Page 16: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/16.jpg)
Webpack HMR
module: { loaders: [ { test: /\.jsx?$/, loaders: ['react-hot', 'jsx?harmony'], include: path.join(__dirname, 'src') } ]},
plugins: [ new webpack.HotModuleReplacementPlugin()]
Enable Hot reloader here
Jsx transpiler hereWebpack module reloader here
![Page 17: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/17.jpg)
React Hot Loader
Code changes Hot ReloaderProxy
Component A code
Component A new code
![Page 18: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/18.jpg)
React Hot Loader + Webpack HMR
Code changes Hot ReloaderProxy
Component A code
Component A new code
Shipped by Webpack Hot Module replacement
![Page 19: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/19.jpg)
Redux
- Read-only state
- Mutations as a pure functions
- Declarative data flow
![Page 20: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/20.jpg)
React + Webpack (+ Redux)
“Time travel” with Redux https://github.com/gaearon/redux-devtools
https://github.com/gaearon/redux
![Page 21: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/21.jpg)
React + Webpack (+ Redux)
![Page 22: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/22.jpg)
![Page 23: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/23.jpg)
React Red BoxShows console error in red box
(can save your time evaluating errors)
![Page 24: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/24.jpg)
Write code in text editor
Look at screen/Evaluate results
Iterate
![Page 25: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/25.jpg)
Test
![Page 26: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/26.jpg)
Why?
- Confidence for changes
- Room for continuous delivery
- Tests === better documentation
![Page 27: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/27.jpg)
What to test?
- React components (Shallow Rendered dom)
- Stores (Reducers)
- Actions (check if action mutate as you expected)
- Custom logic (....)
![Page 28: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/28.jpg)
How ?- TDD
- Decouple code into modules
- Karma + Jasmine,
- Karma + Mocha, Sinon, chai
- Write test just for that module
- Iterate on it
Jest ?
![Page 29: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/29.jpg)
![Page 30: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/30.jpg)
Sometimes code we commit is not good.
So we need to check it before.
![Page 31: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/31.jpg)
Lint and hook
![Page 32: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/32.jpg)
ESLint + Husky
ESLint: code linter/style checker + Tests
+Husky: Git Hooks with NPM interface
=
Better code
![Page 33: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/33.jpg)
EsLint
- Catch syntax, style issues- Pluggable, configurable rules- ES6/React friendly- Supports configurable envs- Robust http://eslint.org/docs/rules/
![Page 34: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/34.jpg)
1. Helps to detect common “bad” things in code and points to them
2. Enforces real metric for Js code quality
![Page 35: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/35.jpg)
Things to catch
eval(), global variables, not used brackets, trailing commas, dead code, not used React
properties, …
![Page 36: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/36.jpg)
{ "ecmaFeatures": { // enable or disable some features of ES6 "blockBindings": true, "forOf": true, "jsx": true }, "rules": { // ESLint rules settings "semi": 2, // use semicolons "no-empty": 2, // disallows empty statements }, "plugins": { // ESLint rules settings "react" // adds React plugin }}
Configuration for EsLint:
![Page 37: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/37.jpg)
EsLint
Sample configurations:- https://github.com/airbnb/javascript
- https://github.com/feross/eslint-config-standard
![Page 38: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/38.jpg)
Git Hooks
Each push/commit triggers a command
![Page 39: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/39.jpg)
Husky- npm interface to githooks
- looks at precommit, prepush, npm scripts
npm install husky --save-dev
![Page 40: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/40.jpg)
Improved linting workflow
Add code git push npm test && npm run lint Actually push
FAIL!
Ran by Git Hooks && Husky
![Page 41: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/41.jpg)
So you push/commit less bad code!
![Page 42: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/42.jpg)
What else?
![Page 43: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/43.jpg)
- Emmet idea plugin- Use CSS preprocessors SCSS/PostCSS- Master your IDE- Hotkeys!!!- Develop Soft Skills
![Page 44: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/44.jpg)
Demo time!https://github.com/erikras/react-redux-universal-hot-example/
![Page 45: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/45.jpg)
Thanks!
![Page 46: Productive development with react js](https://reader030.fdocuments.in/reader030/viewer/2022012911/58f1633d1a28ab4e3b8b4581/html5/thumbnails/46.jpg)
Q&A?