Posted on: 06/06/2017
Following the launch of Wilderness Now I wanted to talk about the approach Pete Goodman and I took integrating a component based frontend with Django. We’ve put together an example project on Github that shows all of it in practice.
Each component in our library is a distinct part of a layout that is encapsulated into it’s own module. A component’s HTML is written using Django’s templating and each component is included into a page template and passed data to customise it. For example:
A component is often a representation of data held within a model or a group of models within our Django application. However the component may only need a subset of the model’s data and potentially data that is generated dynamically (e.g. an absolute url).
So to map a model to the data expected by a component we used serializers from Django Rest Framework (DRF). This may seem odd at first, as DRF serializers were designed to work with a REST API and we’re not using one here. But if you look at what a serializer does, they fit perfectly for the job of mapping models to components.
More on: Django Rest Framework Serializers
Using serializers also help us achieve our Don’t Repeat Yourself (DRY) principles as it means we can create one serializer per model/component combination and reuse them across different Django views.
Here’s an example serializer that maps an
Article model to a component called
Within our Django view we can then simply load the data from the DB, serialize and pass to the context like so:
Our view context now has the data in the exact structure our
ArticleThumb component expects and we just need to loop over
articles to generate the HTML we need:
See a full example Django application on Github: https://github.com/madebycomrades/django-component-library/tree/master/dcl/articles
By creating an abstract component seralizer we can also centralise functionality that appears across all component serializers. We found a lot of our serializers need to resize an image for a thumbnail so we added a generic approach for that:
Each serializer that needs to use this can then just specify
src in its fields and customize the thumbnail properties.