Extending Shiny

class: title

<h1>Licensed to ill</h1>
<h2>Extending Shiny</h2>
<div class="rstudio-conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie</p>
<p class="talk-date">rstudio::conf(2020, "JavaScript for Shiny Users")</p>
</div>

---

# Questions and Follow up

.can-edit.key-QandA[
- Questions and answers to anything that came up in the first half
]

---
class: break white animated slideInUp slideOutRight
background-image: url('assets/img/bg/unsplash_F7Rl02ir0Gg.jpg')
background-size: cover

# Shiny Inputs

---
class: animated slideInLeft slideOutUp
background-image: url('assets/img/bg/unsplash_-EnI0H6Wm6s.jpg')
background-size: cover

---
class: animated slideInUp

# Let's Build a Shiny Input!

We're going to do all the steps of this project together (again).

Be kind to your neighbors and help them if they get stuck.

.center.mt4[
# Open up your .dark-pink[frappeCharts] Project

<a class="f4" href="http://bit.ly/js4shiny-input" target="_blank">bit.ly/js4shiny-input</a>
]

---
name: overview

# The Shiny Input Binding

.f6[Skeleton Snippet: [bit.ly/js4shiny-input-binding](http://bit.ly/js4shiny-input-binding)]

.w-90.mh-a[
- .b.code[find()] .fr[How to find your input elements on the page]
]

.w-90.mh-a[
- .b.code[subscribe()] .fr[What browser events will trigger an update from your input]
]

.w-90.mh-a[
- .b.code[getRatePolicy()] .fr[How often to send updates back to the server]
]

.w-90.mh-a[
- .b.code[getValue()] .fr[What is the value of your input?]
]

.w-90.mh-a[
- .b.code[receiveMessage()] .fr[Let the input receive messages from the server]
]

.w-90.mh-a[
- .b.code[setValue()] .fr[Update your HTML from server]
]

---
name: checkbox
class: header_background

# Learn from checkboxInput()

.f6[[bit.ly/js4shiny-checkbox](http://bit.ly/js4shiny-checkbox)]

Find a partner and read through the input binding definition together.

Take turns explaining to each other what each method does:

.code[
- find
- getValue
- setValue
- subscribe
- unsubscribe
- getState
- receiveMessage
]

---
name: get-value
class: header_background

## Update .getValue()

The `.value` of a `textarea` element is a string containing the text
inside the element.

Update `.getValue()` to

1.  Return the number of characters the user has typed ([changelog:
    b3958d](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/b3958d5e3f60fbac3a0100673696bd413a276fb4))

2.  Return the number of words the user has entered ([changelog:
    e3fa48](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/e3fa485bb60853e391302289213d3cd5f0846b3e))

3.  Create variables for both number of characters and words and return
    both in an object ([changelog:
    edfb93](https://github.com/gadenbuie/js4shiny-frappeCharts/commit/edfb9399eae5207cc4a3ef9b48e62c9c92230477))

---
name: debounce

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-03.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-04.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-05.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-06.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-07.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-08.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-09.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-10.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-11.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-12.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-13.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-14.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-15.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-16.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-17.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-18.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-19.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-20.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-21.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-22.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-23.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-24.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-25.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-26.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-27.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-28.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-29.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-30.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/extending/direct-debounce-throttle/direct-debounce-throttle-31.jpg')
background-size: contain
background-position: top left