Jenkins 2 UX Improvements. Keith Zantow Software Engineer, CloudBees, Inc.

Transcription

1 Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees, Inc.

2 User Experience

3 Jenkins 1 UX Useful plugins Example: CVS Configuration experience Aging technologies A few pages to configure the majority: System, Job, Security Prototype.js Table-based layouts Weekly releases Any sort of consistency?

4 UX & UI Improvements New user experience Configuration experience Global setup Item configuration User experience Start with useful plugins Security Consolidate information Modernizing Enabling rich client UI

5 New User Experience

6 New User Experience: Then Welcome! Start using Jenkins What now?

7 New User Experience: Then Search Google Find some plugins Install Start using Jenkins

8 New User Experience: Then Create some jobs anyone (!)

9 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

10 New User Experience: Secure by default Authentication required Security features enabled Only admins can access/install Can only opt out of security

11 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

12 New User Experience: Customize Easy to find what you need up front Not all plugins listed here Helpful for new users Sorta...

13 New User Experience: Install Familiar Gracefully handle failed downloads

14 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

15 New User Experience: Now More like typical apps Getting started is lots closer to getting started Not giving everyone access to your systems

16 Configuration Improvements

17 Configuration Improvements Creating items Using configuration pages Dead ends

18 System configuration: Then Huge amount of options on a single page Multiple JDKs!

19 New Item Creation: Then Difficult to differentiate items quickly Copy item confusing Unnecessarily complex

20 Item configuration: Then Page size can get unwieldy Visually scan to find section headers Unnecessarily overloaded Unappealing UI

21 Evolve, don t reinvent Can t redo these pages entirely Layouts difficult to deal with Existing plugins contribute to them heavily! Remember: drop-in replacement for Jenkins 1.x Simple method to make pages fullscreen Stuck with tables for now Single purpose pages Compatibility! All hope isn t lost

22 Improved Item Creation Improved usability De-cluttered UI Single page! Visual indicators Copy makes a bit more sense

23 Improved Item Config Easier navigation Improved usability Tabs? Scrollspy? ScrollTabs! Direct access to sections De-cluttered UI Single page! Evolutionary

24 Improved Item Config Syntax Highlighting Helpers Documentation

25 Separate Tool Configurations Reduce System Configuration complexity WARNING: documentation across the web may need to be updated

26 Provide a Path Forward Pipeline projects with nothing to build, what to do? Some improvements to user notifications Describe how to proceed

27 End-user experience

28 Developer experience Build! Wait Automatic, great! Which build had my changes? Check the logs Where? Which job actually failed?

29 Developer Experience: Issues Simple jobs work great Tail the log, succeed Irritating to get results of upstream/downstream jobs Where is the log, again?

30 Administrator Experience: Issues How to move builds based on business process? Promotions Custom implementations Scripts

31 Usability Issues Across Teams How to hand off to Testing? IT? How to handle Branching? Promotions?

32 Consolidate Processes Pipeline Stage View Easier for admins Easier for developers Centralized

33 Centralize Processes Across Teams Pipeline Stage View Useful to manage many (all?) aspects of the CD process

34 Developer Experience Complex pipelines visualized Logs available at each step

35 Modernizing the UI Toolset

36 Introduce Modern Tools How do we iterate with modern UI stack? Prototype.js causes issues with: Multiple plugins with different versions of jquery CSS reuse jquery, Bootstrap, more... Existing libraries: Bootstrap Implemented as Jenkins plugins! 1 step forward

37 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!

38 Same, but Different Common JS plugins Automatically available, shared across a Jenkins instance Avoid every plugin with a giant JS script to download

39 Thanks! Questions?