Super tools to boost productivity in React dev env!
- 1. Super tools to boost Productivity! Souvik Basu
- 2. Who am I? • JS enthusiast • Freelance Frontend developer • Lives in Vancouver, Canada • Coding since Y2K bug (1999) • React developer for 5 years! • We can say that now • Angular for day job, React at night and Vue on weekends @souvikbasu
- 3. Productivity?? • More Time • More Energy • More Work done • Predictable outcome of work • Less Anxiety and Stress • Better Work-Life balance
- 4. Development Lifecycle Prototype Design Code Debug Test Build DeployReleaseSupport
- 5. Prototype • Best tool: Pencil and Paper • Simple paint tools like MS Paint • React Proto • Mural
- 6. Design • Don’t spend time in logo design yourself • Hire a professional designer
- 7. Design Decisions • Don’t reinvent the wheel • Use reusable components from libraries • Bit.dev
- 8. Few good libraries • NativeBase (React Native) • React Bootstrap • React Toolbox • Semantic UI React • React Belle • Material Kit React • Ant Design for React • Shards React (fast) • Material UI • React Virtualilzed • Argon Design system React • Blueprint • React Desktop • Onsen UI • Evergreen • Reactstrap • Rebass (styled system) • Grommet • Elemental UI • React Suite • React-md • PrimeReact • KendoReact
- 9. Design Tools • Sketch • Component pack • Figma • Collaborative design • Framer • Fast and Responsive • Adobe XD • Collaborative design • Zeplin • Handoff code along with design
- 10. Code • Stick to one IDE • VS Code • Atom • WebStorm • Sublime text • Design+Code IDE • BuilderX • React Studio • Reactide • Handoff • Typescript • Saves a lot of time debugging type issues • npx create-react-app <name> --typescript • Use shorthand • Optional chaining (const highTemperature = response.data?.temperature?.high;) • Null coalescing (const animationTime = settings.animationTime ?? defaultTime;)
- 11. Headstart • Use a boilerplate • React Boilerplate • Next.js (Server side) • Gatsby (Static site) • React Slingshot (React+Redux) • React Admin (B2B) • https://www.javascriptstuff.com/react-starter-projects/
- 12. IDE extensions • Prettier • Formatting • ESLint • Find and Fix problems • Semistandard • JS Standard styling • Peacock • Manage multiple VS Code instances with colored active bar • GitLens • Check code history from IDE • React Extension Pack • Auto code completion templates • Find the right color theme for IDE • Syntax highlighting • Change-case • Change case of variables from myValue to MY_VALUE
- 13. IDE tricks • Sort all lines alphabetically • Useful in constants file • Make color of log statements almost invisible
- 14. Collaborate • Invest in good Communication channels • Zoom • Teams • Slack • Collaborative tools • New release in CodeSandbox • Viscode
- 15. Isolating Components • Storybook • React Cosmos • Styleguidist
- 16. Debug
- 17. Debug • console.log • debugger • Chrome debug tool • VS Code extension • https://remotejs.com/ • Remote App debugging
- 18. Debug CSS
- 20. Browser extensions • Page Ruler Redux
- 23. Browser extensions • CSS Scan • https://getcssscan.com/
- 25. Test • No test • Higher price to pay in long term • Cypress (end to end) • React Testing Library (for testing React components) • Ghostlab • Test on multiple devices simultaneously
- 26. Build • Rollup vs Webpack vs Parcel • Google closure compiler vs babel+uglify
- 27. Deploy • Invest in test env (UAT) • Tools to check PR • Netlify • Zeit • Automate prod deployment • Heroku
- 28. Release • Octopus • Microsoft TFS
- 29. Support • Log when something fails • Next time that log should tell us what went wrong • Don’t add console.log or debugger to prod • Log Rocket • DataDog • Splunk • Application Performance Management tools • AppDynamics
- 30. Learn to Code • Stack overflow Driven Development • Invest time to learn the fundamentals • Udemy • Pluralsight • Wes Bos JS courses • Kend C Dodds on React testing • React Bits by vasanthk
- 31. Learn to Type • Saves a lot of time in long run • if you can type without having to look at the keyboard
- 32. Physical tools • Screens • Single Wide screen over multiple small • Dark mode • Ergonomic Keyboard and mouse
- 33. Physical tools • Do not code on couch!!
- 35. Wholistic life • Take breaks • Regularize sleep and food cycles
- 37. Stay safe!!
- 38. @souvikbasu