Don’t you like a good fight? A fight between say evenly matched opponents? What if the fight is between not two but three opponents? Similar to those infamous WWE 3-way, championship pay-per-views! Today’s match is between Angular vs. React vs. Vue…
It’s a known fact that the mortgage industry’s technology quotient lags behind when compared to most other industries/sectors. However, this scenario is quickly changing in the last few years owing to a swathe of young, enthusiastic, and energetic companies sprouting up catering predominantly to this sector.
Rise of the Mortgage Apps
In recent years, mortgage apps are on the rise. Several home-buyers are millennials and the lenders are well aware of this fact. Millennials need faster loan processing, approval, and delightful experiences throughout the loan cycle.
Deciding the Framework for the Applications’ Front End
Deciding the framework for the front end of these applications, such as LOS (Loan Origination System) and POS (Point of Sale) apps, etc., is a crucial aspect that determines the success of its implementation and its consequent success or failure.
Findings Based on Current Mortgage Apps’ & Market Scenario Analysis
So, let’s dive deep… I analyzed a few of the mortgage apps currently in use and the mortgage market scenario and these are our findings:
- Most mortgage apps are data rich.
- Most mortgage app users’ tasks are time-sensitive and time-bound.
- Most apps have multiple forms, which require a lot of validation and sanitization for the data.
- Every app needs high security as they’re dealing with sensitive user data.
- Developers, who had mortgage domain knowledge, continue to be in short supply.
- Due to frequent changes in mortgage regulations, mortgage apps should be easily extensible, maintainable, and flexible.
Then, I translated them into technology-specific requirements to choose the right framework:
- The framework should be lightweight and performant.
- The framework should be snappy and reactive.
- The framework must support data validations and sanitization.
- The framework must be secure.
- The framework’s learning curve should be short.
- The framework must be extensible, maintainable, and flexible.
Correlation Between Findings & Requirements for Choosing the Right Framework
|Findings Based on Current Mortgage Apps and Market Scenario||Tech-Specific Requirements for Choosing the ‘Right’ Framework|
|Data rich||Should be lightweight and performant|
|Time-sensitive and time-bound tasks||Should be snappy and reactive|
|Multiple forms, which require a lot of data validation and sanitization||Should support data validations and sanitization|
|High security||Be highly secure|
|Domain-specific developers in short supply||Have a short learning curve|
|Easily extensible, maintainable, and flexible||Is easily extensible, maintainable, and flexible|
From this correlation, I narrowed down the entire list of available front-end frameworks to three: Angular, React, and Vue! These three frameworks made it to the three-way championship match!
So, let’s see how they match up against one another…
|Requirements||Who’s the ultimate winner: Angular, React, or Vue?|
|Should be lightweight and performant||In the beginning of this fatal three-way match, React and Vue have a significant upper hand over Angular.
React and Vue perform significantly better than Angular because of the underlying code
implementation of these frameworks.
Vue and React rely on a concept called virtual DOM (Document Object Model, basically the browser's meta data for rendering the actual page on screen). Herein, all changes to the actual DOM is diffed out and only the delta is used for modifying the actual DOM.
Did you know?
Modifying the DOM is a costly operation with regard to computation and you need to minimize the changes/operations on it for the application to appear snappy for the user.
Angular relies on a more primitive implementation wherein DOM is updated every cycle. Please note that optimizations are available for this but then they’re not out of the box!
Who wins between Vue and React?
Between Vue and React, Vue wins as it's lighter and more performant than React.
Note: Please go through the URLs provided at the end of this blog post to test the performance of each framework based on exactly similar requirements. Evaluate who comes up on top yourself!
|Should be snappy and reactive||Vue and React win hands down in this battle against Angular. So, it’s a tie between Vue and React in this Round due to the same reasons as given above!|
|Should support data validations and sanitization||Round three throws in a surprise… Angular comes out on top here with a potent chokeslam, which Vue and React never saw coming!
Angular has an inbuilt module named forms, which as you might’ve guessed, is used for building interactive HTML forms.
How Forms helped Angular win?
Angular's implementation of the Forms
module was so impressive that it was a breeze to add validations and sanitizations for the form data quickly and effectively.
Though there are similar external modules available in React and Vue, the fact that this module came as a part and parcel of the framework made all the difference.
Flux concept in React and Vue
But, if I play the devil's advocate, Vue and React emphasize on using the flux concept for modifying all data and paraphrasing it in simplistic terms.
Basically, flux architecture states that all data needs to have a single source of truth and should be non-mutable.
Any mutation is recorded as an implication of a corresponding action, and therefore, any data changes can be easily tracked and played back. This makes it very easy for programmers to debug or trace any issue as every mutation can be traced back to its source. This is a very compelling feature for a data-sensitive application, wherein accountability has to be maintained.
So, if accountability is an important parameter, React and Vue can stage a wonderful comeback in this round!
|Be highly secure||Overall, all the three frameworks have excellent security features built in.
But, I would wage my bets on Vue to win this round after a tough match versus Angular and React.
Vue is completely open source. This makes it easier for folks to evaluate it for security holes and then plug them as and when needed.
As Angular is backed by Google and React is backed by Facebook, there is always a small chance that they can change the license any time they want! Please remember that this has already happened in the past and even though they reversed it, there is absolutely no guarantee that it won’t happen again! Ahem, look at what Oracle did to Java! Cough!
IMHO the framework should be truly independent of any major backers for it to stand the test of time. Therefore, Vue wins this round by a fair mile!
Did you know?
The chief developer behind Vue is Evan You, who’s an ex-Google engineer! I give Vue extra brownie points purely due to this trivia!
|Have a short learning curve||Based on my own learning curve and few of my peers’ views, I declare Vue to be the easiest of all three frameworks to learn and master!
Well, the amazingly extensive, detailed, and simple documentation given for this framework makes it super easy to learn and master.
What about Angular?
I rate Angular to finish a close second and the loser will be React.
IMHO React and Angular are a bit rigid when it comes to implementation. In a way, that rigidity might be good because when the code base becomes larger, it’s easier to read it when there are only few ways to implement anything.
Also, I felt that Angular code might be the most maintainable primarily because of the application structure it enforces and its usage of static typing (typescript base). This aspect might even favor Angular’s usage in larger organizations.
What about React?
React is also a bit rigid and offers little flexibility for coding. I felt that the framework also had a lot of scaffolding requirements.
It was definitely a hassle to set up a personalized development environment. Please note that I didn’t use the boilerplate/starter kit as I wanted to understand setting up the framework from scratch.
Vue is definitely a breeze to use and set up. Within half a day, I had the confidence to build a complete app using Vue.
|Is easily extensible, maintainable, and flexible||
Round six is where things get murky. I couldn’t come up with a clear winner as all three frameworks have pros and cons, which are hard to ignore!
Personally, I feel that Vue is slightly more effective as its components are built to be compliant to web components, which is the future standard.
Otherwise, all three frameworks are easily extensible and maintainable.
React scores less on the flexibility aspect whereas Vue scores high here due to its inbuilt support for templates and jsx, etc.
React scores high in terms of being easily maintainable as it has lesser breaking changes across all the versions.
Test the Frameworks on being Lightweight and Performant
Here, are few sample apps created using various frameworks. Check each one’s performance in action…
Note: The app simply renders a list of 10,000 elements with a corresponding input box, which is tied to the row element for modification.
My Final Conclusion
- Choose Vue if speed, efficiency, and snappiness is what you value more.
- Choose React if you want to rely on its huge community.
- Go for Angular if you want code maintainability in the long run or if you have large teams.
So, what do you think? I would appreciate your views, comments, points, and counterpoints to my conclusion here. At Brimma Tech, we’re always game for healthy debates!
Please note that the views, thoughts, and opinions expressed in this blog post belong solely to the author, and not necessarily to the author’s employer, organization, committee or other group or individual.