JUC Europe 2015: Evolving the Jenkins UI
2 likes260 views
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.
JUC Europe 2015: Evolving the Jenkins UI
- 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