How did we make open source CI better?

Alex Barashkov
Apr 11, 2019 · 5 min read

In this article, we talk about Drone CI, a very powerful, lightweight, docker-based, multi-pipeline, multi-platform, open-source CI/CD tool. Drone launched in 2012 and, like many other open source tools, was made by and for developers, so lacked a user-friendly interface.

I hope we finally changed it…

We at Pixel Point use Drone on a lot of different projects, on a day-to-day basis, so we decided to improve it. After months of work, we’re happy to announce new Drone v1.0.0, which is ready to use now.

New version

Old version

Research Previous Solution

Based on this, we compiled a list of main issues:

  • Complicated and obscure navigation
  • A confusing cancel build action
  • A lack of user interaction during repository activation
  • A lack of responsive design support for mobile and tablet devices
  • No clearly defined home page
  • Interface scalability problems and no space for new features
  • Obscure settings saving

We also created a list of new, upcoming features that include multi-pipeline builds, support for cron jobs, and new repository settings.

New Ideas and Realization

Cards
We designed cards for repositories, using the information that was the most useful and trying to create as flexible a solution as possible. For example, the title of the card on the home page is the name of the repository, while the second line is a human-readable phrase with important information.

We built it based on the author of the commit, event, branch and commit message. That solution scales better than the table view, where each column is dedicated to a specific field. Using our solution, you can easy collapse it and break by-lines for mobile view.

Tabs
We altered the repository page so that you can see tabs upon opening it. This provides a good navigation approach for the settings page and allow us to add new tabs in future (we already have a few in the works).

Single Settings Page
Rather than split certain settings into different pages, now all of them are in one. Once you activate the new repository, you’re immediately redirected to the settings page, because that is typically the first place you go to configure your repository.

New build page
We strive for unified components, so the main component with a short breakdown of information about the build status is the same as on previous pages. Navigation on the left now supports multiple pipelines. At the top, we added space for buttons, where we plan to add new features in future releases.

Logs are important
For a better experience reading and navigating logs, we added a fullscreen mode and the ability to download logs, which is particularly useful if your logs are massive and you want to review them in your personal favourite editor.

Synchronization does not block your work
Some Drone clients have a massive list of repositories and synchronizing them all with Drone takes some time. Previously, synchronizing was a fullscreen task and did not allow you to close the screen or continue working with existing lists of repositories. Now, it’s simply a small button with animations that play during synchronization.

Clever loading
In the new version, when you load the data on the first app then jump to another page, Drone draws on the existing list and shows a clear indication that data is loading. No more waiting or watching for spinners; if there’s data, it renders immediately.

Nice Icons for empty states
We put a lot of effort to make fancy even empty states and made a lot of different icons you would be able to enjoy on various pages.

What else can you expect from Drone?

  • A “Deploy” button for a specific environment from the build page
  • The ability to filter builds by branches and environments
  • User friendly tooltips for users who have just installed Drone
  • A new approach to real-time updates
  • Improved user management

Tap the 👏 button if you found this article useful!

Any questions or Feedback? Connect via Pixel Point

Pixel Point

Web design and development. Fair price, great quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store