WebUI: redesigned web interface for Plastic
Not sure if you noticed, but it's already been a few weeks since we released the new WebUI. We didn't make much noise about it so it has been almost in stealth mode all this time :-)
WebUI stands for "web user interface" (yep, not very original) and it is a web-based way to browse repositories, diff code and even perform code reviews.
We already had a WebUI before. The big difference is that this one comes embedded with the server, so you don't need to do a separate setup. You don't have to configure anything on IIS or Apache like you had to before. It was a real pain to properly configure it, and that's why we decided to get rid of it. The new one is started with the server, runs on the same process, so there's nothing to configure. You start your Plastic Server and the WebUI is there.
But, it is not jus the same old thing packaged differently. It is an entire rewrite that will serve as the basis for future development. And, it already includes a great new feature that you've never seen before on a web-based version control interface: semantic diff :-)
Quick tour of the new WebUI: browsing repos
Once you login to the new WebUI (you need LDAP/UP or Active Directory auth modes to do so) you'll see something like this:
It is the list of the repos in your server. You can simply choose one to start navigating.
Next, comes the "File Explorer". A repository browser to explore the contents of a branch, which will be "main" by default.
From the File Explorer, you can travel your repo structure, find a given file, and check its contents:
You click on the file to visualize it:
And from there, you can download the file, or simply show its history:
Then, continue navigating to see diffs between different versions, etc.
Listing and diffing changesets
Like in a regular desktop GUI, it is also possible to list the recent changesets:
Then, you can select one and create a code review for it, or simply diff it.
Semantic Diff in Web!
One of the greatest things in this new WebUI is that we have redone the diffs. Showing diffs in a super clear way is one of Plastic's top differentiators. We do this in desktop clients for Linux, macOS and Windows, so it was time to do the same on the web.
So, here is how a semantic diff tracking moved code and diffing looks like:
I'm very happy with this because it means making our WebUI users' first-class citizens. It would have been easier to simply plug the default diff that comes with the Monaco Editor (more on this later), but we decided to go our own way and render the whole thing :-). Hope you like the result.
Listing and diffing branches and labels
The two last items in the top menu show branches and labels. And, not surprisingly, you can list, filter and diff them:
And labels:
Code reviews
One of the main reasons to have a web interface is to let users do code reviews consistently whether they are on macOS, Linux or Windows.
And then you can open one of the reviews and see the diffs of the files changed on the branch, and comment on them:
While this is definitely better than the old WebUI, please keep in mind that Code Review is the area where we want to focus our efforts on the coming months.
We have plans to create a much (much!) better interface with lots of functionalities that will make the entire process much faster and pleasant to both reviewers and authors.
Tech insights
Since we rewrote the WebUI entirely (new codebase indeed), we used the opportunity to try some different technologies. The WebUI is a JavaScript application written in ViewJS connecting to the usual .NET backend through REST API.
We wanted to explore ViewJS to create a rich browser-based application that is super responsive and move ahead from the old request/response model (which isn't bad at all, but we wanted to try new things).
We put a lot of work on redoing the diff interface. It is based on Monaco Editor but we are not using its built-in diff feature. We built our own, placing together 2 editors, calculating diffs ourselves (including semantic diffs) and doing custom rendering.
Next steps
As I said, this is the foundation for the new WebUI. As such, this is just the beginning. One of the motivations for the rewrite was to create a much better code review interface. This is one of the key points of our current backlog, so it is something we'll be spending time on for the next few months.
We want to have a much richer way to write comments on code reviews (the current one is very simple), and then build from there. We have lots of ideas to do changeset-per-changeset code reviews, to better drive the interaction between author and reviewers helping them save precious time (and this is not sales hype, I mean, really great things coming in this area, things we do manually now, and we are going to productize soon).
Acknowledgements and closing
We are happy to share that the great team at PlainConcepts helped us develop the new interface, trained us in View and JavaScript and took care of the hardest frontend problems. It is great to count on the help of such a talented team. Thank you, guys!
0 comentarios: