Building web-apps in C# (part 1)
Sharing code between your front-end and back-end projects
h5 is a source-to-source compiler that converts C# code to JavaScript code. You can use it to build web apps using only C#, sharing code between your back-end and front-end. This post shows how to do that, either by setting up a shared project or by add files as links.
Code sharing: Shared Projects vs. Linked Files
Often when working on web apps, you will end up having some sort of shared code between your front-end and back-end code-bases. This can be related to your app behavior, algorithms, data models, and more. h5 provides a nice way to write-once and use it in both worlds — without ever having to leave the comfort of writing type-safe C# code.
There are two ways to share code between .NET projects and h5 projects:
- Shared Projects (i.e. shproj project files)
- Linked source-code
Actually, there is one more — you can also duplicate the code — but let’s pretend no one ever does that.
Which one to use will depend on you preferences, code style and how complex is the code you want to share between back-end and front-end. You can also use a combination of both, as often in complex projects, it might be a lot of work to refactor existing code into shared projects, and it might be easier to get started by linking files as needed.
But why not a normal project reference?
Unfortunately writing h5 code requires you to import the h5 library in the project. This library implements the equivalent of the .NET runtime, and therefore includes types that are also present on the .NET SDK. If you create a normal C# project and add the h5 package, you’ll see the compiler complaining about duplicated types. This is why h5 projects need to use the h5 project target and not the default project template:
Shared Projects
To get started with a shared project structure, let’s create a .NET console app, a h5 web app, and then a shared project that will contain the code we want to re-use. First create the projects and the solution using the dotnet CLI:
Then create the Shared Project. Unfortunately creating shared projects is not yet supported by the dotnet new CLI command, so you’ll have to use Visual Studio for it (or just copy it from the samples repository). To create a shared project, open the solution on Visual Studio, right click on the solution, select Add > New Project, search for shared in the list, select the C# Shared Project template and follow the remaining instructions.
You can then add this shared project as a project reference to the other projects. For that, right click on each project, click on Add > Shared Project Reference, and select the shared project you just created. The final solution will looks more or less like this:
As an example of shared code, let’s write a classic hello world app. We start by adding a new class to the shared project:
Any files you add to the shared project will be available to both projects. You can use it from h5:
And from the .NET project:
As you can see above, on the .NET side, you can use new features like top-level statements from the latest C# language spec. h5 is limited for now to C# 7.2, so some of the new language features like implicit using, top-level statements, and others are not yet supported. Obviously other things like unsafe code or Span<T> are also not available on h5 and probably never will, as they make little sense in the context of a browser. You can use conditional compilation blocks like #if H5 or #if !H5 to split the code as needed if you are using features that are not available (for example DOM manipulation that is only available on h5 or features that are only available on .NET).
Linked Source-Code
Adding files across projects might not be the most clean way to share code, but it is a very effective way. Your code will live in one project, without the need to create a shared project, and it will be “linked” into the other project — but not copied. It is important to be careful when adding a “linked file” to your projects, as it’s very easy to add a copy of the file by mistake.
To add file as a linked source code, right click on the project you want to add the file, select Add > Existing Item,
Then select the file you want to add, but be careful not to press enter, as that will add a copy of the file to your project. You’ve to click on the drop arrow next to the Add button, and click on Add As Link:
This should add the link to the project, as you can see on the icon next to it:
Compiling either of the projects will give you very similar JavaScript output:
And you can test it in your browser using the helpful dotnet-serve CLI:
