Data Science Web Apps
Data Science tools in Python can be integrated with web applications using Svelte to tell accessible, compelling, interactive data stories.
I spend a lot of time exploring data sets and developing approaches that can be applied to a class of questions. When I find a meaningful approach I like to share it broadly with my cross-functional stakeholders. One way to accomplish this is through interactive web applications where users can provide filters and parameters that customizes data science outputs in a way that is more relevant for their role and thus more impactful. This post demonstrates how Data Science tools in Python can be integrated with web applications using Svelte to tell accessible, compelling, interactive data stories.
The Data Science Workflow
The tools of data science depend on scientific computing languages, usually R or Python. These languages are favored amongst practitioners because they offer a suite of open-source packages that help accelerate more sophisticated analysis. By finding a way to directly integrate the data science workflow into a web application, I can reduce the amount of time it takes to share interactive, personalized data science insights.
Python & Flask: Dynamic Scientific Computing and Routing
A natural division of code is to have Python handle querying the database, cleaning the data, modeling for insights and visualizing the results with a separate front-end to handle the user interactions. This allows a data practitioner to work on exploring the data set in their preferred environment (ex: a jupyter notebook that leverages Python functions) as they iterate towards a lens on the data that is meaningful. Once this lens is found it is easy to transform the Python into a dynamic Flask app that routes content to and from the front end of the web application. This is done by dumping results into a JSON format and passing them to a front end for further processing, interaction and visualization.
Svelte: A Framework for Custom Front End Tooling
Svelte is a high-level framework that makes it easy to quickly create web applications. It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build beautiful interactive user interfaces. However, unlike traditional JavaScript frameworks, Svelte converts your app into a static JavaScript bundle at build time, rather than interpreting your application code at run time. In addition, it is easier to get started in Svelte because it has less of a dependency of understanding JavaScript deeply.
Google Cloud Platform
Google Cloud Platform provides a great suite of tools to support a dynamic Python + Svelte application. Databases can be created easily using Google Big Query, Firebase can be used to host the static Svelte components and Google Cloud Run can be used to serve a dynamic Flask application - all in one ecosystem.
Google Firebase: Static Web Hosting
Firebase is a GCP utility that lets you quickly host static sites. Though I need Google Cloud Run for a dynamic Flask app, I can leverage Firebase for the static Svelte side of the application.
Google Cloud Run: Dynamic Code
Cloud Run supports dynamic code by serverlessly running Docker containers. This is necessary for running a Flask application online which can’t be set statically. This allows us to have the benefits of Firebase CDN with dynamic web content.
Cost
GCP Cost scales with resource usage. Firebase and google cloud services need to be activated at the Blaze level. Though signing up for Blaze requires a credit card there is a free tier that can be used for small projects.
Putting it All Together: A Flask + Svelte Web App
I have created a simple template that makes it easy to create a new Flask + Svelte web application on Google Cloud Platform. You can see the application running here and the code in Github here.
Instructions on how to deploy Flask web apps on GCP can be found here, however when I use Svelte I have to set up the application in a slightly different way because the framework generates the static files.
The file structure keeps the dynamic code that will be run on Cloud Run (flask-svelte/server) in a different directory than the Svelte files (flask-svelte/client/src) that generate the static javascript, css and html that will be hosted on Firebase (flask-svelte/client/public).
Together, I am able to use the data science tools that I love to iterate on new ideas and quickly turn them into interactive tools that can help more people make data informed decisions. Fork this template to try making your own data science web application and let me know what you build!