6 Principles for Scaling Frontend Application Development

Malte Ubl, CTO of Vercel and former Google engineer, gave a talk on the Principles for Scaling Frontend Application Development. He shared six principles that can help teams build and maintain scalable frontend applications.

1. Tear down the barriers

When scaling, teams often need to share components. In the past, NPM was a popular way to manage shared components, but it can be cumbersome and difficult to manage. Malte recommends using a monorepo, which can make it easier to share components.

2. Make it easy to delete code

Large codebases can become difficult to maintain because new developers are often afraid to delete unused code. This is because they are worried about breaking other parts of the codebase.

To mitigate this problem, Malte recommends using colocation as much as possible. For example, using TailwindCSS will keep CSS and components together. This makes it easier to delete code without worrying about breaking other components.

3. Migrate incrementally

Large-scale migrations are often risky and can fail. If a problem is found, the entire migration may need to be rolled back. Gradual migrations can take longer, but they can be less risky. To justify the time investment, it is important to provide early examples of the value of the migration.

4. Always get better, never get worse

To maintain code quality, teams can use tools such as linters. The earlier these tools are introduced, the better. This will ensure that new code is checked for quality early on, and it will also make it easier to introduce new tools in the future.

5. Embrace lack of knowledge

New team members will always lack some context about a large codebase. As a team leader, it is important to accept this fact and create a system that allows new members to do the right thing even if they lack background knowledge. Linting tools, as mentioned in the previous point, are one way to do this. New team members do not need to have context about the codebase, but the system will automatically alert them if they write code that does not meet the team's standards.

6. Eliminate systematic complexity

Large companies like Google often have version skew problems. For example, the backend may make a change, but the frontend may not have been updated yet. This can lead to problems between the two systems. This is not a problem with a single component, but it needs to be solved systematically. For example, a mechanism can be designed to ensure that the frontend always requests the corresponding version of the backend.