drf-react-template-framework: How we stopped rewriting React forms

Here at Yoyo, we have a B2B management software called Engage. Engage gives merchants powerful insights over spending behaviour and empowers them to tailor their loyalty programmes as they see fit. However, due to it’s complexity, this results in even simple things (like setting up a Point Reward), being a multi-stage epic saga:

This doesn’t include the manual operations approval process

In the last 12 months, Yoyo has embarked on a journey to empower SMBs (small medium businesses) in a number of regions to enable loyalty and rewards programmes out of the box. This required a refreshed look at our business processes and technology platforms, making them more agile in this booming sector. The existing workflows we had for the typical larger businesses were serious overkill for what our smaller and more agile clients required.

On top of this we’ve also just rebranded, so for both those reasons we needed to rebuild a lot of our B2B offerings; signalling to our frontend web team that there’d be a lot of boilerplate boring form building going on (and they were somewhat ambivalent about the prospect).

To avoid this, we developed drf-react-template-framework. This allowed us to build React forms directly from Django Rest Framework serializers, with a much smaller React code footprint.

On the React side: the library uses react-jsonschema-form to generate the bulk of the React code, while on the Django side our new framework turns the DRF serializers into valid JSON Schema.

Now to generate a new form for creating Point Rewards all we have to do is:

1. Modify the serializer with additional metadata:

2. Modify the viewset with a mixin:

3. Add a dash of React code (this is pure react-jsonschema-form, schema and uiSchema come from the DRF API):

And you end up with something like this (CSS and additional widgets developed seperately):

If you’re using DRF anyway, you essentially get the frontend form for free (DRF actually has built in functionality for HTML, but not for React).

Given the ease of use of this new system, we were able to leverage our backend developers as defacto frontend developers to produce an entirely new B2B Engage offering in a matter of weeks (pleasing the project managers that had scoped months for the project).

Thanks to the flexibility of react-jsonschema-form we’ve been able to create hugely complex forms using drf-react-template-framework, including adding tables to the package for list views. We’ve even begun to rewrite the older complex Engage flow in the system to better serve our larger clients.