December 6th, 2018
Sometimes we get lucky enough to have small fun projects that can be finished within a day or two (and polished just by doubling that effort). One of those was to develop an app to publish our current development efforts for larger audience within our university.
Our organization has been adopting and adapting Scaled Agile Framework to better manage its various development teams and their intertwined goals. As a part of that, we try to make our current and future work more visible and transparent. We've decided to manage our business level epics and issues with Jira. While being great issue tracking product, sometimes Jira makes it hard see the trees for the wood, especially for non-developers. So, to fix that, we got a task to invent and build a thing called "DUO dashboard" to publish our currents efforts in a more approachable form.
Luckily, I had just spent my summer in mentoring a Google Summer of Code student for building GatsbyJS integration for Plone, and GatsbyJS ended up being the perfect tool also for this project.
DUO dashboard provides kanban-like board for all current business level issues – one board for all – and one filtered board for each epic or team
GatsbyJS calls itself a modern framework for turning content into feature-rich, visually engaging apps and websites. In more technical terms GatsbyJS makes it easy to transform any sane data source into content-focused pre-rendered ReactJS web app that can be deployed using the fastest and cheapest way possible: as statically served files with just Apache, Nginx or any other HTTP server. In addition to that, the resulting web sites or apps include the current best practice web technologies to make them feel even faster than just statically served files should be. GatsyJS developers have a great series of blog post describing their vision of the future of web publishing.
The main disadvantage in building sites or apps with GatsbyJS is that after each change in the data, the site or app must be rebuilt with GatsbyJS tooling. That does include challenges with larger sites, but with our few hundred Jira issues that was a non-issue: every change in Jira triggers a GitLab CI build that fetches up-to-date data from Jira and rebuilds the dashboard with GatsbyJS. This rebuild is so fast that it takes actually longer to deploy the resulting files...
So, how much work was it to fetch our data from Jira with GatsbyJS? The complete JavaScript code that fetches all the data we need from Jira and processes it to be used in a GatsbyJS project is only about 180 lines. Rest of the app is just ReactJS and GraphQL – the bread and butter of modern front-end development.
Installed DUO dashboard web app starts with a fun retro cover flow for browsing our current business level epics (and this can skipped by simply bookmarking the favorite view later)
"DUO dashboard" works as a standalone web site, but also works well when embedded onto other web pages with iframe. To add a little more challenge to this project, we also decided to make it a mobile web app. This means that the web site, when opened from a mobile device, can be saved to the home screen, from where it can be opened and used like any native mobile app, but is always up-to-date.
Installed web app looks like a real app on iOS and Android devices
PS. Nowadays also this blog is built with GatsbyJS. Not from Jira, but from an internal Plone site, but that's an another story...