Codeship Update: Codeship Pro Build Page Improvements

Today we’re excited to release our redesigned build page for Codeship Pro!

The new Codeship Pro build page offers improved performance (for example, reduced page load speed and efficient log scrolling -- see more below) and offers superior usability over the old version. Moreover, it’s beautiful, and we’re proud to push it live today!

New Features and Performance Improvements for Codeship Pro

Like everything we do, we looked at data to see how we could improve the previous version of the Codeship Pro build page. We saw slow page load performance and some confusion around most efficient usage of the sidebar. Further, we received a lot of feedback from our users in the past that they would love for the build log to scroll automatically while the log is being output.

Codeship Services logs moved

Previously, your Service logs took up space on your left sidebar. While important, you spend a lot more time looking at Steps logs. So, we moved Services to a new area above your build logs. You can see the status of each services here, as well as the primary service for the step your viewing.

Follow logs as default

You may have used our follow logs feature in the past to scroll your browser window as the logs roll in. Now it’s automatic! If you’ve ever used Terminal to follow logs, you’ll already be very familiar with this behavior.

Your browser will scroll as logs appear. If you scroll up, it will stop following the logs. If you scroll back down to the bottom, it will continue following them again just like you’d expect.

On-fail: conditional steps now available via the Codeship Pro UI

For the last several months, we’ve had conditional steps available that run only on the failure of a new step. This has been offered to customers who ask for it, but because it wasn’t exposed in the UI, we didn’t talk about it more widely. You can find out more about on-failure steps in our documentation.

Now on-failure steps will appear as they’re run. This enables you to build out more powerful and reactive workflows and make even your build failures into something productive. Just keep an eye out for any steps marked onfail. For example:

Collapsed sidebar to improve log readability

Sometimes you may want more room to read your logs or a quicker view to just see what happened at a high level. In the new design, you can collapse the sidebar to just the pass or fail icons -- dedicating more space to the logs than ever before.

Performance Improvements

While building the new version of this page, we looked at all the moving pieces that were involved in running this page. Besides some code refactors that are necessary on a page that grew over time, we also spent some time updating the internal API endpoints that would serve status information to the client.

We figured out a good way for unifying some endpoints and can now send status information to the client in a better way. Especially on network requests, this allowed us to cut down some blockers and allow for a much better performance (see the table and pictures at the end of this post).

Complex builds now run faster on Codeship Pro

This is very interesting for more complex builds with many steps. In the past, the curve started to grow exponentially as the client needed to send and process many more requests. We now have fewer requests that contain a little more data but eventually are not impacted by complexity anywhere comparable to the previous implementation.

Improved log rendering

When it comes to log rendering, we did some other interesting changes. Because of the network improvements, the initial request to auto-fetch the log for a failed step is happening earlier now. This means we can start rendering the log faster. Not only did we tweak some log parsing, but we also sped up rendering by leveraging frozen Objects and optimized render functions. Even for a small log, this allowed us to shave off 25 percent in time.

Some benchmarks conducted under throttled conditions and poor internet connection show even more dramatic improvements where we were able to achieve full page readiness in 7 seconds compared to over 17 seconds with the old interface.

[caption id="attachment_6319" align="aligncenter" width="635"]

Final numbers of a benchmark run with slow CPU and slow 3G network conditions[/caption]

In summary, with all the optimizations implemented, from network requests over rendering to improved state management on the client, we now provide a faster, more reliable and overall better experience to our users.

Feedback?

We’ve put a lot of thought into making the new Pro build page beautiful, simple, useful, and fast. Like everything else, we know there’s always more to do. If you have feedback, suggestions or if you spot any bugs please let us know. If you are not yet a user of Codeship, I want to encourage you to sign up for our free CI/CD platform today! Give the new Codeship Pro build page a spin.