ReThinking Django Template: Part 4

ReThinking Django Template Series:

1. ReThinking Django Template: Part 1, Javascript
2. ReThinking Django Template: Part 2, Inline SVG
3. ReThinking Django Template: Part 3, CSS
4. ReThinking Django Template: Part 4, Server Side Component

Introduction

In the previous blog, I already talked about how to use Server Side Component to help keep css in our Django templates clean.

In this blog post, I will keep talking about Server Side Component in Django with more details, review different packages and help you make a good choice.

Server Side Component

Server-Side Component is a modern approach to web development that provides a layer of encapsulation and reusability on top of traditional server-side rendering.

Instead of creating a single, monolithic template for an entire page, you break down the UI into smaller, self-contained components that encapsulate their own logic and presentation.

Key Benefits:

1. Reusability: Build reusable UI elements as Python classes. Use them throughout your Django templates to reduce code duplication and maintain a consistent design.
2. Testability: Because components are simpler code snippet, you can easily write unit tests for their logic and output.
3. Organization: Move complex rendering logic out of your templates and into dedicated component classes. This keeps your templates clean, simple, and easy to read.
4. Separation of Concerns: Components enforce a clear separation between your Python logic and your HTML presentation. This makes your codebase more modular and maintainable for teams.
5. Integration: They work well with modern JavaScript frameworks like Alpine.js and Stimulus.js, enabling you to create dynamic user interfaces with minimal custom JavaScript.

For example, in some of my Django projects, I have below common server side components, and I can easily reuse them in my other projects:

• Button
• Card
• Modal
• Alert
• Navbar
• Avatar
• Badge

What is more, if you do vibe coding with AI assistance, the abstraction layer provided by server-side components acts like a cheat sheet. It allows the AI to better understand the context and finish the task faster using fewer input tokens (less text).

Server Side Component Packages in Django

To make server side componetns work in Django, there are many different ways, next, I will talk about them.

Django-Components

Django-Components is the most popular server side copmonent in the Django community.

It promotes a clear separation between a component's logic (what it does) and its presentation and some syntax is inspired by Vue, the features it provides is very rich compared with other solutions.

Django-ViewComponent

Django-ViewComponent is a library that allows you to create reusable, testable, and encapsulated UI components in Django, it is a port version of ViewComponent from Rails community.

Django-Slippers

Django-Slippers is a lightweight Django library that simplifies building UI components by making HTML template files available as template tags.

Cotton

Cotton is similar with Django-Slippers, it let developer to create component in one HTML file, and the the syntax is heavily inspired by Vue.

Separation Of Concern

Now you already have basic understanding about the server side component solution in Django.

Let's dive deeper with more details.

Django-Slippers and Cotton only supports creating components in a single HTML template file, and some people like this approach since it seems easy at first.

Let's assume we need to create a Button components, which supports different variants and sizes.

1. The final component template file would contains a lot of if else statement (actually this is logic part) since you need to decide which css classes are used according to the parameters.
2. With more logic added to the Button component, then you will get a little messy HTML template file since logic code and presentation code are mixed in one file.
3. Due to the limitation of the Django template syntax, some logic implementation might be very tricky, you might need to create custom template tags or template filter to get it work.

By following Separation Of Concern, I strongly recommend developers:

1. Put component logic in Python component file.
2. Component template is for presentation, just like Django View and Django Template work together to render HTML.

Django-Slippers and Cotton might be easier to get started, but if you want a robust server side component which can grow with your project in the long run, Django-Components and Django-ViewComponent might be better option, because you can put complex logic in Python file, keep component template clean.

Component Preview

Django-ViewComponent provides feature called Preview, which provides an isolated test env for developers to quickly test component, while other packages lack this feature for now.

Developers can even use Factory Boy and Mock to generate test data within seconds and test the component.

What is more, with sister project django-lookbook, developers can build a component library, which has elegant UI, documentation engine and parameter editor.

With this approach, the component's usage notes, design principle and different states can be documented in one place, avoid confusion for team members.

Do One Thing And Do It Well

As I said Django-Components provides very rich features.

For example, Django-Components supports component JS/CSS dependency management, it can help render dependency JS/CSS files when rendering the components.

As for static assets of the server side component, how about this way:

1. Use modern frontend bundle tools such as Vite to bundle the JS/CSS.
2. Use frontned tech such as Alpine.js or Stimulus.js to write JS code for the component.
3. When component HTML is rendered, the Alpine.js or Stimulus.js will detect and run client side init function automatically.
4. So server side compnent package do not need to care about static assets, just focus on component rendering and do it pretty well.

Actually, if you take a look at Laravel and Rails, the server side component packages in these two communities do not handle static assets., why? because this issue can not be solved well by server side component packages themselves, however, it can be fixed by modern frontend techs.

I also believe some features of Django-Components make it a little complex and might confuse people in some cases (some template syntax is heavily inspired by Vue.js).

Ok, next let's take a look at Django-ViewComponent.

Django-ViewComponent is a fork of Rails ViewComponent package, which is built by Github.com and currently is still used on Github.com.

The pattern and features of the ViewComponent has been proven solid by large projects such as Github.com and other succesful startups in the Rails community, so Django port Django-ViewCompnent just follow the design while keeping it do one thing and do it well for Django developers.

Ecosystem, AI

For now, I do not see much large projects which using Django-Components, Cotton and Django-Slippers, but things might be interesting about Django-ViewComponent

Because there are many high quality Rails projects on Github, since ViewComponent is the single server side component solution in Rails, AI has learned it very well.

So developers can follow the pattern and the best practice of ViewComponent in Rails, and then use AI to quickly get it work in Django. (Based on my experience, it is very easy to transport Ruby class to Python class and ERB template to Django template)

Comparison

Which One Should I Use?

Even Django-Slippers and Cotton might be easier to get started, I still recommend developers to follow Seperation Of Concern rule and use Python, HTML to create server side components intead of using single HTML template.

As for Django-Components and Django-ViewComponent, developers can check the docs of the two packages and pick one they prefer based on features they provide.

Conclusion

Server-side components represent a significant step forward in Django template development, offering better code organization, reusability, and maintainability compared to traditional template approaches.

While there are multiple packages available, the key is choosing one that aligns with your project's long-term goals. For simple projects, template-only solutions like Cotton or Slippers might suffice. For larger, more complex applications, consider packages that separate logic from presentation, such as Django-Components or Django-ViewComponent.

If you have any questions, please feel free to contact me.

Reference

Below are links relevant with ViewComponent.

1. Rails ViewComponent
2. django-viewcomponent
3. spring-view-component
4. View components in ASP.NET Core

Laravel supports createing server side components in one file or two files.

Creating Blade Components in Laravel