Making an Interactive Web App Using a Script — The PyWebIO Way | by Yong Cui | Towards Data Science

Web apps are the most effective way to showcase your work, because they’re platform-independent and highly interactive. If Python is the language of your choice, you’re offered with options, including Django and Flask, two leading frameworks for web development in Python. However, they’re not the easiest to learn for you make functional web apps.
Previously, I’ve written several articles (1, 2, 3, 4) on using Streamlit, a trending web framework that is popular among data scientists. With the expanded support from several major investors, Streamlit is expected to continue to grow, and interested readers are encouraged to explore this framework if you’re interested in learning how to make interactive apps easily with Streamlit.
Here, I want to describe an alternative tool for making interactive web apps. With almost over 1.8k stars on GitHub, this trending Python library PyWebIO allows users to create web apps using just Python script without any knowledge in HTML, CSS, or JavaScript, similar to Streamlit. However, it’s different — I’ll save the discussion to the end of this article. Before that, let’s see how PyWebIO works.
Without further ado, let’s get it started.
In a virtual environment (yes, it’s a good practice to have a virtual environment for your project), you can use pip to install the package by running the following command:
pip install -U pywebio
Please note that pywebio requires Python 3.5.2+.
As indicated by its name, this Python library is specialized in dealing with input and out. Let’s try it out first with some data input.
As you can see, PyWebIO provides the common web widgets for you to collect input. The example includes text entry, slider for continuous numeric value selection, check boxes, drop-down box for selection, and radio button-based multi-choice selection. Besides these widgets shown, you have other options too, such as file upload and multi-line text input.
For these widgets, you can add labels, validations, placeholders, and many other fine-tuning configurations.
For you to replicate the above operations, you can find the code below.
In the last section, to show you the code together with the input widget, you’ve seen that I used the put_code function as an output widget. As you can see, it creates a little gray box to show the code using a different font. Besides showing code, the most common thing is to show the text using the put_text function and you can show a table using the put_table function.
pout.put_text("This is an awesome library.")pout.put_table([    ("Col 1 Title", "Col 2 Title"),    ("Row 1, Col 1", "Row 1, Col 2"),    ("Row 2, Col 1", "Row 2, Col2")])
You’ll see a line of text together with a well-structured table as shown below.
Just like Streamlit, PyWebIO also support markdowns, which create a lot of opportunities to display the information using the markdown language. The following code and screenshot shows you some common markdown usages.
pout.put_markdown("# This is the Title")pout.put_markdown("## This is the Subtitle")pout.put_markdown("_Bold Text_")pout.put_markdown("__Italic Text__")pout.put_markdown("*__Bold & Italic__*")pout.put_markdown("[google.com](google.com)")
Besides texts, you can also show an image easily using the put_image function.
pout.put_image(open("airplane.jpg", "rb").read())
Although I’m showing you an image from a local source, you can also use an URL showing images online.
If you want to have something that needs special attention, you can place it as a notification box using the toast function. This notification is disappearing after the specified delay.
pout.toast("Please Pay Attention!", duration=10)
Another important widget for output/input is the button — many web apps are not functional without buttons. Buttons are certainly supported by PyWebIO. Let’s try it now.
def show_text():    pout.toast("Button is clicked!", duration=10)pout.put_button("I'm Ready!", onclick=show_text)
There are other output widgets that you can explore too. For example, you can show a link to download files or show a pop-up menu for selection.
If you’ve used Streamlit, you may be wondering what’re the differences between Streamlit and PyWebIO. Here are four major points that came to my mind when I was thinking about this question. As you’ll see, they’re not the same kind of thing.
Overall ecosystem. Streamlit has been more developed, and thus, it has more mature widgets and better tuning of the outlook of the built web apps. It also offers cloud hosting services that allow you to deploy an app easily. Many data scientists and machine learning engineers have adopted Streamlit. By contrast, PyWebIO is relatively new, and it’s waiting to see how it’s accepted by the field. In other words, PyWebIO’s ecosystem is still to be growing.
Script execution/Design principle. Streamlit executes the script entirely. Whenever there is a change in the script, the script will be evaluated again. So, it can be a pain for some use cases. By contrast, PyWebIO evaluates the script linearly. When the script expects an input, it can’t let you proceed until the input is provided.
Intended use cases. To me, you can use Streamlit to develop web apps that are more polished, have more complicated structures, and serve the public. By contrast, PyWebIO is good at solving smaller tasks. Because of its “linear” design, it’s useful if you develop a step-by-step web app for internal uses.
Developer-friendly. I find it Streamlit to be more friendly during the development phase because of its “hot-loading” feature — when you update your script, your web app reloads to reflect the change. However, by design, PyWebIO is essentially a graphic representation of a Python console in the web app, so that you’re limited to sessions and where you’re in the script. Thus, you’ll probably find it hard to modify your script on the go to see the changes immediately. (Edit: per the response from PyWebIO’s developer, you can do “hot-loading” development by starting a server. You can find the instruction here: https://pywebio.readthedocs.io/en/latest/guide.html#overview)
In this article, we reviewed the most common features that you may use with the new PyWebIO library that you can use to create web apps by the means of using Python script. I expect that PyWebIO will continue to grow.
However, because of its design principle (e.g., linear execution) and thus more limited use cases, I doubt it can attract many data scientists and machine learning engineers. Nevertheless, you can definitely find some relevant use cases for this tool.
Thanks for reading this article. Stay connected by signing up my newsletter. Not a Medium member yet? Support my writing by using my membership link (at no extra cost for you, but a portion of your membership dues is redistributed to me by Medium as an incentive).