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?