+ - 0:00:00
Notes for current slide
Notes for next slide

Hello World Wide Web

JavaScript for Shiny Users

Garrick Aden-Buie

rstudio::conf(2020, "JavaScript for Shiny Users")

1

JS
CSS
HTML
...WTF?

2

How does the web work?

3
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

4
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

5
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

6
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

7
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

8
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

9
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

10
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

11
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

12
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

13
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

14
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

15
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different

How does the web work?

16
  • Browser requests rstudio.com
  • gets rstudio.com/index.html
  • index.html says here's the document
  • and you also need these other files
  • browser reads document structure, styles, javascript
  • builds a web page and hands it to you
  • what index.html says it should be and what the page is when you see it are very different
17
  • HTML tells the browser what:
    • content
    • images
    • other files
18
  • CSS tells the browser how to show things to you
19
  • JavaScript can step in at any point and mess with the whole process

HTML

<button id="button-demo" value='0'>
  &#x1F44D; Plus one
</button>
20

Go through the example twice... The first time, just showing the basics, focusing on the role of the languages.

The second time, talk through

  • connected via id
  • css controls appearance
    • note: appearance in states so sometimes it feels like it does something but it doesn't change the HTML
  • js can change the HTML, change the styles, move things around, react etc.

Finally use last block as quick intro to JS

CSS

#button-demo {
  color: #4d8dc9;
  background-color: white;
  border: 2px solid #4d8dc9;
  padding: 0.5em 1em;
}
21

CSS

#button-demo {
  color: #4d8dc9;
  background-color: white;
  border: 2px solid #4d8dc9;
  padding: 0.5em 1em;
}
#button-demo:hover {
  background-color: #4d8dc9;
  color: white;
}
22

CSS

#button-demo {
  color: #4d8dc9;
  background-color: white;
  border: 2px solid #4d8dc9;
  padding: 0.5em 1em;
}
#button-demo:hover {
  background-color: #4d8dc9;
  color: white;
}
#button-demo:active {
  transform: scale(0.9);
}
23

JS

const btn = document.getElementById('button-demo')
btn.addEventListener('click', function() {
  let clicks = parseInt(btn.value)
  clicks = clicks + 1
  btn.value = clicks
  btn.innerHTML = `&#x1F44D; Plus one (${clicks})`
  console.log('Clicks: ' + clicks)
})














{} 



24
Shiny + .js


What can we do with Shiny and Javascript?
25
Use color to give feedback



   iframe content



26
Hold your horses...



   iframe content



27
Waiting is easier with communication



   iframe content



28
Direct attention with animation



   iframe content



29
Send messages to your users



   iframe content



30
Guide users through your app



   iframe content



31
Add keyboard shortcuts



   iframe content



32
Make R Markdown awesome-r


pkg-stats.Rmd
pkg-stats.html
Browser
## ggplot2 {.pkg-stats}
downloads
:    846k/month
stars
:    4.2k
forks
:    1.5k
<h2 class="pkg-stat" id="ggplot2">ggplot2</h2>
<dl>
  <dt>downloads</dt>
  <dd>846k/month</dd>
  <dt>stars</dt>
  <dd>4.2k</dd>
  <dt>forks</dt>
  <dd>1.5k</dd>
</dl>
33
Make R Markdown awesome-r



   iframe content



34
Don't work too hard



   iframe content



35
Use JavaScript libraries for fun



   iframe content



36
Use JavaScript libraries for profit



   iframe content



37
Use JavaScript libraries for profit



   iframe content



38
Workshop goals




39
One major reason for focusing on some of the fundamentals is that it's an expected baseline in much of the documentation.


Web people and libraries assume you're going to do web things, as anyone whose asked a shiny specific webdev question on stack overflow knows.


R and Shiny package docs focus on being productive with the tools, not necessarily going deep. How does anybody learn this?


Having a solid mental model of what web dev is supposed to be like is super helpful.
Workshop goals






40
One major reason for focusing on some of the fundamentals is that it's an expected baseline in much of the documentation.


Web people and libraries assume you're going to do web things, as anyone whose asked a shiny specific webdev question on stack overflow knows.


R and Shiny package docs focus on being productive with the tools, not necessarily going deep. How does anybody learn this?


Having a solid mental model of what web dev is supposed to be like is super helpful.
Workshop goals


Next: Maiden Voyage (How to WWW)
41
One major reason for focusing on some of the fundamentals is that it's an expected baseline in much of the documentation.


Web people and libraries assume you're going to do web things, as anyone whose asked a shiny specific webdev question on stack overflow knows.


R and Shiny package docs focus on being productive with the tools, not necessarily going deep. How does anybody learn this?


Having a solid mental model of what web dev is supposed to be like is super helpful.


JS
CSS
HTML
...WTF?
2





  

    Paused
  





  

    
Help

    
Keyboard shortcuts

    

      

        
          ↑,
          ←,
          Pg Up,
          k
        
        Go to previous slide
      

      

        
          ↓,
          →,
          Pg Dn,
          Space,
          j
        
        Go to next slide
      

      

        
          Home
        
        Go to first slide
      

      

        
          End
        
        Go to last slide
      

      

        
          Number + Return
        
        Go to specific slide
      

      

        
          b /
          m /
          f
        
        Toggle blackout / mirrored / fullscreen mode
      

      

        
          c
        
        Clone slideshow
      

      

        
          p
        
        Toggle presenter mode
      

      

        
          t
        
        Restart the presentation timer
      

      

        
          ?,
          h
        
        Toggle this help
      

    
oTile View: Overview of Slides

  

  

    

      

        
          Esc
        
        Back to slideshow