What is a good code base to make a UI to use these days

I am writing simle console apps in C#. But I would like it if I had a good UI to use. Since we live in an age where everything is run off the internet or intranet through a web browser, should I use a javascript frame work? What is a good choice for that? If I am using the UI to access and upload local files, like excel data files, what would be a good suggestion to use? Is there a bare-bones javascript suggestion that I can use?

There is a lot of talk online that WPF is not a good choice anymore and is losing popularity and support. Is it being replaced by something like Blazor?

@William_Thompson, this is a very good question but the follow-up description is mindblowing. First, you asked about creating a UI and then said you want to build it in C#. Can I ask you a simple question and that would be is Laminas a C# based framework? Thanks!

I’ve heard about Blazor being a web dev framework in c#, but nothing beyond that.

You’re probably on the right track with Blazor.

Transitioning from simple console applications to applications with a good UI is a great step forward. Given the widespread use of web browsers and web technologies, using a JavaScript framework for the UI can be a wise choice. Here are some recommendations and considerations for your situation:

JavaScript Frameworks for UI

  1. React:
  • Pros: Highly popular, large community, rich ecosystem, excellent for building dynamic user interfaces.
  • Cons: Requires a learning curve to understand JSX and state management libraries like Redux.
  • Use Case: Suitable for applications that require a dynamic and responsive UI.
  1. Vue.js:
  • Pros: Easier learning curve than React, great documentation, versatile and can be used for both small and large applications.
  • Cons: Smaller ecosystem compared to React and Angular.
  • Use Case: Good for both beginners and experienced developers who want a flexible framework.
  1. Angular:
  • Pros: Comprehensive framework, provides a lot out of the box, including routing and state management.
  • Cons: Steeper learning curve, more opinionated about the structure of your application.
  • Use Case: Suitable for large-scale enterprise applications.

Bare-Bones JavaScript Solutions

If you prefer a more minimalistic approach without the overhead of a full framework, you can use vanilla JavaScript along with HTML5 and CSS. For handling local file operations like uploading Excel files, you might use:

  • File API: For handling file uploads and reading local files in the browser.
  • Libraries: Use libraries like xlsx or SheetJS to handle Excel file reading and manipulation.

Accessing and Uploading Local Files

For file uploads and processing, you can create a simple web interface with HTML5 and JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <input type="file" id="fileInput" />
    <button onclick="uploadFile()">Upload</button>

    <script>
        function uploadFile() {
            const fileInput = document.getElementById('fileInput');
            const file = fileInput.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const data = new Uint8Array(e.target.result);
                    // Process file data (e.g., parse with a library like xlsx)
                    console.log(data);
                };
                reader.readAsArrayBuffer(file);
            }
        }
    </script>
</body>
</html>

Alternatives to WPF

WPF (Windows Presentation Foundation) has indeed seen a decline in popularity, particularly as more applications move to web-based solutions. Here are a couple of modern alternatives:

  1. Blazor:
  • Pros: Allows you to build interactive web UIs using C# instead of JavaScript, integrates well with .NET, and can run in the browser via WebAssembly (Blazor WebAssembly) or on the server (Blazor Server).
  • Cons: Newer technology, so the ecosystem and community are still growing.
  • Use Case: Ideal for .NET developers who prefer to stay within the .NET ecosystem while building web applications.
  1. Electron:
  • Pros: Allows you to build cross-platform desktop applications using web technologies (HTML, CSS, JavaScript), vast community, lots of resources and plugins.
  • Cons: Can result in large application sizes, and performance can be an issue for very resource-intensive applications.
  • Use Case: Great for building desktop applications with a web technology stack.

Conclusion

If you want a web-based UI with modern JavaScript frameworks, React or Vue.js are excellent choices. For a more lightweight approach, vanilla JavaScript with HTML5 can be very effective. For .NET developers looking for modern UI solutions, Blazor offers a compelling option.

Evaluate your specific requirements and the skills you and your team possess to make the best choice for your application. Each of these options has its strengths and can be well-suited depending on your project’s needs.

1 Like

Well … you can rely on dependencies like all those named JavaScript frameworks. They 're good for your purpose.

Actually we write the year 2024. All major browser versions support JavaScript Web Components that allow you to write your own frontend components natively. Sure, you have to understand some basic techniques like state management, etc. and the visibility of variables in JavaScript. At the end of the day you 'll do nothing less than all those huge JavaScript frameworks. Perhaps a bit faster and less memory consuming.

Web Components are not widely spread like the named JavaScript frameworks. But they are native and widely supported. At the end you have to decide, if you want to develop fast and accurate by using one of the well known ui templates based on one of the named JavaScript frameworks, or if you want to take a deep dive into modern JavaScript and enjoy a huge learning curve with using Web Components.

Long story short: I just wanted to add that you are not tied to one of the ready-to-use JavaScript frameworks. If you want, you can develop your own components and stay away from these big dependencies that always need to be maintained and always require a certain amount of extra work.

I wrote a small article about JavaScript Web Components with a file upload component: Erstelle Deine eigenen HTML Elemente mit Web Components | MM Newmedia (Yeah … it 's in german language. I 'm sure you can translate it. :wink: )

1 Like