Looking into Django-React Software Architecture
In this article, we will look into the architecture used in SekolahKu, Django-React. Hopefully, this will give you a brief idea of how a Django-React project architecture will look like.
Django
Django MVT Architecture
Django use the Model-View-Template (MVT) software design pattern. It is a collection of three essential parts that its name explained itself: Models, Views, and Templates. This architecture intends to allows flexibility, since responsibilities are clearly separated.
Models: This layer works as an interface of your data, that responsible to maintain them. It is the logical data structure behind the entire application and is represented by a database. This is where you define objects and relations between objects.
Views: Used to execute the business logic and interact with a model to carry data and renders a template.
Templates: is a presentation layer which handles User Interface part completely. It consists of static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted (HTML, CSS, Javascript).
Serializers in Django REST
In SekolahKu, React is used to handle the UI — frontend, and Django is used to handle the data — backend. And to connect the two of them, we need REST API. Since we handle the interface using React only, we remove the Template part in Django. And to serve our REST API, we change View part with View from Django REST Framework.
Now it becomes Model-View-Serializer.
Serializer: is part of the Django-REST framework. Its main function is to render the available information into formats (like JSON, XML, etc.) that can be easily accessible and utilised by the frontend.
Now we have learned the backend part, let’s see what’s going on in the frontend.
React
React is a JavaScript framework that allows to build web frontends for their REST API backends.
Unlike other UI libraries and frameworks, Reactjs doesn’t enforce an architecture pattern. It is just a view that caters to the user interface.
Components: the central structural unit — something minimal, like a button, label, or text input label or perhaps something more complex, like a registration form, user-profile, etc
State: the data needed to track for making the application work, and determines what displays on the UI of an application.
React + Redux
“Redux is used for the provision of a central or app level state/store. All the data that needs to be shared across features, modules or react-component trees, can be added to the redux store.”
Redux use uni-directional data flow. It doesn’t encourage bi-directional flow to ensure clean data flow architecture and have better control over it.
Reducer: Logic that decides how your data changes exist in pure functions
Centralized store: Holds a state object that denotes the state of the entire app
Action: An application event, which is dispatched to the reducer
View: Displays React Components in the UI
“The biggest thing to know here is that the store is where redux stores the data, the data is mapped to props, where React displays through components. And all that is state.”
References
- https://www.javatpoint.com/django-mvt
- https://www.geeksforgeeks.org/django-project-mvt-structure/
- https://www.simform.com/react-architecture-best-practices/
- https://medium.com/meetu-engineering/how-to-build-rest-api-using-django-and-django-rest-framework-417d713e612f
- https://medium.com/@9cv9official/understanding-models-views-and-serializers-in-django-f1bfc1bb94c5
- https://medium.com/createdd-notes/understanding-mvc-architecture-with-react-6cd38e91fefd#apply-mvc-with-react-flux
- https://saurabhshah23.medium.com/react-js-architecture-features-folder-structure-design-pattern-70b7b9103f22
- https://medium.com/mofed/react-redux-architecture-overview-7b3e52004b6e
- https://www.clariontech.com/blog/mvc-vs-flux-vs-redux-the-real-differences
