Hello Michael, Good job ! This new fresh UI is really a good improvement for the jenkins project !
I wondering if there is a Docker image of Blue Ocean to try it directly on a existing installation ? Have a good day, On Friday, May 27, 2016 at 12:44:06 AM UTC+2, Michael Neale wrote: > > I just opened https://issues.jenkins-ci.org/browse/HOSTING-98 for the > so-called "blueocean" plugin. > > You may have heard this announced via the blog post > https://jenkins.io//blog/2016/05/26/introducing-blue-ocean/. If not, I'll > give you a few minutes > > to have a read... > > Just kidding, who has time for that, let me explain. No, there is too > much, let me sum up: > > https://www.youtube.com/watch?v=GZYhDMCOyww > > (above is from the movie princess bride, more seriously, if you haven't > seen this movie you really should, kind of urgently) > > Blue Ocean aims to be a plugin (well, a few moving parts delivered as > plugins) that provides an extensible "next gen" user experience. Jenkins > GUI has been around for 10 years now, and can be hard to extend and > modernise (many of us have tried). > > Its initial focus is on "pipeline centric" and freestyle views for the > busy developer, and is very much a work in progress. > > The interesting bits for us developers: > > Blue Ocean is based on ES6 > <https://medium.com/@rajaraodv/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81>, > > Server Sent Events > <https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events> > > (realtime notifications), React.js > <https://medium.com/@rajaraodv/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81> > > for component model and gulp/npm <https://www.npmjs.com/> build chain, > but wired in via the already in use jenkins-js modules > <https://github.com/jenkinsci/js-modules> (this means there isn’t a need > to be familiar with the whole js toolchain unless you want to be, and mvn > install takes care of things normally). > > Both client side (stuff in browser) and server side - are just Jenkins > plugins. The server side uses the usual Jenkins web middleware (yes, > stapler) and extensions/extension points. > > A fair bit of head scratching was done to come up with an > “<ExtensionPoint>” concept for blue ocean client side, however it was worth > it as it means that plugins for the new UX can be delivered as normal > Jenkins plugins but with js componentry. Jenkins serves up these plugins to > the web browser so extension points in Blue Ocean pages can be fulfilled by > any plugin offering those extensions (GUI extension points have names). > This includes things like adding a new “route” for a new page to host a > feature, or could be augmenting an existing page or component. A sample > plugin and demo of it is here: > https://github.com/cloudbees/blueocean-sample-pipeline-result-ext-plugin. > > Extensions can be isolated in failure this way - so a bad bit of > javascript doesn’t brick a whole page. > > Blue Ocean when installed currently provides the new UX on the /blue top > level route in Jenkins, so the classic GUI lives alongside it. The new GUI > (markup, js) that is delivered via a fresh set of markup and JS bundles, so > it doesn’t conflict with any existing GUI. > > The UX model in blue ocean is more of a shift to what used to be called > “client server” but is now a “single page app” (kind of), using pretty much > standard React.js patterns (it is hoped that while React.js is the glue of > blue ocean, plugin authors don’t have to be an expert in it, and could use > something else to deliver their front end functionality). There is a server > side API plugin called “blueocean-rest” which provides a http/REST-like api > that helps drive the GUI (it too is extensible, but it just builds on stuff > already in Jenkins) - it has a fairly neat README explaining the API as it > is right now. You could describe this api as being a “BFF” pattern for the > front end (see http://samnewman.io/patterns/architectural/bff/) > > > It’s still very early days obviously, but if you are interested take a > look at https://github.com/cloudbees/blueocean (as soon as HOSTING ticket > is resolved, development will move to the jenkinsci org’s fork of that > repository). It’s a multi module project (blueocean-plugin is the > aggregator). The “js-extensions” module is the middleware that makes the > new ExtensionPoint stuff work. > > There is also the https://github.com/cloudbees/jenkins-design-language > repository (once again, will be forked into jenkinsci) which contains > visual assets, reusable components and tries to codify a standard look/feel > (what is a design language <https://en.wikipedia.org/wiki/Design_language>). > One thing front end developers have found useful when building components > is storybook > <https://voice.kadira.io/introducing-react-storybook-ec27f28de1e2>. > > > > > If you are interested in talking about this, we are using #jenkins-ux on > freenode irc (hopefully there is someone around most times), and also if > you post to this dev list, please use [Blue Ocean] as the topic prefix, so > the long suffering subscribers are able to filter out threads they are not > interested in. > > > There will be a blueocean “component” in JIRA for raising issues against > once the HOSTING ticket is taken care of. > > Here > <https://docs.google.com/presentation/d/1dbaYTIGjGT9xX1JnWnaqjMumq94M9nGwljfMQaVtUFc/edit?usp=sharing> > > is a presentation on front end development with blue ocean for those > interested in looking a bit deeper. > > One again, the section on the blog post is worth reading, especially for > developers > https://jenkins.io//blog/2016/05/26/introducing-blue-ocean/#jenkins-design-language. > > And the source code (for now, until migrated to jenkinsci org): > https://github.com/cloudbees/blueocean > > See you around #jenkins-ux (freenode) hopefully! > > Cheers. Mic. > > -- You received this message because you are subscribed to the Google Groups "Jenkins Developers" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/4f72051b-a585-4da8-9636-a289bfa72cb6%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
