ISTE Web Team
Web Development, ahh, that boring thing again. Generally, that is the reaction people give out when they hear about Web Development, but have you ever wondered how it works? How is it put together, how is it maintained? Here is a brief overview of how the staggering ISTE Website was made and is maintained.
The Website runs on the popular Python ( Why you might ask? Because it is above C-Level) Framework – Django, which follows the model-template-views (MTV) architecture. The MTV is a variation of the MVC (Model-View-Controller) pattern, which is more commonly known. Using Django allows the developers to easily add new components to the Website compared to traditional methods.
Let us imagine making an application without Django. If you had to do it without Django, code reusability would not be possible. The user would have to add new URLs, redo URL Routing, re write code for adding features every time a new functionality/module has to be implemented. As in ISTE, we keep having new events and projects due to which we have to keep updating the Website. Furthermore, updating our app for the server would be a tiresome process, and we would have to do it manually.
Django, on the other hand, is established for swift development. Adding new content is very easy as we can reuse code; adding data is direct as Django comes in-built with an Admin Page. Django being modular in nature aids in simplistically adding new content. Furthermore, Django comes with an auto-build function that sets up the files and makes them ready for server deployment, preventing any headaches and debugging sessions. These are some of the few reasons the ISTE Core decided to go with Django as the Back End.
For the frontend part of the web app, we used an open-source JavaScript library – React JS. ISTE core chose React Js for the frontend part because of its high speed and user-friendliness. It is extensive and supports the server-side. Its declarative nature makes it easy to use and understand.
React provides a component-based structure. Think of components as lego pieces – you start with tiny components like buttons and checkboxes. You then build wrapper components for these smaller components, and it goes on like that till you have one root component, and that component is your app. Each of these components decides how they render themselves and have their logic.
In any modern web application with high user interactivity and updates, one of the major bottlenecks to web performance is DOM updations and manipulations. React gets around this bottleneck by changing data in the browser’s DOM without loading the entire page. Instead, React creates its own Virtual DOM, a DOM stored in memory. It then computes the data changes and accordingly renders (or ignores) the required components of DOM in the browser efficiently.
All React components have two built-in objects to store data: props and state. Props, short for properties, can be thought of to pass immutable data from one component to another component. This flow of data is only unidirectional and happens only from a parent component to a child component.
While props hold immutable data, the state object stores a component’s dynamic data and determines the component’s behavior to changes like user interaction or server requests. So whenever the component’s state changes, React takes notice and immediately re-renders the DOM – not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.
For maintaining state, react uses a tree (DOM) with hierarchy and allows only one direction flow, i.e., parent to child. Hence React has a more stable code, as it will not affect the parent structure if a child structure has some modifications. Thus it allows only downward data flow in case of update or modification, making it super smooth for manipulating state.
This isolation of components and their reusability allows for writing a structured, clean code by breaking the project into several reusable and independent UI components. Instead of using regular JavaScript templates, React uses JS (JavaScript XML). JSX follows HTML syntax and uses HTML tags to render components.
In order to facilitate communication between the React frontend and the Django APIs, we use AXIOS: a promise-based HTTP client used to make HTTP requests to our Django API.
The website runs on the NITK Servers, which are accessed by the Core Team using VPN for safety and security reasons. For updating the website, we first update the website in localhost. After many tests are done to remove all the different bugs in the website, the new code is pushed to our GitHub repository. Git allows multiple users to update the code base and has backtracking, allowing us to go to a stable version of the Website if the Website ends up being buggy during deployment. Once all the code checking and testing are done, the new Website needs to be pushed onto the server. All the new files are brought to the server. In tight integration with Git, the frontend assembles itself up by running a simple command git pull. All the files are brought for the backend, and then using the command makemigrations, Django automatically sets the back end up. To reflect the changes to the live Website, we use Docker. Docker is an open platform for developing, shipping, and running applications. Docker provides the ability to package and run an application in a loosely isolated environment called a container. We use uWSGI as it is compatible with Django. uWSGI is a fast, self-healing, and developer/sysadmin-friendly application container server coded in pure C. Then, using a special command from Linux called nohup ( No Hang-Ups ) with uwsgi, we restart the server without causing the initial server to be killed, allowing users to access the website simultaneously.
This summarizes how the Website is running on the server. We do a thorough checking of code for the maintenance before pushing it to the server and making back-ups for the Website in specific intervals if any errors or bugs occur. All precautions are taken to prevent bugs in the Website from occurring. Even if an error exists, members are always ready to fix the bugs and release the stable version as soon as possible.
The ISTE-NITK Blog 