Not very long ago I gave a talk about the clean architecture on frontend. In this post I'm outlining... Tagged with typescript, react, architecture.

Dev.to is a community platform for developers, offering resources, discussions, and networking opportunities to empower individuals in their coding journey. Developers can learn new programming languages, frameworks, and tools, engage in discussions on best practices, and share their experiences with fellow developers to enhance their skills and grow their professional network.

The Clean Architecture is a way of separating responsibilities and parts of functionality according to their proximity to the application domain. It is often referred to as a three-layer architecture, because the functionality in it is divided into layers. In this post we'll talk about what the clean architecture is in general and get familiar with such concepts as domain, use case and application layers. Then we'll discuss how this applies to the frontend and whether it's worth it at all.

Clean Architecture on Frontend

What in real projects could be more complicated

Clean Architecture is definitely not “clean”, it makes your app more complex and hard to change. Use Vertical Slice Architecture instead.

Good article. Clean Arch. and DDD are very important for complex applications.
I wrote a small Vite plugin to prevent importing app-layer logic into my domain layer. In case it’s useful for someone.
<pre><code class="language-ts">import path from &#x27;node:path&#x27;
import type { Plugin } from &#x27;vite&#x27;

/**
 * Vite Plugin to restrict certain imports based on configurable rules
 * @example
 * ```ts
 * viteRestrictImports({
 * targetDir: &#x27;app/lib&#x27;,
 * rules: [
 * {
 * targetDir: &#x27;app/lib&#x27;,
 * test: (importedModuleName) =&gt; importedModuleName.startsWith(&#x27;@/&#x27;),
 * message: &#x27;Importing from \@/ is not allowed under app/lib&#x27;,
 * },
 * ],
 * })
 * ```
 */
function viteRestrictImports(options: { targetDir: string; rules: RestrictionRule[] }): Plugin {
 return {
 name: &#x27;vite-plugin-restrict-imports&#x27;,
 enforce: &#x27;pre&#x27;,
 transform(code, id) {
 if (!id.includes(options.targetDir)) return null // Only check files in targetDir

 const violations: string[] = []

 const normalizedId = path.normalize(id)
 const importRegex = /import\s+.*?[&#x27;&quot;](.+?)[&#x27;&quot;];?/g
 let match

 while ((match = importRegex.exec(code)) !== null) {
 const importedModuleName = match[1]

 for (const rule of options.rules) {
 if (rule.test(importedModuleName)) {
 violations.push(
 `\n\n🚨 Import restriction violated: ${rule.message}\n - Importer: ${normalizedId}\n - Importing: ${importedModuleName}\n\n`,
 )
 }
 }
 }

 if (violations.length &gt; 0) {
 throw new Error(violations.join(&#x27;\n&#x27;))
 }

 return null
 },
 }
}

/**
 * Type definition for a restriction rule
 */
interface RestrictionRule {
 targetDir: string
 test: (importedModuleName: string) =&gt; boolean
 message: string
}

export default viteRestrictImports
</code></pre>

I totally agree, architecture articles that cover the front end are very rare, so this is a real gem.
Also, shoutout to @hgraca for his amazing article and graphics.