DEV Community

Cover image for How did we make open source CI better?
Alex Barashkov
Alex Barashkov

Posted on

How did we make open source CI better?

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

The main purpose of the changes was to improve the UX, then the UI. We reviewed existing issues with Drone found on Github, then gathered feedback from our developers and the founder of Drone, Brad Rydzewski.

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

Key navigation – Search
To start, we decided to make the “Search” function a key component for navigation across repositories and for their activation. It’s featured at the top of every page and is accessible by shortcut “/”. When using search, you can see a summary of the repository and the status of the latest build.

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?

There are already plans for a Drone 1.1 release, with key features including:

  • 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

Stay tuned and subscribe for release updates at Github or Twitter.

Top comments (13)

Collapse
 
bycedric profile image
Cedric van Putten • Edited

I tried Drone as a small research project for the company I work with. My conclusion was:

I don't care what you do, I'm switching to Drone...

Our slowest project (Expo) finished in 1.5 min, instead of our usual 5 - 7 min...

Absolutely love Drone, thanks for this article!

Collapse
 
alex_barashkov profile image
Alex Barashkov

I used previously Travis CI, Jenkins and Teamcity, but for me personally Drone beat them all. Very quick setup and it's open source. You could run it on AWS free tier and it will be fine for most of the scenarios.

Collapse
 
sochix profile image
Ilya Pirozhenko

We use drone internally for more than a year. And it is really great product. What I didn't like in the new 1.0 version is that .drone.yml is not backward compatible.

Collapse
 
bradrydzewski profile image
Brad Rydzewski

Drone 1.0 is backward compatible with the 0.8 yaml configuration file. If you have an example of an 0.8 file that does not work with 1.0 you can post to github.com/drone/drone-yaml

Collapse
 
sochix profile image
Ilya Pirozhenko

I'm read this:

There is no automated upgrade path from version 0.8.x to 1.0.0. There were incompatible changes to the database that will require an advanced migration utility.

and this

There were significant, breaking changes to the yaml configuration format in this release. Please note, however, 1.0.0 is capable of processing yaml files in the legacy 0.8.x yaml format (with the exception of matrices).

On your site docs.drone.io/releases/1.0.0-rc.1/...

And decided to stay on 0.8 for a while

Thread Thread
 
bradrydzewski profile image
Brad Rydzewski

that post was a few months old (from rc.1). As of rc.5 we added support for reading 0.8 matrix configurations and just last week we published an automated migration utility. github.com/drone/drone-migrate

Thread Thread
 
sochix profile image
Ilya Pirozhenko

Thank you! Where I can get the latest docs? Seems like rc1 is the freshest one on the official docs page.

Collapse
 
alex_barashkov profile image
Alex Barashkov

Thank you so much! I hope with the new updates the number of fans only will grow!

Collapse
 
anjireddylella profile image
anjireddylella

Really great work by your team. GIVING BACK to the community is such nice thing of your team.

Collapse
 
eamanu profile image
Emmanuel Arias

Great! Excellent work!

Collapse
 
jsardev profile image
Jakub Sarnowski

Amazing! Thank you for this awesome work! :)

Collapse
 
qrpike profile image
Quinton Pike

Can we store global secrets?

Collapse
 
alex_barashkov profile image
Alex Barashkov

There is an option to storing them globally in enterprise version, but even in the general version you could easily use Kubernetes secrets or other external secrets management tool for example AWS or Vault.