Why Angular?

By -
Lately I started working on a Frontend Migration project where the Application was earlier running on Durandal and Knockout. 

This interesting and lovely story started when one if out chief architect installed me to understand the product line from a UI perspective.

I found that there are multiple products running on outdated technology stack like Durandal and knockout

There is no harmonization across these products. They need a single unified platform (SSO) for all the assets

Selecting a future technology stack is a very complex work which required understanding current and future requirements, trade-offs, learning curve etc. A wrong selection would impact productivity in product development.


So I did a comparison analysis around some of the frontline frameworks available like React, Angular, Polymer.

Couple of you thought about why I have chosen only these three items in the analysis: Well there are good number of UI frameworks available in the market which are serving the same purpose with little differences yet some of these are reliable and popular enough to include in the candidate list of our analysis. We chosen to go with Angular & React because both are reliable framework for building complex UI functionalities, have good community support, the frequency of rolling out new versions is fast, enriched with developer accelerators like CLI, etc. so they were the obvious choice.

On the Polymer front, i see it has a huge potential of building reusable, framework agnostic components, ie. you can build components in Polymer and can be deployed in any of other UI frameworks like Angular, React, Backbone, Vue, etc. Its inbuilt support for building web component stands him out of the line.
Selection Criteria

This section presents some criteria and drivers that will serve as the basis for the decision of the developer on certain aspects of a project.

Evaluation Attributes
Open source
Comments
Core Attributes
Sub Attributes
Polymer
React
Angular
each lib has component lifecycle
Re-usability
does framework support inbuilt component standards
Yes 
Yes
Yes
Only Polymer is following WC standards
does framework support Web component standards
Yes
No
No
versioning, easy to install, and upgradeable
 Custom
Custom
Custom
with the help of NPM can be done
Meta data driven development/configurability
Custom
Custom
Custom
Productivity
Can be written in more modular way
Yes
Yes
Yes
Follow modular and SRP principal
Code generators - Template
Limited
Limited
Yes
Angular comes with other library like routing, etc
Linting, code Hinting
Yes
Yes
Yes
Single Platform for all needs- ES 6 support - Module, OOP, Promises, RxJS, TypeScript
Limited
Limited
Full
TypeScript support for managebility
Limited
Limited
Full
Angular team promotes writing code in TS
Performance
Dom Size (only active module/page dom should be present in the browser)
Yes 
Yes
Yes
Default Library size ( first time load on browser)
 Thin
Thin
Thick
Angular bundles all the required libraries used in the project
Rendering ( are there approaches like virtual dom available for fast rendering)
 Fast
Best
Good
UI caching API's
Limited
Limited
Full
In built API
Testability
Can test presentation separately from API
Limited
Limited
Yes
Availability of Mocking API
Yes
Yes
Yes
Integration-3rd party
Hooks to connect external lib
Yes
Yes
Yes
Charting, data mutation libs integration
Yes
Yes
Yes

Outcome : Angular

·         Modularity & Manageability comes from Typescript
·         Single platform for all needs, less integration issues
·         Driven by industry leaders
·         Brings reusability with support to component oriented architecture
·         Skill standardization & retention
·         Scalable
·         Development efficiencies

Every framework has a profit/loss balance sheet its more of a technical requirements which guides the decision, other than its always better to "choose products with a reputation for reliability"


Comments

Post a Comment

Popular posts from this blog

MicroFrontends

By -
Image
In this article, we will read about how to make a  pineapple curry… ahh…   sounds different, you are here for micro-frontend but reading about pineapple curry, what the hell is this? Don’t worry, this is just a mind trick to make your brain more active before reading about micro-frontends :) Ok let’s jump into our main topic, micro-frontends. The demo can be seen here:  https://microfrontend.netlify.com  and a single micro-app here:  https://microfrontend-team-movies.netlify.com/ What is a micro-frontend? “In this approach, the web application is  broken down  into its  features , and each feature is  owned , frontend to backend, by a different team. This ensures that every feature is  developed ,  tested  and  deployed   independently   from   other   features” —  ThoughtWorks Technology Radar micro-frontends team view Why we are calling it a ‘curry’? “ Curry ” is a variety of dishes that use a combination of spices or herbs to make a dish yummy, similarly. Our  m
Read more

Frontend State Management

By -
Image
What is State and Why we need it? Photo by  Daniel Leone  on  Unsplash This is a two-part series, In the first part, I am going to write about why we are speaking a lot about  State  and  why we need it in our application.  In the second part, I would write a sample to-do application using React and apply  different state containers to evaluate against different architectural concerns like  Scalability ,  Manageability ,  Performance, and Productivity . Let's start swiftly….. Photo by  Austin Distel  on  Unsplash I am sitting in my office after finishing one of the major application, my state of  mind is relaxed and COOL . Well, am I supposed to write about my state of mind, which is in a COOL state or do I need to focus on Application  State  in the web ecosystem? Well, if you take a birds-eye view, both  Mental state  and  Application state  looks to be representing some or other form of information. My mind state is  relaxed, cool and happy , where is an
Read more

Push over HTTP

By -
There is a good requirements in industry where you need to update data over web in real time. But because of HTTP limitations you can't directly push data from server to client. so lets understand what all options do we have to simulate the PUSH  environment . If you have worked in any real time web application where data needs to be updated on UI in real time like Share trading platforms, reservation systems, ticketing systems, etc. you would have been easily understand the requirement and power of PUSH. for others lets understand why PUSH is important in many mission critical applications. for ex. a user using a share trading application where with  some delay  he get the updates of different scripts which he is looking to buy/sell. Now consider a scenario where user made a request to buy particular script at a given price he seen 5 sec's below. But because somebody else is also trading in the same script so the price will get  impacted accordingly. Now because you ha
Read more