My teammates, Karl Chastko and Spencer Elford, and I competed this years Esri’s App Challenge on sustainable transportation. The development of our app (check it out) was something unique from the standard way of web development (i.e. HTML, CSS, and JavaScript). Some of you guys may be thinking, “What’s so unique?” Others may think that it is all jargon, but….before you click the back button, just hear me out. I promise you will be intrigued and perceive development a bit more different. Those that find programming daunting, I highly suggest you read one of my earlier blogs on “Why GIS and Computer Science Should Integrate Together?” as these two disciplines are gradually becoming the new standard in the GIS labour market. Anyways, here we go!

Shiny

Originally, our app would have been made custom like last year’s app, except with more emphasis on the User Experience (UX) and User Interface (UI). However, we took a different route and decided to have it written in pure R. Those of you that don’t know the programming language, R is mainly a statistical programming language. This may sound far-fetched, but thanks to dedicated programmers and large open source community, R has come a long way and has now added another dimension – app development or in their terms “Shiny.” Shiny is the core library package to download with tremendous amount of documentation and galleries to show despite its relative infancy. Although it’s not exactly like Esri’s web-app builder where you plug and chug functional graphics and download, the framework of Shiny is similar to it…only with a lot of tinkering.

Critical Components of Shiny

At the bare bones, you can technically make a static Shiny app in less than 10 lines of code. Now, Shiny has fairly steep learning curve, especially to those that never used R. But have no fear, with a little dedication and finding the right sources, you can pick it up!

To develop a Shiny app, you need to have two functions – the UI and server. Like the definition, UI focuses on the web page aesthetics and is where you can maximize the UX. The aesthetics of the page are pre-written in Bootstrap, a golden interactive CSS template that saves web developers from insanity. An example in our app is implementing “absolutePanel” and inserting inside the flexible panel a “sliderInput” and “selectInput”. This gives the user the liberty to drag the panel wherever they want on the screen and select and slide based on the given choices. What’s even cooler, is you can improve the aesthetics of the UX by injecting your own code, which I’ll mention in the next section.

The other half is Server, which… is well…what mostly makes Shiny really shiny. Based on the user’s activity (i.e clicks, selecting, etc.), the Server performs live back-end calculations that communicates with the UI. Although, it is a bit harder to code than the UI component, it is certainly a whole lot easier than programming in pure HTML, CSS, JavaScript, and PHP. An example of our app is inserting their start and final destination, selecting vehicle type, and sliding to how many times per week they do this kind of commute. Based on the user’s input and a click of the submit button, back-end calculations process this information instantly and in turn a new panel pops out with quantitative results.

Thinking Outside the Box Here – Apply ArcGIS API 

A good programmer has to think not only logically, but outside of the box. The “thinking outside the box” part is bridging R with other programming languages. What I mean here is the developer can literally write say…JavaScript (JS) or CSS code and inject it in Shiny to make a more advanced app. This is mainly for experienced programmers that are proficient in R and at least one other language (preferred JS) as the injection process can be tricky. The most common pitfall is placing your JS file in a app directory, connecting to it, and then knowing where to properly inject the JS file in Shiny. Our case was different. The most difficult part of our app was to capture the live distance commute value from the HTML and then storing it as an R variable to perform the interactive calculations of the Server function in Shiny. Documentation for that was nearly nonexistent and required a lot of tinkering.

For simplicity and organizational purposes, we created separate pseudo CSS and JS files as R scripts and injected them to Shiny. The main API we used was Leaflet due to familiarity (R also has a leaflet library) and to keep the app lightweight to maximize rendering speed. We intended to inject the ArcGIS JS API into our app (i.e. geolocator and geocoder widget); however, we didn’t have enough time to do it and mixing APIs together can get messy quickly, which requires intensive back-and-forth testing and that takes up a lot of time.

Was it worth it?

Absolutely! Just imagine what you can do if you integrate Shiny via R and the ArcGIS JS API together – what kind of app you can make! You mix both open source and proprietary together. Lastly, when finished you can create a free Shiny account and host the app on their server for free (25 hours usage per month). There are additional plans at a bargain price, if you think people will go over the 25 hour limit. In the end, it’s up to you of what you make out of it.