Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX -...
Transcript of Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX -...
![Page 1: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/1.jpg)
Jenkins 2 UX ImprovementsKeith ZantowSoftware Engineer, CloudBees, Inc.
![Page 2: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/2.jpg)
User Experience
![Page 3: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/3.jpg)
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?
![Page 4: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/4.jpg)
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
![Page 5: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/5.jpg)
New User Experience
![Page 6: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/6.jpg)
New User Experience: Then
● Welcome!● Start using Jenkins● What now?
![Page 7: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/7.jpg)
New User Experience: Then
● Search Google…
● Find some plugins● Install…● Start using Jenkins
![Page 8: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/8.jpg)
New User Experience: Then
● Create some jobs● … anyone (!)
![Page 9: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/9.jpg)
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
![Page 10: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/10.jpg)
New User Experience: Secure by default
● Authentication required● Security features enabled● Only admins can access/install
○ Can only opt out of security
![Page 11: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/11.jpg)
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
![Page 12: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/12.jpg)
New User Experience: Customize
● Easy to find what you need up front○ Not all plugins listed here
● Helpful for new users○ Sorta...
![Page 13: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/13.jpg)
New User Experience: Install
● Familiar● Gracefully handle failed downloads
![Page 14: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/14.jpg)
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
![Page 15: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/15.jpg)
New User Experience: Now
● More like typical apps● Getting started is lots closer to getting started● Not giving everyone access to your systems
![Page 16: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/16.jpg)
Configuration Improvements
![Page 17: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/17.jpg)
Configuration Improvements
● Creating items● Using configuration pages● Dead ends
![Page 18: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/18.jpg)
System configuration: Then
● Huge amount of options on a single page○ Multiple JDKs!
![Page 19: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/19.jpg)
New Item Creation: Then
● Difficult to differentiate items quickly
● Copy item confusing● Unnecessarily complex
![Page 20: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/20.jpg)
Item configuration: Then
● Page size can get unwieldy● Visually scan to find section
headers● Unnecessarily overloaded● Unappealing UI
![Page 21: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/21.jpg)
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
![Page 22: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/22.jpg)
Improved Item Creation
● Improved usability○ De-cluttered UI○ Single page!
● Visual indicators● Copy makes a bit more sense
![Page 23: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/23.jpg)
Improved Item Config
● Easier navigation○ Tabs? Scrollspy? ScrollTabs!○ Direct access to sections
● Improved usability○ De-cluttered UI○ Single page!
● Evolutionary
![Page 24: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/24.jpg)
Improved Item Config
● Syntax Highlighting● Helpers● Documentation
![Page 25: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/25.jpg)
Separate Tool Configurations
● Reduce System Configuration complexity
● WARNING: documentation across the web may need to be updated
![Page 26: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/26.jpg)
Provide a Path Forward
● Pipeline projects with nothing to build, what to do?○ Some improvements to user
notifications○ Describe how to proceed
![Page 27: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/27.jpg)
End-user experience
![Page 28: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/28.jpg)
Developer experience● Build!
○ Automatic, great!
● Wait …○ Which build had my changes?
● Check the logs○ Where? Which job actually failed?
![Page 29: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/29.jpg)
Developer Experience: Issues
● Simple jobs work great○ Tail the log, succeed
● Irritating to get results of upstream/downstream jobs○ Where is the log, again?
![Page 30: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/30.jpg)
Administrator Experience: Issues
● How to move builds based on business process?○ Promotions○ Custom implementations○ Scripts
![Page 31: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/31.jpg)
Usability Issues Across Teams
● How to hand off to○ Testing?○ IT?
● How to handle○ Branching?○ Promotions?
![Page 32: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/32.jpg)
Consolidate Processes
● Pipeline Stage View○ Easier for admins○ Easier for developers○ Centralized
![Page 33: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/33.jpg)
Centralize Processes Across Teams
● Pipeline Stage View● Useful to manage many (all?)
aspects of the CD process
![Page 34: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/34.jpg)
Developer Experience
● Complex pipelines visualized○ Logs available at each step
![Page 35: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/35.jpg)
Modernizing the UI Toolset
![Page 36: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/36.jpg)
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
![Page 37: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/37.jpg)
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!
![Page 38: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/38.jpg)
Same, but Different● Common JS plugins● Automatically available, shared
across a Jenkins instance○ Avoid every plugin with a giant JS
script to download
![Page 39: Jenkins 2 UX Improvements - files.meetup.comfiles.meetup.com/19663277/Jenkins vJAM May 4 2016 - UX - Keith Z… · Jenkins 2 UX Improvements Keith Zantow Software Engineer, CloudBees,](https://reader034.fdocuments.us/reader034/viewer/2022042218/5ec49120a6d92d38321d07da/html5/thumbnails/39.jpg)
Thanks! Questions?