Analytics Vidhya
Published in

Analytics Vidhya

How to Architect Django Templates

Summary

In this article, I am going to present my approach to design Django Templates in the Django application development. The objective is to keep the UI part of Django application better organized and avoid redundant coding. Django has provided various mechanisms in template engine to help us achieve such goal. In this tutorial, I will walk you through how to make templates easy to maintain as much as possible by using Django built-in template tag block, extends and include.

Dependencies:

1. Python 3.6

2. Django 2.2

3. AdminLTE 3.0.5 (You can check my previous tutorial on this theming library here.)

Preview: Bad architecture of templates

I’ve uploaded a project here to illustrate how messy the templates are. We are going to start from there. Let’s take a look at these two pages, http://127.0.0.1:8000/home/ and http://127.0.0.1:8000/polls/. Their respective html templates are located at home/templates/home/landing.html and polls/templates/polls/index.html. In short, I will call them landing.html and index.html. Each template repeats the sidebar menu, css and javascript libraries. On top of that, there is a giant form in “General Elements” box within that the content is identical. With the growth of apps and urls, this is way out of control.

My Approach

Here is my approach to avoid the “spaghetti code” of Django UI.

Step 1/4: base.html

Breaking down the template into multiple piece, we know except menu and content, everything else is repeatable. We are going to make a base template to hold those common pieces.

Create a folder templates in project folder. Within it, create a base.html. Add all common pieces into it. You can just copy and paste the followings which is nothing but a fraction of codes shared by both landing.html and index.html.

Please be aware that block content_wrapper is used to render custom content for each page.

Step 2/4: Remove redundant common codes

Since we created a base.html in the previous step, there is no need to keep the common codes in landing.html and home.html anymore. We should have results as below.

Step 3/4: Inherit base.html

In order to use base.html as a base template for each page, we need to declare base.html as a “parent” template by using {% extends ‘base.html’ %} at the beginning of the template. On top of that, don’t forget content_wrapper block. Wrap the entire content into that block. We should get result as below.

In landing.html:

{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
<div class="content-wrapper">
. . .
</div>
{% endblock %}

In index.html:

{% extends 'base.html' %}
{% load static %}
{% block content_wrapper %}
<div class="content-wrapper">
. . .
</div>
{% endblock %}

Step 4/4: DRY common small pieces

You may be aware that the same giant form exists in both templates. Almost half of the codes is it. Since this form is reused in two templates, let’s maintain it in one single place where any template can include it.

Create a folder advanced_forms in templates folder. Within advanced_forms folder, create a general_elements_form.html as below.

Remove redundant form codes in landing.html and index.html. Include form by using {% include ‘advanced_forms/general_elements_form.html’ %}. With it set up, here is the final result.

Now, let’s restart project again. Nothing changes on screen. But back the scene, project becomes easier to maintain. Effort will worth down the road.

Here is the snapshot of file schema after we complete the enhancement. I’ve highlighted the templates in yellow.

I’ve uploaded the final project here. https://github.com/slow999/DjangoAndTemplates .

The messy project I used in this tutorial is uploaded here. https://github.com/slow999/DjangoAndBadTemplatesDesign .

I also made a video. Check it out here.

Conclusion

Template is one of the core pieces in web application. Don’t repeat yourself (DRY). Having been working on and leading a great number of projects, I believe that this principle applies on both front-end and back-end developments so that we can make a scalable application. Hope this tutorial answers your question and help your project grow. Stay tuned.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store