I really enjoy programming in Python. It allows me to focus on creating applications of all kinds without getting mired in boilerplate code, messy frameworks, and complicated toolchains that many other languages generally require. As such, I’ve generally avoided doing much front-end web development. JavaScript, and the ecosystem that has built up around it, just doesn’t appeal to me.
A few weeks ago I stumbled across a Python-to-JavaScript transpiler called Transcrypt. I’ve seen various forms of this type of thing in the past, and they have always had serious drawbacks that made them not worth it for me to dive into. This one seemed different though. In their demo code examples, they had sample code for a really minimal React app. Intrigued, I went ahead and installed Transcrypt and duplicated the demo code in PyCharm, and it worked. Huh, that was interesting. So just to see if it could create a “real” React app, I went through the official Intro to React tutorial — except I coded it in Python. After working out a few language translation issues, I compiled it down to JavaScript with Transcrypt and much to my surprise…it actually worked! Not only that but the Python code was clean, pythonic, and not polluted with a bunch of language hacks. The resulting code still looked like Python.
Now me being primarily a Python developer at this point, my front-end web development technical skills are, well let’s say, utilitarian at best. But I had to find out: Was it actually possible to create a modern good looking and responsive web application in Python now???
So I took it a step further and created a simple proof-of-concept app that represented what would be functionally required on the front end for a simple CRUD application. I used the React framework again, but to make things look nicer, I also added Material-UI into the mix. Things started getting a little more complicated with the Python/JavaScript interface and for my own sanity, I ended up having to use npm to manage the JavaScript libraries that I was interfacing with. And just when I felt like I was starting to slide down the long messy toolchain slope that all web developers seem to be saddled with, I found a compiler/bundler plug-in for Transcrypt that used the Parcel build tool.
In the words of the guy that created the Parcel plug-in for Transcrypt:
“It advertises zero config and is a reaction against the webpack mess. My experiences with it over the last couple weeks is it is MUCH simpler than webpack, but it’s still not the “clear and simple” that python devs would want. My opinion (which could probably easily be swayed) is that Parcel is currently the bundler that python devs would be most comfortable with.”
And I couldn’t agree more. Compared to what I’ve seen of Webpack, Parcel was actually pretty easy to get set up. And using it is a breeze.
From a coding standpoint, it took a bit to get used to doing things the “React” way since it uses a mostly functional programming paradigm, and there were a few tricky language translations I had to figure out, but the end result was still what I had experienced previously: a functional web application written in clean pythonic Python. And by using Parcel, I was able to get a production build that was minified, bundled, and ready for deployment.
So based on what I’ve experienced, thanks to Transcrypt, it is indeed possible to create a modern, responsive front end web application using 99% pure Python code, without having to bounce between several languages and config files, or having to spend extra time managing your development toolchain. By combining this on the front end with something like Flask for the back end, I believe full-stack Python projects are actually possible. I look forward to seeing continued development on the Transcrypt project. I think it has the potential to finally give Python developers a viable door into the world of front end web development.
[Update 4/18/2020]: If your web publishing needs are in the realm of data analysis, there is a Python library available called Dash that wraps the React framework and eliminates the transpiling step. While it is primarily designed for data visualization using plotly, and is limited to the React components that have been ported, it may be another option if you are just trying to get your interactive data analysis plots published to the web.
[Update 11/21/2020]: In the time since I wrote this earlier this year, I’ve been using Transcrypt to create front-end web applications with React and Material-UI. The approach I have been using has been so productive for me, that I wrote a book to document my process and share it with other Python developers. It is currently in a pre-release stage, but will hopefully be published by the end of 2020. You can sign-up to be notified when it is out at https://pyreact.com
[Update 5/4/2021]: I’m happy to say that the React to Python book has been released and is available in e-book and print formats. You can find more information at https://pyreact.com
I also published a quick tutorial with an overview of the approach I use for creating React web application with Python that can be downloaded for free from Leanpub.
