Gus Reiber and Tom Fennelly presented on evolving the Jenkins user interface. They discussed the history of the Jenkins GUI from its origins in 2005 to recent updates. They highlighted issues with CSS, page structure, and JavaScript modularization. Their solutions included using LESS for modular CSS theming, supporting GUI themes, and implementing JavaScript modularization best practices to improve the user experience. They demonstrated a prototype Jenkins interface and discussed continuing to enhance the visual design and functionality.

1. Evolving the Jenkins UI
Gus Reiber & Tom Fennelly, CloudBees

2. Gus Reiber
greiber@cloudbees.com
Introductions
Tom Fennelly
tfennelly@cloudbees.com
I’m the thinker
But... Gus,
is so good looking.
My college self says:
“Shut-up, Tom, I’m
sensitive!”
#jenkinsconf

3. Agenda
...so you will be ready for the quiz at the end.
A brief history of the Jenkins GUI
Recent GUI evolution
Fruitful steps forward
Proof of concept Jenkins GUI for feedback
The GUI
can be helpful,
too!
The big take-away...
#jenkinsconf

4. A brief history of the Jenkins GUI
40,000 BCE
First cave paintings
Feb 2005
Hudson is born
Jan 2011
Jenkins emerges
...until recent times...
(not to scale)
#jenkinsconf

5. Early progress
..from primitive men
Responsive page layout via <div>
Fresher look & feel
CSS based icons
...all with no plugin disruptions
#jenkinsconf

6. ● CSS modularization is an issue (style.css)
● Page Structure (semantic layout) is an issue (configuration pages)
● JavaScript modularization is an issue (hudson-behavior.js etc)
...what did we learn?
#jenkinsconf

7. A new dawn of GUI development
Real solutions starting now
#jenkinsconf

8. CSS - Doing “more with LESS”
Real solutions starting now
Modularization
page-header
page-footer
icons
status-balls
tabs
panes
build-history
etc etc
style.css
@import "./variables”
@import "./page-header”
@import "./page-footer”
@import "./icons”
etc etc
style.less
evolves to
variables.less
page-header.less
#jenkinsconf

9. CSS - Doing “more with LESS”
Modularization
Real solutions starting now
Parameterization
@lightBorderColor: color('#b3b3b3');
.page-header {
border-bottom: @lightBorderColor;
}
page-header.less
variables.less
#jenkinsconf

10. CSS - Doing “more with LESS”
Real solutions starting now
Modularization
Parameterization
Easy CSS “namespacing”
#jenkinsconf

11. UI Themes in Jenkins
Real solutions starting now
Build page styles and behaviors from GUI Themes
Support multiple implementations of a given theme
Support “per user” theme configuration
Enable broad support for usability need issues
Its Demo
TIME!
#jenkinsconf

12. JUC 2015
Jenkins Enterprise prototype
Now that Tom and I have some
framework pieces in place for
handling CSS scoping and adding
additional JS libraries, we have the
technology in place to make some
more significant visual and functional
enhancements to Jenkins...
We can
rebuild him

13. • Uber catch-all scripts e.g. hudson-behavior.js
• Global framework libraries: prototypejs, jquery
• No established patterns/tools re JavaScript Modularization
JavaScript Modularization
#jenkinsconf

14. One possible approach
frontend-maven-plugin
(and lots more - templating, CSS/JS minification etc)
modules
Browser
Bundle