generated from r4ds/bookclub-template
-
Notifications
You must be signed in to change notification settings - Fork 11
/
03_discover-shiny-dependencies.Rmd
127 lines (83 loc) · 4.91 KB
/
03_discover-shiny-dependencies.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
# Discover Shiny dependencies
**Learning objectives:**
- These chapter will help us to understand shiny dependencies in R.
## Introduction
- Shiny creates HTML code for us, it is not enough to design a beautiful working app with user interactions.
- All modern websites and apps have a lot of CSS and JavaScript under the hood.
```{r,eval=FALSE}
library(shiny)
ui <- fluidPage(
p("Hello World")
)
server <- function(input, output) {
}
shinyApp(ui, server)
```
According to the head section, Shiny has three main dependencies:
- jQuery.
- shiny (custom JavaScript and CSS).
- Bootstrap (JavaScript and CSS).
## Bootstrap
- Bootstrap provides plug and play layout and interactive elements, such as tabs, navigation bars, tooltips, popovers to customize our shiny app.
- One of the great advantage of using Bootstrap is the responsiveness of the design that can work either on desktop or mobile.
- The code that summarizes Shiny Bootstrap-based layout elements, such as the well-known fluidPage() wrapper can be found [here](https://github.com/rstudio/shiny/blob/60db1e02b03d8e6fb146c9bb1bbfbce269231add/R/bootstrap-layout.R).
## jQuery, DOM manipulation
- [jQuery](https://jquery.com/) allows JavaScript developers to perform DOM manipulation, that is, interacting with HMTL elements, in a more user-friendly manner than with pure JavaScript.
```{js}
// select the button
var btn = document.getElementById('mybutton');
// event
btn.addEventListener('click', function() {
alert('You clicked me!'); // action
});
```
```{jq}
$('#mybutton').on('click', function() {
alert('You clicked me!');
});
```
## Custom dependencies
The last dependency contains custom JS and CSS code necessary for Shiny to work, that is:
- Fine-tune the layout.
- Register input/output and handle every single input/output action.
- Detailed mechanisms are studied in Chapters [12](https://unleash-shiny.rinterface.com/shiny-input-system.html#shiny-input-system) and [13](https://unleash-shiny.rinterface.com/shiny-input-lifecycle.html#shiny-input-lifecycle).
- Initialize and control the R/JS communication, as shown in Chapter [11.3.1](https://unleash-shiny.rinterface.com/shiny-intro.html#from-R-to-JS).
- Handle alerts/modals/notifications.
- Chapters [10.6.3](https://unleash-shiny.rinterface.com/survival-kit-javascript.html#shiny-js-object), [12](https://unleash-shiny.rinterface.com/shiny-input-system.html#shiny-input-system), [15](https://unleash-shiny.rinterface.com/shiny-custom-handler.html#shiny-custom-handler) and [19](https://unleash-shiny.rinterface.com/custom-templates-interactivity.html#custom-templates-interactivity) showcase the most important elements of those custom files.
## Exercise
In the following exercise, we consider a slightly more complex app with a slider as well as a plot output.
- Run the app runExample("01_hello").
- Open the HTML inspector.
- Delete the bootstrap.min.css and ion.rangeSlider.css dependencies by removing the corresponding DOM element.
What happened to the application’s UI?
## Conclusion
To sum up, shiny dependencies are necessary to make Shiny what it is! Importantly, Shiny only loads what is necessary to have. For instance, as shown above, it is only necessary to include the slider dependencies when there is at least one slider in the app, which eventually improves app performances.
## Meeting Videos
### Cohort 1
`r knitr::include_url("https://www.youtube.com/embed/SiRytDtkZIo")`
<details>
<summary> Meeting chat log </summary>
```
00:09:25 Oluwafemi Oyedele: Hi Federica, Good Day!!!
00:10:49 Lucio Cornejo: Hello everyone
00:10:55 Russ: Hi
00:19:18 Lucio Cornejo: https://github.com/rstudio/shiny/issues/2630#issuecomment-533344017
00:20:02 Trevin: I didn't explore this at all, but curious if Shiny for Python has different dependencies compared to R
00:21:56 Arthur Shaw: Reacted to "I didn't explore thi..." with 🤔
00:24:05 Russ: https://shiny.rstudio.com/articles/layout-guide.html
00:24:09 Arthur Shaw: https://shiny.rstudio.com/articles/layout-guide.html
00:25:51 Lucio Cornejo: https://getbootstrap.com/docs/5.0/layout/containers/
00:30:48 Lucio Cornejo: about the Shiny for Python dependencies: https://shinylive.io/py/examples/
00:34:57 Trevin: Awesome, thank you!
00:35:12 Lucio Cornejo: https://github.com/rstudio/shiny/issues/2630#issuecomment-533344017
00:37:10 Trevin: It's frozen for me too
00:44:12 Lucio Cornejo: I think the removals work great for the example app that comes with the Shiny library
00:44:20 Lucio Cornejo: specially due to the slider pressence
00:47:10 Lucio Cornejo: we also lose reponseiveness when removing bootstrap
00:47:15 Lucio Cornejo: once the width screen changes
00:50:12 Lucio Cornejo: https://shiny.rstudio.com/reference/shiny/1.7.0/suppressdependencies
00:52:08 Lucio Cornejo: If one doesn't want to use jQuery, this page is very useful: https://youmightnotneedjquery.com/
00:54:59 Lucio Cornejo: Byee everyone. See you in three weeks!
```
</details>