Frogui
Create native web apps with C# and .NET

Frogui is a UI framework that allows developers familiar with C#, .NET and Visual Studio to build native client web apps using their existing skills, with no need to learn or use JavaScript or any other web technology.
The API is strongly based on WPF and Silverlight so will feel immediately familiar, but has been modernized to leverage the tremendous power of modern browsers.



Frogui is a UI framework that allows developers familiar with C#, .NET and Visual Studio to build native client web apps using their existing skills, with no need to learn or use JavaScript or any other web technology.
The API is strongly based on WPF and Silverlight so will feel immediately familiar, but has been modernized to leverage the tremendous power of modern browsers.

Frogui is a UI framework that allows developers familiar with C#, .NET and Visual Studio to build native client web apps using their existing skills, with no need to learn or use JavaScript or any other web technology.
If you are eager to get started, hop down to Frogui Overview. or User's Guide or FAQ.
Brief history of C# on the web
C# on the web is not new. Silverlight allowed creating web apps using C# and a lightweight .NET via a plug-in. ASP.NET with Razor on the server-side allows developers to use C#, .NET and visual studio to create websites, though ultimately what runs in the browser is plain web technology. Typescript which is C#-like, transpiles to pure JavaScript.
These excellent technologies clearly show C# .NET developers are clamoring ways to use their existing skills to build for the web.
Future of C# on the web
There is no release-quality technology that allows C# and .NET to run natively on the web. But the future is unofficially open for business, thanks to the exciting new WebAssembly standard. WebAssembly is revolutionizing web development, already being exploited by C++ and Rust developers, resulting in native browser apps performing on par with their non-browser counterparts all without JavaScript.
C#'s tooling for WebAssembly lags behind at the moment but Microsoft's newfound commitment to see C# and .NET Standard run everywhere dovetails perfectly with modern web advances: C# and .NET running natively on the web is next.
Currently, a proof-of-concept project is being developed by the Microsoft Xamarin team affectionately known as mono-wasm which, as the name suggests, is Mono .NET for WebAssembly. For the time-being, the performance of mono-wasm lags behind JavaScript because it is using an interpreter to run on top of WebAssembly, but they are working on a static compiler that will speed things up significantly.
Frogui overview
Frogui is built on top of mono-wasm and is designed to allow native web app development using C# and .NET, taking full advantage of Visual Studio's build system, intellisense, debugging, and more, so that your current skills are all you need. We are not there yet.
Presently Frogui consists of a NuGet package that allows creation of console applications that run natively on the web. Console apps are a form of UI but only in the loosest sense of the term. We have more exotic plans in mind but the goal currently is to get you started building native web apps in C# today. Checkout our Lesarde.Console class below.
Quality-wise, Frogui is far from production-ready and is not recommended for beginners, though is improving quickly. Also, having an elementary understanding of web servers will be helpful since there are some related manual steps to get the app running in a browser.
Lesarde.Console class
The Lesarde.Console class is what is used instead of System.Console, of which it is mostly a subset. When run outside of the browser it acts as a proxy to System.Console, which is particularly useful for debugging.
Below is the public interface of System.Console, with the second column showing which members or alternative members are implemented. Please let us know which members you'd like to see implemented next.
User's Guide
Updated May 5, 2018
These instructions will get you started using Frogui. The steps will get easier, but for now you are a pioneer venturing to places few have been! In that spirit, there are several issues to be aware of that will make you crazy if you don't know how to work with them, which are also discussed below.
Installation
Step 1 - Install Visual Studio 2017 (or beyond) on Windows
Frogui has only been tested using Visual Studio 2017 on Windows. If you do not already have Visual Studio 2017 installed, you may download the the free Visual Studio Community 2017 edition.
Step 2 - Install .NET Standard 2.0 (or beyond)
If your Visual Studio is up to date, it should already be installed. You can check the Microsoft announcement and this blog for more info.
Step 3 - Clone the Frogui GitHub repo
Currently, the repo is used to hold the sample Visual Studio solution. Clone or download the Frogui repo.
Hello, Frogui!
Step 1 - Load Samples.sln into Visual Studio
The repo has a Samples folder which contains the Samples.sln solution; open this solution into Visual Studio. At a minimum, you should see these projects:
-
Hello
-
HelloDebugger
-
HelloDebuggerWin
-
HelloFriend
It's very likely the yellow warning triangles will appear within the various project dependencies warning that the NuGet could not be found or is out of date. The step below should help.
Step 2 - Get latest NuGet package
Although the projects are all set to use the Lesarde.Frogui.Wasm Nuget package, there may be a newer package. Update all the projects using:
▷ Right-click solution→Manage NuGet Packages for Solution→Updates, and if there is a newer version, update all the dependent projects.
Step 3 - Hello.cs
Open up Hello\Program.cs. You should see something like this:
using Lesarde;
namespace Hello
{
class Program
{
static void Main(string[] args)
{
Console.WriteLine("Hello, World!");
}
}
}
Pretty familiar, huh? The Console class above is using Lesarde.Console.
Step 3 - Start Exploring the Hello projects.
At the moment, the "F5" experience is not possible, meaning you can't just press F5 to start debugging Frogui projects. Check out the Solution Items\Readme.txt file before getting started and read the code comments to understand how the project was created and what it does.
Running Web Apps
The primary difference between a normal console app and a frogui console app is the former runs in a true Windows console and the latter runs in a browser. In order to run in a browser, we need a web server.
Step 1 - Install a web server
You may have a favorite web server already installed. Some options follow. Configuring web servers is out of the scope of this guide. However, if there is demand we'll add a much simpler solution.
Regardless of what you use as a web server, it will be necessary that it is configured to map the .wasm file extension to the application/wasm MIME type.
Python Web Server
A lightweight Python web server script is included. Locate the server.py and FroguiWeb.bat files, which will be installed where your system installs NuGet packages, typically here:
▷ \Users\your-user-name\.nuget\packages\lesade.frogui.wasm\version-no\mono
Note that the application/wasm MIME type has already been mapped. The FroguiWeb.bat runs the script using the py command, which is new to Python 3. If you are using an other python, edit the script to use the python command instead.
Since these file will not change often, you may want to copy them to someplace that can be reached without much typing from within a Windows command prompt. For instance, if copied to a folder that can be found by the Windows PATH environment variable, all you'll have to type is:
▷ Froguiweb
Test out the server in a Windows command prompt (here are some how-to tips). If you see something like this, you know it's working:
C:\>froguiweb
C:\>python c:\proj\python\server.py
('python 3 serving at port', 8000)
The script uses port 8000 but can be edited to use other ports. If you are having problems getting the Python web server running, check this Stackoverflow question.
IIS Express Web Server
IIS Express is a handy option that you may already have installed. A new MIME type can be added to a .config file using something like this:
▷ <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
You can read more able IIS Express and MIME types on this blog.
Step 2 - Build an app
Back in Visual Studio, build the Hello project. If you have no warnings or errors then you're ready to go.
Check out issue #4, which will definitely be a regular problem for now.
Step 3 - Start the web server
Either start your own web server or the one provided. If you use FroguiWeb then make sure you are in the proper folder within the command prompt. For instance, if you built Hello as debug, then it would be in a relative folder, such as:
▷ c:\Hello\bin\Debug\wasm
Step 4 - Start the app
Open your browser of choice, and type the following as the URL:
▷ localhost:8000
If that doesn't work try:
▷ 127.0.0.1:8000
If all is well, you will see Loading... appear in the browser followed within seconds by Hello, World!.
Debugging
Currently, there is no way to debug a frogui app running in the browser. The best way to debug is to create a second .NET Core Console project that calls into the frogui console project. See the HelloDebugger and HelloDebuggerWin projects in the Samples solution to see how.
Tips and Troubleshooting
Here are some tips to help you out. Please share any ideas you have to improve the experience.
-
Check GitHub regularly for issues. And please report them as well!
-
The web server may sometimes lock the components when running. If build is having trouble overwriting binaries, try restarting server.
-
If something goes wrong within the browser, use the browser DevTool's console window to see output (F12 key).
-
The current build system actually does two builds: phase-1 for Windows and phase-2 for the browser. it's possible that phase-1 succeeds but phase-2 fails. Keep an eye on this and report if noticed.
-
Occasionally browsers cache files in such a way that you can't actually see the latest builds. If you are suspicious that you are not using fresh bits, clear your browser history.
-
If you change your project and a Visual Studio Build does nothing, try Rebuild, or Clear + Rebuild.
-
If you are new to using .NET Core and .NET Standard, they are different. Your "main" Frogui projects should always be .NET Standard. Here's a good article on the subject, x.NET Standard - Demystifying .NET Core and .NET Standard.