Using Django and Vue.js to create a web application on IRIS: Peeking into the Django framework

For a long time I have wanted to learn the Django framework, but another more pressing project has always taken priority. Like many developers, I use python when it comes to machine learning, but when I first learned web programming PHP was still enjoying primacy, and so when it was time for me to pick up a new complicated framework for creating web applications to publish my machine learning work, I still turned to PHP. For a while I have been using a framework called Laravel to build my websites, and this PHP framework introduced me to the modern Model-View-Controller pattern of web programming. To make things even more complicated, I like to build my front-ends with a modern javascript framework. I am most familiar with Vue.js so for this project I stuck with that even though it is more common to hear of people using React.

Why use a complicated framework anyway? What are the biggest challenges to learning a framework like Django, Laravel, React, or Vue?

Everyone has their own answer, but I have grown to love MVC frameworks because they provide so much guidance on how to structure your app. It prevents me from needing to reinvent the wheel every time. At first these framework can seem constraining and cryptic, but once I become familiar with the structure, I find it is easier to add new features.

The challenge is that things can become almost too simple. Frameworks like Django rely on a lot of shorthand or assumptions that might be based on a familiar concept, but have a particular unfamiliar name and structure in Django. In my application, Django handles the APIs and all the web routing. If I want to add a new API endpoint, I need to add a function to a file in my views.py, then go to the urls.py file and add a statement to import that function and another statement to define the URL where that API endpoint is available. After that, I need to edit my front-end Vue component to use javascript to query that endpoint to obtain data and show it or manipulate it for the user. 

Once my project is set up, adding functionality like this is fast. I only need to add about four lines of code, and then I can concentrate on the logic needed in my new function in the views.py file to process the HTTP request and return the needed data in JSON format. The challenging part is learning what those files are and how they work together to create a whole application.

I find the best way to learn a framework like Django is to find a working example and start trying to make small changes to get a feel for the flow of data. Refer to the documentation as concepts start to become more clear and make more sense. Ask AI models to explain pieces of code and what the different standard files in a framework will do. It doesn't take long to realize that these tools emerged as ways to save time in the long run and make it easy to maintain and update your application. Since the Django and the Vue frameworks have a standard structure, when you come back to them later you will find it is easier to understand why you coded things a certain way, and easier to re-establish familiarity with your work. It's also easier to pick up someone else's application and understand the core functionality since you are familiar with the basic structure of their application. 

So what are some fundamentals of Django that would help someone getting started? For me the first thing to understand is that Django projects are generated by running a command to create a new django project, and this generates a set of basic files and folders that constitute a "base project" that you can use to start building. The project folder will have several python files with settings that apply to the whole project. The important ones you will find yourself visiting frequently are settings.py, where all your settings are, and urls.py. When you have a question like "How does Django decide where to put my static files", the answer is usually somewhere in the settings.py. When you want to add a new URL to your application, you will need to update the urls.py file. 

Along with these project level files, you then create a folder for each app in your project. These apps then need to be registered, i.e. named, in the settings.py file. The main app folder in my project is called documents. Inside that folder I have a models.py file, a serializer.py file, a views.py file. There are others, but these are the important three.

Inside models.py I specify my Document object and the fields it has. Django does the work for me of creating a Documents table in the IRIS database with the schema necessary to save the information I plan to store in the Document objects. In my models.py file I tell it that my Documents all have a name, which is a character string no more than 255 characters, a content field, which is just a large amount of text, as well as a database name where the vectors are stored (another text field), the embedding type (another text field), and finally the vector embedding dimension, which is a number. Using these definitions, Django creates the necessary database table with the necessary column types. Saving objects to the database is then as easy as Document.save().

Inside the serializer.py file is simply a definition on how to convert your object into JSON and vice versa. For basic use cases there is a standard way to define it, and you can see it in this project.

Now we get to the point of Django, the views.py file. This is where we define the functions that accept HTTP requests and return data like an entire HTTP response, or a JSON response in the case of a JSON API. This means Django can deliver an entire web page and also be the front-end of your app, or it can just provide JSON data, and you can build your front-end on an entirely different platform.

At first having the use all of these seemingly arbitrary files and conventions can feel like a chore, but once you see that doing so means your application just starts to work and process HTTP requests and provide the correct data in response, it can be very fun to keep building new features and capabilities. One you've define one object, web route, and function to handle an HTTP request, you realize how easily you can define a second and third to add functionality to your application.

I forked my project from the Iris Django Template create by @Guillaume Rongier here on github: https://github.com/grongierisc/iris-django-template

That template contains only Django, and it was extremely helpful for learning the Django framework. One of the major additions I made was to add Vue.js with Tailwind CSS to show that you can integrate a modern Javascript framework with this package and have a Single Page Application running on IRIS. A Single Page Application is a javascript application that send xhr requests to get JSON data and updates the page dynamically without ever fully reloading it. It has its pros and cons, but it is a hallmark of modern web development.

I encourage people to look at my project as not just en example of RAG and Vector Stores on IRIS, but also as a template for using Django with Vue.js and Tailwind to easily and quickly create modern flexible web application on top of IRIS. That repository is on Github here: https://github.com/mindfulcoder49/iris-django-template

I'd be happy to answer any questions or provide any insight I can into any issues anyone might run into trying to adapt this project for their own use.