WTF Is Code Extraction
By #MiškoHevery (Builder.io / #Qwik)

We are full-stack developers! That means we write both client and server code. But where should we place the server and client code? Conventional wisdom says that we should put them in different files. Except, it is not so simple; we also have code that runs both on the server and client. After all, we do Server-side rendering (SSR), so most of our client code also runs on the server.

I want to challenge the conventional wisdom and convince you that there is an existing trend of putting server and client code together and that it is better. Let’s call it: “code collocation.”

The idea of placing server and client code together is not new, and it is already happening in NextJS/Remix/SolidJS.

But we have a problem to solve. We need to provide code to the server and code to the client, and as of right now, server code can’t access the DOM API and client code can’t read server dependencies such as databases. So there needs to be a way to separate the code.

The act of separating the code and creating server and client code bundles is called code extraction. Three different strategies starting with the most basic to advanced ones, are:
- Export extraction
- Function extraction
- Closure extraction

Let’s dive into them.

🔥 Follow @javascriptdaily 🔥

https://www.builder.io/blog/wtf-is-code-extraction