Technology stack

Year review

Overview

• Theme system based on Bootstrap
• Better project structure
• Smaller components
• Closures for event handling
• Better action states handling
• Other improvements

Theme system

It should be based on Bootstrap.

 

This will enables us to:

• Implement a design that reflects our brand identity
• Easily change the appearance of the UI
• Have the same look and feel for all the components
  • Bootstrap, 3rd party and our own

Better project structure

Migrate to a tree based project structure

 

Constructed around the pages:

• pages - should be the top level components
• widgets - generic components, like buttons, tables
• components - shared components

 

Move things to the page folder:

• actions/store/reducers
  • the Redux store should mirrors this structure
• assets - like images

Smaller components

• linting limit to 300 lines per file
• more generic components, more narrow in scope
  • if a construct is used in more than 2 places, we should create a generic widget out of it
• will result in more components, simpler components
  • use the tree structure to keep components closer together
• use the Redux store to communicate between components, to avoid:
  • passing props needed only by child components
  • passing callbacks to communicate with the parent

Closures for event handling

• this.handleClick.bind(this)

  • will create a new function for each render
  • we lose the static typing because of bind()

• this.handleClick = this.handleClick.bind(this)

  • does the job, but is convoluted

Better action states handling

Tie multiple action states to the component that called them

 

Basic requirements:

• use/extend the  redux-promise-track
  • ​but make it component aware
• should not introduce more complexity
• at least explore the idea of try catch

Other improvements

• validation framework
  • with the support UI components that display the messages
• monitor errors in production
  • use an error logging and aggregation platform like Sentry
• use a library for formatting the strings, for plurals and stuff
  • https://github.com/blakeembrey/pluralize
  • https://github.com/i18next/i18next
• use Symbols instead of stings for action ids
• write unit tests
  • but start with the smallest components, like widgets
  • concentrate on utility functions, that are reused