cher colin: des petites suggestions. (1) [mots] signalle un nouveau morceau à être introduit (remplaçant ce qui avait avant). (2) [!mots] suggère que tu enlèves "mots" du texte. fais-moi savoir si ceci t'aide. amitiés!
Chapter 19 Using JavaScript
[At] its core, building a Shiny app is building a JavaScript app that can talk with an R session. This process is invisible [to] most Shiny developers, who usually do everything [in] R. And in the end, [this is] the case: most of the Shiny apps out there are written with R.
[!But] in fact, when you are writing UI elements in Shiny, what you are actually doing is building a series of HTML tags, which are then linked to JavaScript events. Later on, when the app is running, these JavaScript events will communicate with R, in the sense that they will send data to R, and receive data from R. Most of the time, when these JavaScript events are receiving data, they modify the page the user sees. What happens under the hood is a little bit complex and out of scope for this book, but the general idea is [!there]: R talks to your browser through a web socket (that you can imagine as a small “phone line” with both [software modules] listening [at each end] 14), [with the browser talking] to R through the same web socket.
// TODO: create here a simple Flowchart
// R -> (Web Socket) -> JS
// R <- (Web Socket) <- JS
It’s important to note here that the communication happens in both ways: from R to JavaScript, and from JavaScript to R. In fact, when we write a piece of code like sliderInput("plop", "this", 1, 10, 5), what we are doing is creating a binding between JavaScript and R, where JavaScript listens to any event happening in the browser on the slider with the id "plop", and whenever JavaScript detects that something happens to this element, something (most of the time its value) is sent back to R. With output$bla <- renderPlot({}), what we are doing is making the two [communicate] the other way around: we are telling JavaScript to listen to any incoming data from R for the id "bla", and whenever JavaScript sees incoming data from R, [i.e.] it puts it into the proper HTML tag (here, JavaScript inserts in the page the image received from R).
So even if everything is written with R, we are [still] writing a web application, i.e. HTML, CSS and JavaScript elements. Once you’ve realized that, the possibilities are endless: in fact almost anything doable in a “classic” web app can be done in Shiny. What this also implies is that getting (even a little bit) better at writing HTML, CSS[,] and especially JavaScript will make your app better, lighter, and more user[-]friendly, as JavaScript is a language that has been designed to interact with a web page: change element appearances, hide and show things, click somewhere, show alerts and prompts… Knowing just enough JavaScript can improve the quality of your app: especially when you’ve been using R to [render] complex [UIs]: think conditional panels, simulating a button click from the server, hide and show elements… All these things are good examples of where you should be using JavaScript instead of building more or less complex renderUI or insertUI patterns in your server. A good rule to live [by.]
Moreover, the number of JavaScript libraries available on the web is tremendous ; and the good news is that Shiny has everything it needs to bundle external JavaScript libraries inside your application15.
This is what this [section] of the book aims at: giving you just enough JavaScript knowledge to lighten your Shiny App, in order to improve the global user and developer experience. In this part, we’ll first [review] some JavaScript basics [!,] which can be used “client-side” only, i.e.[,] only in your browser, or by making R & JS communicate with each other. In this [section], we’ll also explore common patterns for JavaScript in Shiny. Finally, we’ll quickly present some of the functions from {golem} which are built on top of JavaScript.
Note that this chapter is not supposed to be a comprehensive JavaScript course. External resources are linked all throughout this chapter and at the end if you want to dive deeper into JavaScript.
19.1 A quick introduction to JavaScript
JavaScript is a programming language which has been designed to work in the browser16. There are three ways to include the JavaScript code inside your web app:
As an external file, which is served to the browser alongside your main application page
Inside a Githubissues.
Githubissues is a development platform for aggregating issues.
cher colin: des petites suggestions. (1) [mots] signalle un nouveau morceau à être introduit (remplaçant ce qui avait avant). (2) [!mots] suggère que tu enlèves "mots" du texte. fais-moi savoir si ceci t'aide. amitiés!
Chapter 19 Using JavaScript [At] its core, building a Shiny app is building a JavaScript app that can talk with an R session. This process is invisible [to] most Shiny developers, who usually do everything [in] R. And in the end, [this is] the case: most of the Shiny apps out there are written with R.
[!But] in fact, when you are writing UI elements in Shiny, what you are actually doing is building a series of HTML tags, which are then linked to JavaScript events. Later on, when the app is running, these JavaScript events will communicate with R, in the sense that they will send data to R, and receive data from R. Most of the time, when these JavaScript events are receiving data, they modify the page the user sees. What happens under the hood is a little bit complex and out of scope for this book, but the general idea is [!there]: R talks to your browser through a web socket (that you can imagine as a small “phone line” with both [software modules] listening [at each end] 14), [with the browser talking] to R through the same web socket.
// TODO: create here a simple Flowchart
// R -> (Web Socket) -> JS
// R <- (Web Socket) <- JS
It’s important to note here that the communication happens in both ways: from R to JavaScript, and from JavaScript to R. In fact, when we write a piece of code like sliderInput("plop", "this", 1, 10, 5), what we are doing is creating a binding between JavaScript and R, where JavaScript listens to any event happening in the browser on the slider with the id "plop", and whenever JavaScript detects that something happens to this element, something (most of the time its value) is sent back to R. With output$bla <- renderPlot({}), what we are doing is making the two [communicate] the other way around: we are telling JavaScript to listen to any incoming data from R for the id "bla", and whenever JavaScript sees incoming data from R, [i.e.] it puts it into the proper HTML tag (here, JavaScript inserts in the page the image received from R).
So even if everything is written with R, we are [still] writing a web application, i.e. HTML, CSS and JavaScript elements. Once you’ve realized that, the possibilities are endless: in fact almost anything doable in a “classic” web app can be done in Shiny. What this also implies is that getting (even a little bit) better at writing HTML, CSS[,] and especially JavaScript will make your app better, lighter, and more user[-]friendly, as JavaScript is a language that has been designed to interact with a web page: change element appearances, hide and show things, click somewhere, show alerts and prompts… Knowing just enough JavaScript can improve the quality of your app: especially when you’ve been using R to [render] complex [UIs]: think conditional panels, simulating a button click from the server, hide and show elements… All these things are good examples of where you should be using JavaScript instead of building more or less complex renderUI or insertUI patterns in your server. A good rule to live [by.]
Moreover, the number of JavaScript libraries available on the web is tremendous ; and the good news is that Shiny has everything it needs to bundle external JavaScript libraries inside your application15.
This is what this [section] of the book aims at: giving you just enough JavaScript knowledge to lighten your Shiny App, in order to improve the global user and developer experience. In this part, we’ll first [review] some JavaScript basics [!,] which can be used “client-side” only, i.e.[,] only in your browser, or by making R & JS communicate with each other. In this [section], we’ll also explore common patterns for JavaScript in Shiny. Finally, we’ll quickly present some of the functions from {golem} which are built on top of JavaScript.
Note that this chapter is not supposed to be a comprehensive JavaScript course. External resources are linked all throughout this chapter and at the end if you want to dive deeper into JavaScript.
19.1 A quick introduction to JavaScript JavaScript is a programming language which has been designed to work in the browser16. There are three ways to include the JavaScript code inside your web app:
As an external file, which is served to the browser alongside your main application page Inside a Githubissues.