VS Code Views Camp

Lukas Lieb

We are once again in the Code Camp 😁🏕.
And even if the weather is not the best, it might be even better for hacking cool stuff ⌨

Since we are currently write VS Code extensions to allow you to develop your processes outside of the Eclipse Designer, I'd like to delve a little more into this topic.
Currently, there are many views and wizards in the Eclipse Designer that need to be ported to the new extension world 🌍 so I thought I'd try to implement some cool views.

Stay tuned 🤘

Lukas Lieb

Process Outline

I hope you all know this view, as it is very useful if your process has a lot of elements:

You get an overview of all elements in the open process, you can select elements, and even look into embedded processes.

I thought this view would also be very helpful in the vs code process editor extension, so I built a quick prototype:

Currently supported:

only shown if a process is opended
show all elements of the current process
select element in outline -> element in process is selected
select element in process -> element in outline is selected
show and jump into embedded process

Lukas Lieb

Merge the Process Outline into our product took a little bit longer than planned.
I had to write tests, stabilize the code, and refactor quite a bit of the Process Editor code base to make it reusable for this new Outline.
Meanwhile, it is already available in the next internal build of our next-gen Web-IDE. So give it a try and share your feedback 🙂

Originally I planned to go deeper into VS Code extensions and try to create a view where new projects, processes, etc. can be created. I thought at the "Create Pull-Request" view:

But while looking at how GitHub builds this view, I thought it would be nice to reuse components we already built for our new Inscription View. So I had a look at Storybook.

Lukas Lieb

Storybook

Storybook is an open-source tool that gives you the possibility to create a library, where you can write and test components and later explore them.

So I started by adding it to the existing Inscription View components to create a quick showcase:

I think we will not implement something like this in the near future. Let's imagine that we plan to create a new UI Technology (e.g. build on React) and we want to deliver our own UI component library. Then we need to have something like the PrimeFaces Showcase, where every customer can see which components exist with different use-cases and how to implement them.

Lukas Lieb

Process Editor Infrastructure

Last but not least, I was always a little bit annoyed that the Process Editor Client infrastructure is a little bit clunky and slow in comparison with the Inscription View. I know a little technical topic to explain but let me try 🙂

The Inscription View is a newer project than the Process Editor and is not based on the GLSP stack. This means we started more or less on a greenfield and we could decide how the infrastructure should look (of course based on the knowledge we collected by the process editor development).
We decided to use Vite as bundler instead of Webpack, which takes care of most parts (compile TypeScript, bundle JS, minify CSS, etc.) built-in with very little configuration.
We can start the vite dev server and directly start to make our change with auto-updates to the browser.

In the Process Editor project we use Webpack as bundler, but compile TypeScript with tsc (official TypeScript Compiler). While this is definitely not bad, it is also not pretty fast. This is because we first compile everything from ts to js and then bundle it. After that, we can open the created Process Editor. If we want to make changes we need to watch our sources and refresh the browser manually.

So everything works for both projects, but working on the Inscription View feels a little bit more fluent and fast. So as the last topic I tried to replace the Process Editor infrastructure with mostly the same as we have it in the Inscription View.
And I made some progress, but not everything worked at last. The standalone (process viewer) and the eclipse integration (Designer) can be started with Vite, but sadly the process editor inside of the VS Code extension is currently not so happy about the changes I made, so I need to investigate here a little bit more 😅

In numbers (of course rather imprecise):

Startup time New 0.5s, Old 5-25s
Change time New 0.2s, Old 1s

Lukas Lieb

My summary of this Code Camp

It was as always a very cool, funny, and educational week with delicious (self-made) food and of course, the best team I can currently imagine 😃
But of course also sometimes a little bit frustrating, when something does not work like you wished 🙈

My topics weren't as focused on one place as I originally planned, but never the less I acceded to contribute a new view to the Web-IDE and learned much about other stuff 🤘