Life Before Javascript
Over the past couple of years there has been a shift in web development. This comes about as a result of a change of direction which began with the release of Internet Explorer 11 in 2013. Up until then writing code which runs in a web browser instead of on a web serverwas considered optional. Browser extensions like Flash and Silverlight were the preferred options for advanced user interfaces on the internet. In the decades leading up to the release of IE11 client side code (javascript) was considered a security risk and a hassle, especially in Business Systems where reliability and functionality often take precedence and User Experience is rarely a priority. Technologies like ASP .NET MVC provided a good compromise between flexibility and rapid development however the user interface was sometimes inherently dependent on the ‘shape’ of the data. Developers usually had to manage the data through the entire stack, i.e. full stack developers. In contrast, modern Front End developers rarely write code which runs on a server and the ‘shape’ of the data is secondary. This has introduced a separation between the front end, which presents information and responds to user inputs, and the back end, which organises common business logic and accesses data at a low level.
Javascript in a Commercial Environment
Modern web browsers have started to catch on for large corporations and business websites can now take advantage of modern web development techniques, this means javascript frameworks have become the standard for new projects. A common issue which seems to hold back development is how to make sure that Front End coders are able to stay in step with wider systems. Micro-services provides a way for separate systems to re-use critical components so that critical logic can be consistent throughout an organisation. However rapid application development teams don’t have time to organise their code into re-usable components and it can be difficult for everyone in the team to recognise the benefit of having re-usable components. Understandably, business owners often see the Back End as unfriendly because it is more difficult to quantify whereas the Front End is relatable to any user of the system. Therefore, businesses can easily pass on the cost of a new user interface but a new micro-service is an investment which only bears fruit over time.
Web Assembly
As larger applications are run in the browser, the performance limitations of javascript become more noticeable. There have been major advancements in javascript engines, allowing code to run more quickly and reliably, however the next step would be to run proper assembly code in the browser. After all, modern javascript is packaged so why shouldn’t it be compiled? This is where Web Assembly comes in, and it is well on the way to becoming a valuable addition to javascript running in the browser.
Blazor is an experimental web technology from Microsoft and it may provide a better alternative to running javascript in the browser. Blazor depends on Web Assembly which can be run in the browser more efficiently than javascript. Javascript would not be replaced entirely but web assembly is faster. Therefore, any browser which supports Web Assembly can run a Blazor website. It is designed to allow developers to write Front End code which is based on the C# as well as javascript. This could provide a more consistent developer experience between code which runs in the browser and on a server side. At this stage Blazor is not ready for use on production websites however there is a lot of excitement around this technology. If you are familiar the Microsoft web development technologies I suggest you take it for a test run, it’s very easy to get started. It seems to be the next big thing for Microsoft developers, after MVC which started to take off in 2010 with the release of version 2.
A simple Blazor page which compiles to Web Assembly:
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" onclick ="@IncrementCount">
Click me
</button>
@functions {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
}