WEBVTT
00:00:01.976 --> 00:00:02.964
[FLOURISH]
00:00:07.904 --> 00:00:09.880
[APPLAUSE]
00:00:14.340 --> 00:00:14.972
Hi, everybody.
00:00:14.972 --> 00:00:16.180
Thank you so much for coming.
00:00:16.180 --> 00:00:17.471
I really, really appreciate it. I've
00:00:17.471 --> 00:00:19.350
been doing some very
exciting work
00:00:19.350 --> 00:00:22.480
and I'm really even more excited
to share it with you all today.
00:00:22.480 --> 00:00:24.015
So I'm Alan Dipert. I
00:00:24.015 --> 00:00:25.170
work at RStudio.
00:00:25.170 --> 00:00:27.669
Like Barrett, I'm
on the Shiny team
00:00:27.669 --> 00:00:30.210
and I've had the pleasure over
the past few months of working
00:00:30.210 --> 00:00:35.410
on this problem of integrating
React, the JavaScript library,
00:00:35.410 --> 00:00:35.910
with Shiny.
00:00:38.550 --> 00:00:41.670
I believe that for quite
some time people in the
00:00:41.670 --> 00:00:43.920
Shiny community have been
interested in React and about ways
00:00:43.920 --> 00:00:45.753
to integrate it with
Shiny, and so this work was
00:00:45.753 --> 00:00:49.860
initiated in an effort to
bridge that gap somehow.
00:00:49.860 --> 00:00:51.720
And we've been at
it for a few months
00:00:51.720 --> 00:00:54.060
and we have work to show,
which is why I'm here
00:00:54.060 --> 00:00:56.850
and why I'm so excited.
00:00:56.850 --> 00:00:59.970
But some questions and
problems remain unsolved,
00:00:59.970 --> 00:01:02.550
and that's sort of
where you come in.
00:01:02.550 --> 00:01:04.110
So I would encourage
you, if you're
00:01:04.110 --> 00:01:05.820
at all interested
in any of this,
00:01:05.820 --> 00:01:07.479
to follow up with me afterwards.
00:01:07.479 --> 00:01:09.270
There may or may not
be time for questions,
00:01:09.270 --> 00:01:11.186
but I'm always happy to
talk about this stuff. And
00:01:11.186 --> 00:01:13.899
we can talk shop
and
00:01:13.899 --> 00:01:16.440
discuss why you're interested in
the context that you're interested in it in
00:01:16.440 --> 00:01:19.260
because I think that this could
be the start of a really
00:01:19.260 --> 00:01:22.890
fun and exciting little niche
thing in the Shiny ecosystem.
00:01:22.890 --> 00:01:24.900
So without further
ado, let's start
00:01:24.900 --> 00:01:31.910
with a motivating problem, I
guess, a problem slash demo.
00:01:31.910 --> 00:01:36.890
So like many of you, I'm online.
00:01:36.890 --> 00:01:37.640
I'm on the web.
00:01:37.640 --> 00:01:38.669
I surf the web.
00:01:38.669 --> 00:01:40.460
And you come across
things that are awesome
00:01:40.460 --> 00:01:42.140
and the only
problem with them is
00:01:42.140 --> 00:01:43.730
that they don't
have an HTML widget
00:01:43.730 --> 00:01:45.934
or they're otherwise
not accessible from R.
00:01:45.934 --> 00:01:47.600
So one of these things
that I ran across
00:01:47.600 --> 00:01:53.060
was a React-based
library called Mapbox GL.
00:01:53.060 --> 00:01:54.560
Mapbox is a company.
00:01:54.560 --> 00:01:57.200
They make a library
called Mapbox GL, which
00:01:57.200 --> 00:01:59.990
is very similar to
Leaflet, but it has
00:01:59.990 --> 00:02:01.340
some interesting properties.
00:02:01.340 --> 00:02:03.985
In particular, it's
highly themeable.
00:02:03.985 --> 00:02:06.110
So let me show you some of
the demos of this thing.
00:02:08.639 --> 00:02:12.840
So this is a very nice
Leaflet-esque map.
00:02:12.840 --> 00:02:17.430
But of course, we can do
heat maps, pretty fancy.
00:02:17.430 --> 00:02:18.880
And you can switch
between these.
00:02:18.880 --> 00:02:20.970
The thing that's
governing the colors
00:02:20.970 --> 00:02:24.660
of the roads and the city and
county titles and stuff, that's
00:02:24.660 --> 00:02:28.452
all governed by one of
these Mapbox style objects.
00:02:28.452 --> 00:02:29.910
And then on the
left hand side here
00:02:29.910 --> 00:02:32.980
we've got the heap of
JavaScript code involved
00:02:32.980 --> 00:02:35.270
in rendering that.
00:02:35.270 --> 00:02:39.380
Probably my most favorite
one is the Superman mode one
00:02:39.380 --> 00:02:44.000
where you literally fly around.
00:02:44.000 --> 00:02:45.630
Right?
00:02:45.630 --> 00:02:48.390
So just to be clear,
I didn't make this.
00:02:48.390 --> 00:02:51.360
But I think it's awesome and
this is the kind of thing
00:02:51.360 --> 00:02:53.790
that I think gets
me excited when
00:02:53.790 --> 00:02:56.010
I am able to use it from R.
00:02:56.010 --> 00:03:03.510
So what I did is in the
course of not too long, maybe
00:03:03.510 --> 00:03:05.960
an hour or two, using
the tools and I'm
00:03:05.960 --> 00:03:09.240
about to explain to you, I
was able to make my own HTML
00:03:09.240 --> 00:03:13.020
widget that provides a subset
of the functionality we just
00:03:13.020 --> 00:03:16.890
saw and delivers it to
us as an R HTML widget.
00:03:16.890 --> 00:03:19.920
And so I became aware
early in the conference
00:03:19.920 --> 00:03:22.710
that the most important thing
to keep in mind about here
00:03:22.710 --> 00:03:24.000
in Austin are tacos.
00:03:24.000 --> 00:03:27.900
So there's this trending--
has been trending.
00:03:27.900 --> 00:03:29.691
Someone named Caitlin Hudon--
00:03:29.691 --> 00:03:31.440
hope I got that right--
who I haven't met,
00:03:31.440 --> 00:03:33.240
apparently posted
on Twitter a list
00:03:33.240 --> 00:03:34.500
of her five favorite places.
00:03:34.500 --> 00:03:36.810
And then an RStudio
person, Thomas Marchi
00:03:36.810 --> 00:03:39.180
made a Shiny dashboard
using a Leaflet map,
00:03:39.180 --> 00:03:42.150
and I thought, hey, in keeping
with the tradition of taco
00:03:42.150 --> 00:03:45.180
enthusiasm, I should make
some kind of taco app.
00:03:45.180 --> 00:03:47.430
So here we are.
00:03:47.430 --> 00:03:51.060
I've got some taco joints
loaded up into a data frame
00:03:51.060 --> 00:03:53.370
and I'm displaying them
with a data table here.
00:03:53.370 --> 00:03:59.190
And then over here I've got taco
locations with fork and knife
00:03:59.190 --> 00:04:02.280
sort of blurry little icons.
00:04:02.280 --> 00:04:06.270
And then probably the neatest
but also most awkward thing
00:04:06.270 --> 00:04:09.570
I can do is I can filter
this, and after a little bit
00:04:09.570 --> 00:04:12.450
of burping, it
comes back and you
00:04:12.450 --> 00:04:14.749
can see that we filter
what shows up on the map.
00:04:14.749 --> 00:04:17.040
So like I said, this was,
like, an hour or two of work.
00:04:17.040 --> 00:04:18.930
Now, granted, I'm,
like, the world's expert
00:04:18.930 --> 00:04:22.290
on this weird little library, so
take that with a grain of salt.
00:04:22.290 --> 00:04:26.882
But like I said, I'm always
happy to help you use it.
00:04:26.882 --> 00:04:27.840
So this is the promise.
00:04:27.840 --> 00:04:29.880
This is the kind of
thing that I think
00:04:29.880 --> 00:04:33.000
we can do more of if we develop
these tools that help us bridge
00:04:33.000 --> 00:04:36.270
the JavaScript ecosystem, in
particular the React ecosystem
00:04:36.270 --> 00:04:39.060
with Shiny.
00:04:39.060 --> 00:04:42.860
I'll flip back into
PowerPoint mode here.
00:04:48.711 --> 00:04:49.210
Oh, yeah.
00:04:49.210 --> 00:04:52.395
So there's some recordings in
case there are internet issues.
00:04:56.220 --> 00:04:59.520
So this is the all of
the JavaScript code
00:04:59.520 --> 00:05:01.870
that I needed to
write in order to make
00:05:01.870 --> 00:05:04.710
go what I just showed you.
00:05:04.710 --> 00:05:07.470
If you know JavaScript and
are familiar with React,
00:05:07.470 --> 00:05:10.420
you might have a slight grin
or even a smile on your face.
00:05:10.420 --> 00:05:12.900
If you don't know JavaScript
or don't know React,
00:05:12.900 --> 00:05:15.120
you might be a little
worried at this point.
00:05:15.120 --> 00:05:15.900
But don't be.
00:05:19.080 --> 00:05:22.200
I can assure you that
the things you see here
00:05:22.200 --> 00:05:25.770
can be learned fairly quickly
and a big part of what
00:05:25.770 --> 00:05:27.600
we hope to do with
this initiative
00:05:27.600 --> 00:05:30.570
is to build out not just the
code to do that bridging that I
00:05:30.570 --> 00:05:32.760
mentioned, but also to
build out the documentation
00:05:32.760 --> 00:05:36.090
and the recommendations
around learning JavaScript,
00:05:36.090 --> 00:05:39.060
leveraging its ecosystem, and
all those things that surround
00:05:39.060 --> 00:05:43.620
JavaScript development to make
them more accessible to people
00:05:43.620 --> 00:05:45.480
who don't have that experience.
00:05:45.480 --> 00:05:47.220
So this is the extent
of the code that
00:05:47.220 --> 00:05:49.450
does the adapting
of the React library I
00:05:49.450 --> 00:05:51.600
just showed to Shiny world.
00:05:51.600 --> 00:05:54.720
And yeah, I think it's,
like, 11 lines of code.
00:05:54.720 --> 00:05:56.054
I don't know.
00:05:56.054 --> 00:05:57.720
Is anyone surprised
at how small this is
00:05:57.720 --> 00:05:59.950
or disgusted by how big it is?
00:05:59.950 --> 00:06:01.581
Show of hands.
00:06:01.581 --> 00:06:03.050
Hm, OK.
00:06:03.050 --> 00:06:04.645
[LAUGHTER]
00:06:04.645 --> 00:06:07.020
My meme game is usually very
weak, but I put this one in.
00:06:07.020 --> 00:06:09.360
It seems they've gone
well, so all right.
00:06:09.360 --> 00:06:11.639
So if you're the
kind of person who
00:06:11.639 --> 00:06:13.680
would prefer to ignore me
for the next 15 minutes
00:06:13.680 --> 00:06:15.600
and just start hacking,
here are the URLs
00:06:15.600 --> 00:06:16.780
you need to know about.
00:06:16.780 --> 00:06:19.350
We have a GitHub
organization, react-R,
00:06:19.350 --> 00:06:22.010
and that's what we call it
because React without the dash
00:06:22.010 --> 00:06:23.665
r was taken.
00:06:23.665 --> 00:06:25.540
But if you go there,
that's the organization.
00:06:25.540 --> 00:06:27.150
There are some
example repos and then
00:06:27.150 --> 00:06:29.640
there's the React R library--
00:06:29.640 --> 00:06:33.810
excuse me, package repo
itself, and there's also
00:06:33.810 --> 00:06:37.260
a link to various other pieces
of tutorial documentation.
00:06:37.260 --> 00:06:39.510
At the bottom, that
will take you directly
00:06:39.510 --> 00:06:41.880
to our tutorial,
which as of right now
00:06:41.880 --> 00:06:45.150
is the best way to
ramp up on this topic,
00:06:45.150 --> 00:06:47.400
particularly if you have
a little bit of JavaScript
00:06:47.400 --> 00:06:48.209
background.
00:06:48.209 --> 00:06:50.250
But if you don't have that
JavaScript background,
00:06:50.250 --> 00:06:51.870
the rest of the talk is for you.
00:06:51.870 --> 00:06:55.590
So we're going to
talk about what
00:06:55.590 --> 00:06:59.910
React is, why it's interesting.
00:06:59.910 --> 00:07:03.020
We're going to discuss the core
unit of composition in React,
00:07:03.020 --> 00:07:05.790
the component and how
it's relevant to us.
00:07:05.790 --> 00:07:08.730
I'm going to introduce you
further to this React R
00:07:08.730 --> 00:07:11.910
package, and then I'm going
to describe at a high level
00:07:11.910 --> 00:07:13.950
the process I went through
to make that widget.
00:07:13.950 --> 00:07:15.824
And then I'll talk a
little bit about what we have in store
00:07:15.824 --> 00:07:18.270
for the future.
00:07:18.270 --> 00:07:20.330
So what is React?
00:07:20.330 --> 00:07:26.070
Well, it's a JavaScript library
for making user interfaces.
00:07:26.070 --> 00:07:29.820
It was invented at
Facebook around 2011.
00:07:29.820 --> 00:07:32.280
I believe they used
it for the news feed.
00:07:32.280 --> 00:07:34.290
And then they bought
Instagram and I think
00:07:34.290 --> 00:07:36.720
Instagram developed it further.
00:07:36.720 --> 00:07:39.060
And after Instagram had
sort of refined the idea--
00:07:39.060 --> 00:07:41.370
or engineers at
Instagram, rather--
00:07:41.370 --> 00:07:43.694
they did a wide
open source release.
00:07:43.694 --> 00:07:46.110
So it's quite a mature-- even
though it wasn't open source
00:07:46.110 --> 00:07:48.690
until 2013, it's still
quite a mature library
00:07:48.690 --> 00:07:51.900
and has been used thoroughly.
00:07:51.900 --> 00:07:55.230
It supports a
functional approach.
00:07:55.230 --> 00:07:56.850
I think if you know
how to write R,
00:07:56.850 --> 00:07:59.220
you already know what the
functional paradigm is.
00:07:59.220 --> 00:08:00.914
I won't elaborate
on that, but that's
00:08:00.914 --> 00:08:03.330
another thing like React that's
trending in the JavaScript
00:08:03.330 --> 00:08:04.021
ecosystem.
00:08:04.021 --> 00:08:06.270
But like I said, if you know
R, you're sort of already
00:08:06.270 --> 00:08:07.853
on board, so I
wouldn't worry too much about
00:08:07.853 --> 00:08:11.730
that paradigm or
that word.
00:08:11.730 --> 00:08:13.680
And it's oriented
around components.
00:08:13.680 --> 00:08:15.420
I mentioned that the
unit of composition
00:08:15.420 --> 00:08:18.510
in a React-based
application is a component.
00:08:21.020 --> 00:08:25.220
And finally, they invented
a syntax called JSX
00:08:25.220 --> 00:08:28.930
that you can think of as a
hybrid JavaScript and HTML
00:08:28.930 --> 00:08:30.110
syntax.
00:08:30.110 --> 00:08:33.080
And it really does make writing
these kinds of applications
00:08:33.080 --> 00:08:35.840
quite a bit more concise.
00:08:35.840 --> 00:08:40.840
And we'll see some
of that in a second.
00:08:40.840 --> 00:08:45.980
So I think you should care about
this for one of two reasons.
00:08:45.980 --> 00:08:48.700
One, you did what I
just
00:08:48.700 --> 00:08:50.950
demonstrated. You're on the internet,
you saw something really cool,
00:08:50.950 --> 00:08:54.080
you found it, and nobody's
made the HTML widget yet
00:08:54.080 --> 00:08:56.550
so you want to be
the person to do it.
00:08:56.550 --> 00:08:58.300
That's a reason to be
interested in React.
00:08:58.300 --> 00:09:00.700
It has a huge
ecosystem with tons
00:09:00.700 --> 00:09:03.160
of things that deserve to
have their own R wrappers.
00:09:03.160 --> 00:09:06.250
And I see if everyone in this
class learns how to do this,
00:09:06.250 --> 00:09:09.130
maybe we could get a significant
percentage for the React
00:09:09.130 --> 00:09:11.645
ecosystem into R.
00:09:11.645 --> 00:09:14.020
The other reason might be
you're coming from a JavaScript
00:09:14.020 --> 00:09:17.140
development background, you
have experience with React
00:09:17.140 --> 00:09:20.290
and you want to build
a React-based library,
00:09:20.290 --> 00:09:24.970
and maybe adding it to R
is an afterthought for you,
00:09:24.970 --> 00:09:26.780
or would be icing on top.
00:09:26.780 --> 00:09:28.990
So that's another reason
to be interested in React,
00:09:28.990 --> 00:09:31.932
if you want to go
deep on JavaScript.
00:09:31.932 --> 00:09:33.640
Oh, I should mention
also that the reason
00:09:33.640 --> 00:09:35.800
to go deep on
JavaScript with React,
00:09:35.800 --> 00:09:39.580
in particular, is it's just
wildly, wildly, wildly popular
00:09:39.580 --> 00:09:42.130
and well supported by
documentation and communities
00:09:42.130 --> 00:09:45.000
and so on.
00:09:45.000 --> 00:09:47.310
So React components,
what are they?
00:09:47.310 --> 00:09:51.280
Very similar to
HTML tags, honestly.
00:09:51.280 --> 00:09:52.590
I think of them as containers.
00:09:52.590 --> 00:09:55.590
They contain data
hierarchically,
00:09:55.590 --> 00:09:58.770
so it's sort of a way
to describe a tree.
00:09:58.770 --> 00:10:02.520
The big difference is that
the HTML tags or elements
00:10:02.520 --> 00:10:04.410
are defined by a standard.
00:10:04.410 --> 00:10:06.660
The HTML5 standard is
the most recent one.
00:10:06.660 --> 00:10:09.330
And there's a closed set
of tags and closed set
00:10:09.330 --> 00:10:11.030
of behaviors for those tags.
00:10:11.030 --> 00:10:12.780
React components are
different because you
00:10:12.780 --> 00:10:15.480
can define your own
tags or components
00:10:15.480 --> 00:10:18.150
with their own behaviors that
are specific to your library
00:10:18.150 --> 00:10:21.270
application.
00:10:21.270 --> 00:10:22.770
They contain something
called props.
00:10:22.770 --> 00:10:24.870
You'll see this term
in React documentation.
00:10:24.870 --> 00:10:29.239
Props are basically a mapping or
a named list of keys to values,
00:10:29.239 --> 00:10:31.530
and then they can also contain
other components, again,
00:10:31.530 --> 00:10:33.540
because they're hierarchical.
00:10:33.540 --> 00:10:35.490
And applications are
formed by composing these
00:10:35.490 --> 00:10:38.620
into a tree of some kind.
00:10:38.620 --> 00:10:41.530
And then once you've finished
composing your components,
00:10:41.530 --> 00:10:44.140
it's React's responsibility
to take this user interface
00:10:44.140 --> 00:10:46.030
that you've described
using React components
00:10:46.030 --> 00:10:48.490
and to display it
efficiently in the browser.
00:10:51.150 --> 00:10:53.870
So this is sort of the
minimum viable Hello
00:10:53.870 --> 00:10:59.330
World of React adapted from
the Wikipedia page on React.
00:10:59.330 --> 00:11:01.640
There are four
distinct code chunks.
00:11:01.640 --> 00:11:04.670
These wouldn't necessarily
all appear in the same file.
00:11:04.670 --> 00:11:07.989
They could, but
they don't have to.
00:11:07.989 --> 00:11:09.530
The first piece
we're looking at here
00:11:09.530 --> 00:11:10.910
is the component definition.
00:11:10.910 --> 00:11:13.700
So a component is
a JavaScript class
00:11:13.700 --> 00:11:17.740
and here I'm using
newish JavaScript syntax.
00:11:17.740 --> 00:11:19.985
And class is in
ES6, and so
00:11:19.985 --> 00:11:21.110
that's what we're looking at here.
00:11:21.110 --> 00:11:23.320
It is JavaScript.
00:11:23.320 --> 00:11:26.900
And we can see we're naming
a component called Greeter.
00:11:26.900 --> 00:11:29.840
And then we can see that this
component extends something
00:11:29.840 --> 00:11:32.030
else called React.Component.
00:11:32.030 --> 00:11:33.800
And what we're doing
here is establishing
00:11:33.800 --> 00:11:35.200
a hierarchical relationship.
00:11:35.200 --> 00:11:37.940
We're saying this new class,
Greeter, should inherit
00:11:37.940 --> 00:11:41.000
all the behavior of the
superclass or parent class
00:11:41.000 --> 00:11:43.430
React.Component.
00:11:43.430 --> 00:11:46.250
There's only one required
method, the render method,
00:11:46.250 --> 00:11:48.960
and that method needs
to return something.
00:11:48.960 --> 00:11:51.840
And in this case, this
looks like a syntax error,
00:11:51.840 --> 00:11:52.700
but it's not.
00:11:52.700 --> 00:11:55.640
We're in JSX, that special
markup I mentioned,
00:11:55.640 --> 00:11:58.520
so we're in a world where
there's a hybrid JavaScript
00:11:58.520 --> 00:12:00.110
Excel syntax at play.
00:12:00.110 --> 00:12:01.610
So what this is
doing is effectively
00:12:01.610 --> 00:12:04.640
returning an instance of
the H1 component, which
00:12:04.640 --> 00:12:07.340
is built into react.
00:12:07.340 --> 00:12:10.340
And then, finally, we're
interpolated a value
00:12:10.340 --> 00:12:12.600
into that JSX expression.
00:12:12.600 --> 00:12:16.737
So if you've worked with glue or
other languages that support--
00:12:16.737 --> 00:12:18.320
they call String
interpolation, that's
00:12:18.320 --> 00:12:19.570
kind of what we're looking at. We're splicing
00:12:19.570 --> 00:12:22.896
data from one context
into a template.
00:12:22.896 --> 00:12:24.770
And this kind of templating
is another reason
00:12:24.770 --> 00:12:27.560
that JSX is so handy.
00:12:27.560 --> 00:12:30.050
Here's some more JSX where
we're creating an instance
00:12:30.050 --> 00:12:30.980
of the Greeter class.
00:12:30.980 --> 00:12:34.640
You can see the less than sign.
00:12:34.640 --> 00:12:36.650
It says we're creating a tag.
00:12:36.650 --> 00:12:39.500
And greeting is
equal to Hello World.
00:12:39.500 --> 00:12:42.230
This is the place where we
assign those props I mentioned,
00:12:42.230 --> 00:12:47.360
that key value pairs associated
with an instance of an element.
00:12:47.360 --> 00:12:50.840
And then, finally, we render
the whole thing to the Dom.
00:12:50.840 --> 00:12:51.980
And the net effect--
00:12:51.980 --> 00:12:53.729
if you were to right
click in your browser or look at the
00:12:53.729 --> 00:12:55.880
elements in the inspector,
00:12:55.880 --> 00:12:57.710
you would see there's
a div called myApp
00:12:57.710 --> 00:13:00.950
with an H1 Hello World.
00:13:00.950 --> 00:13:02.750
Oops.
00:13:02.750 --> 00:13:06.560
So that's React in a
very small nutshell.
00:13:06.560 --> 00:13:08.390
React R is a package
that has been around
00:13:08.390 --> 00:13:12.860
since 2016 by a gentleman named
Kent Russell, really nice guy.
00:13:12.860 --> 00:13:14.840
And his goal was
to figure out ways
00:13:14.840 --> 00:13:18.770
to incorporate React and
JSX into Shiny applications.
00:13:18.770 --> 00:13:22.010
And among other
things, the package
00:13:22.010 --> 00:13:25.370
before we started working on
it had React HTML dependencies,
00:13:25.370 --> 00:13:28.580
React and React Dom, and so
it is the canonical place
00:13:28.580 --> 00:13:32.690
in the R package ecosystem
where React stuff is currently
00:13:32.690 --> 00:13:34.429
being hung.
00:13:34.429 --> 00:13:36.470
He also did something
really neat in his package.
00:13:36.470 --> 00:13:38.930
He embeds V8, the
JavaScript engine,
00:13:38.930 --> 00:13:43.610
to support JSX tags or
JSX strings inside R.
00:13:43.610 --> 00:13:45.050
It's pretty wild,
but it basically
00:13:45.050 --> 00:13:47.750
means that you can write
JSX without installing
00:13:47.750 --> 00:13:49.040
any JavaScript build tools.
00:13:49.040 --> 00:13:51.331
So that's a neat thing and
Kent's done a lot with that.
00:13:53.650 --> 00:13:56.360
The enhancements that
I'm demonstrating now
00:13:56.360 --> 00:13:58.940
have a more specific goal
than the original package
00:13:58.940 --> 00:14:03.620
goal, which is to make HTML
widgets, in particular, easier.
00:14:03.620 --> 00:14:07.340
And the idea to do this-- it
was either Joe or JJ, somebody
00:14:07.340 --> 00:14:09.320
in our studio before
me, identified
00:14:09.320 --> 00:14:13.070
a symmetry between React's API
and the API of HTML widgets
00:14:13.070 --> 00:14:15.380
and thought, we have
an opportunity here
00:14:15.380 --> 00:14:17.825
to bridge these two worlds
in maybe an elegant
00:14:17.825 --> 00:14:19.700
way, or at least the way
that would prevent people
00:14:19.700 --> 00:14:22.490
from writing lots of code.
00:14:22.490 --> 00:14:24.740
And the third goal is
we want to, like I said,
00:14:24.740 --> 00:14:28.070
prescribe and support and
document workflows and tool
00:14:28.070 --> 00:14:30.380
chains for those who are
not as intimately familiar
00:14:30.380 --> 00:14:34.930
with the JavaScript ecosystem.
00:14:34.930 --> 00:14:37.450
So to make an HTML widget using
everything I just told you
00:14:37.450 --> 00:14:39.580
about, you would first
scaffold an R package
00:14:39.580 --> 00:14:41.200
with the usethis package.
00:14:41.200 --> 00:14:42.550
usethis, amazing package.
00:14:42.550 --> 00:14:45.580
It has a function in it
called create_package
00:14:45.580 --> 00:14:51.370
and it will build out an
empty skeletal package.
00:14:51.370 --> 00:14:57.970
Then you can call React R colon
colon scaffold React widget
00:14:57.970 --> 00:15:01.060
while you're inside that package
you just scaffolded, and it
00:15:01.060 --> 00:15:05.560
will populate with JavaScript
build tool configurations
00:15:05.560 --> 00:15:10.270
that we will
support and condone.
00:15:10.270 --> 00:15:12.910
And then, finally, you do need
to install yarn and webpack
00:15:12.910 --> 00:15:13.700
on your machine.
00:15:13.700 --> 00:15:16.547
But once you do, then you
can install these tools
00:15:16.547 --> 00:15:18.130
and they'll pick up
that configuration
00:15:18.130 --> 00:15:19.210
we generated for you.
00:15:19.210 --> 00:15:20.584
And at the end of
the day, you'll have a minimum
00:15:20.584 --> 00:15:23.670
viable working HTML widget with
React in it.
00:15:27.980 --> 00:15:31.310
We do have some remaining
work ahead of us.
00:15:31.310 --> 00:15:35.840
So I would prepare you, as you
begin on your React journey,
00:15:35.840 --> 00:15:38.030
that there are some
limitations currently.
00:15:38.030 --> 00:15:40.430
We haven't figured
out a really nice way
00:15:40.430 --> 00:15:43.880
of sending data or really
supporting widget authors
00:15:43.880 --> 00:15:48.754
to send data from the browser
context to the R context.
00:15:48.754 --> 00:15:50.670
This is not impossible
right now and, in fact,
00:15:50.670 --> 00:15:54.860
nothing I'm showing you was
impossible before my talk
00:15:54.860 --> 00:15:58.277
because it really just was a
factor of how much JavaScript
00:15:58.277 --> 00:15:59.360
you were willing to write.
00:15:59.360 --> 00:16:03.410
So this is a case where sending
values from a React-based HTML
00:16:03.410 --> 00:16:06.547
widget to R, not impossible,
but as of right
00:16:06.547 --> 00:16:08.630
now, you're going to need
to write some JavaScript that
00:16:08.630 --> 00:16:12.980
relies on this existing Shiny
feature on input change.
00:16:12.980 --> 00:16:15.050
We made some
interesting prototypes
00:16:15.050 --> 00:16:18.080
to support this without
additional JavaScript
00:16:18.080 --> 00:16:20.510
and I think these ideas
hold some promise.
00:16:20.510 --> 00:16:23.450
So over the coming
weeks, days, months,
00:16:23.450 --> 00:16:25.179
we're going to be
iterating on that.
00:16:25.179 --> 00:16:27.470
And again, this is why it
would be so awesome if you're
00:16:27.470 --> 00:16:29.844
interested in this to get
involved and try it out and let us know
00:16:29.844 --> 00:16:31.950
what would feel natural
to you
00:16:31.950 --> 00:16:33.408
because at the end
of the day, this is all about
00:16:33.408 --> 00:16:36.022
supporting ease of use and
accessibility.
00:16:40.800 --> 00:16:43.110
So that's all the
material I have prepared.
00:16:43.110 --> 00:16:45.160
I think I'll have quite
a few time for questions.
00:16:45.160 --> 00:16:47.659
I would like to make a special
thanks to Kent Russell, who's been
00:16:47.659 --> 00:16:49.650
such a great package
maintainer
00:16:49.650 --> 00:16:51.810
and maybe I could call him
a friend at this point.
00:16:51.810 --> 00:16:54.210
Haven't met him in
person, a lot of e-mails,
00:16:54.210 --> 00:16:56.190
but I hope he's cool with that.
00:16:56.190 --> 00:16:57.270
So thank you, Kent.
00:16:57.270 --> 00:16:58.270
Thank you all very much.
00:16:58.270 --> 00:17:00.745
[APPLAUSE]
00:17:06.182 --> 00:17:07.640
We do have some
time for questions.
00:17:07.640 --> 00:17:09.390
So let me know and all
throw you the-- ah.
00:17:15.532 --> 00:17:16.530
Throw it.
00:17:16.530 --> 00:17:18.450
Throw it?
00:17:18.450 --> 00:17:20.390
I'm going to bean somebody.
00:17:20.390 --> 00:17:22.940
Here you go.
00:17:22.940 --> 00:17:23.730
This how we do it?
00:17:23.730 --> 00:17:25.319
OK.
00:17:25.319 --> 00:17:27.660
It's funny when you go to a
talk and it covers something
00:17:27.660 --> 00:17:31.770
that you already were
dying to learn about.
00:17:31.770 --> 00:17:32.760
So thank you very much.
00:17:32.760 --> 00:17:33.420
Sure.
00:17:33.420 --> 00:17:39.090
However, the problem is that I
have a similar mapping library
00:17:39.090 --> 00:17:43.200
sort of application,
but it's from View.
00:17:43.200 --> 00:17:49.560
How-- not sure how
to phrase this.
00:17:49.560 --> 00:17:52.481
How much work is it to
create this React R package?
00:17:52.481 --> 00:17:54.480
And do you think it's
very likely that something
00:17:54.480 --> 00:17:56.340
would be recreated for View?
00:17:56.340 --> 00:17:58.740
So first of all, great point.
00:17:58.740 --> 00:18:00.510
Second of all, we
should hang out.
00:18:00.510 --> 00:18:03.300
Maybe we can be friends.
00:18:03.300 --> 00:18:09.180
Third, we think very highly
of you within our studio.
00:18:09.180 --> 00:18:11.820
And I say that's kind
of the collective
00:18:11.820 --> 00:18:13.890
because I don't have
personal experience with it,
00:18:13.890 --> 00:18:15.480
but we have several
experience reports
00:18:15.480 --> 00:18:18.060
internally of successes.
00:18:18.060 --> 00:18:20.730
We chose React initially because
there was already an existing
00:18:20.730 --> 00:18:23.220
package and someone in the
community we could work with
00:18:23.220 --> 00:18:26.742
on it, and because
there-- it seems like--
00:18:26.742 --> 00:18:28.200
I could be wrong,
but my impression
00:18:28.200 --> 00:18:30.990
is there are far more available
libraries in React world
00:18:30.990 --> 00:18:33.207
than in View world
as of this moment.
00:18:33.207 --> 00:18:35.790
I could be wrong about that, but
that's kind of my impression.
00:18:35.790 --> 00:18:36.780
Is that on point?
00:18:36.780 --> 00:18:37.280
Or--
00:18:37.280 --> 00:18:37.780
Sure. No, I agree.
00:18:37.780 --> 00:18:38.527
My
00:18:38.527 --> 00:18:44.266
question, is it better
[INAUDIBLE] View.
00:18:44.266 --> 00:18:48.008
My question is whether
there's a massive amount of
00:18:48.008 --> 00:18:50.270
work [INAUDIBLE].
00:18:50.270 --> 00:18:51.541
Oh, no.
00:18:51.541 --> 00:18:56.950
--initially just building
my own widget from 0.
00:18:56.950 --> 00:18:58.300
Right.
00:18:58.300 --> 00:19:01.090
So to answer that specific
technical question,
00:19:01.090 --> 00:19:06.850
I think there are as few, if not
fewer technical hurdles in View
00:19:06.850 --> 00:19:07.930
as there are on React.
00:19:07.930 --> 00:19:11.440
I mentioned the symmetry
between HTML widgets and React.
00:19:11.440 --> 00:19:13.619
I believe there is that
same symmetry based
00:19:13.619 --> 00:19:15.910
on what I know right now
between HTML widgets and view.
00:19:15.910 --> 00:19:17.326
So it's something
we've identified and
00:19:17.326 --> 00:19:20.338
we really want to do at some
point in the future.
00:19:20.338 --> 00:19:21.256
Thank you.
00:19:23.971 --> 00:19:24.470
Hi.
00:19:24.470 --> 00:19:26.040
I had a question about--
00:19:26.040 --> 00:19:28.704
there's this library that you
guys have called Crosstalk.
00:19:28.704 --> 00:19:30.370
I'm not sure if you're
familiar with it.
00:19:30.370 --> 00:19:30.869
Yes. But what
00:19:30.869 --> 00:19:34.720
it does is, if you
have some data
00:19:34.720 --> 00:19:39.040
that you want to filter on the
front end, you can add a plotly
00:19:39.040 --> 00:19:41.680
and you can add a data table
and you can add some dropdowns,
00:19:41.680 --> 00:19:44.260
and it does all of those
filterings very quickly for you
00:19:44.260 --> 00:19:45.800
on the front end.
00:19:45.800 --> 00:19:48.357
I don't know if work is being
actively done on that package,
00:19:48.357 --> 00:19:50.440
but when I was looking at
the stuff you were doing
00:19:50.440 --> 00:19:53.470
with the React, I was
wondering if that sort
00:19:53.470 --> 00:19:55.510
of front-end filtering
and aggregation
00:19:55.510 --> 00:19:58.540
is something that you guys
have planned for React.
00:19:58.540 --> 00:20:01.390
So we haven't worked
on that specifically,
00:20:01.390 --> 00:20:03.040
but it is one of
our goals to be what
00:20:03.040 --> 00:20:06.060
I think of as well-behaved
members of the HTML widgets
00:20:06.060 --> 00:20:07.880
ecosystem.
00:20:07.880 --> 00:20:10.840
There are some cases where we're
going to sacrifice capabilities
00:20:10.840 --> 00:20:11.507
for ease of use.
00:20:11.507 --> 00:20:13.881
So I mentioned that there's
a lot of scaffolding involved to get
00:20:13.881 --> 00:20:16.150
people going quickly I think
Crosstalk is one
00:20:16.150 --> 00:20:19.330
of those cases where it would
be very difficult for us
00:20:19.330 --> 00:20:23.410
to scaffold a general
approach, so JavaScript
00:20:23.410 --> 00:20:24.160
would be involved.
00:20:24.160 --> 00:20:26.470
But it's certainly not something
we would rule out or otherwise
00:20:26.470 --> 00:20:27.160
make impossible.
00:20:27.160 --> 00:20:28.790
So it would always be possible.
00:20:28.790 --> 00:20:32.680
It just may involve more
JavaScript than I showed.
00:20:32.680 --> 00:20:33.250
Yes?
00:20:33.250 --> 00:20:33.749
Yeah. Would
00:20:33.749 --> 00:20:37.570
there be any limitations on
the React components
00:20:37.570 --> 00:20:38.680
as to compatibility?
00:20:38.680 --> 00:20:42.610
For example, something
that does too much in React
00:20:42.610 --> 00:20:44.800
that you wouldn't
be able to support?
00:20:44.800 --> 00:20:45.940
Excellent question.
00:20:45.940 --> 00:20:46.570
Yes.
00:20:46.570 --> 00:20:48.370
So we made some
cuts there, again,
00:20:48.370 --> 00:20:49.792
in the interest of ease of use.
00:20:49.792 --> 00:20:51.250
There are certain
things you can do
00:20:51.250 --> 00:20:55.270
in React that don't really
follow from the model
00:20:55.270 --> 00:20:57.550
that we advocate.
00:20:57.550 --> 00:20:59.860
We settled on the model
we have because it's
00:20:59.860 --> 00:21:01.390
a set of conventions
for interoping
00:21:01.390 --> 00:21:04.831
with React that seemed to work
for majority of libraries.
00:21:04.831 --> 00:21:07.330
There are those edge cases, and
when you hit the edge cases,
00:21:07.330 --> 00:21:08.975
it's kind of like
the Crosstalk story.
00:21:08.975 --> 00:21:11.350
It's sort of you need to you
need to know JavaScript then
00:21:11.350 --> 00:21:12.580
at that point.
00:21:12.580 --> 00:21:14.600
But again, when you
do get to that point,
00:21:14.600 --> 00:21:17.170
our goal is to at least have
examples and documentation
00:21:17.170 --> 00:21:22.870
to support you as you go that
direction in JavaScript world
00:21:22.870 --> 00:21:25.030
so that it's never totally
inaccessible to you,
00:21:25.030 --> 00:21:26.740
that you identify
while you're building
00:21:26.740 --> 00:21:28.990
your widget that that's a step,
a bridge you need to cross,
00:21:28.990 --> 00:21:31.448
and then we're there to hold
your hand, at least, while you while
00:21:31.448 --> 00:21:34.450
you do that.
00:21:34.450 --> 00:21:36.300
[FLOURISH]