Here’s What Happens When I Create My Own Stack

Everything these days seems to have a technology stack these days, sometimes a deep or expansive one.

The Stack behind Pass Shoot Score (for now…)

C# is my language of choice for Pass Shoot Score, but I haven’t been happy with the GUI options available. So, naturally, I think about what are the best options. Those lie with HTML/JS/CSS. So how do we combine the two? There have been some attempts such as Awesomium, but last time I tried it I was not satisfied. How about the Chromium Embedded Framework? That has great traction, powered by a large team. On their Bitbucket page are a few options for C# wrappers. I ended up picking CefSharp, which has worked well for me.

Now that we’ve chosen an HTML/JS/CSS renderer, how do we display it? CefSharp provides three renderers: WinForms, WPF, and Offscreen. Since ideally I would prefer Pass Shoot Score to be cross-platform, Offscreen seems like the obvious choice. Offscreen provides a bitmap–which library should I use for window management and rendering? How about the trusty SFML (shoutout to Github user graphnode for his updated SFML 2.3 .NET wrapper on nuget!)? Works well enough for me at the moment, just one giant sprite with a ever-changing texture. If I ever decide to deploy to a SFML-unsupported platform, it’ll be easy enough to change to another library that can render bitmaps and pass mouse/keyboard events.

Performance is not great, obviously, since I need to create a new texture every time the CEF engine produces one. In terms of HTML/JS/CSS design, minimal animations are best. If I ever need complex animations, I could consider rendering them in SFML directly. Alternatively, I could split the HTML/CSS/JS into separate pages, such that I could essentially render 4 pages instead of one, but with them independently redrawing. This may reduce the amount of large redraws in CEF. But we will come to that once rendering performance becomes an issue.

The next question is communication between the rendered webpage and the actual Pass Shoot Score engine. CEF and CefSharp allow for executing Javascript onto the current page, but it seems like a poor way to communicate (generating JS in C#? Let’s not). Also, the webpage doesn’t have an easy way to communicate back. After a few considerations, I settled on running an HTTP/REST server in the program and having the webpage communication through REST calls. There is a great library called Grapevine that I’ve used in the past and recommend for embedding REST servers. Lastly, I’ve added the ever-popular Json.NET library to help with formatting the data for REST calls. In particular, the JsonConvert.SerializeObject function is extremely convenient to convert C# class from the Pass Shoot Score engine to JSON.

So, lets wrap up. I now have an SFML powered program rendering an HTML/JS/CSS webpage with CefSharp with communication powered by a Grapevine HTTP/REST engine in JSON messages. Well, here’s what happens when I create my own stack.

HTML/JS/CSS? What about Node/Angular/React?

I’ve gotten the GUI setup done, but what’s the GUI powered by? Sorry web developers for skipping that! Well, the truth is I don’t know. I spent a bit of time learning Node/Vue, but I think it’s too much for me at the moment. There’s a wonderful template called AdminLTE from Almsaeed Studio that’s free and based on Bootstrap 3. I will be giving that a shot.

Here’s a quick screenshot of the SFML program rendering the AdminLTE page. It’s hard to demonstrate the REST server and the rest of the stack, but trust me, it’s there!

The rendering stack example
(Click to open in full)

Next steps, start modifying the template to display Pass Shoot Score data! Maybe the Player profile page first? Check back soon to see more updates.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.