Jenkins 2 UX ImprovementsKeith ZantowSoftware Engineer, CloudBees, Inc.

User Experience

Jenkins 1 UX

● Useful plugins○ Example: CVS

● Configuration experience○ A few pages to configure the majority: System, Job, Security

● Aging technologies○ Prototype.js○ Table-based layouts

● Weekly releases○ Any sort of consistency?

UX & UI Improvements

● New user experience○ Start with useful plugins○ Security

● Configuration experience○ Global setup○ Item configuration

● User experience○ Consolidate information

● Modernizing○ Enabling rich client UI

New User Experience

New User Experience: Then

● Welcome!● Start using Jenkins● What now?

New User Experience: Then

● Search Google…

● Find some plugins● Install…● Start using Jenkins

New User Experience: Then

● Create some jobs● … anyone (!)

New User Experience: Issues

● Not really like typical apps● Getting started doesn’t really get started● Not a good idea to give everyone access to your systems

New User Experience: Secure by default

● Authentication required● Security features enabled● Only admins can access/install

○ Can only opt out of security

New User Experience: Quick Start

● Community curated list of useful suggested plugins

● Easier to get started○ Next, next, next

● Easier to find what you need

New User Experience: Customize

● Easy to find what you need up front○ Not all plugins listed here

● Helpful for new users○ Sorta...

New User Experience: Install

● Familiar● Gracefully handle failed downloads

New User Experience: Security

● Security enabled● Easier to disable read access

○ Allow anonymous read access

● Create an admin● Able to skip and configure alternate

security settings

New User Experience: Now

● More like typical apps● Getting started is lots closer to getting started● Not giving everyone access to your systems

Configuration Improvements

Configuration Improvements

● Creating items● Using configuration pages● Dead ends

System configuration: Then

● Huge amount of options on a single page○ Multiple JDKs!

New Item Creation: Then

● Difficult to differentiate items quickly

● Copy item confusing● Unnecessarily complex

Item configuration: Then

● Page size can get unwieldy● Visually scan to find section

headers● Unnecessarily overloaded● Unappealing UI

Evolve, don’t reinvent

● Can’t redo these pages entirely○ Existing plugins contribute to them heavily!○ Remember: “drop-in” replacement for Jenkins 1.x

● Layouts difficult to deal with○ Simple method to make pages fullscreen○ Stuck with tables for now

● Single purpose pages● Compatibility!● All hope isn’t lost

Improved Item Creation

● Improved usability○ De-cluttered UI○ Single page!

● Visual indicators● Copy makes a bit more sense

Improved Item Config

● Easier navigation○ Tabs? Scrollspy? ScrollTabs!○ Direct access to sections

● Improved usability○ De-cluttered UI○ Single page!

● Evolutionary

Improved Item Config

● Syntax Highlighting● Helpers● Documentation

Separate Tool Configurations

● Reduce System Configuration complexity

● WARNING: documentation across the web may need to be updated

Provide a Path Forward

● Pipeline projects with nothing to build, what to do?○ Some improvements to user

notifications○ Describe how to proceed

End-user experience

Developer experience● Build!

○ Automatic, great!

● Wait …○ Which build had my changes?

● Check the logs○ Where? Which job actually failed?

Developer Experience: Issues

● Simple jobs work great○ Tail the log, succeed

● Irritating to get results of upstream/downstream jobs○ Where is the log, again?

Administrator Experience: Issues

● How to move builds based on business process?○ Promotions○ Custom implementations○ Scripts

Usability Issues Across Teams

● How to hand off to○ Testing?○ IT?

● How to handle○ Branching?○ Promotions?

Consolidate Processes

● Pipeline Stage View○ Easier for admins○ Easier for developers○ Centralized

Centralize Processes Across Teams

● Pipeline Stage View● Useful to manage many (all?)

aspects of the CD process

Developer Experience

● Complex pipelines visualized○ Logs available at each step

Modernizing the UI Toolset

Introduce Modern Tools● How do we iterate with modern UI stack?● Prototype.js causes issues with:

○ jQuery, Bootstrap, more...

● Multiple plugins with different versions of jQuery● CSS reuse

○ Existing libraries: Bootstrap

● Implemented as Jenkins plugins!● 1 step forward

Introduce Modern Tools● Node.js, Browserify, LESS, etc..● Jenkins js-modules, js-libs● What does this all mean?

○ Isolated Javascript dependencies for plugins○ Use rich tools from the Node.js community

■ ACE editor, Handlebars○ Single downloads for shared libraries○ Easier for front-end developers to contribute○ Rich client UI!

Same, but Different● Common JS plugins● Automatically available, shared

across a Jenkins instance○ Avoid every plugin with a giant JS

script to download

Thanks! Questions?