Web App Architecture

The first part of any project is choosing a framework or library. Back in the early days, we had jQuery and Lodash as a handy utilities. Today we have frameworks and libraries – React vs Angular vs Vue. Vue is a lightweight version of Angular. Other frameworks include Svelte, SolidJS, Lit, Ember, and Alpine.

LogoAngularReactVue
ArchitectureAngularReactVue
TypeFrameworkLibraryProgressive Framework
MaintainerGoogleFacebookCommunity
NPM Weekly Downloads2,898,98223,845,0994,781,868
External Dependencies1 tslib1 loose-envify7 @babel/parser, entities, estree-walker, source-map-js, magic-string, postcss, csstype
LicenseMITMITMIT
Open Issues1,302714356
Closed Issues26,05412,1959,658
Github Commits30,19218,7363,591
Github Releases377101248
Github Latest Releasev17.3.9
May 15, 2024
18.3.1
April 26, 2024
2.7.16
Dec 24, 2023
Github Earliest Release11.0.0-next.0
Feb 11, 2021
(should be 2.0.0?)
0.3.0
Jul 2, 2013
0.6.0
Dec 7, 2013
Release Frequency3 days39 days15 days
Comparing architectures

Looking at the stats, they are all pretty similar. Everyone uses an MIT license. They have a long history, many commits, and many releases. React has the most downloads. The fact that Angular and Vue combined don’t even come close to React in the past week is saying something…

Comparing Weekly Downloads in the millions
Weekly Downloads as a Pie Chart

If it’s a popularity contest React blows everyone else out of the water. Vue is outpacing Angular by 65%, and React outpaces the combination of both at 200%.

Looking at the past five years of keyword search trends, we see a similarity. Reacts popularity is well above Angular, an Vue. Just for comparison, I also added jQuery to see its gradual downward trend.

5 Years of Google Trends

The code base of each framework has many commits. Angular at 30K, and React at 18K, and Vue at 3K. Angular and React appear to be more mature.

With a release frequency of 3 days on average (more recently every 7 days), Angular becomes outdated fairly quickly and needs constant attention to keep the package up to date. It’s had 18 releases in this year alone, and it’s only May. This could be good or bad, but given an average 39 day window on React, less time is spent updating the web application and addressing potential conflicts since the framework is more stable. Conflicts usually arise with major releases, sometimes minor releases, and rarely with patches, so its not as bad of an issue with only 4 minor release changes. But still, the spammery to keep the project up to date can feel like a time waster. In contrast, React is a bit stagnate where the release prior to 18.3.0 was almost 2 years ago. With such a long duration, concerns arise on the turnaround time for bugs or major security vulnerabilities if one were discovered. Vue hasn’t seen another release since December.

ReleasedReactAngularVue
5/15/202417.3.9
5/8/202417.3.8
5/1/202517.3.7
4/26/202418.3.1
4/25/202418.3.017.3.6
4/17/202417.3.5
4/10/202417.3.4
4/3/202417.3.3
3/28/202417.3.2
3/20/202417.3.1
3/13/202417.3.0
3/6/202417.2.4
2/27/202417.2.3
2/21/202417.2.2
2/14/202417.2.1
17.2.0
1/24/202417.1.1
1/17/202417.1.0
1/10/202417.0.9
Most Recent Release Prior to 2024
12/21/2117.0.8
12/24/20232.7.16
6/14/202218.2.0
Releases during the year as of May 21, as well as the most recent release prior to the start of the year.

Let’s look at the general look and feel of the code itself with component party. Generally I don’t like the syntax of many of the frameworks. Some are so simple that it looks like raw HTML & JavaScript. It’s hard to see why doing vanilla JavaScript isn’t any better. Solid.js seems similar to React, but it has some key differences where your JSX elements are functional (ie <For> loops). Angular attempts to keep templates separate from the code, keeping in line with Model View Presenter (MVP) pattern/architecture.

I think my bias is kicking in here. I’ve worked with Angular in the past. The problem at that time was that Angular was exceptionally slow. When I joined a project, it had combined both AngularJS and React. This feels like a Frankenstein approach as I’ve never heard of anyone combining the two frameworks before or afterwards. React had a ShadowDOM that allowed it to run must faster. Angular wasn’t used for anything to do with presentation. It was a difficult system to work with, but I was able to master it. I’ve worked on some small projects with Angular since then, but nothing major. I even upgraded an old AngularJS project to Angular. I am not a fan of how it splits templates away from the logic. I’ve seen one project where they kept the templates in another folder, further separated from the logic behind the templates. I just don’t like the maintenance overhead of keeping the logic of your views separate. I understand the idea of separation of concerns (SoC), but in MVP, the views logic is often tied specifically to the view. If you are doing complex calculations or processing data – that should go into your business logic layer such as selectors (redux), or in the logic that interacts with data going to/from the server (saga).

Most of my work since then has been with React, which lead into React-Redux, and Redux-Saga. I’ve become fairly comfortable with React.

This is getting to be a “use what you know” situation. React is the most popular framework by a landslide. I much prefer the JSX style of combining JavaScript and HTML code. I already know how to lazy load components, so code splitting is going to be a breeze. ThreeJS already has a react component (react-three/fiber) supporting it. I don’t need to learn anything new in terms of the framework if I stick with React.

So what do we have

  • Current Developer is most fluent in React
  • React is more popular than Angular
  • Vue is a lightweight version of Angular
  • React is downloaded from NPM the most (React 76%, Angular 9%, Vue 15%)
  • React & Angular have a large support community
  • React & Angular maintained by well established companies Facebook & Google
  • Vue, React, & Angular licensed under MIT
  • Vue has 7 dependencies outside of its own packages where React and Angular only have 1.
  • React feels stale with releases every other year.
  • Angular updates weekly.
  • React and Angular have about 5% open issues. React with 714 (198 bugs) and Angular with 1,302 (52 bugs).

Both React and Angular are fairly popular and mature.

This is coming down to a personal choice. From a business perspective, React is the way to go since the resources “Me” is more comfortable with React.

Pushing myself to get updated with Angular would add another tool to my belt – but is there a payoff? My experience with the poor performance of Angular in the past with the Frankenstein workaround gives me a bad vibe. Staying with React improves production.

With all of the other stuff in the tech stack that I’m pushing the envelop on, I don’t want to make the project any more difficult than it has to be. I believe I will stick to React.

Discover more from Lewis Moten

Subscribe now to keep reading and get access to the full archive.

Continue reading