Real-time server side rendered web applications using html, css & server language without writing a single line of JavaScript

Nilesh Patel — Sat, 19 Jan 2019 01:54:34 +0000

It's 2019 already and technologies have evolved so far such that there are many options to try on with different combinations when it comes to web applications. Being a full stack developer, have got to work on projects with many combination of technologies over the decade. When it comes to real-time functionality javascript implementation of web-sockets is always first thought that comes to the mind. After introduction of webassembly standard few years ago, Microsoft introduced framework called Blazor.net(still experimental) almost a year ago which primarily allows to create web applications using server languages and html(with options for javascript interop as well) that can run through WebAssembly in browser. After watching the video

late last year have tried out demo project using Blazor's server side template (an option while creating new project)

NileshSP / dotnetefrazorcompssr

Blazor/Razor components server side rendered web app

Blazor/Razor components with SSR(server side rendered) accessed through browser, built in .Net Core(2.1) using Entity Framework code first interfacing In-memory/MS-Sql db

Project showcases Blazor/Razor Components frontend UI(using C#) rendered on server(SSR) consuming data from the in-memory/sql database using .Net Core service with entity framework code first to database pattern

Overall project communicates between client & server using SignalR(part of the framework and does not require explicit implementation) to render HTML(built on server) & C# oriented UI

Live demo link - https://dotnetefrazorcompssr.herokuapp.com/

Steps to get the project running

Pre-requisites:

.Net Core 2.1 SDK

Visual Studio Code or Recommended - Visual Studio Community editon version 15.9.1 or later editor

Clone the current repository locally as git clone https://github.com/NileshSP/dotnetefrazorcompssr.git

Steps: using Visual Studio community edition editor

Open the solution file (DotnetEFRazorCompSSR.sln) available in the root folder of the downloaded repository

Await until the project is ready as per the status shown in…

View on GitHub

with working demo link as

Live app link - is made available on heroku by hosting app as a container using docker

Most of the rendered code to display elements like filters, table with data and continuously updating Current server time option are all in one file with no javascript other than required c#, css & html

Regarding realtime functionality,

Current server time is continuously being updated from server using timer with interval of 1000ms
Table data for each row is being made available at an interval of 100ms (kind of streaming like functionality where in whenever associated data entity is added with new item it is being streamed and made available to client in the browser)

And the best part is download size over to the client browser is very less, in this case it's 2.9KB overall

This led me to think about creating real-time applications with new approach requiring minimal overhead of working along multiple languages or technologies with overall less code

Let me know guys what do think & thanks for stopping by!

DEV Community: Nilesh Patel

Real-time server side rendered web applications using html, css & server language without writing a single line of JavaScript

NileshSP / dotnetefrazorcompssr

Blazor/Razor components server side rendered web app

Blazor/Razor components with SSR(server side rendered) accessed through browser, built in .Net Core(2.1) using Entity Framework code first interfacing In-memory/MS-Sql db

Steps to get the project running