<p>In an effort to improve Screwdriver user experience, the Screwdriver team identified two major components on the UI that needed improvement with respect to load time — the event pipeline and build step log. To improve user-perceived performance on those components, we decided to adopt two corresponding UX approaches — pagination and lazy loading.</p> <h2>Event Pipeline</h2> <p>Before our pagination change, when a user visited the pipeline events page (e.g. <code>/pipelines/{id}/events</code>), all events and their builds were fetched from the API then artificially paginated in the UI. In order to improve the total page load time, it was important to move the burden of pagination from the UI to the API. Now, when a user visits the pipeline events page, only the latest page of events and builds are fetched by default. Clicking the <i>Show More</i> button triggers the fetching of the next page of events and builds.</p> <p>Since there is no further processing of the API data by the UI, the overall load time for fetching a page of events and their corresponding build info is well under a second now as compared to before where some pipelines could take more than ten seconds.</p> <h2>Build Step Log</h2> <p>As for the build step log, instead of chronologically fetching pages of completed step logs one page at a time until the entire log is fetched, it is now fetched in a reverse chronologically order and only a reasonable amount of logs is fetched and loaded lazily as the user scrolls up the log console.</p> <p>This change is meant to compensate for builds that generate tens of thousands lines of log. Since users had to wait for the entire log to load before they could interact with it, the previous implementation was extremely time consuming as the size of step logs increased.</p> <p style="text-align:center;"><figure class="tmblr-full" data-orig-height="330" data-orig-width="453" data-orig-src="https://user-images.githubusercontent.com/1331106/45246743-efbeca00-b2d0-11e8-850f-832710acc6cb.gif"><img src="https://66.media.tumblr.com/c52a40e093e36901ac7ac5a043698d51/tumblr_inline_pghtz0ISKw1rfupki_540.gif" alt="lazy scroll log" data-orig-height="330" data-orig-width="453" data-orig-src="https://user-images.githubusercontent.com/1331106/45246743-efbeca00-b2d0-11e8-850f-832710acc6cb.gif"/></figure></p> <p>Now, the first page of a step log takes roughly two seconds or less to load. To put the significance of the change into perspective, consider a step that generates a total of 98743 lines of log: it would have taken 90 seconds to load and almost 10 seconds to fully render on the UI; now it takes less than 2 seconds to load and less than 1 second to render.</p> <h2>Compatibility List</h2> <p>These UI improvements require the following minimum versions of Screwdriver:</p> <ul><li><a href="https://hub.docker.com/r/screwdrivercd/screwdriver">screwdrivercd/screwdriver</a>: v0.5.460</li> <li><a href="https://hub.docker.com/r/screwdrivercd/ui">screwdrivercd/ui</a>: v1.0.327</li> </ul><h2>Contributors</h2> <p>Thanks to the following people for making this feature possible:</p> <ul><li><a href="https://github.com/DekusDenial">DekusDenial</a></li> <li><a href="https://github.com/jithin1987">jithin1987</a></li> <li><a href="https://github.com/minz1027">minz1027</a></li> <li><a href="https://github.com/tkyi">tkyi</a></li> </ul><p>Screwdriver is an open-source build automation platform designed for Continuous Delivery. It is built (and used) by Yahoo. Don’t hesitate to reach out if you have questions or would like to contribute: <a href="http://docs.screwdriver.cd/about/support.">http://docs.screwdriver.cd/about/support.</a></p>