San Jose International Airport

image for article

Konstankino LLC is excited to share yet another happy story of a recent open-source project we were privileged to work on. The system was an old-school Django monolith application that the San Jose International Airport used for managing their ads infrastructure.


An example of the App in action with some basic UI

The system was developed to manage various devices via a dashboard, such as Projectors, Creston, and BACNet devices.

When our team made its initial code review and audit, we discovered that the system did not have a solid and consistent way for devices to communicate; their interoperability was hampered by incompatible interfaces.

Our task, firstly, was to develop a solid architecture that could encompass hundreds of different devices; secondly, to design and code both the back-end and front-end systems to manage the airport’s infrastructure and SOLIDify (the system’s API).

When our team made its initial code review and audit, we discovered that the system did not have a solid and consistent way for devices to communicate; their interoperability was hampered by incompatible interfaces.

Here is an examples of the code that we inherited, a small portion of the views.py file:

Image alt

An example of the monolith Django app that we inherited

An example of the old back-end code: https://github.com/Konstankino/art-infrastructure/blob/tfs-snap/django/lighting/views.py

Here is another monolith, poorly organized Django views.py file that we inherited:

Image alt

This is another Django views.py file to manage Projectors and BACnet devices

The code above we refactored to this form:

Image alt

We encapsulated the logic within the classes; we removed code duplication and reduced complexity

Also, the code above was transformed to use a «connector» proxy (not displayed here) to talk to devices. Also, we consolidated the code into a solid API with a versioning in place:

Image alt

API version 1. This allows the system to be easily extended with other versions of API and reuse a lot of the code in the new versions without altering previous API version

Here is a view_v1 of the API:

Image alt

Each individual end-point (or a ViewSet) manages specific device via API

Here is an API helper module:

Image alt

API helper module that is a generic wrapper to control access to End-Points

We also added data serializes to feed data to our front-end ReactJS app. Here is an example:

Image alt

Django REST framework serializer for Projector, Creston and BACnet devices

And, of course, we covered all the API end-points with tests, to make sure they work as expected, responding with proper HTTP status code and a JSON data structure:

Image alt

We created Factories to efficiently create and test an API

Before our refactoring, the UI of the App looked like a basic HTML page with an old-school Django forms without any look-and-feel and we all used to see these days. Here is a portion of the code:

Image alt

Generic Django app with obtrusive, inline JavaScript inside HTML templates

An example of the legacy code can be found here: https://github.com/Konstankino/art-infrastructure/blob/tfs-snap/django/lighting/templates/lighting/projector.html

We have replaced old and junky Django views with ReactJS App, here is how we bootstrapped our code into an existing App:

Image alt

On line 12 we inject Back-End end-point URL for our React components

We used coffee-script and created clean and easy to work with React components. We do not recommend you creating your App this way though. You probably should stick with a React-way of doing it and having an explicit stand-alone React App instead. We had to develop our React components this way due to particular circumstances. Here is an example:

Image alt

An example of the Lighting page: UI for managing Projectors

An example of the new code can be found here: https://github.com/Konstankino/art-infrastructure/blob/sprint4/django/lighting/static/lighting/js/projectors.coffee

We are excited and proud that the new system streamlines the process of managing their ads infrastructure.

Here is a feedback from our customer:

I asked the team at Konstankino to take a pile of old, junky code and bring it up to date. They did a great job turning it into a modern and solid application with little fuss and minimal management time on my part. I’m very happy with their work and look forward to working with them on future projects.


- Trevor F. Smith, Founder at Transmutable

We are excited and proud that the new system streamlines the process of managing their ads infrastructure.

The project is available here: https://github.com/Konstankino/art-infrastructure/tree/sprint4

Thank you, San Jose International Airport, for such a great journey.