{"media":{"accountId":393487,"accountHashedId":"yy68sak8q4","accountKey":"wistia-production_393487","analyticsHost":"https://distillery.wistia.net","formsHost":"https://app.wistia.com","formEventsApi":"/form-stream/1.0.0","aspectRatio":1.7777777777777777,"assets":[{"is_enhanced":false,"type":"original","slug":"original","display_name":"Original File","details":{},"width":1920,"height":1080,"size":3268497989,"bitrate":19628,"public":true,"status":2,"progress":1.0,"url":"https://embed-ssl.wistia.com/deliveries/139145360e04b63b6421a89f22ca099b.bin","created_at":1548358896},{"is_enhanced":false,"type":"iphone_video","slug":"mp4_h264_232k","display_name":"360p","details":{},"container":"mp4","codec":"h264","width":640,"height":360,"ext":"mp4","size":38636474,"bitrate":232,"public":true,"status":2,"progress":1.0,"metadata":{"max_bitrate":61037,"average_bitrate":38961,"early_max_bitrate":141063},"url":"https://embed-ssl.wistia.com/deliveries/3e74bb176a8d74dbf1725a3ef28a8db33e8c7ade.bin","created_at":1548358896,"segment_duration":3,"opt_vbitrate":1200},{"is_enhanced":false,"type":"mp4_video","slug":"mp4_h264_181k","display_name":"224p","details":{},"container":"mp4","codec":"h264","width":400,"height":224,"ext":"mp4","size":30277433,"bitrate":181,"public":true,"status":2,"progress":1.0,"metadata":{"max_bitrate":10403,"average_bitrate":10880,"early_max_bitrate":12283},"url":"https://embed-ssl.wistia.com/deliveries/754df9f8b1647691e96cd0d2c3967e1d2e9a713c.bin","created_at":1548358896,"segment_duration":3,"opt_vbitrate":300},{"is_enhanced":false,"type":"md_mp4_video","slug":"mp4_h264_305k","display_name":"540p","details":{},"container":"mp4","codec":"h264","width":960,"height":540,"ext":"mp4","size":50871285,"bitrate":305,"public":true,"status":2,"progress":1.0,"metadata":{"max_bitrate":76453,"average_bitrate":46990,"early_max_bitrate":147643},"url":"https://embed-ssl.wistia.com/deliveries/0581e2e334feecb1871e014b30ef6a8f6fe1d6d7.bin","created_at":1548358896,"segment_duration":3,"opt_vbitrate":1800},{"is_enhanced":false,"type":"hd_mp4_video","slug":"mp4_h264_411k","display_name":"720p","details":{},"container":"mp4","codec":"h264","width":1280,"height":720,"ext":"mp4","size":68540592,"bitrate":411,"public":true,"status":2,"progress":1.0,"metadata":{"max_bitrate":113677,"average_bitrate":60492,"early_max_bitrate":196773},"url":"https://embed-ssl.wistia.com/deliveries/f8fa72649cba6a653eff8cb6ca19116867ae5cee.bin","created_at":1548358896,"segment_duration":3,"opt_vbitrate":3750},{"is_enhanced":false,"type":"hd_mp4_video","slug":"mp4_h264_894k","display_name":"1080p","details":{},"container":"mp4","codec":"h264","width":1920,"height":1080,"ext":"mp4","size":148934517,"bitrate":894,"public":true,"status":2,"progress":1.0,"metadata":{"max_bitrate":277237,"average_bitrate":122921,"early_max_bitrate":431711},"url":"https://embed-ssl.wistia.com/deliveries/1372a14903ebf763c5a95818f37693e47ec2e2be.bin","created_at":1548358896,"segment_duration":3,"opt_vbitrate":5625},{"is_enhanced":false,"type":"storyboard","slug":"storyboard_2000x2260","display_name":"Storyboard","details":{},"width":2000,"height":2260,"ext":"jpg","size":555633,"bitrate":0,"public":true,"status":2,"progress":1.0,"metadata":{"frame_width":200,"frame_height":113,"frame_count":200,"aspect_ratio":1.7777777777777777},"url":"https://embed-ssl.wistia.com/deliveries/2d2d80336a94567c78c275e4231f23da85c72cbc.bin","created_at":1548358896},{"is_enhanced":false,"type":"still_image","slug":"still_image_1920x1080","display_name":"Thumbnail Image","details":{},"width":1920,"height":1080,"size":1452118,"bitrate":0,"public":true,"status":2,"progress":1.0,"url":"https://embed-ssl.wistia.com/deliveries/72e76638287c06b6cba4a67bdc399c29.bin","created_at":1548378220}],"branding":false,"createdAt":1548358896,"distilleryUrl":"https://distillery.wistia.com/x","duration":1300.95,"enableCustomerLogo":true,"firstEmbedForAccount":false,"firstShareForAccount":false,"availableTranscripts":[{"bcp47LanguageTag":"en","familyName":"English","familyNativeName":"English","hasCaptions":true,"hasVideoStream":false,"name":"English","nativeName":"English","wistiaLanguageCode":"eng","language":"eng","ietf_language_tag":"eng","alpha3_terminologic":"eng","alpha3_bibliographic":"eng","iso639_2_language_code":"en","english_name":"English","native_name":"English","right_to_left":false,"alpha3Bibliographic":"eng","alpha3Terminologic":"eng","ietfLanguageTag":"eng","iso6392LanguageCode":"en","genericName":"English","genericNativeName":"English"}],"hashedId":"aduduauhq9","mediaId":39602428,"mediaKey":"wistia-production_39602428","mediaType":"Video","name":"Integrating React.js and Shiny - Alan Dipert","preloadPreference":"","progress":1.0,"protected":false,"projectId":3714868,"seoDescription":"a rstudio::conf 2019 video","showAbout":true,"status":2,"type":"Video","playableWithoutInstantHls":true,"privacyMode":true,"stats":{"loadCount":9507,"playCount":3622,"uniqueLoadCount":7134,"uniquePlayCount":3106,"averageEngagement":0.251177},"trackingTransmitInterval":43,"liveStreamEventDetails":null,"integrations":{"google_analytics4":true,"google_analytics":true},"tagManager":false,"captions":[{"language":"eng","text":"[FLOURISH]\n\n[APPLAUSE]\n\nHi, everybody. Thank you so much for coming. I really, really appreciate it. I've been doing some very exciting work and I'm really even more excited to share it with you all today. So I'm Alan Dipert. I work at RStudio. Like Barrett, I'm on the Shiny team and I've had the pleasure over the past few months of working on this problem of integrating React, the JavaScript library, with Shiny.\n\nI believe that for quite some time people in the Shiny community have been interested in React and about ways to integrate it with Shiny, and so this work was initiated in an effort to bridge that gap somehow. And we've been at it for a few months and we have work to show, which is why I'm here and why I'm so excited.\n\nBut some questions and problems remain unsolved, and that's sort of where you come in. So I would encourage you, if you're at all interested in any of this, to follow up with me afterwards. There may or may not be time for questions, but I'm always happy to talk about this stuff. And we can talk shop and discuss why you're interested in the context that you're interested in it in because I think that this could be the start of a really fun and exciting little niche thing in the Shiny ecosystem.\n\nSo without further ado, let's start with a motivating problem, I guess, a problem slash demo.\n\nSo like many of you, I'm online. I'm on the web. I surf the web. And you come across things that are awesome and the only problem with them is that they don't have an HTML widget or they're otherwise not accessible from R. So one of these things that I ran across was a React-based library called Mapbox GL.\n\nMapbox is a company.\n\nThey make a library called Mapbox GL, which is very similar to Leaflet, but it has some interesting properties. In particular, it's highly themeable. So let me show you some of the demos of this thing.\n\nSo this is a very nice Leaflet-esque map.\n\nBut of course, we can do heat maps, pretty fancy. And you can switch between these. The thing that's governing the colors of the roads and the city and county titles and stuff, that's all governed by one of these Mapbox style objects. And then on the left hand side here we've got the heap of JavaScript code involved in rendering that.\n\nProbably my most favorite one is the Superman mode one where you literally fly around.\n\nRight?\n\nSo just to be clear, I didn't make this. But I think it's awesome and this is the kind of thing that I think gets me excited when I am able to use it from R.\n\nSo what I did is in the course of not too long, maybe an hour or two, using the tools and I'm about to explain to you, I was able to make my own HTML widget that provides a subset of the functionality we just saw and delivers it to us as an R HTML widget. And so I became aware early in the conference that the most important thing to keep in mind about here in Austin are tacos.\n\nSo there's this trending--\n\nhas been trending. Someone named Caitlin Hudon--\n\nhope I got that right--\n\nwho I haven't met, apparently posted on Twitter a list of her five favorite places. And then an RStudio person, Thomas Marchi made a Shiny dashboard using a Leaflet map, and I thought, hey, in keeping with the tradition of taco enthusiasm, I should make some kind of taco app.\n\nSo here we are.\n\nI've got some taco joints loaded up into a data frame and I'm displaying them with a data table here. And then over here I've got taco locations with fork and knife sort of blurry little icons. And then probably the neatest but also most awkward thing I can do is I can filter this, and after a little bit of burping, it comes back and you can see that we filter what shows up on the map.\n\nSo like I said, this was, like, an hour or two of work. Now, granted, I'm, like, the world's expert on this weird little library, so take that with a grain of salt. But like I said, I'm always happy to help you use it.\n\nSo this is the promise. This is the kind of thing that I think we can do more of if we develop these tools that help us bridge the JavaScript ecosystem, in particular the React ecosystem with Shiny.\n\nI'll flip back into PowerPoint mode here.\n\nOh, yeah. So there's some recordings in case there are internet issues.\n\nSo this is the all of the JavaScript code that I needed to write in order to make go what I just showed you.\n\nIf you know JavaScript and are familiar with React, you might have a slight grin or even a smile on your face.\n\nIf you don't know JavaScript or don't know React, you might be a little worried at this point. But don't be.\n\nI can assure you that the things you see here can be learned fairly quickly and a big part of what we hope to do with this initiative is to build out not just the code to do that bridging that I mentioned, but also to build out the documentation and the recommendations around learning JavaScript, leveraging its ecosystem, and all those things that surround JavaScript development to make them more accessible to people who don't have that experience.\n\nSo this is the extent of the code that does the adapting of the React library I just showed to Shiny world.\n\nAnd yeah, I think it's, like, 11 lines of code. I don't know.\n\nIs anyone surprised at how small this is or disgusted by how big it is?\n\nShow of hands. Hm, OK.\n\n[LAUGHTER]\n\nMy meme game is usually very weak, but I put this one in. It seems they've gone well, so all right. So if you're the kind of person who would prefer to ignore me for the next 15 minutes and just start hacking, here are the URLs you need to know about. We have a GitHub organization, react-R, and that's what we call it because React without the dash r was taken.\n\nBut if you go there, that's the organization. There are some example repos and then there's the React R library--\n\nexcuse me, package repo itself, and there's also a link to various other pieces of tutorial documentation.\n\nAt the bottom, that will take you directly to our tutorial, which as of right now is the best way to ramp up on this topic, particularly if you have a little bit of JavaScript background. But if you don't have that JavaScript background, the rest of the talk is for you.\n\nSo we're going to talk about what React is, why it's interesting.\n\nWe're going to discuss the core unit of composition in React, the component and how it's relevant to us.\n\nI'm going to introduce you further to this React R package, and then I'm going to describe at a high level the process I went through to make that widget. And then I'll talk a little bit about what we have in store for the future.\n\nSo what is React?\n\nWell, it's a JavaScript library for making user interfaces.\n\nIt was invented at Facebook around 2011.\n\nI believe they used it for the news feed. And then they bought Instagram and I think Instagram developed it further.\n\nAnd after Instagram had sort of refined the idea--\n\nor engineers at Instagram, rather--\n\nthey did a wide open source release. So it's quite a mature--\n\neven though it wasn't open source until 2013, it's still quite a mature library and has been used thoroughly.\n\nIt supports a functional approach.\n\nI think if you know how to write R, you already know what the functional paradigm is. I won't elaborate on that, but that's another thing like React that's trending in the JavaScript ecosystem. But like I said, if you know R, you're sort of already on board, so I wouldn't worry too much about that paradigm or that word.\n\nAnd it's oriented around components. I mentioned that the unit of composition in a React-based application is a component.\n\nAnd finally, they invented a syntax called JSX that you can think of as a hybrid JavaScript and HTML syntax. And it really does make writing these kinds of applications quite a bit more concise. And we'll see some of that in a second.\n\nSo I think you should care about this for one of two reasons. One, you did what I just demonstrated. You're on the internet, you saw something really cool, you found it, and nobody's made the HTML widget yet so you want to be the person to do it.\n\nThat's a reason to be interested in React. It has a huge ecosystem with tons of things that deserve to have their own R wrappers. And I see if everyone in this class learns how to do this, maybe we could get a significant percentage for the React ecosystem into R.\n\nThe other reason might be you're coming from a JavaScript development background, you have experience with React and you want to build a React-based library, and maybe adding it to R is an afterthought for you, or would be icing on top. So that's another reason to be interested in React, if you want to go deep on JavaScript. Oh, I should mention also that the reason to go deep on JavaScript with React, in particular, is it's just wildly, wildly, wildly popular and well supported by documentation and communities and so on.\n\nSo React components, what are they?\n\nVery similar to HTML tags, honestly.\n\nI think of them as containers. They contain data hierarchically, so it's sort of a way to describe a tree.\n\nThe big difference is that the HTML tags or elements are defined by a standard.\n\nThe HTML5 standard is the most recent one. And there's a closed set of tags and closed set of behaviors for those tags.\n\nReact components are different because you can define your own tags or components with their own behaviors that are specific to your library application. They contain something called props. You'll see this term in React documentation.\n\nProps are basically a mapping or a named list of keys to values, and then they can also contain other components, again, because they're hierarchical. And applications are formed by composing these into a tree of some kind. And then once you've finished composing your components, it's React's responsibility to take this user interface that you've described using React components and to display it efficiently in the browser.\n\nSo this is sort of the minimum viable Hello World of React adapted from the Wikipedia page on React.\n\nThere are four distinct code chunks.\n\nThese wouldn't necessarily all appear in the same file. They could, but they don't have to.\n\nThe first piece we're looking at here is the component definition. So a component is a JavaScript class and here I'm using newish JavaScript syntax.\n\nAnd class is in ES6, and so that's what we're looking at here. It is JavaScript. And we can see we're naming a component called Greeter.\n\nAnd then we can see that this component extends something else called React.Component. And what we're doing here is establishing a hierarchical relationship. We're saying this new class, Greeter, should inherit all the behavior of the superclass or parent class React.Component.\n\nThere's only one required method, the render method, and that method needs to return something. And in this case, this looks like a syntax error, but it's not. We're in JSX, that special markup I mentioned, so we're in a world where there's a hybrid JavaScript Excel syntax at play. So what this is doing is effectively returning an instance of the H1 component, which is built into react.\n\nAnd then, finally, we're interpolated a value into that JSX expression. So if you've worked with glue or other languages that support--\n\nthey call String interpolation, that's kind of what we're looking at. We're splicing data from one context into a template. And this kind of templating is another reason that JSX is so handy.\n\nHere's some more JSX where we're creating an instance of the Greeter class. You can see the less than sign. It says we're creating a tag. And greeting is equal to Hello World. This is the place where we assign those props I mentioned, that key value pairs associated with an instance of an element.\n\nAnd then, finally, we render the whole thing to the Dom. And the net effect--\n\nif you were to right click in your browser or look at the elements in the inspector, you would see there's a div called myApp with an H1 Hello World.\n\nOops. So that's React in a very small nutshell.\n\nReact R is a package that has been around since 2016 by a gentleman named Kent Russell, really nice guy. And his goal was to figure out ways to incorporate React and JSX into Shiny applications. And among other things, the package before we started working on it had React HTML dependencies, React and React Dom, and so it is the canonical place in the R package ecosystem where React stuff is currently being hung.\n\nHe also did something really neat in his package. He embeds V8, the JavaScript engine, to support JSX tags or JSX strings inside R. It's pretty wild, but it basically means that you can write JSX without installing any JavaScript build tools. So that's a neat thing and Kent's done a lot with that.\n\nThe enhancements that I'm demonstrating now have a more specific goal than the original package goal, which is to make HTML widgets, in particular, easier. And the idea to do this--\n\nit was either Joe or JJ, somebody in our studio before me, identified a symmetry between React's API and the API of HTML widgets and thought, we have an opportunity here to bridge these two worlds in maybe an elegant way, or at least the way that would prevent people from writing lots of code. And the third goal is we want to, like I said, prescribe and support and document workflows and tool chains for those who are not as intimately familiar with the JavaScript ecosystem.\n\nSo to make an HTML widget using everything I just told you about, you would first scaffold an R package with the usethis package.\n\nusethis, amazing package. It has a function in it called create_package and it will build out an empty skeletal package. Then you can call React R colon colon scaffold React widget while you're inside that package you just scaffolded, and it will populate with JavaScript build tool configurations that we will support and condone.\n\nAnd then, finally, you do need to install yarn and webpack on your machine. But once you do, then you can install these tools and they'll pick up that configuration we generated for you. And at the end of the day, you'll have a minimum viable working HTML widget with React in it.\n\nWe do have some remaining work ahead of us. So I would prepare you, as you begin on your React journey, that there are some limitations currently. We haven't figured out a really nice way of sending data or really supporting widget authors to send data from the browser context to the R context.\n\nThis is not impossible right now and, in fact, nothing I'm showing you was impossible before my talk because it really just was a factor of how much JavaScript you were willing to write. So this is a case where sending values from a React-based HTML widget to R, not impossible, but as of right now, you're going to need to write some JavaScript that relies on this existing Shiny feature on input change.\n\nWe made some interesting prototypes to support this without additional JavaScript and I think these ideas hold some promise. So over the coming weeks, days, months, we're going to be iterating on that. And again, this is why it would be so awesome if you're interested in this to get involved and try it out and let us know what would feel natural to you because at the end of the day, this is all about supporting ease of use and accessibility.\n\nSo that's all the material I have prepared. I think I'll have quite a few time for questions. I would like to make a special thanks to Kent Russell, who's been such a great package maintainer and maybe I could call him a friend at this point. Haven't met him in person, a lot of e-mails, but I hope he's cool with that.\n\nSo thank you, Kent. Thank you all very much.\n\n[APPLAUSE]\n\nWe do have some time for questions. So let me know and all throw you the--\n\nah.\n\nThrow it.\n\nThrow it? I'm going to bean somebody. Here you go.\n\nThis how we do it? OK.\n\nIt's funny when you go to a talk and it covers something that you already were dying to learn about. So thank you very much.\n\nSure.\n\nHowever, the problem is that I have a similar mapping library sort of application, but it's from View.\n\nHow--\n\nnot sure how to phrase this.\n\nHow much work is it to create this React R package? And do you think it's very likely that something would be recreated for View?\n\nSo first of all, great point. Second of all, we should hang out. Maybe we can be friends.\n\nThird, we think very highly of you within our studio. And I say that's kind of the collective because I don't have personal experience with it, but we have several experience reports internally of successes. We chose React initially because there was already an existing package and someone in the community we could work with on it, and because there--\n\nit seems like--\n\nI could be wrong, but my impression is there are far more available libraries in React world than in View world as of this moment.\n\nI could be wrong about that, but that's kind of my impression. Is that on point? Or--\n\nSure. No, I agree. My question, is it better [INAUDIBLE]\n\nView. My question is whether there's a massive amount of work [INAUDIBLE].\n\nOh, no.\n\n--initially just building my own widget from 0.\n\nRight.\n\nSo to answer that specific technical question, I think there are as few, if not fewer technical hurdles in View as there are on React. I mentioned the symmetry between HTML widgets and React. I believe there is that same symmetry based on what I know right now between HTML widgets and view. So it's something we've identified and we really want to do at some point in the future. Thank you.\n\nHi. I had a question about--\n\nthere's this library that you guys have called Crosstalk. I'm not sure if you're familiar with it.\n\nYes.\n\nBut what it does is, if you have some data that you want to filter on the front end, you can add a plotly and you can add a data table and you can add some dropdowns, and it does all of those filterings very quickly for you on the front end. I don't know if work is being actively done on that package, but when I was looking at the stuff you were doing with the React, I was wondering if that sort of front-end filtering and aggregation is something that you guys have planned for React.\n\nSo we haven't worked on that specifically, but it is one of our goals to be what I think of as well-behaved members of the HTML widgets ecosystem.\n\nThere are some cases where we're going to sacrifice capabilities for ease of use. So I mentioned that there's a lot of scaffolding involved to get people going quickly I think Crosstalk is one of those cases where it would be very difficult for us to scaffold a general approach, so JavaScript would be involved. But it's certainly not something we would rule out or otherwise make impossible. So it would always be possible.\n\nIt just may involve more JavaScript than I showed. Yes?\n\nYeah. Would there be any limitations on the React components as to compatibility? For example, something that does too much in React that you wouldn't be able to support?\n\nExcellent question. Yes. So we made some cuts there, again, in the interest of ease of use.\n\nThere are certain things you can do in React that don't really follow from the model that we advocate.\n\nWe settled on the model we have because it's a set of conventions for interoping with React that seemed to work for majority of libraries. There are those edge cases, and when you hit the edge cases, it's kind of like the Crosstalk story. It's sort of you need to you need to know JavaScript then at that point.\n\nBut again, when you do get to that point, our goal is to at least have examples and documentation to support you as you go that direction in JavaScript world so that it's never totally inaccessible to you, that you identify while you're building your widget that that's a step, a bridge you need to cross, and then we're there to hold your hand, at least, while you while you do that.\n\n[FLOURISH]"}],"hls_enabled":true,"embed_options":{"opaqueControls":null,"playerColor":"4287c7","playerColorGradient":{"on":false,"colors":[["#223d50",0],["#88a3b6",1]]},"plugin":{"googleAnalytics4":{"on":true,"measurementId":"G-RHNDCXHKLR","usePageGA4Config":true},"captions-v1":{"language":"","onByDefault":"true","on":"true","async":"false"}},"volumeControl":"true","fullscreenButton":"true","controlsVisibleOnLoad":"true","bpbTime":"false","vulcan":true,"branding":"false","showCustomerLogo":"false","unalteredStillImageAsset":{"url":"https://embed-ssl.wistia.com/deliveries/72e76638287c06b6cba4a67bdc399c29.png","width":"1920","height":"1080"},"contrastIcons":true,"newRoundedIcons":true,"shouldShowCaptionsSettings":true},"embedOptions":{"opaqueControls":null,"playerColor":"4287c7","playerColorGradient":{"on":false,"colors":[["#223d50",0],["#88a3b6",1]]},"plugin":{"googleAnalytics4":{"on":true,"measurementId":"G-RHNDCXHKLR","usePageGA4Config":true},"captions-v1":{"language":"","onByDefault":"true","on":"true","async":"false"}},"volumeControl":"true","fullscreenButton":"true","controlsVisibleOnLoad":"true","bpbTime":"false","vulcan":true,"branding":"false","showCustomerLogo":"false","unalteredStillImageAsset":{"url":"https://embed-ssl.wistia.com/deliveries/72e76638287c06b6cba4a67bdc399c29.png","width":"1920","height":"1080"},"contrastIcons":true,"newRoundedIcons":true,"shouldShowCaptionsSettings":true}},"options":{}}