Frontend development best practices (React.js).md

Re: selfies project written in CRA and PWA

• Planning of a project

  • The project planning is mostly based on Fullstack Project Planning.

    For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.

• React Project Structure

  • The project structure is mostly based on React Project Structure Best Practices for Scalable Application.

    A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).

• Important methodologies

  • Want to make your React site more performant? Here's a quick checklist
  • Use create-next-app for medium-to-large scale projects, while use create-react-app for small projects and if there are some integrations or libraries that just don't work very well right now with Next.
    Re:
    https://github.com/addyosmani/launch/issues/8#issuecomment-653686670
    https://web.dev/react/#next.js
  • Using absolute (alias) imports in Javascript and VSCode.
  • Use path imports rather than named imports in order to reduce the bundle size.
    We can rely on Tree Shaking but just in case.
    Re:
    https://gist.github.com/anton-karlovskiy/44d143bb7be5e03bf1db53d54f4874fa#gistcomment-3645029
    Usage
    When and how to use tree-shaking?
    minimize bundle => use named or path imports? #20436
    Tree shaking does not work on dependencies of dependencies #6943
    Tree Shaking? #2748
  • Optimize images using tools like squoosh.app and svgomg and generally take the approaches from Optimize images.
    Re (opportunities often recommended by Lighthouse):
    Use WebP images
    Serve images in next-gen formats
    Properly size images
  • Set up Webpack Bundle Analyzer or source-map-explorer and monitor the bundle size of the project.
    Re (Why not use this free service?): bundle-analyzer
  • Use CSS modules to avoid overriding CSS class names, especially in CRA as styled-jsx can be used in Next.js by default.
  • Follow various opportunity recommendations reported by Lighthouse (JavaScript, CSS, Image and Core Web Vitals like LCP & CLS etc).
    Re:
    Fast load times
    Web Vitals
  • (Potential) Regularly monitor the performance by using SpeedCurve and setting up performance budgets.
    Re:
    Use Lighthouse for performance budgets
    The Cost Of JavaScript In 2018
  • Browser Compatibility
    • Screenshot Testing On Real Browsers & Devices via BrowserStack
    • Manifest and Favicon compatible across multiple browser platforms
      Re: Favicon Generator. For real.
  • Tags for social media marketing compatible across multiple social media platforms
    Re: Meta Tags (good at generating), http://debug.iframely.com/ (good at testing), Open Graph Meta Tags: Everything You Need to Know & The Essential Meta Tags for Social Media (background knowlege).

• Coding practices

  • Use consistent coding style.
    Re: Airbnb JavaScript Style Guide
    • Readability
    • Modularity
    • Efficiency
    • Length
  • Use healthy third party packages using tools like bundlephobia, GitHub stars and NPM downloads.
  • Creating and keeping reusable & granular components, utilities and approaches via GitHub gist or Bit, etc.
    Benefits (my own thoughts):
    • productivity
    • upgrading and updating with ease (e.g. adopting better third-party packages)
    • codebase management

      Not all libraries can be easily broken down into parts and selectively imported. In these scenarios, consider if the library could be removed entirely. Building a custom solution or leveraging a lighter alternative should always be options worth considering. However, it is important to weigh the complexity and effort required for either of these efforts before removing a library entirely from an application.

    • collaboration
  • (Potential) Styling
    Re: prefers-color-scheme: Hello darkness, my old friend
  • SVG
    Re: SVGR in Next.js and Adding SVGs in create-react-app
  • Follow the standard design patterns.
    Basic ones:
    • Robust principle
    • Single Responsibility principle
    • Single Source of Truth
    • KISS
  • Comment on the critical points.
    Comment types:
    • TODO: (e.g. keep tracking, enhancement)
    • MEMO: (e.g. logging)
    • RE: (e.g. productivity by later referencing)

• (Potential) Testing
  Re:
  https://testingjavascript.com/
  https://academind.com/learn/javascript/javascript-testing-introduction/
  https://www.youtube.com/watch?v=r9HdJ8P6GQI
  https://www.youtube.com/watch?v=4Fl5GH4eYZ8

• (Draft) Project management (Jira, GitHub issue tracker)

  • Set up Linting and repository management rules at GitHub rather than recommending devs in a team.
  • Feature request
  • Bug tracking
  • Progressive enhancement
  • Communication

• Investigating approach

  • Google search tricks
    Re: HOW TO USE GOOGLE SEARCH LIKE A PRO
  • (Draft) case-studies
    • Movie Browser project
    • cors-anywhere
    • OAuth 2.0 for Client-side Web Applications

• Keeping your eyes on the community activities

  • (Draft) case-studies
    • following industry pros at GitHub (e.g. react-use)
    • following industry pros at Instgram
    • following industry pros at Twitter
    • watching Slack channels (e.g. 11 Useful Custom React Hooks for Your Next Web App)

Should use tailwindcss in combination with https://github.com/ben-rogerson/twin.macro.
Can use https://github.com/rogden/tailwind-config-viewer.

Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage.
This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused.

https://twitter.com/_developit/status/1382838799420514317

Error handling: https://kentcdodds.com/blog/use-react-error-boundary-to-handle-errors-in-react

Kent's stacks: https://twitter.com/kentcdodds/status/1404433042236612612