Tree Shaking Part 1: Building Lightweight Applications using ASP.net Core, NPM, Webpack and TypeScript

The goal of this article is to demonstrate how to setup an environment that can be used in building lightweight web pages using VS2017, ASP.net Core, NPM, Webpack and TypeScript.

Context

The acceleration rate of the web-development scene has been astonishing in the recent years. Tons of JavaScript frameworks had been introduced to help developers quickly bootstrap projects without the need to re-write commonly performed task like managing the DOM, sending data to server side and etc.

The convenience and accessibility of these JavaScript frameworks lures clueless developers to relentlessly plug tons of frameworks to perform very minor UI related coding which leads to:

  • Bloated JavaScript Files
  • High HTTP Request Count
  • High percentage of dead-code (unused-code)
  • And ultimately, extremely slow page load times.

Detecting and Measuring Dead-Code.

In computer programming, dead-code refers to source code that were not utilized but released with the legit and relevant ones. This problem have plagued the web-development scene for a long time and in-fact some of the very popular websites (See Instagram Dead-Code metrics below) still suffer from it at the moment of this article's writing (Feb 25, 2018).

The most basic step in any scientific problem solving is data gathering through the use of measurement tools that provide relevant metrics. Google Chrome recently introduced a code coverage detection feature that helps developers identify and measure dead-code existence on their websites.

Above is a code coverage assessment of Instagram's JavaScript files. Google Chrome's code coverage component states that 965 KB out of 1.8 MB (55%) of the JavaScript downloaded to the browser were not used which is quite bad for a huge and popular website.

So how can TypeScript, NPM and Webpack help?

Using this tools can help us utilize Tree Shaking or dead-code elimination. Tree Shaking is the process of stripping code that isn't required to run a web-page. Majority of dead code originates from framework level code that were not utilized. Below is short description of the tools that we would use to perform bundling, minification and Tree Shaking on JavaScript files.

  • TypeScript

    TypeScript is a syntactical superset (meaning plain JS works on it) of the JavaScript language that primarily aims to provide static typing through the use of the class, interface and module concepts. The biggest benefit of static typing is that it provides IDEs the capability to perform compile time error detection. It also enables tools like Webpack to identify the dependency structure of a JavaScript file.

  • Webpack

    Webpack is a front-end resource bundler tool. Together with TypeScript, it gives you the capability to remove dead-code (Unused code) through the use of its Tree Shaking feature that maximizes module import/export mechanisms to analyze dependency graphs of an application.

  • Node Package Manager (NPM)

    Node Package Manager (aka NPM), is a package manager for managing JavaScript files and it is the default package manager of NodeJS. It allows you to install, update and remove packages (JavaScript files that you depend on). Think of NPM as the NuGet package manager for .Net Applications and the combination of Ant extended by Maven on Java.

Setting up the coding environment

  • Step 1: Create a new project using ASP.net Core

    Open VS2017 and do the following:

    • Click File -> New -> Project -> Web -> ASP.net Core Web Application
    • Select Empty Project
    • Open StartUp.cs and replace the content of the class with the code below:
      The code above would enable MVC routing and usage of static files.

  • Step 1.1: Close VS2017 after creating the project!!

    UPDATE: For some users, NPM does not install properly while VS is currently open. Make sure that there are no process that would prevent CMD from installing script files. #VsSucks.

  • Step 2: Install Node JS and NPM

    Download and install NodeJS by following the guide at its website's setup page. This step would give us the capability to install and use NPM extension of VS2017.

  • Step 3: Open command-prompt on administrator mode

    You can do this by Right-clicking on command prompt app-icon and selecting "Run on administrator" mode.

  • Step 4: Initialize NPM on your application

    You can do this by executing the following command on your web-project's root folder using CMD.

  • Step 5: Downloading the latest NPM.

    You will probably run into problems related to the version of your NPM if you already have it prior to this exercise, the command below enables you to download the latest NPM files that could fix issues that might be associated with outdated NPM files.

  • Step 6: Install Webpack

    After installing NPM, you have to install Webpack to get access to its bundling and tree shaking capabilities.

    The --save-dev option tells NPM to install dependencies on your development environment only. This would prevent the bloating of your wwwroot folder for production builds.

  • Step 7: Install TypeScript and its Webpack loader

    Installing TypeScript would give us the capability to write TypeScript files (.ts). The TypeScript loader on the other hand would be used by Webpack on transpiling our TypeScript file into raw JavaScript files.

  • Step 8: Disable the Native VS TypeScript Compiler

    Since we would be using Webpack for transpiling our TypeScript files, we have to disable the native transpilation process provided by Visual Studio 2017. You can do this by manually editing your ASP.net Core's CS project file by adding the code below.

