Guide to an Elegant Single Page App

Introduction

In writing this, I'm assuming you've already got a web page up and running on a web server of some sort.  If not, look at my other blog on doing so with AWS.  Today, I just run my Web Server under a Virtual Machine on an old PC in my basement.  My OS is Windows 11 and the Virtual Machine is a very lightweight version of Linux Debian.  Of course, you could just run a .Net server straight up on Windows 11, but I feel a little better directing all traffic to a "machine" that is isolated on my network.

One other thing, your web server solution doesn't have to be .Net at all.  My approach these days keeps the control at the client side and just uses the server to do authentication and database read/writes.  So, your webserver can be just a Python script or a custom c++ websockets console program you wrote yourself.  However, .Net does have many packages to make short work of things you'd have to invent yourself - particularly in the world of JSON and database calls.  And, now it can run on Linux or Windows, which is a cool.  Other than running on Linux makes for a lot of overhead work to get things to pass through Apache.

Microsoft Web Forms Woes

Here is why multi-page, Microsoft Web Forms apps kind of stink:

• You are stuck with it gathering all the data to be displayed at once (data queries, file reads, etc), slowing down response time
• Large amounts of data must be transmitted, slowing down response time
• Users can navigate away, hit the stop button, or hit the refresh button causing you trouble
• Mobile phone use makes for a clunky experience versus an "Phone App" like experience
• A burp at the server side can mean losing track of the client state of affairs
• Filtering of table data is painful to the end user as it posts back again and again

Single Page Advantage

With mobile devices coming along, the quest for a code once, run anywhere approach has never been greater.  For me, having a web page that performed like a mobile phone app with externally referenced scripts to execute on the smallest of devices (ESP8266, Arduino IOT 33, etc) is pretty much the holy grail of my 40-year coding history.  In 2021, I dove into .Net Core 5 and then .Net Core 6.  Without any training, I naturally began doing more and more single page techniques until I finally hit my favorite approach to a web app.

Single Page App Essentials

Here are the essentials I apply for an elegant single page app:

1. JQuery
2. Bootstrap
3. DataTables
4. Font Awesome
5. Divs for every possible display or displayed section.
6. JQuery AJAX calls
7. .Net C# Form POST Handlers
8. SQLite3

Those are the 8 aces for making a modern app.  They are all free!!!  One can make an enterprise application running in their basement for free.  Awesome!  You can even get by without .Net C#.  A simple Python script or Arduino C WiFi library can handle the database and serving load.

Single Page App Approach

After coding for about a year with Razor Pages, this is the approach to Single Page Apps I've formed:

1. Bootstrap Everything
   • Bootstrap warrants a solid blog of its own.  It's a cascading style sheet system that uses jQuery to become responsive on its own.  It's not at first intuitive to what it does for you - not even to seasoned programmers at work.  Once you understand it, you will find, you can code once and it will respond to any size display elegantly.  It is a game changer for code once-run anywhere approach to app development.
2. DIV Everything Possible that will Eventually Show
   • Everything that will become visible with user choices and button clicks needs a DIV HTML tag around it to control its visibility.
   • When user's click and select, I make calls to javascript functions to toggle div visibility on and off.
   • Even if you don't have the data upon first visit to your page, put a div down to hold it later.
   • To put dynamic data from javascript into a DIV use this:

     $('#my_div').html('My stuff in the div');

   • To have a DIV be hidden at first page access in the HTML file, do this:  
     

     <div id='my_div' style='display:none;'></div>

   • To show and hide DIVs in javascript with the jQuery package, do this (where your div ID is my_div):
     

     $('#my_div').hide();
     $('#my_div').show();
     

3. Use JQuery AJAX for Database Calls
   • I found it best to control the logic with your javascript at the client, and minimize the server side activity to just pulling and storing data to SQLite3.
   • With C#, you do this with separate methods for separate activities.  You name them with "OnPost" first like this:  OnPostMyHandler, OnPostMyOtherHandler.  Not MyOtherHandler could be anything you want that meets normal method titling confentions
   • When referencing from AJAX, the URL is "?handler=MyHandler", "?handler=MyOtherHandler", using the method names from above as an example.  Note, you do not inlcude "OnPost" when you reference like this.
   • For anything more than a single line of text, you'll want to use the JSON format for sending and receiving data between the client and the server.  C# has a package to auto decode and encode it.  This allows for one line of code to stuff entire database tables into a javascript multidimensional array.
   • Here is an example with the National Weather Association to get the current weather to a javascript array and place it into a DIV:
     

     function getWeather()
         {
            $.get('https://api.weather.gov/gridpoints/LSX/99,83/forecast/hourly', function (data,status) {                  
                     
                     var the_weather="<div id='weather_hourly'>";
                     the_weather+="<b>Temperature:</b> " + data.properties.periods[0].temperature + "&degF<br><b>Wind Speed:</b> " +
                              data.properties.periods[0].windSpeed + "<br><b>Wind Direction:</b> " + data.properties.periods[0].windDirection + "<br>";
                     the_weather+="</div>";
                     $('#weather_hourly').html(the_weather);
             });
     }

4. Dress things up with Font Awesome
• Font Awesome gives you sharp looking little icons to help catch your user's eye.
• Once you have the package either installed or you set up an account to hit it in the cloud, you drop an icon like this:
  

  <i class="fa fa-home fa-fw" aria-hidden="true"></i>

5. Make Your Tables Dynamic
• If your app will be presenting data in mass via tables, then DataTables package is a must.  It will do all the heavy lifting for you including filtering, pagination of data, and server side communication.
• You can add bootstrap classes to your DataTables as well.
6. Use a Database to Store Your Data
• SQLite3 is a database that works like Microsoft SQL, but is simply a text file.  It's really light weight, easy to install, and very portable. 
• Since it's a single file, it's easy to backup to github, too.
• When you need to store stuff in between user visits, a database is the way to go.  It's also good for holding things like comments, blog entries, etc.
7. IF THEN your way into awesomeness
• With these items in place, it's all about If...Then/event logic and onClick and onSelectionChange events.

Honorable Mentions

Here are a few other packages that will round out your app for perfection:

• Prism - a syntax highlighter.  You see it all over the place where code shows on this and many other websites.  It's javascript and CSS packages you can customize to your liken right on their download page.
• TinyMCE - this is a text editor with a zillion options.  As they keep improving it, it will eventually be as nice as MS Word.  It's used where you want your users to be able to format Rich Text instead of just plain text in your html textareas.  It even has ways of allowing file uploads.
• Mermaid - if you need to show a dynamic flowchart, this is the repository of choice.

Summary

That is it.  If any of this made sense to you, go forth and get those packages into your web app.  The best references are the package docs themselves, but w3schools.com is a great place as well.