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

Front-end State Containers: Effective Selection

By -
Image
In today’s frontend ecosystem, there is an overflowing ocean of state containers and every developer is sailing with one or the other state container. State container is like an abstraction which helps in managing application state. If you are not aware of what a State container and State is then stop here, and read this blog before continuing. In this tutorial, I’m going to show you how to create a simple “ ToDo” app in React using some of the popular state container choices like, Hooks , Redux , Mobx , and setState . Let’s get started. Quickly, see what we are going to build, I divided the ToDO application in three-part 1.     Add Item – this will add a new item in the to-do list 2.     Item List – this will compose a list of Items and display ToDo and Completed List 3.     Item – leaf level component which has a.     Checkbox b.     Item text c.      Delete 4.     Filter component – take user input and filter out the list accordingly, we would be reus
Read more