<description>What makes a great Shiny app? Anything that helps your users explore and find answers from data. And it helps when your apps is beautiful and fast. It is now easier than ever for Shiny developers to create these beautiful, dynamic, quick-reacting, multipage shiny apps. In this episode of the Shiny Developer Serie -- the first of two parts -- Eric Nantz hosts Herman Sontrop and Kenton Russell as they introduce the tools behind their Movie Vue R Shiny application. They submitted this application to the 2021 Shiny Contest and have shared the code and documentation with the Shiny developer community. Part 1 is a high-level tour of what is inside the Movie Vue R Shiny application and how the Vue javascript framework is used to offer R and Shiny components really nice user interface elements.&lt;br /&gt;Resources mentioned in the episode&lt;br /&gt;&lt;ul&gt;&lt;li&gt;Movie Vue R Shiny App: &lt;a href="https://friss.shinyapps.io/shiny-vue-r/" target="_blank"&gt;friss.shinyapps.io/shiny-vue-r&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="https://community.rstudio.com/t/movie-vue-r-shiny-contest-submission/104905" target="_blank"&gt;Contest Submission Post&lt;/a&gt; on RStudio Community&lt;/li&gt;&lt;li&gt;App GitHub repository: &lt;a href="https://github.com/FrissAnalytics/shiny-vue-r" target="_blank"&gt;github.com/FrissAnalytics/shiny-vue-r&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Discussion slides available at &lt;a href="https://shinydevseries-assets.us-east-1.linodeobjects.com/ShinyMovieVueR.pptx" target="_blank"&gt;this link&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Vue.js - Progressive JavaScript framework: &lt;a href="https://vuejs.org" target="_blank"&gt;vuejs.org&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Vuetify - Material design framework for Vue: &lt;a href="https://vuetifyjs.com/en" target="_blank"&gt;vuetifyjs.com&lt;/a&gt;&lt;/li&gt;&lt;li&gt;HTML templates article: &lt;a href="https://shiny.rstudio.com/articles/templates.html" target="_blank"&gt;shiny.rstudio.com/articles/templates.html&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Material design icons: &lt;a href="https://materialdesignicons.com/" target="_blank"&gt;materialdesignicons.com&lt;/a&gt;&lt;/li&gt;&lt;li&gt;http-vue-loader - load .vue files from your HTML/JS: &lt;a href="https://github.com/FranckFreiburger/http-vue-loader" target="_blank"&gt;github.com/FranckFreiburger/http-vue-loader&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Vuex getting started guide: &lt;a href="https://vuex.vuejs.org/guide/" target="_blank"&gt;vuex.vuejs.org/guide&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Vue Router - The official router for Vue.js: &lt;a href="https://router.vuejs.org/" target="_blank"&gt;router.vuejs.org&lt;/a&gt;&lt;/li&gt;&lt;li&gt;UI component for Globe Data Visualization using ThreeJS/WebGL: &lt;a href="https://globe.gl/" target="_blank"&gt;globe.gl&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Lodash - A modern JavaScript utility library delivering modularity, performance &amp;amp; extras: &lt;a href="https://lodash.com/" target="_blank"&gt;lodash.com&lt;/a&gt;&lt;/li&gt;&lt;li&gt;d3.js - Data-Driven Documents: &lt;a href="https://d3js.org/" target="_blank"&gt;d3js,org&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Mitt - Tiny 200b functional event emitter / pubsub: &lt;a href="https://github.com/developit/mitt" target="_blank"&gt;github.com/developit/mitt&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Overlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling: &lt;a href="https://kingsora.github.io/OverlayScrollbars" target="_blank"&gt;kingsora.github.io/OverlayScrollbars&lt;/a&gt;&lt;/li&gt;&lt;li&gt;Kent's listviewer HTML widget for viewing lists: &lt;a href="https://cran.r-project.org/package=listviewer" target="_blank"&gt;cran.r-project.org/package=listviewer&lt;/a&gt;&lt;/li&gt;&lt;li&gt;plumber - Turn your R code into a web API: &lt;a href="https://www.rplumber.io/" target="_blank"&gt;www.rplumber.io&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;Episode Timestamps&lt;br /&gt;&lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=0s" target="_blank"&gt;00:00:00&lt;/a&gt; Episode Introduction &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=60s" target="_blank"&gt;00:01:00&lt;/a&gt; Introduction to Herman Sontrop &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=370s" target="_blank"&gt;00:06:10&lt;/a&gt; Introduction to Kenton Russell &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=600s" target="_blank"&gt;00:10:00&lt;/a&gt; High-level walkthrough of Movie Vue R &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=1165s" target="_blank"&gt;00:19:25&lt;/a&gt; Diving into the code that drives Movie Vue R &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=1355s" target="_blank"&gt;00:22:35&lt;/a&gt; Overview and motivation behind Vue &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=2310s" target="_blank"&gt;00:38:30&lt;/a&gt; Vue instance example &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=2400s" target="_blank"&gt;00:40:00&lt;/a&gt; Vue reactivty examples &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=2770s" target="_blank"&gt;00:46:10&lt;/a&gt; Vue.js components are like Shiny modules &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=2990s" target="_blank"&gt;00:49:50&lt;/a&gt; Single file components &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=3256s" target="_blank"&gt;00:54:16&lt;/a&gt; Breaking down a Vue component into useful parts; props, data, methods, computed, and watch &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=3440s" target="_blank"&gt;00:57:20&lt;/a&gt; Vuetify, tap into many pre-built components, styles, and more &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=4200s" target="_blank"&gt;01:10:00&lt;/a&gt; Covid Globe Example in Shiny app &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=4360s" target="_blank"&gt;01:12:40&lt;/a&gt; Rendering a ggplot &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=4515s" target="_blank"&gt;01:15:15&lt;/a&gt; Summarizing parts of the Movie Vue R app &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=4750s" target="_blank"&gt;01:19:10&lt;/a&gt; A look at template.html. A detailed walk through the organization of the app's HTML and files &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=5190s" target="_blank"&gt;01:26:30&lt;/a&gt; Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=5480s" target="_blank"&gt;01:31:20&lt;/a&gt; Loading images and ggplots &lt;br /&gt;&lt;br /&gt; &lt;a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;amp;t=5880s" target="_blank"&gt;01:38:00&lt;/a&gt; Episode wrapup&amp;nbsp;</description>