Summary

At the end of this article you should have the following:

  • An blank ASP.net Core project with MVC and static file support.
  • A package.json file that contains references to NPM, TypeScript, TS-Loader and Webpack.

Conclusion

In this article, we have learned how to setup an ASP.net Core application that can utilize NPM, TypeScript and Webpack as a preparation for the Tree shaking article.

We've also learned that utilizing too much JavaScript dependencies could slow down your web page's load time. To reduce the side-effect of having too much dead-code from this frameworks, you could Minify, Bundle and Tree-Shake your JavaScript files with the use of NPM, TypeScript and WebPack. I would be writing the second part of this article that would showcase the advantages and strengths of using the tools mentioned on this article.

Looking for JavaScript Goodies?

Comments

Post a Comment

Popular posts from this blog

Microservices: Picking the .NET Framework for your containerized applications.

Image
The objective of this blog post is to explain the factors that should be considered when picking a framework for a .net application that you intend to deploy in containerized fashion. .Net Core Generally, .Net Core is the preferred option when building applications that were intended to be deployed in containers due to the fact that .Net Core is built using modular architecture (.net core app images contains only the dependencies it requires to run). .NET Core apps are packaged using Windows Nano Server which is a far smaller compared to the OS required by the standard .NET runtime (Windows Server Core) therefore producing lighter images (end product of building containerized application). On the image above, you will see an image built for .Net Core app that prompts "Hello World". Please take note of the size of the image (251 MB) as it would be critical to demonstrating the difference of the two frameworks. Download Demo Apps from GITHUB
Read more

API Gateway in a Nutshell

Image
In this article, we will explore what are API gateways, the use-cases that you wanna solve with it and the benefits that you rip out of using them. This will be an introductory post to a series of articles that will showcase API gateway development using ASP.net Core, NodeJS and Docker. Articles in the Series This article belongs to a series of articles that explains the importance of API gateways and how to build them using ASP.net Core. If you're interested to learn more about API gateways, it might be a good idea to spend some time reading the articles listed below. Part 1: API Gateway in a Nutshell. Part 2: Building Simple API Gateways with Ocelot. Part 3: API Response Aggregation using Ocelot Part 4: API Def
Read more

API Gateway: Response Aggregation with Ocelot and ASP.net Core

Image
In the previous article , we've learned how to setup an API gateway using ASP.net Core and Ocelot. This article supplements the previous article by introducing downstream response aggregation through the use of API gateways. You can download the application used in this article by cloning it from GITHUB . Articles in the Series This article belongs to a series of articles that explains the importance of API gateways and how to build them using ASP.net Core. If you're interested to learn more about API gateways, it might be a good idea to spend some time reading the articles listed below. Part 1: API Gateway in a Nutshell. Part 2: Building Simple API Gateways with Ocelot. Part 3: API Response Aggregation using Ocelot P
Read more

Security: HTTP headers that expose web application / server vulnerabilities

Image
Today's blog post will cover how ASP.net response HTTP headers can expose security holes in your web application and servers. The post will also contain steps on how to remove this headers and mitigate chances of getting attacked using C# and ASP.net MVC. Problem When an attacker performs an attack on a web server, the first thing he /she needs to do is to identify the profile of his target. To profile a target web application / server, an attacker would have to perform the following steps: Identify the address of the web application. Identify the OS where the web application resides Identify the type of server (IIS, Apache, etc) that was hosting the web application Identify the frameworks (ASP.net MVC, PHP, JSF) used by the applications After an attacker gathers the following information, the attacker would proceed on using penetration to
Read more