Server and Client rendered Web application development frameworks

Background

The current full-stack web development era is filled with a plethora of front-end and back-end frameworks. Understanding the difference between server and client rendered web application development frameworks will be useful to discern and choose the best framework and tool best suited for you. Lets understand this in the context of the most popular web development framework – ASP.NETCore.

ASP.NETCore is the popular open-source web development framework which is the latest flavor of ASP.NET which comes with the latest .NETCore framework. As we know, .NETCore is the popular opensource development framework for building secured, scalable software application over web, mobile, IOT and other various platforms. ASP.NETCore is the specific piece that contains libraries that allows full-stack web development via .NET.

A web application in its core, allows user / application (simulated) interactions via a front end / client user-interface (UI) for data entry, reporting/analysis, and other kinds of information management where data is transmitted to the web server for processing at various interaction points and the results being rendered back to the client / UI. Historically this has been fulfilled via the traditional CGI interfaces (if you are old enough as me or cared to study the history). Later along the line, scripting languages such as ASP, JSP, Perl, PHP, Python, Ruby, etc was/is being used. These web development technologies and frameworks have evolved into their own latest versions and flavors which presents various options for the web-developer to make the application fit to her/his needs.

Server rendered frameworks

Generally, these web development frameworks are server rendered / server based frameworks for building web apps. This means that they provide some kind of scripting language / template engine to create UI/view components, run the processing logic on the server and render the results back to the client. This is normally done with a browser refresh or with some extra code of J-Query or Javascript to invoke ajax data transfer without browser refresh. ASP.NETCore razor pages and ASP.NETCore MVC are both server rendered / server based frameworks for building web apps with .NET where we use razor template engine to create UI/view components and processing logic that runs on the server and serves the html content back. Original razor page technique is developed to fit single page type apps which does not form a complex work flow based web application. It more or less suits the traditional web scripting where there is one html form component and a server side processing component that accepts the submitted form, process data and send the processed html back. The view page is coded as .cshtml page and the corresponding ‘Model’ page is coded as the .cs page. ASP.NET MVC on the other hand follows the full blown ‘Model – View – Controller’ pattern and structure. We choose between these two approaches based on the size, need, complexity of your application, remembering that there is still room for improvement if we need to further standardize the front end code or want to fully run the web app on the client browser with reduced need of browser refresh.

Towards Client rendered frameworks

One of the areas of improvement that was looked upon by companies like Google, Microsoft, Facebook etc was standardization, reusability, maintainability and separation of code that enabled user / front-end UI interactions Vs the code that processed, rendered the results, reducing response times, allowing increased asynchronous data updates on the page without page refresh and providing the ability to run server code from the front-end browser (yes!). Each company tried to build its own frameworks and tools based on what was widely used by them. For example, Google developed the framework called Angular using Javascript / Typescript, Facebook developed React and Microsoft developed the Blazor. The goal of these frameworks is to standardize, modularize the front-end code, make it more component based and if needed, make the web app run on the browser.

To compete with client side development frameworks such as Angular and React, Microsoft developed its own development framework known as ‘Blazor’ (Browser + Razor). Blazor is a free open-source web development framework, enabling developers to create interactive single page applications / web UIs with C#, HTML code and Razor syntax instead of JavaScript. The way Blazor works is that it creates client-based apps with WebAssembly (Wasm) and server-side applications with ASP.NETCore. Read more about WebAssembly – its a cool concept of creating byte-code instructions that can execute at native speeds from browser/web app. without the need to convert into Javascript – it provides faster execution time, is forward looking and is supported by all major browsers. The server app. communicates with the browser through a constant connection using SignalR, while WebAssembly executes directly in the browser.

Blazor model web apps. might not be suitable for all your complex use cases and workflows. This means that both server side and client side rendered web application development frameworks have its own use cases, pros and cons. The goal of this article was to bring into light the difference of approaches and your options to select between the two based on your need.