Productive development with ReactJs. How to boost developer’s efficiency and productivity? Boost development productivity with automating routine tasks and keep yourself from stupid mistakes. Make full use of Webpack/React hot reload, Redux dev tools, EsLint, git hooks, useful IDE plugins and CSS preprocessors.

1. Productive development
with ReactJs
How to boost developer’s productivity?
Tim Zadorozhniy betterstack.org

3. Developers Productivity

4. Soft skills:
- planning
- good communication
- right goals
- motivation
- discipline

5. Technical part:
- automation
- language/framework
- code quality
- best practices
- code review
- Tests/TDD
- ???

6. Tech part

7. Automate as much as you can
If you don’t automate,
you do more work than needed
But, What could be automated?

8. Builds, tests, code analyze/linting,
code/styles hot swap, reporting, assets
compilation, deployments, etc ...

9. To automate stuff we need
some tools, libs and
methodologies

10. Code

11. Write code in text editor
Reload browser
Bring app to certain state
Iterate

12. Write code in text editor
Reload browser
Bring app to certain state
Iterate

13. 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

14. Babel
- Transforms ES6(7) code to ES5
- Robust
- Highly configurable
- Works well with webpack
- https://babeljs.io/

15. Webpack simple config
{
context: __dirname + "/app",
entry: "./index",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
}
}
Starting point if the app
Output bundle

16. 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

17. React Hot Loader
Code changes
Hot Reloader
Proxy
Component A code
Component A new
code

18. React Hot Loader + Webpack HMR
Code changes
Hot Reloader
Proxy
Component A code
Component A new
code
Shipped by Webpack Hot Module
replacement

19. Redux
- Read-only state
- Mutations as a pure functions
- Declarative data flow

20. React + Webpack (+ Redux)
“Time travel” with Redux
https://github.com/gaearon/redux-devtools
https://github.com/gaearon/redux

21. React + Webpack (+ Redux)

23. React Red Box
Shows console error in red box
(can save your time evaluating errors)

24. Write code in text editor
Look at screen/Evaluate results
Iterate

25. Test

26. Why?
- Confidence for changes
- Room for continuous delivery
- Tests === better documentation

27. What to test?
- React components (Shallow Rendered dom)
- Stores (Reducers)
- Actions (check if action mutate as you expected)
- Custom logic (....)

28. How ?
- TDD
- Decouple code into modules
- Karma + Jasmine,
- Karma + Mocha, Sinon, chai
- Write test just for that module
- Iterate on it
Jest ?

30. Sometimes code we commit is
not good.
So we need to check it before.

31. Lint and hook

32. ESLint + Husky
ESLint: code linter/style checker +
Tests
+
Husky: Git Hooks with NPM interface
=
Better code

33. EsLint
- Catch syntax, style issues
- Pluggable, configurable rules
- ES6/React friendly
- Supports configurable envs
- Robust http://eslint.org/docs/rules/

34. 1. Helps to detect common “bad” things in
code and points to them
1. Enforces real metric for Js code quality

35. Things to catch
eval(), global variables, not used brackets,
trailing commas, dead code, not used React
properties, …

36. {
"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:

37. EsLint
Sample configurations:
- https://github.com/airbnb/javascript
- https://github.com/feross/eslint-config-standard

38. Git Hooks
Each push/commit triggers a command

39. Husky
- npm interface to githooks
- looks at precommit, prepush, npm scripts
npm install husky --save-dev

40. Improved linting workflow
Add code git push npm test && npm run lint
Actually
push
FAIL!
Ran by Git Hooks && Husky

41. So you push/commit less bad code!

42. What else?

43. - Emmet idea plugin
- Use CSS preprocessors SCSS/PostCSS
- Master your IDE
- Hotkeys!!!
- Develop Soft Skills

44. Demo time!
https://github.com/erikras/react-redux-universal-hot-example/

45. Thanks!

46. Q&A?