Skip to main content

Posts

Showing posts from December, 2019

Differential Loading in Angular

Differential Loading in Angular Angular is a complete javascript framework with many inbuilt features like routing, dependency injection, form validation but the downside is the application bundle size. In order to overcome this issue, Angular 8 introduces the concept of differential loading. Until angular 7 versions, when we do an ng build command, the typescript files are converted into js files that can support both modern and old browsers. Since the build bundle should contain js files for new and old browsers, this results in huge bundle sizes. With angular 8 Differential loading, when we do an ng build two different bundles are created one for modern browsers (supports recent syntax changes in JavaScript such as arrow functions in ES2015 or async functions in ES2017) and other for older browsers (es5 ex. IE) When the app is deployed, both the bundles get deployed and based on the browser the clients opens the app from, the specific bundle gets loaded by the browser Basically, Dif

Angular - nvm (Node Version Manager)

nvm - Node Version Manager Node Version Manager helps you to install different Node versions and easily switch between different versions.  How to Install Node Version Manager? Install Node Version Manager from this link -  https://github.com/coreybutler/nvm-windows/releases/tag/1.1.7  (nvm-setup.zip) Open Command Prompt in Admin mode and perform the below steps,  Common Issues: Error Message:  This usually happens because your environment has changed since running 'npm install'. Run 'npm rebuild node-sass' to download the binding for your current environment. Solution: node-sass install steps -    1. npm -g uninstall node-sass    2. npm -g i node-sass    3. npm rebuild node-sass (in the app location)

Javascript vs TypeScript

JavaScript vs TypeScript Javascript   - Client-side programming language to create interactive web pages.  But it has a few disadvantages. As code grows, it becomes difficult to maintain and reuse code It doesn't support Object Orientation, strong type checking and compile-time error checks Can be used for small applications with the minimal code base, but not effective when application code grows. Typescript  - A modern age Javascript development language which can run on node.js or any browser which supports ECMAScript3 or above.  Features: Superset of Javascript Optionally typed scripting language . Typescript variable with no type will be inferred by Transcript Language Service(TLS) based on its value. Supports Object-oriented programming techniques like classes, interface, inheritance, subclasses etc.. Rich IDE available with autocomplete and code navigation features Compilation - Typescript transpiler provides error checking feature. It compiles the code, generates any syn

PCF - Blue Green Deployment

BLUE GREEN DEPLOYMENT PCF Blue-Green deployment is a technique to reduce the downtime of applications during deployment and also reduce the risk ie. if something unexpected happens we have an option to roll back to the previous version by switching back There are two identical production environments running called Blue(live) and Green(idle) and at any time only one of the environments is live.  When a new version of the app/software needs to be deployed, final stage of testing happens in the green environment and once it is fully tested, we can switch the router so all incoming requests now go to Green instead of blue. Green is now live and Blue is idle. For more details, please refer pivotal resource link -  https://docs.pivotal.io/pivotalcf/2-5/devguide/deploy-apps/blue-green.html

Angular - NGINX - PCF Integration

NGINX - PCF Nginx is a web server that can be used as a reverse proxy, load balancer, HTTP Cache etc.  In order to deploy apps with NGINX configuration, you need to have an Nginx.conf file in your app so that PCF uses it when deploying. Uses -     1. To get the PCF Environment variable for respective environments to manage them in Angular apps    2. To set the page refresh order before throwing 404 error An example nginx.conf file is shown below. You can configure the way you want based on your requirements and need.

Angular - Useful Extensions

There are a lot of useful extensions that can be used to improve productivity while developing Angular applications. Some useful extensions listed below,