Abstract interpretation #155

sultanaalyami · 2020-06-22T05:08:07Z

sultanaalyami
Jun 22, 2020

A Practical Approach to Integrating HTML Interfaces in UWP Applications

Introduction

The Just-In-Time (JIT) compiler plays a crucial role in modern application performance. However, when combining different technology stacks such as .NET, HTML, and JavaScript, developers often face flexibility limitations, especially with frameworks like Blazor WebAssembly.

While Blazor offers strong integration with the .NET Common Language Runtime (CLR), it sometimes lacks the JavaScript agility and HTML rendering efficiency that web developers expect. As a C# MVC developer for over seven years, I have always preferred delivering my applications through fully capable HTML interfaces. This preference led me to explore ways to bridge UWP (Universal Windows Platform) capabilities with the flexibility of modern web front-ends.

Why Not Use Xamarin or XAML?

Over the years, Xamarin never truly attracted me for mobile application development, despite following its progress since its early days. The main reason is its reliance on .xaml for UI definitions, which I find restrictive compared to HTML and CSS.
Developers should have the freedom to choose their preferred development style without being bound by imposed limitations, as seen in Xamarin.Forms.

In this regard, UWP applications can be a better bridge—if we can integrate HTML interfaces directly into the application structure.

Concept Overview

The idea is simple:
Instead of following a fixed UI model using .xaml or a particular high-level framework, we can:

Modify the Package.appxmanifest file in a UWP application to set an HTML file as the start page.
Use Webpack-bundled assets (JavaScript and CSS) as the primary application interface.
Retain full access to system capabilities defined in the manifest.

This results in an application that:

Renders a modern HTML/CSS/JS interface.
Communicates with the machine via XML links or APIs.
Maintains the benefits of UWP packaging and deployment.

Implementation Steps

1. Project Structure

In your UWP project, create a folder named ClientApp containing your Webpack build output:

ClientApp/
    index.html
    main-es2015.js
    main-es5.js
    polyfills-es2015.js
    polyfills-es5.js
    runtime-es2015.js
    runtime-es5.js
    styles.css

2. Creating the Root HTML Page

In the project root, create index.html with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>teckget</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="ClientApp/styles.css">
</head>
<body>
    <app-root>Loading...</app-root>

    <script src="ClientApp/runtime-es2015.js" type="module"></script>
    <script src="ClientApp/runtime-es5.js" nomodule defer></script>
    <script src="ClientApp/polyfills-es5.js" nomodule defer></script>
    <script src="ClientApp/polyfills-es2015.js" type="module"></script>
    <script src="ClientApp/main-es2015.js" type="module"></script>
    <script src="ClientApp/main-es5.js" nomodule defer></script>
</body>
</html>

3. Modifying the Manifest

Open the Package.appxmanifest file and update the application entry:

<Application Id="App" StartPage="index.html">

This ensures the UWP application starts from your HTML interface instead of a .xaml page.

Advantages of This Approach

Developer Freedom: No need to conform to .xaml constraints or Xamarin.Forms patterns.
Modern UI: Use HTML5, CSS3, and modern JavaScript frameworks without compatibility issues.
Performance Control: Optimize Webpack output for smaller bundles and faster load times.
UWP Capabilities: Still leverage UWP’s API access and packaging model.

Considerations

.NET Method Calls: In Blazor WebAssembly, calling .NET methods from HTML/JS is less flexible compared to traditional JavaScript interop—plan accordingly.
Engineering Trade-offs: While this approach provides flexibility, it may conflict with certain software engineering best practices, especially regarding separation of concerns.
Advanced Optimization: Techniques like Abstract Interpretation and Thunks can help improve performance when combining managed and unmanaged calls.

Conclusion

Combining UWP’s packaging power with the flexibility of HTML interfaces allows developers to create hybrid applications that are both modern and system-capable. This approach is particularly valuable for web developers who want to extend their skills into packaged desktop applications without fully embracing .xaml-based development.

Happypig375 · 2020-06-22T05:50:54Z

Happypig375
Jun 22, 2020

You want to write JavaScript with Xamarin.Forms/MAUI?

0 replies

sultanaalyami · 2020-06-22T06:05:04Z

sultanaalyami
Jun 22, 2020
Author

You want to write JavaScript with Xamarin.Forms/MAUI?

Not so much, but if there is the advantage of grouping similar projects in Maui and merging them with what they claim

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Abstract interpretation #155

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Abstract interpretation #155

Uh oh!

Uh oh!

sultanaalyami Jun 22, 2020

A Practical Approach to Integrating HTML Interfaces in UWP Applications

Introduction

Why Not Use Xamarin or XAML?

Concept Overview

Implementation Steps

1. Project Structure

2. Creating the Root HTML Page

3. Modifying the Manifest

Advantages of This Approach

Considerations

Conclusion

Replies: 2 comments

Uh oh!

Happypig375 Jun 22, 2020

Uh oh!

sultanaalyami Jun 22, 2020 Author

sultanaalyami
Jun 22, 2020

Happypig375
Jun 22, 2020

sultanaalyami
Jun 22, 2020
Author