Â
Few months ago, when I opened my account on Medium, it was only for reading blogs concerning my interests. Little did I know, that I would end up writing one. And now, I am writing my first ever blogpost!
It was the end of our first year in KGP. I had not been to my home during the semester. So I was missing my home a lot!
To my wish, I was allotted the same hall(LBS) I was in. This made things much easier. On the day I was supposed to leave the campus, I packed away all my things, stowed them away in our common room, and had two bags to carry back to my home. After the tiring train journey, when I reached home, the first thing I did was check my Slack notifications. I am a part of the Kharagpur Open Source Society (KOSS). The first years of our society have been assigned the task of making a brand new website for KOSS. The existing one did not look too appealing. We started working on the website as soon as our end sems ended. It was so much fun! I always wanted to make a good website for myself but could never make one because of my lack of front-end web development knowledge. This was my chance of learning web development. There was also a need of backend.
The purpose of keeping a backend was to generate the profile page of each of the members dynamically and render them when their page was accessed. Also, the backend had to handle the mail sending part. The backend is written in Flask. We chose Flask over Django because Django would be a bit of an overkill in this case. We had to do something very trivial and Flask better suited this purpose, since its light.
We have a “Contact Us” page in the website, where any visitors can send their query or message to KOSS. The backend would then send an email notifying us about the same. I implemented the “Contact Us” page and the corresponding backend feature. It was such an interesting experience. Here I was, thinking that I would learn front-end design, but I ended up learing JavaScript and AJAX. The purpose was to design a basic form in semantic UI which would have Name , Email-ID and Message field. This was as simple as lifting the code verbatim from the semantic UI page. When the user would click the Submit button, a POST request will be sent to our backend. The request will contain the form data and as soon as our Flask app recieves it, the app will process it accordingly. I had no idea how to make a HTTP requests in JavaScript but a quick search in StackOverFlow gave me all my answers. Also, the request had to be asynchronous, otherwise the page would be frozen for the time being, starting from when our request was being made to recieving the response.
There is a very nifty way of doing this. First we make a XMLHttpRequest object. And make a FormData object in which our form data will be stored. Then we attach an event listener to our XMLHttpRequest object. This is like a callback. After that is done , we send the POST request. During the process, our request object goes through some status changes. From “Connecting to the server” to “making the request” and finally to “received request response”. Our interest lies in the last stage. So we add some checks in our event listener and add code to do what should happen after the request has been successfully sent.
Now comes the backend which processes this POST request. The Flask app is deployed on Heroku. As soon as the POST request is received, the form data is extracted from the the request. Now, to send the mail, we used the Flask-Mail module. It is easy to use and very simple to configure. And also, obviously, integrates with Flask very well. The message body to be sent is then constructed by using the form data. After that, a function is called which sends us the mail. And finally, if everything goes according to the plan, the 200 OK status response to the POST request is returned to our waiting XMLHttpRequest object in the Contact Us page. This seemed alright and good and did what we wanted to. But I wanted to make it more efficient. The part where the mail is sent takes 5–7 seconds. It would be bad UX if we kept the user waiting for so long. I wanted the 200 OK status to be returned before the mail is sent in our app.
To accomplish this, Arindam, my teammate, came up with a suggestion. He proposed that we use Celery. I did a bit of research on this and found that Celery was a bit too much. We needed to have a 24x7 worker process running on heroku to do that.This was a big turn off. I had to do a bit of digging on StackOverFlow, before I found an awesome python module to make the mail sending part asynchronous. It’s called the multiprocessing module. Using this is as simple as writing the Hello World! code. First we declare a pool of worker processes.
pool = multiprocessing.Pool(processes=1)
Then we assign the mail sending function to one of the worker process.
async_func_call = pool.apply_async(send_mail,[request])
That’s it! It’s as simple as that. Just after this code, we return our 200 OK status response back, and our mail sending part is done in another process, asynchronously. After implementing this feature, the wait time has considerably reduced.
I also dabbled in a bit of HTML code in the process as well. This has been such a nice experience. And It’s not done yet. We still have to implement some more features and make it even better.
That’s all I have for this blog. Hope you enjoyed reading this. ;)