Component based Approach using Typescript

At the end of September 2016, I started learning Typescript.Being a Javascript Engineer,I can digest the fact that Javascript will be replaced by superset “Typescript” and finally I moved to Typescript.

I used to write javascript and use extensibly some of libraries like jquery and underscore.It have three years journey with Backbone.js with four different projects and the way it is written to use DOM manipulation,I just love it.But as the project size,maintaining codebase becomes an issues and to maintain each and every views life-cycle is an overhead to developers,so most of time i have explicitly write code to maintain life-cycle of a view.Then came Typescript,initially for me,it look like java and I was like “Dude,Am I writing backend code in UI ?”,but as time passed i started liking it and now i prefer typescript more over vanilla javascript.

But why there was a need of migrating towards typescript ?

Answer I found after some days : Components

Ok,Components,but that can be achieved with backbone also,but why typescript?

So,you can still use backbone and write a wrapper over it and extend the base class.Inheritance was missing in vanilla javascript that Typescript filled the gap.

Lets go and have a real use case.As the project size increase it is hard to maintain code-base they are likely chances of code duplication.So there was need of generic things that can be included in file to be use and instrument.For example write a generic view component with strictly typed variables so that the contract is not validated and that component can be used widely to maintain life-cycle of a component.


class BasicView {
/** this is generic component that have basic life cycles of a component

public render(){
}

public preRender(){
}

public destroy(){
}
}

Now,with typescript you can include basic component to every component.


class Component1 extend BasicView{

constructor(options){
super(options);
}

/** over-ride basic view methods in child view

public render(){
/** over-ride render method here in child view */
}
}

With Component base approach,component behave as individual identity that can be plug and plug.Component accepts a set of data and returns a set of data.So writing test cases also become easy with component based approach.

So,if you see frontend end trends for last two decades,the world is moving towards components.It has add-on features as code re-usability easy debugging and neat and clean files.It becomes really very easy to debug and enhance a product feature.The main advantage component based approach gives ,it makes the complete product loosely coupled.So extending it become too easy and migration is smooth.If you look at all recent frontend framework,they exhaustibly use component based approach.

I have now become huge fan of component based design,now any feature that i need to plug in my system,the first thing comes to mind,how i can follow component based approach and make it re-usable at other places.

Advertisements

Parameters to measure the peformance of a web App ( Frontend Applications)

I personally thing that anyone comparing to two front end Applications built with two different stack.Performance of any app depends upon various parameters and most importantly it depends upon the Project Requirement.
As far as my experience with building application,I will try to list some of these parameters.
a) Quality of the test/benchmark code : Writing any application/module/function but writing a test case for these are comparatively more tougher.
b) Application Type : The main stack is choose on the basis of application type ,whether is data driven, small application or SPAs .The choice of framework all depends upon on requirement of the product.
c) Server load and Server performance : whether the server is able to handle multiple request .it all depends upon optimizing the server to its best .
d) Quality of Internet Connection at end user and client Side
e) Memory usage by the client Browser and type of Browser used. Resource utilization (CPU/memory/network)
f)Dom Manipulation : DOM manipulation should be very less and it is not good for performance.
g)Garbage Collection by the Browser.

In a nutshell ,no library or framework is good or bad .All we need to learn its pros and cons and best way to exploit it to get our purpose done,be in Backbone, Angular ,Ember or React.

My Experience with Angular Js

I started working on angular late 2015 and I think I have written my share of Code in Angular Js.
In the year 2015, angular and React was popular. Fast.Fast Development and less code base
for a larger application become a requirement .performance was also a factor.The last project was in Backbone and Due to its bad design we have serious issues like sync calls
and large number of HTTP calls .So we decided to move to Angular .
After going through few blogs and articles we decided to use Angular + D3 + NVD3 and
for Development and RequireJs for Dependency and Grunt for Task Manger.The best Tool
was Chrome Dev Tool which helped us throughout our development process .

As we were new to Angular and Product need to be delivered in less than 3 months (90 days ) we were little bit scared.Angular as a steep Learning Curve. The greatest pain is setting the project and once project is setup development usually becomes fast.
As I was from jquery+Backbone background, initially I find it difficult to adjust to two way data binding and few lines of code doing miracles and inbuilt directives support.Later I become fan of Angular .As the project was huge, I keep performance issues also in mind.
Performance really matters a lot as users never waits for more than 5 seconds.if you are slow you will loose the business.
My experience in building a product with Angular stack was awesome and I enjoyed it that I was able to deliver and ultra fast application with more features, custom directives.custom filters and so on.
In my application we have lots of charting libraries ,but High-charts were not supported by Angular so ,I moved to NVD3 and D3 for more user interaction.Initially due to less support I faced certain issues with NVD3 but Later I found hacks and tricks to tackle with it.

With Angular my current application become 2x times faster than previous with more efficiently managing data at front-end side.