Getting started with Shiny Express

Introduction

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Intro

Note

  • This workshop is exercise based
  • All of the exercises and slides are running live on this website
  • The exercise files are available for download from github

Today’s goal

Learn how to build reactive web apps with Shiny for Python,
from the simple to the mission critical.

Who you are

  • Name
  • What you do
  • Have you used:
    • Python?
    • Shiny (for R or Python)?
    • HTML, CSS, JavaScript?

Goals for this section

  1. Understand the “whole game”/ big picture

  2. Identify the resources that will support you

  3. Develop comfort with debugging

Anatomy of an App

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

What is a Shiny app?

  1. Pair up
  2. Run the app
  3. Describe what you see
  4. Note one point of interest
  1. Model Scoring (code)
  2. Restaurant tips dashboard (code)
  3. Database Explorer (code)
  4. Streaming Database updates (code)
  5. Location Distance Calculator (code)
  6. Survey form (code)
  7. Shiny Wordle (code)

What is a Shiny app?

Each Shiny app involves:

  1. A web page
  2. A computer that watches the web page and responds to user events on that page

What is a Shiny app?

Each Shiny app involves:

  1. A web page
  2. A computer that watches the web page and responds to user events on that page

What is a Shiny app?

Each Shiny app involves:

  1. A web page
  2. A computer that watches the web page and responds to user events on that page

Components

Each Shiny app consists of:

  1. Inputs

Components

Each Shiny app consists of:

  1. Inputs
  2. Outputs

Components

Each Shiny app consists of:

  1. Inputs
  2. Outputs
  3. Instructions on how to build outputs from inputs

Reactivity

When an input changes, Shiny reacts by rebuilding the outputs that depend on it, and only those outputs.

Spreadsheet Analogy

  1. Inputs
  2. Outputs
  3. Instructions on how to build outputs from inputs

Spreadsheet Analogy

Updates:

  1. When an input changes
  2. Only the parts of the app that depend on the input

Key features of reactivity

  • Easy enough to use for prototypes
  • Efficient enough to handle complexity
  • Scales to build production quality apps

Why Shiny for Python?

Shiny lets you quickly create reactive web apps without worrying about:

  • cache
  • state
  • callbacks
  • …or even HTML, CSS, and JavaScript

And, these apps can scale from prototype to production-ready.

Quiz - Where are the inputs? The Outputs?

Quiz - Where are the inputs? The Outputs?

Quiz - Where are the inputs? The Outputs?

Tell me about Shiny Express

Important

Shiny for Python has two syntaxes for writing the same apps:

  1. Shiny Express - lightweight syntax informed by notebooks
  2. Shiny Core - more verbose syntax similar to Shiny for R

Today, we will learn Shiny Express.

Your first App

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Your turn

Complete the exercise on this page:

101-run-app

...

Run an App

Shiny for Python apps exist as … Python files.

To build an app from the file run at the command line:

 

shiny run app.py

 

where app.py is the name of your file.

Today, we will do that in an exercise container.

But you can run shiny run app.py at any command line.

Or use the VS Code Shiny extension

This gives you a “Run App” button in VS Code.

The Important Accounts data

How well did we predict the Product Score for each sub-account?


account date is_electronics training_score prod_score sub_account
Berge & Berge 2023-02-17 1 0.169437 1.16182 Code Wranglers
Berge & Berge 2023-02-12 0 0.000531446 1.05017 Code Wranglers
Berge & Berge 2023-03-26 0 0.00383973 0.0637952 Code Wranglers
Berge & Berge 2023-02-16 0 6.69576e-05 1.07022 Code Wranglers
Berge & Berge 2023-02-14 0 0.640394 0.112986 Code Wranglers

Quiz

Let’s build an app.

Who remembers the three components of an app?

Inputs

Outputs

Instructions

UI functions

  • The ui submodule contains functions to create UI elements
  • Functions like ui.h1() or ui.markdown() add static HTML to the app
  • We’ll get to layout functions in Session 3

Your turn

Complete the exercise on this page:

102-ui-module

...

Inputs

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Syntax Demo

View the app on this page:

101-input

...

Inputs

Notice:

  • Inputs all begin with ui.Input_.
  • Every input requires:
    1. An id for the value to collect
    2. A label to display
    3. Input specific options

How can you learn about input specific options?

The Shiny function reference

Your turn

Complete the exercise on this page:

103-inputs

...

Quiz

What is the second thing a Shiny app needs?

Outputs

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Syntax Demo

View the app on this page:

102-output

...

Outputs

Notice:

  • Outputs are created by a @render. decorator
  • Pass the decorator a set of instructions for building the output (in the form of a function that returns the contents of the output)

What is a decorator?

Can any of our Python users explain?

Decorators are just functions

Important

A decorator is a function that wraps another function and changes its behavior.

 

Python has a convenient syntax for decorators. So these would do the same thing:

decorator(function, args)


@decorator(args)
function

Your turn

Complete the exercise on this page:

104-outputs

...

Quiz

Where are the instructions on how to build the outputs in this app?

Reactivity

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

To make an app reactive…

To make an app reactive…

Use an input value to build an output.

To make an app reactive…

Use an input value to build an output.


To access an input’s value, call input.<id>() where <id> is the string you passed to the input, e.g:

ui.input_slider(
    id="n", 
    label="Choose n", 
    min=0, 
    max=100, 
    value=20
)


Value:

input.n()

Your turn

Complete the exercise on this page:

105-reactivity

...

Reactive values are special

Important

  1. Only call reactive values from within a function that can handle them (e.g. a render function)  
  2. Call them like a function: input.n(), not input.n

Which input will cause the app to update?

What if…?

The components of an app

Can we spot them in our sample code?

What can go wrong?

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Common problems

  • An output doesn’t render
  • An output doesn’t update when an input changes
  • There’s some weird error

Common problems

  • An output doesn’t render
  • An output doesn’t update when an input changes
  • There’s some weird error
  • Syntax errors

Your turn

Complete the exercise on this page:

106-debug

...

Your turn

Complete the exercise on this page:

107-debug

...

Your turn

Complete the exercise on this page:

108-debug

...

Your turn

Complete the exercise on this page:

109-debug

...

Recap

Agenda

  • Introduction

  • Anatomy of an App

  • Your first App

  • Inputs

  • Outputs

  • Reactivity

  • What can go wrong?

  • Recap

Summary

Most Shiny app development consists of variations of these three things:

  1. Add Inputs and other UI elements
  2. Define outputs with render functions
  3. Give Shiny instructions on how to use inputs to build outputs

Weather data

How accurate are forecasts?

date city state observed_temp forecast_temp
2022-01-02 ALBANY NY 35 39
2022-01-02 ALBANY NY 35 40
2022-01-02 ALBANY NY 35 37
2022-01-02 ALBANY NY 35 39
2022-01-02 ALBANY NY 18 19

Your turn

Complete the exercise on this page:

110-app

...