If you are a developer or getting into this world then it’s safe to say you have met the one and only Microsoft Visual Studio Code! Which has become one of the most known and mainstream IDEs in the world, but of course, for the many features and facilities, it provides for professional and junior developers.

This IDE combines the proprietary Microsoft features with an extensible open-source core, that can be configured to handle most languages and most platforms.

And if you usually work across platforms then this is the solution for you, as its remote development extensions allow you to use it on another device from your desktop whether it is macOS, Windows, or Linux.

In essence, Visual Studie Code is a TypeScript application that runs on Electron runtime.

What does that mean? Well, first of all, it’s built on top of an open-source Chromium browser engine, the same used by Microsoft’s Edge browser, the same engine as the Webniew UI control.

The latter is a key element of the Windows App SDK, which allows you to run JavaScript and TypeScript code inside your traditional Windows applications alongside HTML and CSS markup.

Why mix these two approaches? Because simply it makes sense! Since Microsoft is working on Webview UI Toolkit to help bring Webview-based user experience into Visual Studio Code.

Why would a developer need Webview UI?

Webview UI is an important tool and getting more popular by the second! It blends web tools with familiar Windows Development environments.

To give a closer idea, you could write a management tool for a service that uses Windows-style UI, while rendering service web UI outputs in the same frame.

Still didn’t get your answer? Here are a few reasons for you to consider it:

• You’ll get better control over your application’s UI
• Forget about updating the entire application!
• You won’t get pushed onto other 3rd party applications, rather an in-app browser that pulls the content from the web for you
• Webview allows cross-platform development resulting in reduced development cost and more flexibility for the developers
• Companies often aim to build a wrapper application of an existing web app

Therefore, it’s not that hard to see how a tool using Webview UI could work with Visual Studio Code, provides a Chromium-compatible environment for existing web-based interfaces and dashboards at the same time as hosting controls that use the same language used for design as the rest of the editor without being tied to Windows.

We have to mention here that Microsoft actually recommends against web views in Visual Studio Code extensions unless you’re absolutely sure you need them! However, they’re increasingly important.

And facts now say that Visual Studio Code has grown to become close to a full-fledged IDE, where it started as a tool for developing .NET systems programs.

Now it supports tools such as Flutter that need a UI design surface alongside code.

So, in a nutshell, it’s the IDE every developer needs!!

What’s in the Webview UI Toolkit?

You can think of the Webview UI Toolkit as the Visual Studio Code equivalent of the Windows App SDK’s WinUI 3 component Library.

Now WinUI 3 offers the same controls across different UI frameworks, from web to PC and the Webview UI Toolkit takes a similar approach, offering a set of customizable controls.

The Webview UI Toolkit can give your extensions the same look and feel as the rest of Visual Studio Code. Therefore, if you’re rendering information from another application, you won’t be adding a cognitive deficit to users, ensuring that they stay in the same context.

The available controls support the same theme as the rest of the VS editor so if the user picks a theme the extension will automatically support it.

Now the VS Code is being used to host extensions from many different developers, supporting as many languages, services and servers as possible, it’s essential they all have a common design. Developers should make sure that the extensions they’re installing work with and within the Visual Studio Code correctly.

Try and test Webview UI Toolkit

As a developer, it’s essential for you to have it all covered, and when designing an app, you have to make sure it’s tested and working seamlessly across all platforms.

That’s why we encourage you to consider this Toolkit with VS Code for the ultimate testing experience.

Ctelecoms is a proud Microsoft partner in Saudi Arabia, working to offer the best-in-class services to their customers.

Now we can support you when using such tools, and all you need to do is to leave us a message: https://www.ctelecoms.com.sa/en/Form15/Contact-Us