This article will describe an approach for getting backend developers writing frontend code; specifically, how Python backend developers who are used to writing Django apps can write frontend as well using React. It will show Django and React in action, including how familiar their syntax are and how well they play together. Although this article is Python-focused, it may be helpful for any other backends as well.
Django in Action
Django is a Python web framework which comes with a lot of libraries for database management, cache systems, middlewares, and more. Django follows a variation of the MVC pattern (Model View Controller) which is called MTV (Model Template View), meaning that, a developer commonly will start writing a model, then a callback (the View) which connects to a path, and then a template for presenting data. The development in Django seems to be model-centric: a model in Django represents a persistence entity, like books, people, cars, etc. Something nice for backend developers is that models and views are written as classes (functions may be used as well), so you can architecture your web app using OOP.
Let’s define a model task which has as properties a name and a status.
Notice how the model task extends from an internal class called models.Model that provides all the tooling for persistence. Notice also that there are properties that map to a columns in a database table (SQLite by default) and that there are methods that give a particular functionality to the model (apart from the features it receives in the inheritance chain). For instance, is_completed method returns in human language whether or not a task is marked as completed.
In the same way, a view for listing the tasks can be defined as:
This one in particular is a Class Base View, which renders a list of objects from a given model. With the view already defined, it is possible to connect a route writing a path’s rule like:
Here, it was defined that when the url ends with the tasks/ string, then the TasksListView will be executed; meaning it will get the list of tasks from the database and then, it will make that list available in a template located in the subfolder tasks/task_list.html. So we can print them as:
Backend Writing Frontend: ECMAScript 6 to the Rescue
IOD is a content creation and research company working with some of the top names in IT.
You can be too! JOIN US.
React in Action
React is a library created by Facebook focused on building interfaces. One of its major advantage is the performance offered by using a virtual DOM. React uses a separation of concern approach through a concept called component, a component is a function or class which represents a piece of the UI interface at the level of data and behavior. Another benefit of React is that you can use ECMAScript 6 syntax on it. For getting a better understanding of the library, please check the official tutorial.
Let write again the task class using React:
This version of the class looks quite similar to the ECMAScript 6 version written in the previous section, only items related with React itself are different; imports, the render method, bindings, JSX, etc. With this piece of code, the following page is rendered:
Again, notice how the same domain class from Python is still present. If a backend developer has written a class in any language, he or she is ready for writing React components using ECMAScript 6, of course many hours of reading tutorial and documentation would be required. Of course React has some features (immutability, states, etc) that may not apply in the backend, of course writing backend it will be never the same as writing frontend, but still this approach reduces the pain of the transition. It does not feel that different as before to write code for frontend. Using React for client apps, feels in many occasions like writing backend.
Django and React play very well together: take a look for instance to this tutorial, in which the author explains step by step how to write a complete app using Django for an API and React for a client app.
In this post, I showed you how Django and React work at a high level, and how starting from a Python class, a backend developer can write a React class component. With ECMAScript 6 and React, a backend can be a bit more confident when it comes to writing frontend code. Writing React components will make them feel like at home.