Creating a web based mapping application with flexx

For my private boat navigation software project, I was looking for an easy way to manipulate a map, in particular openseamap, from both client and server side. The idea being that the server side runs on a Raspberry Pi that contains the map data, collects data from GPS, motion sensors and so on and the client side runs in a web browser on a tablet or phone that connects to the Pi through wifi. Obviously the server side should be able to manipulate the map based on the boat’s position. On the other hand the user should be able to determine things like zoom level and other typical client side decisions on the client side.

I have played around with Google AppEngine in the past, but it relies on google infrastructure. Apart from that I don’t like that/any dependency much, it’s also not feasible for my application, because it needs to be able to work offline: no internet at sea, at least, not yet. Not being a web developer, my options were fairly limited then and my guess was that I had to create some PHP or Python server side code, javascript client side code and an AJAX interface for communication between the two. Not something I was looking forward to doing. But that all changed when I found flexx, created by fellow dutchman Almar Klein.

In short, flexx:

• allows writing Python code for both client and server side code in a web application.
• takes care of communication between client and server side using an event system that uses websockets, which allows for push events from the server.
• has an already fairly extensive widget toolkit based on phosphor that can be easily extended further.

Being a big fan of Python, this was exactly what I was looking for! Having previously decided to use leaflet for displaying the map, I set out to create a small demo to control a map from both client and server side. The result has since been integrated with the example set that comes with flexx.

I had some trouble getting used to the event system and the separation between client and server side code. Both client and server side code are written in the same Python module! Flexx automatically transpiles the Python code in a nested class named “JS” to javascript and embeds the generated code in the HTTP page output along with a small javascript library that implements some basic python functionality. However, as I’ve come to expect of Python projects: I got results pretty quickly.

Concluding, Almar Klein is doing a great job with this project by integrating a number of technologies, like transpiling from Python to Javascript and a websocket based event system, into a comprehensive package. This allows developers with only basic knowledge of web development to write actual web applications with highly dynamic and interactive features.