Welcome to the Volo Community Hub

Join this amazing group of people and start discussing the world of eCommerce

Featured Flight Engineering: Swinging to HTML

Discussion in 'Community News' started by Ethan Morgan, Aug 7, 2017.

  1. Ethan Morgan

    Community Team Volo Staff Volo Marketing

    Nov 28, 2016
    95
    Featured Threads:
    39
    35
    18
    Client Communications Executive
    London, UK
    Local Time:
    10:46 AM
    Ratings:
    +39 / 0 / -0

    Flight Engineering is a series about developing and shaping the Volo platform to serve our customers' needs. This week, Solution Architect Alaric Snell-Pym explains how the user interface of the Origin platform is evolving, handling huge databases and presenting them intuitively.

    flight engineering.jpg

    When Volo Origin was first written (under the old name, eSellerPro!), a Java Swing user interface was the best way to make a rich user interface. Web-based applications at the time struggled to handle complicated interfaces, with scrollable tables of thousands (let alone hundreds of thousands) of products being particularly difficult to handle well.

    That decision has served us surprisingly well - it's not perfect (naturally), but it gets the job done and our customers consistently say they value its well-honed practical functionality over its appearance. It's certainly unlikely to be the ugliest thing in a typical office or warehouse.

    However, it does present us with some difficulties as we evolve Origin to meet the needs of the future. We can't easily make the app available on mobile devices, for a start, and Swing user interfaces are hard to reliably test with automatic regression harnesses. A lot of the system's logic is contained within the downloadable Swing client rather than on the server, so automatic testing of the API exposed by the server can only test parts of the system.

    Why not make a browser-based front end?
    Good quesiton. The current best choice for a cross-platform user experience is modern HTML. Although it is possible to write native desktop and mobile apps, each of them has a narrower utility than an HTML interface - and users can share links to HTML pages between devices. Native apps have better access to platform facilities, but HTML isn't far behind.

    But it wouldn't be practical to just build Volo Origin from scratch in HTML. It would be a lot of work to replicate even the functionality that our customers routinely use, let alone everything the system is capable of; and until it's featureful enough to completely replace the Swing application for even a single customer, it's not actually pulling its weight.

    swing.jpg

    Long development projects without any gratifying deliverables until the very end aren't just risky, they're a strain on the morale of the team and customers - especially if the end result is just to replicate current functionality, without really adding anything new!

    An incremental approach
    In response to this problem, we have taken an interesting approach. We are developing our new HTML-based interface as a suite of independent interfaces brought together by a uniform look-and-feel so they look and feel just like parts of one application (while allowing each part to be developed and deployed independently).

    Rather than offering them through a browser, we are (initially) embedding them in the existing Java Swing application using an embedded browser component. Automatic user session handoff from the Swing application to the Web application means that this doesn't require an extra sign-in step. From the user's perspective, parts of the user interface are starting to look beautiful and modern.

    From our perspective, we have a powerful and easy-to-use new user interface toolkit. In our HTML-based Product Data Editor, for instance, it was easy to add the ability to filter the view of hundreds of different product attributes to only show those matching a search term.

    Users often have to navigate through large lists of category-specific attributes to find the ones they need, and we were able to add a tool that lets people find the one they want in seconds, within about a day of development time. Dynamically changing the layout of a Swing dialog in an equivalent manner would have taken much more development work.

    Simplifying complexity
    Additionally, our HTML user interfaces are purely presentation logic. JavaScript isn't a good language for expressing the kinds of complex processes Origin handles, so the right way to build the system is also the easiest way - logic in the server, exposed via a high-level REST API that the JavaScript front-end uses.

    That means we can automatically test the system at that API, and the same APIs are also available for partner integrations, and other user interfaces. We can easily put together specialised user interfaces as, for instance, native tablet apps, re-using the work we did to expose the API for our HTML interface.

    Using this approach, we can develop one module at a time and deploy it into production within weeks. As soon as we have enough modules built using HTML to satisfy the needs of one or more users of the system, we can expose those modules to Web browser logins, using a single-sign on system and a shared navigation bar so they all work seamlessly as a single interface.

    So we can still get to a complete HTML interface - but in shippable increments, delivering benefits to our users and improving our development processes as we go.

     
  2. Stuart Johnson

    Oct 25, 2014
    153
    46
    28
    Birmingham
    Local Time:
    10:46 AM
    Ratings:
    +70 / 0 / -0

    We've made enquiries before and expressed interest in assisting with beta-testing the 'new' version of Volo Origin, but despite being told that we were ideally placed to help with beta-testing, nobody ever got back to us. The offer is still open, if anyone wants to get in touch with us!

     
    • Friendly Friendly x 1
  3. Ethan Morgan

    Community Team Volo Staff Volo Marketing

    Nov 28, 2016
    95
    Featured Threads:
    39
    35
    18
    Client Communications Executive
    London, UK
    Local Time:
    10:46 AM
    Ratings:
    +39 / 0 / -0

    Hi Stuart,

    The plan for these UI updates is to drop them incrementally into new modules that we release - for example, the Walmart system area and upcoming new areas will have HTML interfaces. These will be tested as the system areas themselves are tested - so as we release new functionality, we're approaching relevant customers to test them in full, including the UI.

    We did initially plan to totally rewrite the system into HTML but as Alaric points out, it would absorb so much development resource to just replicate the existing functionality, so we're doing it piece by piece now.

     
  4. Stuart Johnson

    Oct 25, 2014
    153
    46
    28
    Birmingham
    Local Time:
    10:46 AM
    Ratings:
    +70 / 0 / -0

    Thanks for the explanation. It did occur to me at some point that rather than rewrite the Volo Origin software into HTML, with all the new API functionality being added, it might be possible to develop (from scratch) a web based 'front-end' that would access and work with the database through API. Just a conceptual idea I had!

    Hindsight is a wonderful thing. I wish I'd studied computer languages at college, rather than spoken ones! :D

     
  5. Giuseppe Melillo

    Dec 23, 2015
    149
    25
    28
    Trowbridge, UK
    Local Time:
    10:46 AM
    Ratings:
    +32 / 0 / -0

    This was a very well written explanation of why there isn't a Web interface and how Volo is developing with the end vision. Thanks.