productive development with react js
TRANSCRIPT
Productive development with ReactJs
How to boost developer’s productivity?
Tim Zadorozhniy betterstack.org
Developers Productivity
Soft skills:- planning- good communication
- right goals- motivation- discipline
Technical part:- automation- language/framework- code quality- best practices- code review- Tests/TDD- ???
Tech part
Automate as much as you can
If you don’t automate, you do more work than needed
But, What could be automated?
Builds, tests, code analyze/linting, code/styles hot swap, reporting, assets
compilation, deployments, etc ...
To automate stuff we need some tools, libs and
methodologies
Code
Write code in text editor
Reload browser
Bring app to certain state
Iterate
Write code in text editor
Reload browser
Bring app to certain state
Iterate
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
Babel
- Transforms ES6(7) code to ES5
- Robust
- Highly configurable
- Works well with webpack
- https://babeljs.io/
Webpack simple config
{ context: __dirname + "/app", entry: "./index", output: { path: __dirname + "/dist", filename: "bundle.js" }}
Starting point if the app
Output bundle
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
React Hot Loader
Code changes Hot ReloaderProxy
Component A code
Component A new code
React Hot Loader + Webpack HMR
Code changes Hot ReloaderProxy
Component A code
Component A new code
Shipped by Webpack Hot Module replacement
Redux
- Read-only state
- Mutations as a pure functions
- Declarative data flow
React + Webpack (+ Redux)
“Time travel” with Redux https://github.com/gaearon/redux-devtools
https://github.com/gaearon/redux
React + Webpack (+ Redux)
React Red BoxShows console error in red box
(can save your time evaluating errors)
Write code in text editor
Look at screen/Evaluate results
Iterate
Test
Why?
- Confidence for changes
- Room for continuous delivery
- Tests === better documentation
What to test?
- React components (Shallow Rendered dom)
- Stores (Reducers)
- Actions (check if action mutate as you expected)
- Custom logic (....)
How ?- TDD
- Decouple code into modules
- Karma + Jasmine,
- Karma + Mocha, Sinon, chai
- Write test just for that module
- Iterate on it
Jest ?
Sometimes code we commit is not good.
So we need to check it before.
Lint and hook
ESLint + Husky
ESLint: code linter/style checker + Tests
+Husky: Git Hooks with NPM interface
=
Better code
EsLint
- Catch syntax, style issues- Pluggable, configurable rules- ES6/React friendly- Supports configurable envs- Robust http://eslint.org/docs/rules/
1. Helps to detect common “bad” things in code and points to them
2. Enforces real metric for Js code quality
Things to catch
eval(), global variables, not used brackets, trailing commas, dead code, not used React
properties, …
{ "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:
EsLint
Sample configurations:- https://github.com/airbnb/javascript
- https://github.com/feross/eslint-config-standard
Git Hooks
Each push/commit triggers a command
Husky- npm interface to githooks
- looks at precommit, prepush, npm scripts
npm install husky --save-dev
Improved linting workflow
Add code git push npm test && npm run lint Actually push
FAIL!
Ran by Git Hooks && Husky
So you push/commit less bad code!
What else?
- Emmet idea plugin- Use CSS preprocessors SCSS/PostCSS- Master your IDE- Hotkeys!!!- Develop Soft Skills
Demo time!https://github.com/erikras/react-redux-universal-hot-example/
Thanks!
Q&A?