Here at Appsilon, while developing projects for our clients, we frequently encounter recurrent challenges. This pushes us to create solutions that simplify the development process - making our day-to-day work more efficient. Those usually start as internal tools, but we don’t want to keep those great packages just to ourselves! That is why we share them with the community - so everyone can benefit.   We use R Shiny a lot and we love it. That’s why our Open Source revolves mostly around improving the experience with Shiny, which is a great tool, although just by itself sometimes lacks some functionalities - that’s where we come in. I want to introduce you to our open source by giving an overview of the packages along with resources for exploring them in more detail. This way you can quickly decide if there is something useful to you among them (and I bet there surely is). To benefit from packages described in this article you should have some working knowledge of Shiny package for R. Now, let's dive in! <h2 style="text-align: center;"><b>SHINY.SEMANTIC</b></h2> <img class="aligncenter wp-image-2130 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023046ee3169213cad05f_shiny.semantic-e1561972858872.webp" alt="" width="250" height="288" /> <h3><b>Why bother?</b></h3> Are you bored with the visual style of your apps created with Shiny?  Our package allows you to transform your boring standard Shiny app into a modern looking app with fresh and interactive design. <img class="aligncenter size-medium wp-image-2113" src="https://wordpress.appsilon.com/wp-content/uploads/2019/06/before-after-600x210.png" alt="before and after " width="600" height="210" /> <h3><b>So what is shiny.semantic? </b></h3> In short, It’s a library that makes it easy to wrap Shiny with Semantic UI components. It attaches all semantic external files which are stored on our CDN for improved loading speeds. The package has many popular components wrapped by default, but it is not hard to extend it even more by creating specific custom components that you may need. For that purpose, it has a universal input binding method for your custom user interfaces which enables you to create various types of inputs. <h4>Ready to explore?  Get the latest stable version from <a href="https://cran.r-project.org/web/packages/shiny.semantic/index.html">CRAN</a> with </h4> <figure class="highlight"> <pre class="language-r"><code class="language-r" data-lang="r">install.packages("shiny.semantic") </code></pre> </figure> If you install from GitHub, you can also try the latest features present on the develop branch. <figure class="highlight"> <pre class="language-r"><code class="language-r" data-lang="r">devtools::install_github("Appsilon/shiny.semantic", ref = "develop") </code></pre> </figure> <h4>Need more details?  Read the <a href="https://appsilon.com/shiny-semantic-v-0-2-0-cran-release/">shiny.semantic blog post</a> or visit the package site on GitHub.</h4> <h2 style="text-align: center;"><b>SEMANTIC.DASHBOARD</b></h2> <img class="aligncenter wp-image-2133 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02306e37581fc34c95b33_semantic.dashboard-e1561973112861.webp" alt="" width="250" height="288" /> Semantic.dashboard is our package for quickly creating beautiful and customizable dashboards. It is also easy to use. The syntax is compatible with the ‘<i>shinydashboard’</i> package, if you have used it in your app, changing to our semantic.dashboard is a no-brainer. <h3><b>Why do I need a dashboard?</b></h3> If you haven’t used a dashboard as a base for your app before, give it a try. It allows you to easily structure your app, making it more user-friendly. You divide your UI between 3 sections - header, a sidebar for navigation, and a dashboard body for displaying main content. With our package, you can also easily test out different Semantic-UI themes with a line of code. You can find some of those on <a href="https://semantic-ui-forest.com/themes/">semantic forest</a>. If you need more flexibility in styling you can also customize it to your liking with CSS. <img class="wp-image-2114 size-large" src="https://wordpress.appsilon.com/wp-content/uploads/2019/06/44-1024x189.png" alt="test different semantic UI themes with a line of code" width="1024" height="189" /> you can easily test out different Semantic-UI themes with a line of code. semantic.dashboard is available both on <a href="https://cran.r-project.org/web/packages/semantic.dashboard/index.html">CRAN</a> and our <a href="https://github.com/Appsilon/semantic.dashboard">GitHub</a> Want to improve your Shiny dashboard design? Read our step-by-step guide to the semantic.dashboard package. &nbsp; <h2 style="text-align: center;"><b>SHINY.ROUTER</b></h2> <img class="aligncenter wp-image-2131 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b02306e37581fc34c95b72_shiny.router-1-e1561973160216.webp" alt="shiny.router logo" width="250" height="288" /> Shiny.router is a tool that will help you introduce URL routing to your Shiny app.  <h3><b>What can it do?</b></h3> This package provides a routing mechanism that can separate different UI views in your app and let you navigate them with URL addresses. It will also enable you to write cleaner code by separating it into smaller chunks of code. What's more, you can even create separate server callbacks for each of them. With that, views fed with the same data can display different results in each tab. This gives you a huge amount of flexibility. Moreover, you pass parameters to your app along with the URL address which makes it possible to share a link that redirects to a specific state within the app.  <img class="size-full wp-image-2116" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023085d4ca14b9040bb54_router_example.gif" alt="This package provides a routing mechanism that can separate different UI views in your app and let you navigate them with URL addresses." width="691" height="386" /> This package provides a routing mechanism that can separate different UI views in your app and let you navigate them with URL addresses. <h3><b>That’s not all!</b></h3> Besides using the address bar in your browser to navigate, it also makes it possible to operate routing from the server side of your app with a set of functions like <i>route_link, change_page, get_page </i>or<i> is_page. </i>All of this together makes it a really powerful tool for improving your shiny app development. It will take your app to the next level. To get started, download it from <a href="https://cran.r-project.org/web/packages/shiny.router/index.html">R CRAN</a> or our <a href="https://github.com/Appsilon/shiny.router">Github</a>. Need more examples and instructions to get you going? I recommend reading this great <a href="https://appsilon.com/shiny-router-package/">shiny.router post</a> by Krystian. &nbsp; <h2 style="text-align: center;"><b>SHINY.I18N</b></h2> <img class="aligncenter wp-image-2132 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023089bd6df84c7f6e14a_shiny.i18n-1-e1561973134212.webp" alt="shiny.i18n logo" width="250" height="288" /> Shiny.i18n is a library that allows you to easily create multi-language apps. It can make the process of implementing translations of your app to any language a breeze.   <h3><b>In-app translations - the easy way</b></h3> i18n supports translations in JSON or CSV format. You can have all your languages and translations in one file, but if it is needed, languages can be separated between different files for each language. This allows you to spread the translation process which may be crucial if you are going to translate into multiple languages. When you have your translations, using the package is very easy. You just have to read them into your app with the shiny.i18n interface and surround your expressions which are to be translated with a translator tag. <h1><img class="aligncenter wp-image-2117 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b023096cd8f7584c837134_i18n_live_language_change_1.gif" alt="When you have your translations, using the package is very easy. You just have to read them into your app with the shiny.i18n interface" width="602" height="699" /></h1> Get it from <a href="https://cran.r-project.org/web/packages/shiny.i18n/index.html">CRAN</a> or <a href="https://github.com/Appsilon/shiny.i18n">Github</a>. For more details, you can also refer to Dominik’s <a href="https://appsilon.com/internationalization-of-shiny-apps-i18n/">shiny.i18n blogpost</a>. <h2 style="text-align: center;"><b>SHINY.INFO</b></h2> <img class="aligncenter wp-image-2129 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0230ac51a6e88355a4e58_shiny.info_-2-e1561973187744.webp" alt="shiny.info logo" width="250" height="288" /> This is the latest package that we introduced to the Shiny family that should prove useful for developers working with Shiny apps. <h3><b>Useful info just around the corner ;)</b></h3> shiny.info introduces boxes with simple diagnostic information for developers that show up in the corner of your Shiny app. You can display things like: <ul><li style="font-weight: 400;">Loader that shows up during long computation - <b>busy()</b></li><li style="font-weight: 400;">App version from global variable VERSION - <b>version()</b></li><li style="font-weight: 400;">Box with branding - <b>powered_by(</b>“Company”, “#Link”<b>)</b></li><li style="font-weight: 400;">Git information - <b>git_info()</b></li><li style="font-weight: 400;">Custom message or anything else to help with your development - <b>display(</b>“Some diagnostic information”<b>)</b></li></ul> <img class="alignleft wp-image-2137 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b0230b2eaf7ba211b05ebf_info-merged-optimized-1.gif" alt="gif demonstrating that shiny.info introduces boxes with simple diagnostic information for developers that show up in the corner of your shiny app." width="1200" height="341" /> &nbsp; Note that this package is still in its infancy, so you may encounter issues. <h4><b>What will be possible with shiny.info in the future?</b></h4> We are planning to add more features like: <ul><li style="font-weight: 400;">More UI styles, e.g. adjusted to Shiny Server Pro with an authentication box.</li><li>Inspect feature for easy debugging and checking app state at any given time.</li><li style="font-weight: 400;">An easy way for custom styling of the box and its content.</li><li style="font-weight: 400;">Option for infobox to be hidden by default and displayed on key press.</li><li style="font-weight: 400;">Possibility to use multiple displays at once.</li></ul> If you want to read some more about this package refer to <a href="https://appsilon.com/more-info-for-shiny-apps/">Dominik’s recent blog post</a> Do you have anything in mind that would make the package even better? Consider requesting features on the <a href="https://github.com/Appsilon/shiny.info">shiny.info GitHub</a> page. <h2><b>Summing up</b></h2> I hope that you can leverage our packages to take your Shiny development to a new level and create better and more beautiful apps faster. <h2><b>Follow Appsilon Data Science on Social Media for Updates </b></h2><ul><li>Follow<a href="https://twitter.com/appsilon"> @Appsilon</a> on Twitter</li><li>Follow Appsilon on<a href="https://www.linkedin.com/company/appsilon"> LinkedIn</a></li><li>Sign up for our company<a href="https://appsilon.com/blog/"> newsletter</a></li><li>Try out our R Shiny<a href="https://appsilon.com/opensource/"> open source</a> packages</li><li>Sign up for the AI for Good<a href="https://appsilon.com/ai-for-good/"> newsletter</a></li></ul>