We're going to use RStudio Desktop in this workshop. Yes, you can even do web development work in RStudio!
💻 Please make sure you have a recent version of RStudio installed. Version 1.2 or later will work.
I've created a companion R package for this workshop called js4shiny. Installing the package with its dependencies will ensure that you have the R packages needed for the workshop. The package also provides access to the examples and exercises used in the workshop and includes some helpful tools that you can use after the workshop while learning and working with JavaScript.
💻 To install the package, use devtools.
# install.package("devtools")
devtools::install_github("gadenbuie/js4shiny", dependencies = TRUE)
Be sure to include the dependencies = TRUE
!
If you're installing devtools
for the first time, you may find the System Setup of the R Packages book to be helpful.
ℹ️ There is a minor issue with rmarkdown
limited specifically to version 2.0. If you have rmarkdown
2.0 installed, I recommend updating to a newer version. The current version of rmarkdown
on CRAN is . If the CRAN version is 2.0.5 or higher, install from CRAN; otherwise use
devtools::install_github("rstudio/rmarkdown")
I've created a set of code snippets for RStudio that are useful for the types of tasks we'll cover in the workshop. You can find them in the js4shiny repo in inst/snippets.
To install, you can use the js4shiny package.
js4shiny::snippets_install()
You cou an manually install the snippets by copying them from here and pasting them into the snippets editor in RStudio, which is available under Global Options > Code > Edit Snippets button. You can find more information and detailed instructions about using snippets at Code Snippets on the RStudio Support page.
I've included all of the packages that we'll need
in the dependencies of js4shiny
except for the tidyverse.
Please make sure you have at least the core tidyverse packages installed.
The final R detail is that we will be building a package during the workshop when we create an htmlwidget. We won't focus on the mechanics of package building in the workshop. If you're not familiar with package development, I recommend taking a look a R Packages by Hadley Wickham and Jenny Bryan. At a minimum, please review the System Setup chapter, in particular the section on the R build toolchain to ensure that your laptop will be ready to build a package.
We'll spend a significant amount of time using a web browser, and it's important to use a browser with good developer tools, such as Firefox or Chrome. Safari and Internet Explorer have usable developer tools but they are generally not as developer friendly as Firefox or Chrome's developer features.
During the workshop, I'll exclusively use Firefox Developer Edition. It's comparable to Firefox but has a few more features and it even has the word "Developer" in the name.
💻 Any of the following three browsers will work for the workshop:
node is a command-line runtime for JavaScript that lets developers run JavaScript on servers rather than in the user's browser.
We won't directly use node
in this workshop,
but we will use npm (a package manager for node and JavaScript libraries).
npm is included with an installation of node
.
💻 To install node
,
you can download the node installer
or you can use your system's package manager.
Check that the installation worked by running the following in a new terminal window or session.
node -v
## v13.6.0
npm -v
## 6.13.4
These are the versions currently installed on my system and the version on your system may not perfectly match the version you see above. If you already have a previous, older version of Node installed, it's probably a good idea to take this opportunity to upgrade.
🆘 If you run into any issues installing node
or npm
,
you can post your troubles and get help in this issue.
If you plan to do a lot of development with node
and npm
,
you may want to use a Node Version Manager.
nvm
is a bash script for macOS or Linux systems
and nvm-windows
is a similar program for Windows users.
The node version manager is used to manage the installation and activation
of multiple versions of node
on the same system.
Follow the instructions on the npm
webpage
to install node
and npm
(they come together)
and confirm that your installation is working.
standardjs is a style guide, code linter and beautifier in one. standard is a command line tool for the JavaScript Standard Style that automatically formats JavaScript code in a consistent manner and points out common style and programmer errors.
There are a number of JavaScript tools for this task --- and standard is built on ESLint and Prettier --- but standard is easier to install and configure and uses a code style that will be familiar to R developers.
💻 Once you've installed node and npm, you can install standard by running
npm install standard --global
Once installed, you can use the Lint File or Selection RStudio addin provided by the js4shiny package to automatically format your JavaScript.
💻 We will use RStudio throughout the workshop, but if you plan to spend more time coding JavaScript, HTML, or CSS than R, then you may want to use Visual Studio Code.
The primary benefit of using VSCode is that web development languages are first-class citizens, which means that the editor's interface provides helpful autocompletion and links to help documentation. Furthermore, there is a wide variety of community-contributed extensions that augment VSCode's capabilities.
A few extensions that I've found personally helpful include
- Visual Studio IntelliCode
- Live Server
- Debugger for Firefox
- VSCode Icons
- Bracket Pair Colorizer
- ESLint
- CSS Extensions
- HTML Extensions
VSCode and RStudio are somewhat at opposite sides of the spectrum: RStudio excels at supporting R developers while providing a reasonable editing experience for web developers; while on the other hand VSCode is excellent for the latter but less supportive of R developers.
There are a pair of extensions for R language support that are very helpful:
- R support for Visual Studio Code
- R Language Server Protocol
- Requires that you install the R package
languageserver
- Requires that you install the R package