htmlwidgets

class: title

<h1>The Blueprint</h1>
<h2>htmlwidgets</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>

---
class: break fullscreen center top huge
background-image: url('assets/img/bg/unsplash_wn-KYaHwcis.jpg')
background-size: cover

# Review

---
class: header_background

# Review Day 1

<ol>
<li><p>What did we learn?</p>
<ul class="can-edit key-review-learn">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li><p>What was confusing?</p>
<ul class="can-edit key-review-confusing">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ol>

---
class: center middle break fullscreen
background-image: url(assets/img/htmlwidgets/htmlwidgets-gallery.jpg)
background-size: 105%
background-position: center center

---
class: animated fadeIn

<div class="bg-white-05 w-100 h-100 flex items-center justify-center absolute top-0 left-0">
<h1 class="ttu red text-shadow-2"><span class="f1">htmlwidgets</span></h1>
</div>

---
layout: true

# htmlwidgets: An Overview

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-02.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-03.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-04.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-05.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-06.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-07.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-08.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-09.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-10.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-11.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-12.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-13.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-14.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-15.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-16.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-17.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-18.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-19.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-20.jpg')
background-size: contain
background-position: top left

---

class: animated fadeIn fast
background-image: url('assets/img/htmlwidgets/htmlwidgets-overview/htmlwidgets-overview-21.jpg')
background-size: contain
background-position: top left

---
layout: false

# htmlwidgets Process Overview

1. Gather dependencies

1. Configure .pkg[htmlwidgets] to manage the dependencies

1. Write R functions to hand data and options to .pkg[htmlwidgets]

1. Write the .black.bg-yellow.pl1.pt1.b[JS] glue code to connect a .black.bg-yellow.pl1.pt1.b.f-nun[JS] library with a set of data and options.

1. Collect .ph1[&#x2B50;] on GitHub

---

# Let's Do This Together!

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

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

.center.mt4[
# Read with me...

<a class="f4" href="https://github.com/gadenbuie/js4shiny-frappeCharts/" target="_blank">github.com/gadenbuie/js4shiny-frappeCharts</a>

Click on **dev journal** in the README
]