Design Principles

Separate Concerns

  • Each file and function should have only one concern.
    • For instance, a React Component should only contain details about how to render the component. Business logic, validation, instrumentation, analytics, etc should be defined elsewhere and composed in where necessary.
    • Decouple all Logic from your Presentation

Think Functionally

  • Always use Pure Functions to avoid side affects. Everything a function should need should come in as parameters. React Components should be treated as a pure function as well.
  • Embrace Higher Order Functions. These are functions that take in other functions and/or return functions which leads to clean composition.
  • Avoid class iteration with keywords like for. Instead use map, reduce, filter and other functions introduced in more recent versions of JavaScript. Libraries such as lodash will also give you a number of functional utility methods.
  • Embrace immutability and avoid mutating data. Make use of const and other constructs in ImmutableJs to assist development.
    • JavaScript today has no native Immutable data types that use structural sharing, so be careful with immutability. You may end up using a lot of memory. Usually this isnt a big deal with small data types. But using Persistent Data Structures from libraries like ImmutableJs will allow a certain level of structural sharing.

results matching ""

    No results matching ""