Download to read offline
More Related Content
Similar to Super tools to boost productivity in React dev env!
Super tools to boost productivity in React dev env!
- 1. Super tools toboost 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 DesignCode Debug Test Build DeployReleaseSupport
- 5. Prototype • Best tool:Pencil and Paper • Simple paint tools like MS Paint • React Proto • Mural
- 6. Design • Don’t spendtime in logo design yourself • Hire a professional designer
- 7. Design Decisions • Don’treinvent 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 toone 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 aboilerplate • 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 • Sortall lines alphabetically • Useful in constants file • Make color of log statements almost invisible
- 14. Collaborate • Invest ingood Communication channels • Zoom • Teams • Slack • Collaborative tools • New release in CodeSandbox • Viscode
- 15. Isolating Components • Storybook •React Cosmos • Styleguidist
- 16.
- 17. Debug • console.log • debugger •Chrome debug tool • VS Code extension • https://remotejs.com/ • Remote App debugging
- 18.
- 19.
- 20. Browser extensions • PageRuler Redux
- 21.
- 22.
- 23. Browser extensions • CSSScan • https://getcssscan.com/
- 24.
- 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 vsWebpack vs Parcel • Google closure compiler vs babel+uglify
- 27. Deploy • Invest intest env (UAT) • Tools to check PR • Netlify • Zeit • Automate prod deployment • Heroku
- 28.
- 29. Support • Log whensomething 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 • Donot code on couch!!
- 34.
- 35. Wholistic life • Takebreaks • Regularize sleep and food cycles
- 36.
- 37.
- 38.