Image for post
Image for post

One reason I really like TypeScript is its Type system, it is practical and feature rich. Applying the types in right use cases can make our code cleaner and easier to maintain.

The purpose of this article is to share an example of code refactoring with type script discriminated union type and Generics.

The original code

This piece of code is to represent user roles and feature/permissions mapping, to build a user access matrix in an Angular App.


Image for post
Image for post

Angular state management is the core of any Angular App, but there is no one-size-fit-all solution. Although Ngrx is the most popular angular state management framework, but its excessive boilerplate codes make it overkill for many small to middle size apps.

This article talks about a simple but effective Angular state management pattern using observable data service. What I want to achieve is to have the following key benefits by using similar concept of Redux pattern.

  • Single source of truth
  • Unidirectional data flow
  • Immutable state at component level

A demo Hero application is available as an example of how to…


Image for post
Image for post

Everything in JavaScript world is an Object. We often need to clone an Object, and when working with TypeScript, preserve the object type may also be required. This article will explore the options of deep clone an Object with TypeScript, and implement the clone functionality without dependencies to external libraries.

Shallow copy

A shallow copy using Object.Assign or Spread operator will duplicate the top-level properties, but the properties as an Object is copied as a reference, thus it is shared between the original source and target(copied Object).

const objShallowCopy = Object.assign({}, Obj1);
// or
const objShallowCopy = {...Obj1};

Although the above methods…


Image for post
Image for post

Managing different environment configurations for a Web App is an essential task. NestJS provides an out-of-box config package based on .env files. However, my personal preference is to use the Angular style environment config files. Thus, this article will describe a simple environment config solution. The solution is illustrated in a NestJS App, but it can work in any NodeJs Apps.

Environment specific configs with default

The config files structure is shown below. The settings.json contains base configurations with default values, and a settings.[environment].json stores the environment specific configs which can overrides the default values.

└──Project/src/environments/
└──settings.json
└──settings.prod.json
└──settings.dev.json

The sample settings are listed below…


Image for post
Image for post

There are some facts that I wish I knew before spending half a day digging into a User Agent issue. Here’s what I learned.

The User-Agent (UA) is a string contained in the HTTP headers and is intended to for browser detection: to identify the device/platform of the visiting user, and can be used to determine appropriate content to return.

User Agent is a mess

The truth is, User Agent is full of lies, in many cases, a browser pretended to be other browser with User Agent. In the history of User Agent, browsers often pretend to be another browser because some websites serve contents(frames…


One of the important benefits of using Typescript is its strongly typed, so it provides compiled time type checking and developers can work more efficiently in large and complex Apps. That is also why we will like to convert the Http Json response to a strongly typed object in Angular App.

Image for post
Image for post

Cast the Json Response

A very simple and common example is to use typescript interface to “cast” the Json response into the defined data structure as below:

export interface IRepo {
name: string;
created_at: Date;
}
...
// Use interface IRepo to "Cast" the resposne
const path = 'https://api.github.com/repos/libgit2/libgit2sharp';
return this.http.get<IRepo>(path);

So in…


Image for post
Image for post

Recently, I implemented an interesting feature using SignalR and Angular. The new feature in the Angular App allows admins to see all active clients in “waiting room” page. The admin can then pick one and start the appointment immediately.

I will share the gist of the solution which make use of SignalR bi-directional communication ability and integrate with Angular.

Architecture

The technologies used includes .Net core, SignalR and Angular.


Image for post
Image for post

In this article, I will present a solution for building White label Angular Apps using dynamic routing and lazy-loading modules.

What is White label App

A White label App is a App made by a company and re-branded for the
other companies to make the product looks like their own. Using White label App will save time and effort as it is mostly customization of look and feel and the functionality are provided out of box.

What I want to achieve in this solution

In this example, I want to develop a White label App based on a existing Angular App. My goals are:

  1. The White label App has own landing page, with…

Image for post
Image for post

A common strategy to manage breaking changes of a REST API is to add a new version. A new version allows clients to continue using the existing REST API and move their applications to the newer API version when they’re ready.

There are plenty of discussions and debates about how to pass the API versions, via URL or Header etc. However, I couldn’t find many in-depth discussions on how the code base should be structured to manage multiple versions. The technical implementation strategies on managing multiple versions in single application seems more important than the versioning strategy.

Based on my…


Recently, I integrated Google Maps into one of my Angular projects, and I was really happy with the result. I wanted to share a few tips I learned from the process.

The example used in this article is based on an article from Jocelyn Keung. It’s the most clear “hello world” tutorial I found integrating Google Maps into Angular.

To demonstrate how to extend the original Google Map library, I added a simple “Clear markers” feature on top of her example.

Image for post
Image for post

Add/Clear a marker

To add a marker, it needed to be initialized with position and use the setMap method to associate it…

Sunny Sun

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store