My Journey with SaaS Hammer

Author

My name is Michael Yin, and I am a full stack developer who primarily uses Django and modern frontend technologies to build web applications.

In the past years, I also published some courses and ebooks on Wagtail CMS and Celery on platforms such as testdriven.io and leanpub.com.

Pain Points

During my career, I have heard many complaints from other Django developers in the community. Some of them are:

1. Unlike other frameworks such as Ruby on Rails or Laravel, Django does not have a built-in way to integrate modern frontend technologies quickly.
2. Is there a solid way to help organize frontend logic code in Django without touching heavy frontend technologies such as React or Vue?
3. What if developers prefer a smooth evolution of the frontend code instead of a complete rewrite and implementing a decoupled architecture?
4. Is there a better way to bring server-side components to Django so developers can reuse template code more efficiently?

My Journey

Actually, I also had the same pain points as other Django developers, so I decided to find a way to solve them instead of complaining:

Frontend

I researched mainstream frontend bundling tools and launched the open-source project python-webpack-boilerplate.

• It can bring modern frontend tooling to Django and Flask within minutes.
• After setting it up, developers can quickly use the npm command to install other frontend packages.
• It has a code linting feature which helps developers write clean frontend code.
• It supports Tailwind CSS, Bootstrap, and SCSS out of the box.
• This project is inspired by Rails Webpacker and Laravel Mix. Although it is not official, many developers have benefited from it.

Hotwire

As for JavaScript solutions, although many Django developers like to use Alpine.js + HTMX due to its simplicity, I did not choose it because I wanted a more robust solution proven solid by large startups and projects. My answer is Hotwire, which is built by the Ruby on Rails team:

• The Rails framework and its community have good taste and have created some robust frontend solutions (Less, Sass/SCSS, CoffeeScript, all created in the Rails community). These solutions have supported many startups in growing from zero to hero.
• Hotwire is backend agnostic, making it compatible with any backend language. As long as your server can render HTML, you can incorporate Hotwire into your project.
• You might not know that Hotwire is currently still used on GitHub.com.

Hotwire + Django is a powerful combination that offers a simple and productive way to build scalable SaaS.

The ecosystem around Hotwire provides a wealth of resources and tools to support developers in their frontend journey.

If you want to know more about Hotwire, please check Combining Rails Hotwire with Django to Ship your SaaS Faster.

Server Side Components

When building projects using Wagtail CMS, the most thing I like is the StreamField feature, which can be seen as server-side components. It also inspires me to bring a generic server-side component solution to Django.

After researching solutions in other frameworks (Laravel Blade Components, Rails ViewComponent), I found the most promising solution is Rails ViewComponent. I ported it to Django and built a project called django-viewcomponent.

With the sister project django-lookbook, developers can easily build server-side components and component librariy for Django.

The below video showcases a user interacting with the button component, demonstrating its dynamic input capabilities. Developers can build similar component librariy in Django:

Cleaner Django Template

Many Django developers can write clean Python code, while at the same time writing messy Django template code.

A Django template mixed with long Tailwind CSS classes, JavaScript code, and HTML makes it hard to read and maintain.

• Use server-side components to encapsulate the HTML and CSS code so that you can reuse the component in different places.
• Do not put JavaScript code or similar code directly in Django templates. Instead, write code in JavaScript files.

Since I chose Hotwire, I only set data attributes on HTML elements, which makes the template clean and easy to maintain.

High Productivity

• The ecosystem around Hotwire provides a wealth of resources and tools to support developers in their frontend journey.
• With Django's extensive documentation, rich ecosystem of third-party packages, and active community support, developers can leverage a wide range of tools to enhance their backend development.
• With pre-built components in the component library, developers can quickly build and customize their applications without having to start from scratch, saving time and effort in the development process.

How I Built SaaS Hammer

I originally created SaaS Hammer as a Django-based SaaS boilerplate to explore faster ways to build modern web apps, initially for personal use.

Later, I launched it as a product to help other developers who want to build their own SaaS products using Django and Hotwire, just like me.

• SaaS Hammer already contains all the features you need to build a SaaS product, including user auth, user profile, billing, and more.
• SaaS Hammer contains a set of pre-built components built with Tailwind CSS and JavaScript, which can save you a lot of time when building UI.
• SaaS Hammer also includes a set of Django form widgets (such as datetime pickers, searchable selects, etc.), you can directly use them in your Django form to improve the user experience.
• SaaS Hammer has detailed documentation and tutorials to help you get started quickly.

You can Sign up for free and check it out. After purchasing the product license, you can get the source code and technical support.

If you have any question, you can also get my email from my GitHub.

Happy coding! 🚀