Episode 27: Peeling back the curtain of Movie Vue R (Part 2)

Revealing the cast of R bindings to Vue.js powering Movie Vue R with Kent Russell and Herman Sontrap!

After a terrific showing of the eye-opening Movie Vue R in episode 26, Kent Russell and Herman Sontrop reveal the fundamental cast of R packages and workflows bringing the app to life. Kent leads us through live demonstrations of his R packages binding to Vue.js, illustrating the seamless way you can link existing HTML widgets to the Vue framework, as well as the mechanics of incorporating Shiny into existing Vue templates to unlock immense potential. Later in the episode we learn revolutionary techniques for adapting the popular crosstalk package to Vue apps, as well as a unique way of tracking application state. Each of these demonstrations reveal many nuggets of development wisdom straight from a true pioneer in bridging the amazing worlds of JavaScript and R together!

Resources mentioned in the episode

• Kent’s packages and examples used in the live coding demonstrations:
  • vue.js for R - github.com/vue-r/vueR
  • vue-cli-r - github.com/timelyportfolio/vue-cli-r
  • vite vue3 and Shiny - github.com/timelyportfolio/vite-vue-r
  • valtio vanilla with utils as standalone using browserify - github.com/timelyportfolio/valtio_standalone
• Kent’s listviewer HTML widget for viewing lists: cran.r-project.org/package=listviewer
• Linking vue to crosstalk - github.com/vue-r/vueR/issues/12

Episode Timestamps

00:00:00 Episode Introduction
00:01:00 The vueR package and introductory examples
00:06:55 Live coding example with vuetify
00:13:55 vueR example, adding a calendar date selector and other mint-ui elements to your Shiny app
00:21:00 htmlwidget leaflet map example
00:24:10 Example of a sunburst plot
00:33:15 Example of a checkbox selector for hierarchical element trees
00:36:00 JavaScript build steps with Vue CLI
00:59:30 vite vue 3 build example
01:09:30 A call to the community to help with vueR development goals
01:10:30 Integrating crosstalk
01:14:30 Using vuex as a store of state. Time travel through the state of your Shiny app
01:20:24 Example of valtio
01:27:08 Episode wrapup

shinydevseries::session_info()

📽 Find previous interviews at https://shinydevseries.com

📋 Feedback is more than welcome! Please send your comments or suggestions on our contact form at shinydevseries.com/contact

If you enjoyed this video or got value from it, then consider dropping something in the tip jar. Any money raised will be used to improve the channel and invest in additional equipment and resources to make the content even better!

💰 https://bit.ly/sdstip

📨 Help shape the future direction of the Shiny Developer Series live streams by completing this very short survey

Media production for the Shiny Developer Series is made possible by these outstanding projects and platforms:

• OBS Studio: https://obsproject.com/
• OBS Fully Loaded install script by Martin Wimpress: https://github.com/wimpysworld/obs-fully-loaded
• VDO Ninja: https://vdo.ninja
• StreamElements: https://streamelements.com
• ShotCut: https://shotcut.org/
• Pop@_OS by System76: https://pop.system76.com/
• Ubuntu: https://ubuntu.com/