Designing very large (JavaScript) applications
Very Large JS App = a lot of developers + large codebase
How to deal with a lot of developers?
empathy
What is a ==senior engineer==? A team of senior engineers without junior engineers is a team of engineers
- being senior means is that I’d be able to solve almost every problem that somebody might throw at me.
- make the junior engineers eventually be senior engineers.
what’s the next step of a senior engineer?
- senior: “I know how I would solve the problem” and because I know how I would solve it I could also teach someone else to do it.
- next level: “I know how others would solve the problem “
good programming model
how people write software, e.g. react/redux, npm. Here comes a model that affects all large JS apps - code splitting.
- People have to think what to bundle and when to load
- ==route based code splitting==
- But, what if it is not enough?
- lazy loaded every single component of our website
- How does Google do? split them by rendering logic, and by application logic. ==simply server side render a page, and then whatever was actually rendered, triggers downloading the associated application bundles.== Google does not do isomorphic rendering - no double rendering
How to deal with a large codebase?
==Code Removability/Delete-ability==
e.g. CSS is bad in code removability
- one big css file. There is this selector in there. Who really knows whether that still matches anything in your app? So, you end up just keeping it there.
- People thus created CSS-in-JS
==avoid central configuration of your application at all cost==
- Bad example
- central routes configuration
- central webpack.config.js
- Good example
- decentralized package.json
avoid central import problem: router imports component A, B, and C
- to solve this problem, do ==“enhance” instead of “import”==
- However, developers still have to decide when to enhance and when to import. Since this might lead to very bad situations, we make “enhance ” illegal, nobody gets to use it–with one exception: generated code.
avoid base bundle pile of trash
- e.g. base bundle should never contain UI code
- Solve this problem with forbidden dependency tests
- ==most straight forward way must be the right way; otherwise add a test that ensures the right way.==
Be careful with abstractions
We have to become good at finding the right abstractions: Empathy and experience -> Right abstractions