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.

​

​

FAQ

How does Frogui compare to Blazor?

​

Both Blazor and Frogui use the same technology stack of mono-wasm and WebAssembly. And both are UI-focused. But that's where the similarities end.

​

​

Blazor's UI pattern follows in the footsteps of ASP.NET Razor, which uses a variation of the MVC pattern and constructs the UI dynamically on-demand. This sort of UI pattern is unique in and of itself. Frogui uses an MVVM-like pattern, similar to WPF, Silverlight, and other XAML variants.

​

​

But there's a much bigger difference at the moment. Frogui has not yet released any GUI components yet, just FrogLesarde.Console which follows the "console UI pattern" ;) -- simple text i/o, but within a browser.  The GUI components should start to appear in May 2018.

​

How does Frogui compare to ASP.NET Razor?

​

One of the primary differences between ASP.NET Razor and Frogui is the former's C# and C#-like code runs on a server but generates an HTML (and optional JavaScript, etc.) client, and the latter's C# is running natively on the client.

​

Historically, the best example of true C# and .NET running in a browser is Silverlight, the brilliant but defunct browser plug-in from Microsoft. A Silverlight app did its UI work in the client browser, much like a WinForms and WPF app do on the desktop, or Android and iOS do on the device. All of these client platforms can call out to web services and databases as needed, but the UI work takes place in the client.

​

Another difference between an ASP.NET Razor app and Frogui, is the former requires the back-end infrastructure and the latter needs only the lightest of web servers.

​

There are pro's and con's to both approaches and both models have been used effectively -- in all sorts of forms -- for many years.

​

How is Frogui's performance relative to JavaScript?

​

A Frogui app is much slower than a comparable JavaScript app presently, due to mono-wasm's growing pains. Mono-wasm is currently interpretted, but the Microsoft Xamarin team is actively working on a compiler. Once the compiler is ready, the table's should turn dramatically. No code changes will be required.

​

Can C# ever really replace JavaScript for web apps?

​

JavaScript's grip as the web client language was dealt a serious blow when all the major browser players agreed -- and subsequently implemented -- WebAssembly. The future arrived in 2017.

​

The upshot is JavaScript will have no inherent advantage in the browser over other languages once they are tooled up. For the foreseeable future our understanding is JS is required to do a bit of bootstrapping for other languages internally, but the performance hit will be negligible.

​

For C# it's just a matter of having the tools mature. So, yes, JavaScript's relevance will likely slip substantially over the next several years, if for no other reason than one's personal language preference.

​

Will Frogui also add GUI components?

​

Absolutely! That's the main goal. However, we do regard the console app component as important and will continue to evolve both.

​

Does Frogui require a web server or will a file server work?

​

A web server is required since mono-wasm uses the Fetch API. A lightweight server is included.

​