By Jorge Galvis, IOD Expert

Backend developers in a web application project are in charge of the components that users don’t see (database connections, cache systems, performance, security, and transactions, among others). Chances are that a backend may end up writing a bit of code for client apps, too: because of the lack of available JavaScript developers at any given moment, perhaps, or because a manager wants all features to be completed by one developer. Whatever the reason, when a backend programmer has to write frontend code, it causes a bit of frustration. Usually they don’t like to write styling (CSS), nor markups (HTML), and they probably don’t like JavaScript at all.

Until recently, one of the biggest barriers for writing frontend was definitely JavaScript. JavaScript is an interpreted, asynchronous programming language, known as the language of web browsers. Regardless of the nature of the project, when it comes to the web, a developer would have to turn sooner or later to JavaScript.

A couple of years ago, the first option for a backend who was writing frontend code was to use JavaScript via JQuery. JQuery is a great library. It allows you to write interactions and complex interfaces without that much pain. But it turned out that it did not perform well on mobile devices due to resources consumption (RAM and CPU) and moreover, many developers were writing JQuery the wrong way, so maintaining web applications was not an easy job.

A new wave of tools arose and, as a result new, frameworks and libraries were born (Angular, React, Ember, VueJS, etc.) Yet backend developers complained about the JavaScript’s nature. They asked for classes, inheritance, all these mechanisms available in languages like Java, Python, C#, etc. 

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:

Of course, Django is more than models, views, and templates. In the previous example, many aspects were omitted. I didn’t, for instance, mention migrations or setting up the environment or folder structure. Please check the Django Tutorial for further information. Let’s move on and  rewrite the model Task using JavaScript.

Backend Writing Frontend: ECMAScript 6 to the Rescue

ECMAScript 6 brought a lot of the backend world to the JavaScript world, with features such as classes, inheritance, modules, iterators, and generators now available. These provide more structure to the presentation layer. However, as JavaScript is still a prototype-based language, in order to run those new features on the browser, external tools like transpilers may be required.

IOD is a content creation and research company working with some of the top names in IT.
You can be too!  JOIN US.

Let’s see ECMAScript in action. The Task class defined in Python in the previous section can be written in JavaScript as:

In perspective, the definition of the JavaScript class looks quite similar to the class in Python. Common elements can be identified; both have attributes, both have methods, both seem to follow the same workflow. With the use of ECMAScript 6, backend developers can write frontend apps without perceiving a barrier: they can switch from back to front and still write software using the same paradigm (OOP).

React in Action

Perhaps, writing a client web app using Vanilla JavaScript is not a good idea. In today’s JavaScript ecosystem there are a lot of available tools for architecting client web apps, including Angular, VueJS, Ember, and React. However, when you need to select one of those tools for a development project, you should consider maturity, simplicity, the developer’s background, among other things. React tends to be selected by backend developers because of its performance, its documentation, and because its learning curve is not so steep.

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.

Conclusion

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.