rr2024-shiny-bslib.qmd

---
title: "Développer des applications Shiny élégantes et performantes avec {bslib}"
subtitle: "Mouna Belaid"
author: "[Rencontres R](https://rr2024.sciencesconf.org/)"
lang: fr
date: "2024-06-14"
date-format: long
format: 
  revealjs:
    theme: custom.scss
    code-link: true
    footer: "{{< fa envelope >}} [belaid.mounaa@gmail.com](mailto:belaid.mounaa@gmail.com) {{< fa globe >}} [mounabelaid.netlify.app](https://mounabelaid.netlify.app/) {{< fa brands linkedin >}} [mouna-belaid](https://www.linkedin.com/in/mouna-belaid-b10300112/)"
    slide-number: c
    logo: images/rr2024.jpg
    code-block-height: 650px
execute: 
  eval: false
  echo: true
---

## Qui suis-je ?

::: columns
::: column
Ingénieure en Statisitque et Analyse de l'Information.

Consultante Data chez ArData.

Membre active dans la communauté R :

-   Lead de [R-Ladies Paris](https://www.meetup.com/fr-FR/rladies-paris/)
-   Membre de [R-Ladies Global](https://rladies.org/)
-   Modératrice/Speaker dans des conférences autour de R (Shiny Conf, SatRdays, useR Conference, Posit Conf)
:::

::: column
![](images/logo_rladiesparis.jpg){fig-align="center" style="margin-top:240px; width:180px;"}
:::
:::

## Plan



## Pourquoi devriez-vous vous intéresser à la mise en forme de vos applications Shiny ?

-   Améliorer l'expérience globale de l'utilisateur.
-   Facilier la prise de décision
-   Améliorer la connaissance et la compréhension des données

## C'est quoi {bslib} ?

Le package R bslib fournit une boîte à outils UI moderne pour Shiny et R Markdown basée sur Bootstrap, directement depuis R sans écrire du CSS ou HTML. Il fournit des versions spéciales de bootstrap 4 et 3 qui fonctionnent uniquement avec Shiny et R Markdown.

## C'est quoi Bootstrap ?

-   Bootstrap est un framework open-source de développement web front-end largement utilisé.

-   Il offre une collection de composants, de styles et de scripts JavaScript prêts à l'emploi pour la conception de sites web réactifs.

-   Il est basé sur HTML, CSS et JavaScript, et propose une grille flexible, des composants de formulaire, des boutons, des menus déroulants, des modales, des alertes, et bien d'autres fonctionnalités.

## Avantages de passer à {bslib}



# Débuter avec {bslib} dans Shiny {.center-title-slide}

## Améliorer l'apparence de votre application

```{r}
library(shiny)
library(bslib)
ui <- fluidPage(
  theme = bs_theme()
)
```

::: fragment
::: {.column .add-space width="48%"}
::: {style="text-align: center"}
`Bootstrap 3`
:::

![](images/without_bslib.png){.absolute top="260" left="0" width="500"}
:::

::: {.column width="48%"}
::: {style="text-align: center"}
`Bootstrap 5`
:::

![](images/with_bslib.png){.absolute top="260" right="0" width="500"}
:::
:::

## Améliorer l'apparence de votre application

```{r}
bs_theme(
  version = version_default(),
  preset = NULL,
  ...,
  bg = NULL,
  fg = NULL,
  primary = NULL,
  secondary = NULL,
  success = NULL,
  info = NULL,
  warning = NULL,
  danger = NULL,
  base_font = NULL,
  code_font = NULL,
  heading_font = NULL,
  font_scale = NULL,
  bootswatch = NULL
)
```

## Prévisualiser un thème Bootstrap personnalisé

```{r}
library(bslib)
theme <- bs_theme(bg = "white", fg = "#124f83", primary = "#35bff2")
bs_theme_preview(theme)
```

![](images/theme_demo.png){.absolute top="210" width="100%"}

## Personnalisation instantanée des thèmes avec bs_themer()

::: {.column .add-space width="48%"}
::: {style="text-align: center"}
`UI`
:::

```{r}
#| code-line-numbers: "3-4"
ui <- fluidPage(
  titlePanel("Penguin Dashboard"),
  theme = bs_theme(
    bootswatch = "minty"),
  sidebarLayout(
    sidebarPanel(...),
    mainPanel(...)))
```
:::

::: {.column width="48%"}
::: {style="text-align: center"}
`Server`
:::

```{r}
#| code-line-numbers: "2"
server <- function(input, output) {
  bs_themer()
  ...
}
```
:::

![](images/preview_bs_themer.png){.absolute top="340" width="100%"}

# Passage de {shinydashboard} à {bslib}

## Passage de {shinydashboard} à {bslib}

### `shinydashboard`

![](images/shinydashboard_app.png){.absolute top="100" width="80%"}

### `bslib`

![](images/bslib_app.png){.absolute top="350" width="80%"}

## Composants de {bslib}

### Mise en forme de la page

::: {.column .add-space width="48%"}
::: {style="text-align: center"}
`shinydashboard`
:::

```{r}
#| code-line-numbers: "2,9,11"
# UI
ui <- dashboardPage(
  dashboardHeader(
    title = "Penguin Dashboard"),
  dashboardSidebar(...),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "dashboard", ...),
      tabItem(
        tabName = "summary", ...)
      )
    )
  )
```
:::

::: {.column width="48%"}
::: {style="text-align: center"}
`bslib`
:::

```{r}
#| code-line-numbers: "3,12,13"
# UI
ui <- function() {
  page_navbar(
    title = "Penguin Dashboard",
    sidebar = sidebar(
      ...
    ),
    theme = bs_theme(
      version = 5,
      bootswatch = "materia"
    ),
    nav_panel(title = "Dashboard", ...),
    nav_panel(title = "Summary", ...)
  )
}
```
:::

## Composants de {bslib}

### nav_menu() et nav_item()

::: {.column .add-space width="48%"}
```{r}
#| code-line-numbers: "14-18"
# UI
ui <- function() {
  page_navbar(
    title = "Penguin Dashboard",
    sidebar = sidebar(
      ...
    ),
    theme = bs_theme(
      version = 5,
      bootswatch = "materia"
    ),
    nav_panel(title = "Dashboard", ...),
    nav_panel(title = "Summary", ...),
    nav_menu("Resources",
             nav_item(a("Documentation", href = "https://www.example.com", target = "_blank")),
             nav_item(a("Replay", href = "https://www.youtube.com/channel/UCID33pDULsQg2y4FVlv4CnQ", target = "_blank")),
             nav_item(a("Data Source", href = "https://allisonhorst.github.io/palmerpenguins/", target = "_blank"))
           )
    )
}
```
:::

::: {.column width="48%"}
![](images/resources_menu.png){.absolute width="60%"}
:::

## Composants de {bslib}

| Fonction     | Opération                                          |
|--------------|----------------------------------------------------|
| nav_spacer() | Contrôler l'alignement sur la barre de navigation  |
| nav_show()   | Afficher dynamiquement des éléments de navigation  |
| nav_hide()   | Cacher dynamiquement des éléments de navigation    |
| nav_insert() | Insérer dynamiquement des éléments de navigation   |
| nav_remove() | Supprimer dynamiquement des éléments de navigation |