HTML vs DTL
HTML, A Rite of Passage
Most developers know the feeling.
Downloading VS Code.
Opening a new file.
Writing “index.html” —,
…and then painfully looking up the syntax for a HTML skeleton just so that they can print <h1>Hello, World!</h1> to practice.
HTML is foundational. It’s important and powerful. People who are skilled at HTML foundationally, tend to excel at Web Development in certain areas over others who might be missing that knowledge. But, there’s no doubt that HTML is a painful technology to learn and use because it kind of goes against everything that developers strive for. Efficiency and optimization.
Now I'm not trying to say that HTML is a bad language by any means. My point is efficiency.
Just to write <h1>Hello, World!</h1>, the base-minimum syntax would need to be...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>HTML is considered a beginner language for a reason. It doesn't require much logic. It's all static. It's easy to wrap your head around. There's no hidden meaning to 2+2=4 (even though in Math, there might be). HTML also gives beginners the opportunities to accelerate their learning and "look-into" these tags that are necessary for their HTML document to even function correctly. However, my gripe with HTML, simply put, is that HTML doesn't teach you how to think like a developer. It doesn't teach you how to "talk to a computer". It doesn't teach you how a computer may quantify information you give it. It's an outlier in terms of complexity and how what you learn with HTML is not really transferrable to other languages.
Now, I'm really not trying to hate on HTML. HTML is a super important language for the Web to function. It's how the content on every single webpage is shareable and readable. Even though it's a simple language, it has helped millions of developers, one-step at a time, as a gateway to higher intensity understanding of the technological ecosystem. I just wanted to share with you all a cool thing I've been learning that I think outshines HTML and rightfully so.
Django Templating Language (DTL)
Django Templating Language is Django's "version" of HTML.
(I use quotes here because it doesn't replace the functionality of HTML, it just abstracts away additional functionality that helps build the HTML by removing redundancies and adding in syntactical logic that we are familiar with from most programming languages.)
DTL allows us to "inherit" from other HTML files.
DTL's content is modular and injectable into any other HTML file.
DTL allows us to create dynamic HTML pages with the use of Django blocks or Django Tags.
DTL allows us to simultaneously do complex logic / data retrieval and visualization of that data.
DTL Inheritance
When using Django, we have the opportunity to stick with regular HTML to display our data or use Django's inherent Templating Language which comes default out-of-the-box. The easiest way to show an example of Django HTML / Template Inheritance we can start with a "base.html" file, which is a file that all other files can inherit to have a working HTML skeleton.
base.html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="{% static "base.css" %}">
</head>
<body>
{% block content %} {% endblock %}
</body>
</html>
{% comment %} Color Scheme https://coolors.co/0b132b-1c2541-3a506b-5bc0be-ffffff {% endcomment %}In this code snippet, we have a "base.html" file which is essentially just a regular HTML skeleton with the addition of Django Blocks.
Django Blocks are added functionality into a Django HTML file that allow for the content to be dynamically changed.
{% block title %} {% endblock title %}{% block content %} {% endblock content %}
When we inherit from "base.html" we can extend these blocks into our new HTML files to change the content only in those specific tags.
The {% block title %} is inside the <title>
The {% block content %} is inside the <body>
So now instead of having to rewrite that HTML skeleton, we can just instead...
Inherit from "base.html"
Update the data in the Django blocks to update the content in the HTML <title> and <body> tags respectively.
{% extends "base.html" %}
{% block title %} Harry Potter {% endblock %}
{% block content %}
<div id="main">
<div id="main-top">
<h1> Harry Potter and the Goblet of Fire</h1>
</div>
<div id="main-bottom">
<p>Author: J.K Rowling</p>
</div>
</div>
{% endblock %}DTL's Modularity
DTL also allows us to be modular with our content. Let's say we have a header that we want to include inside most of our HTML pages. With traditional HTML, you'd have to copy-and-paste the <header> inside each HTML where you'd want the header to show but with DTL we can just inject in specific content using the "includes" tag.
We can have a "header.html" file externally and inject it inside another HTML file.
# This is the external header.html
<header>
<nav>
<a href="{% url "home" %}">All Pokemon</a>
</nav>
</header>So the final HTML file would look like this. The "include" tag that comes with Django allows any HTML file we make to be modular with any future HTML file we may make. Pretty cool.
# This is the main pokemon_detail.html
{% block content %}
{% include "includes/header.html" %}
<div>
<img src="{% static harry_potter_image %}">
<h1>Harry Potter and the Goblet of Fire</h1>
<h3>Author: J.K Rowling</h3>
<h4>Rating: 4 Stars</h4>
</div>
{% endblock %}This is the same as directly inserting the <header> into the main HTML file which would look like this...
{% block content %}
<header>
<nav>
<a href="{% url "home" %}">All Harry Potter Books</a>
</nav>
</header>
<div>
<img src="{% static harry_potter_image %}">
<h1>Harry Potter and the Goblet of Fire</h1>
<h3>Author: J.K Rowling</h3>
<h4>Rating: 4 Stars</h4>
</div>
{% endblock %}DTL with Dynamic Data
Another cool feature that DTL offers us developers is the ability to take dynamic data and inject it into our HTML.
pokemon_list = {
1: {
"name": "Primeape",
"type": ["Fighting"],
},
2: {
"name": "Electabuzz",
"type": ["Electric"],
},
3: {
"name": "Lapras",
"type": ["Water", "Ice"],
},
4: {
"name": "Gengar",
"type": ["Ghost", "Poison"],
},
5: {
"name": "Umbreon",
"type": ["Dark"],
},
6: {
"name": "Dragonite",
"type": ["Dragon", "Flying"],
}
}Let's say we have a Pokemon application where we are showcasing our favorite Pokemon team. To showcase this data using Django, we only need two different HTML pages.
Pokemon List HTML Page
Pokemon Details HTML Page
The first page would be a list of all the Pokemon with <a> tags surrounding each Pokemon name, which we can dynamically render like this without having to place six <li> tags.
{% block content %}
<h1>My Ultimate Pokemon Team</h1>
<div>
<ul>
{% for key, pokemon in pokemon_list.items %}
<li><a href="{% url "pokemon_details" pokemon_id=key %}">{{ pokemon.name }}</a></li>
{% endfor %}
</ul>
</div>
{% endblock %}Sidebar…
If we wanted to do this same thing in HTML, even with special IDE efficiencies, we'd have to write out each <li> on the HTML page resulting in more manual work. The special "for" block in Django allows us to add this data dynamically. Just another great example of Django's efficiencies.
# We don't want to do this
<h1>My Ultimate Pokemon Team</h1>
<div>
<ul>
<li>Primeape</li>
<li>Electabuzz</li>
<li>Lapras</li>
<li>Gengar</li>
<li>Umbreon</li>
<li>Dragonite</li>
</ul>
</div>Continuing:
After this data is rendered correctly, we can dynamically create urls, corresponding to the proper ID of the Pokemon. This way, we only need a single other HTML page, "pokemon_details_page.html" which we can dynamically update the tags within that page based on the data we are trying to access corresponding to the ID of the Pokemon in the mock data.
{% block title %}{{ pokemon_name }}{% endblock %}
{% block content %}
{% include "includes/header.html" %}
<div>
<img src="{% static pokemon_image %}">
<h1>{{ pokemon_name }}</h1>
<h3>{{ pokemon_type }}</h3>
<h4>{{ pokemon_description }}</h4>
</div>
{% endblock %}Simultaneous Data Retrieval and HTML Injection
Most of the time when we are building Web Applications, especially medium-to-bigger sized applications, we would most likely have our data stored inside of a database.
SQLite comes default out-of-the-box with Django, but Django can be paired with any other type of database that you prefer with the right tweaking.
Django Templating Language is super cool though in how it can behave behind the scenes. Inside the methods that Django uses to respond to specific HTTP requests, like GET or POST, Django can, on the fly, retrieve data, cache data for later, and inject data into the HTML file that we specify using Python. Afterwards, we can then dynamically add that data to our HTML files.
class PokemonDetailView(View):
def post(request, id):
try:
pokemon = Pokemon.objects.get(pk=id)
except:
raise Http404()
return render(request, "pokemon_app/pokemon_detail.html", {
"pokemon_name": pokemon.name,
"pokemon_description": pokemon.description,
"pokemon_type": pokemon.types,
})
django
{% block title %}{{ pokemon_name }}{% endblock %}
{% block content %}
{% include "includes/header.html" %}
<div>
<img src="{% static pokemon_image %}">
<h1>{{ pokemon_name }}</h1>
<h3>{{ pokemon_type }}</h3>
<h4>{{ pokemon_description }}</h4>
</div>
{% endblock %}Conclusion
All in all, DTL is pretty neat and it's making learning Django as part of my Web Development journey pretty fun because of it's modularity. Thinking about the best way to define, retrieve, or inject information to be as efficient as possible is a fun challenge and in the examples i've shown above, it's apparent that DTL makes writing HTML code much more efficient, inherently incorporating one of the most fundamental laws of programming there is in every line, "Don't Repeat Yourself."
Just for clarification, I was talking about the Python Backend Server-Side Framework "Django", not the badass fictional character.
