:heart: React

Things I've learnt — Q4 2019

January 28, 2020

22 things in random order.

Mirage - Mocking APIs

TLA+, Alloy - Verify requirements with formal methods

TypeScript is not a sound type system

Parallelized Decision Making

Event sourcing and microservices are hard

Immutable.js - Functional Javascript from Facebook

QuickCheck: Property Based Testing in Javascript (aka auto-generated test inputs covering [hundreds of] edge cases)

Expo supports all platforms

Executable requirement specifications

UI Before API

Proptypes should be immutable

  • Proptypes can be chained up (the parent imports the children proptypes and default props) in React but makes Storybook crash randomly
  • With import proptypes lose their immutability, their structure becomes dynamic (depending on children proptypes) instead of being static (hand written; children proptypes copy/pasted into parent proptypes)
  • Neither approach is ok => there is a need for a data layer (Component.data.js) which imports children proptypes and generates static proptypes for the parent

AirBnb custom Proptypes

Describing data and services (API) with standards is in infancy

Although there has been a vast amount of effort in the semantic web services field, the approaches did not gain too much adoption outside of academia, mainly due to lack of concrete incentives and steep learning curves.

Co-location pays off

Component.js - the main file
Component.features.js - the requirements as executable specifications
Component.tests.js - tests
Components.stories.js - Storybook tests
Component.data.js - data types (for special cases)
Component.css.js - styles (for special cases)
Component.md - documentation
Component.api.md - api doc generated from code comments
Component.lang.xx-xx.js - internationalization

Split components into independent modules

  • Even in a relatively small app (SAAS providing searching/filtering information) the number of components can grow up around 100
  • To reduce /components complexity we can split it into /components/saas and /components/search since both of them are standalone (even reusable) modules
  • Clear separation means all components inside a module are importing components from the same module only. For example /saas/pricing component imports components only from /saas and no components from /search.

Cucumber.io is the Github for tests

Refactoring - The rule of 3

  • One needs at least 3 use cases before refactoring code / extracting reusable parts / trying to generalize a solution

shortid - For list keys in React

Skeletons and strategies for React hooks

JSON form generators are all buggy

react-admin useful only for CRUD resources

Bit.dev is the Github for React packages

  • https://bit.dev/
  • Package any React component and clone it, fork it, pull it, push it like code on Github.


To React with best practices. Written by @metamn.