Shiny Developer Series

Eric Nantz

Episode 26: Peeling back the curtain of Movie Vue R (Part 1)

MAY 27, 202299 MIN
Shiny Developer Series

Episode 26: Peeling back the curtain of Movie Vue R (Part 1)

MAY 27, 202299 MIN

Description

What makes a great Shiny app? Anything that helps your users explore and find answers from data. And it helps when your apps is beautiful and fast. It is now easier than ever for Shiny developers to create these beautiful, dynamic, quick-reacting, multipage shiny apps. In this episode of the Shiny Developer Serie -- the first of two parts -- Eric Nantz hosts Herman Sontrop and Kenton Russell as they introduce the tools behind their Movie Vue R Shiny application. They submitted this application to the 2021 Shiny Contest and have shared the code and documentation with the Shiny developer community. Part 1 is a high-level tour of what is inside the Movie Vue R Shiny application and how the Vue javascript framework is used to offer R and Shiny components really nice user interface elements.<br />Resources mentioned in the episode<br /><ul><li>Movie Vue R Shiny App: <a href="https://friss.shinyapps.io/shiny-vue-r/" target="_blank">friss.shinyapps.io/shiny-vue-r</a></li><li><a href="https://community.rstudio.com/t/movie-vue-r-shiny-contest-submission/104905" target="_blank">Contest Submission Post</a> on RStudio Community</li><li>App GitHub repository: <a href="https://github.com/FrissAnalytics/shiny-vue-r" target="_blank">github.com/FrissAnalytics/shiny-vue-r</a></li><li>Discussion slides available at <a href="https://shinydevseries-assets.us-east-1.linodeobjects.com/ShinyMovieVueR.pptx" target="_blank">this link</a></li><li>Vue.js - Progressive JavaScript framework: <a href="https://vuejs.org" target="_blank">vuejs.org</a></li><li>Vuetify - Material design framework for Vue: <a href="https://vuetifyjs.com/en" target="_blank">vuetifyjs.com</a></li><li>HTML templates article: <a href="https://shiny.rstudio.com/articles/templates.html" target="_blank">shiny.rstudio.com/articles/templates.html</a></li><li>Material design icons: <a href="https://materialdesignicons.com/" target="_blank">materialdesignicons.com</a></li><li>http-vue-loader - load .vue files from your HTML/JS: <a href="https://github.com/FranckFreiburger/http-vue-loader" target="_blank">github.com/FranckFreiburger/http-vue-loader</a></li><li>Vuex getting started guide: <a href="https://vuex.vuejs.org/guide/" target="_blank">vuex.vuejs.org/guide</a></li><li>Vue Router - The official router for Vue.js: <a href="https://router.vuejs.org/" target="_blank">router.vuejs.org</a></li><li>UI component for Globe Data Visualization using ThreeJS/WebGL: <a href="https://globe.gl/" target="_blank">globe.gl</a></li><li>Lodash - A modern JavaScript utility library delivering modularity, performance &amp; extras: <a href="https://lodash.com/" target="_blank">lodash.com</a></li><li>d3.js - Data-Driven Documents: <a href="https://d3js.org/" target="_blank">d3js,org</a></li><li>Mitt - Tiny 200b functional event emitter / pubsub: <a href="https://github.com/developit/mitt" target="_blank">github.com/developit/mitt</a></li><li>Overlay Scrollbars - A javascript scrollbar plugin which hides native scrollbars, provides custom styleable overlay scrollbars and keeps the native functionality and feeling: <a href="https://kingsora.github.io/OverlayScrollbars" target="_blank">kingsora.github.io/OverlayScrollbars</a></li><li>Kent's listviewer HTML widget for viewing lists: <a href="https://cran.r-project.org/package=listviewer" target="_blank">cran.r-project.org/package=listviewer</a></li><li>plumber - Turn your R code into a web API: <a href="https://www.rplumber.io/" target="_blank">www.rplumber.io</a></li></ul>Episode Timestamps<br /><a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=0s" target="_blank">00:00:00</a> Episode Introduction <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=60s" target="_blank">00:01:00</a> Introduction to Herman Sontrop <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=370s" target="_blank">00:06:10</a> Introduction to Kenton Russell <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=600s" target="_blank">00:10:00</a> High-level walkthrough of Movie Vue R <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=1165s" target="_blank">00:19:25</a> Diving into the code that drives Movie Vue R <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=1355s" target="_blank">00:22:35</a> Overview and motivation behind Vue <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=2310s" target="_blank">00:38:30</a> Vue instance example <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=2400s" target="_blank">00:40:00</a> Vue reactivty examples <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=2770s" target="_blank">00:46:10</a> Vue.js components are like Shiny modules <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=2990s" target="_blank">00:49:50</a> Single file components <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=3256s" target="_blank">00:54:16</a> Breaking down a Vue component into useful parts; props, data, methods, computed, and watch <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=3440s" target="_blank">00:57:20</a> Vuetify, tap into many pre-built components, styles, and more <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=4200s" target="_blank">01:10:00</a> Covid Globe Example in Shiny app <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=4360s" target="_blank">01:12:40</a> Rendering a ggplot <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=4515s" target="_blank">01:15:15</a> Summarizing parts of the Movie Vue R app <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=4750s" target="_blank">01:19:10</a> A look at template.html. A detailed walk through the organization of the app's HTML and files <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=5190s" target="_blank">01:26:30</a> Where R and Shiny are added to a Vue app. And how your app can send messages back to Shiny and R <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=5480s" target="_blank">01:31:20</a> Loading images and ggplots <br /><br /> <a href="https://youtube.com/watch?v=SkFLHbHrPD4&amp;t=5880s" target="_blank">01:38:00</a> Episode wrapup&nbsp;