Introduction

Backend developers often explore various frontend technologies, including Android development with Java, iOS development with Swift, and web applications using React. However, many of these options can feel unintuitive. Recently, Streamlit, a Python-based framework, has emerged as a simple and effective solution for frontend development. This article explores how backend developers can leverage Streamlit to build frontends efficiently.

The Role of AI-Powered Coding Assistants

Before diving into Streamlit, it is important to highlight the growing usefulness of AI-powered coding assistants. Initially met with skepticism, these tools have become essential for bug troubleshooting, code optimization, and improving readability.

AI-powered assistants are now a primary resource for debugging, often providing quicker solutions than Google or Stack Overflow. These tools streamline the troubleshooting process, significantly reducing the time spent searching for answers.

Debugging and Optimizing Code with AI Assistants

  1. Troubleshooting Bugs: AI assistants analyze code context and provide solutions alongside external references, reducing debugging time from hours to minutes.
  2. Optimizing Code: They suggest better approaches for writing and structuring code, acting like an on-demand pair programmer.

Amazon Q Developer is one example of an AI assistant that provides quick, insightful recommendations.

Building a Streamlit Frontend for a Reading Application

A frontend for a reading application was developed to retrieve data from an API backend using Amazon API Gateway and AWS Lambda. Since Streamlit reruns the entire script every time a user interacts with a widget, optimizations were necessary to improve performance.

Understanding Streamlit’s Rendering Flow

By default, Streamlit re-executes the script when:

  • The source code changes (helpful for development iterations)
  • A user interacts with any widget

However, rerunning the entire script on every user interaction can cause unnecessary API calls, negatively impacting the Largest Contentful Paint (LCP) metric. A caching mechanism was implemented to optimize API calls and selectively re-render components.

Using Streamlit Fragments for Optimization

To prevent unnecessary API calls, fragments (decorators that rerun only specific parts of the frontend) were used. This approach allows:

  • Data to be fetched once on the first load
  • Caching in memory for subsequent interactions
  • Re-rendering only relevant components upon user interaction

This optimization significantly improved performance and load times, similar to initializing data in AWS Lambda and only re-executing the handler function when necessary.

Managing Session State in Streamlit

Streamlit offers st.session_state, a dictionary for storing session-level data, such as:

  • Widget states and values
  • Logged-in user information
  • Data persistence across callbacks

Using session state, a custom calendar widget and user authentication were successfully managed.

Implementing a Calendar Widget with Streamlit

A calendar widget was integrated to allow users to track daily reading progress. The streamlit-calendar widget, which uses FullCalendar under the hood, was used.

calendar_state = calendar(

    events=st.session_state[“events”],

    options=calendar_options,

    custom_css=custom_css,

    key=”calendar_state”

)


  • The events parameter loads API-retrieved events into session state.
  • Options and custom CSS define the calendar’s appearance.
  • The key parameter enables state tracking, storing event data persistently.

Local Testing Workflow

The following development cycle was followed:

  1. Local development & testing: Running streamlit run ./app.py
  2. Building & testing a Docker container
  3. Deploying on AWS ECS Fargate

Streamlit automatically detects file changes, making iterative development seamless.

Deploying Streamlit on AWS ECS Fargate

For production, the containerized Streamlit application was deployed on Amazon ECS Fargate, with:

  • ACM SSL certificate for HTTPS (port 443)
  • ALB listener forwarding requests to port 8501 inside the container

Adding Authentication with AWS Cognito

To secure user access, AWS Cognito authentication was implemented using the streamlit-cognito-auth-v2 library, which handles login and token management.

However, enabling cookies for session persistence caused rendering issues in the calendar widget. Debugging revealed a conflict with extra-streamlit-components, which was resolved by switching to streamlit-cookies-controller.

Key Takeaways

  • Streamlit is a great option for backend developers needing a quick frontend.
  • Caching API calls & using session state improves performance.
  • Fragments optimize rendering by avoiding unnecessary script reruns.
  • AI coding assistants accelerate troubleshooting and optimization.

Streamlit provides an efficient way for backend developers to create functional frontends with minimal effort.