Who we are

We are the developers of Plastic SCM, a full version control stack (not a Git variant). We work on the strongest branching and merging you can find, and a core that doesn't cringe with huge binaries and repos. We also develop the GUIs, mergetools and everything needed to give you the full version control stack.

If you want to give it a try, download it from here.

We also code SemanticMerge, and the gmaster Git client.

WebUI: redesigned web interface for Plastic

Wednesday, September 19, 2018 Pablo Santos 0 Comments

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 :-)

Semantic diff in WebUI

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:

Repository chooser

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.

File Explorer

From the File Explorer, you can travel your repo structure, find a given file, and check its contents:

File Explorer - Structure

You click on the file to visualize it:

View file

And from there, you can download the file, or simply show its history:

History of the file

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:

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:

Semantic Diff view

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:

Branches

And labels:

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.

Code reviews

And then you can open one of the reviews and see the diffs of the files changed on the branch, and comment on them:

Code review - Diff

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: