Skip to content

Latest commit

 

History

History
53 lines (37 loc) · 2.11 KB

README.md

File metadata and controls

53 lines (37 loc) · 2.11 KB

Big data, little client

Common Frontend Performance Issues:

1. GZIP

2. Processing data in JS

  • use the devtool performance profiler to identify which parts of your code are inefficient
  • use date-fns if parsing dates instead of moment
  • take care with FP and currying
  • spread operator is faster than object.assign

3. Use reselect/memoize-one/memo/purecomponents for calculations

  • the efficiency of a view layer like react is all about filtering out unnecessary changes
  • common gotcha - mapping/filtering/reducing data sets and creating new arrays
  • instead use reselect or memoize-one
    • memoize-one => good for use within render component, needs to be initialized within each component
    • reselect => good for use in a connected component
  • great snippet for understanding what props changed: https://gist.github.com/sqren/780ae8ca1e2cf59050b0695c901b5aa3

4. Cool libraries for generating views / processing lots of data in the client:

  • date-fns - fast date processing
  • crossfilter - dimensional data visualisation
  • react-virtualised - render huge tables / views using virtualisation
  • d3 - make beautiful visualisations, also has a lot of data processing utilities
  • rx.js - js data streams - good for debouncing data out of websockets
  • console.dog - important console tool

5. Want free distributing processing?

  • Use the clients browser!

Running the example:

Dependencies

  • node
  • yarn

Running