Making web apps with Jupyter notebook

This article will explain how to make Jupiter notebook as a GUI app on the web.

What is Jupiter notebook

Jupiter notebook is browser-based REPL.

REPL enables you to program in an interactive environment, you can write and then execute your next line of code while all previous lines are already in the executed state.

This trivial feature enables me to cut prototyping development time because for testing the next line of code I do not need to run the whole program again. (REPL is useful only for some types of situations)

I know this explanation is useless if you do not know what is a programming language and have no experience with REPL style prototyping, but if you are in this category I do not know how to explain it (probably it is impossible).

Point is, it makes programming prototyping faster because for testing next line in your code you do not need to run the previous code again and again.

Previously Jupiter notebook was called IPython Notebooks, at that time only Python was available as programing language.

Now it is possible to use Jupiter notebook with many programming languages, altho my experience is only with Python.

Personally, I use Jupiter notebook for exploratory data analysis. Loading data to Pandas and then trying to understand data with visualizations (Seaborn, Bokeh).

Sharing Jupiter notebook with non-technical persons

Often I would run the same code with different parameters, to produce slightly different visualizations.

If you are familiar with Jupiter notebook environment than you know that this means running the same cell with SHIFT + ENTER, from Cell menu or some other shortcut.

This got me thinking if I wanted to give my notebook to a non-technical person (somebody who know how to use Word, and Excel without knowledge of how to write formulas ) it would be trivial for that person to use it.

Also, a person could change the code and get the unintended outcome (syntax error or wrong result).

Ipywidgets

This problem could be solved with Ipywidgets widgets.

With Ipywidgets widgets you can make GUI inside of Jupiter notebook, it is perfect when you want for somebody (even you) to expose some functionality of your Jupiter notebook with GUI elements.

For having this kind of GUI

This is the necessary code:

# UIslider = widgets.IntSlider(min=10, max=100, value=10)label = widgets.Label(value=’Select number of games’)button = widgets.Button(description=’Start Simulation’, button_style=’info’, tooltip=’Start Game’)progress = widgets.IntProgress(description=’Progress:’)label2 = widgets.Label()# Interactionsbutton.on_click(start_game)# UI Layouttop_box = widgets.HBox([label, slider])down_box = widgets.HBox([button, progress, label2])ui = widgets.VBox([top_box, down_box])display.display(ui)

Appmode

This was good but still there where 2 problems:

• the user had to run all cell as the first step
• user still had access to the code

Fortunately, Appmode is Jupyter extensions that turn notebooks into web applications.

By default user can still go back in the “code mode”, but it can be easily removed

Hosting your Jupiter notebook

If you are hosting it inside of your network that you just need to run notebook server, like for local development, but add some security.

Github will give you view only of any notebook that is hosted on their server, and there are many more websites with the same functionality.

If you want interactive hosting of your Jupiter notebook so that people can execute them, then there is Binder.

Currently, it is in beta and your Jupiter notebook needs to be in public Github repository.

Conclusion

With the right combination of:

You can execute your Jupiter notebook as a web app for free.

Coin Toss code can be used as an example of how to host Jupiter notebook as a GUI app on the web.

Part of the inspiration came from Bloomberg bqplot project.

Personally, I have found it useful for sharing interactive visualizations.

Originally published at buklijas.info on October 1, 2018.

Making web apps with Jupyter notebook was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.