Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
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: "bun...
Webpack HMR
module: {
loaders: [
{ test: /.jsx?$/, loaders: ['react-hot', 'jsx?harmony'],
include: path.join(__dirname, 's...
React Hot Loader
Code changes
Hot Reloader
Proxy
Component A code
Component A new
code
React Hot Loader + Webpack HMR
Code changes
Hot Reloader
Proxy
Component A code
Component A new
code
Shipped by Webpack Ho...
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/re...
React + Webpack (+ Redux)
React Red Box
Shows 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 expec...
How ?
- TDD
- Decouple code into modules
- Karma + Jasmine,
- Karma + Mocha, Sinon, chai
- Write test just for that module...
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
- Ro...
1. Helps to detect common “bad” things in
code and points to them
1. 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
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?
Productive development with react js
Productive development with react js
Productive development with react js
Upcoming SlideShare
Loading in …5
×

Productive development with react js

2,064 views

Published on

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.

Published in: Software
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Productive development with react js

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

×