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?