Comparing Popular Web Component Frameworks
Published: 2021-09-12 18:10:00

This week in class, we made a GitHub repo consisting of 4 "Hello World!" projects for Angular, React, Vue, and StencilJS. Today I'll be comparing their approaches to front-end development and choosing which I think is the best for building a web application.
{% github PenStat/boilerplates %}

## Similarities
1. Each framework (I know Stencil isn't a framework, but for simplicity we'll say frameworks) except Vue has a `/app` or `/src` directory for the code. These folders always contain the HTML, CSS, and JavaScript that makes the component or web app run. In the Vue boilerplate this is just in the base directory. 
2. Dependencies. Dependencies. Dependencies. Because we're working on the web, there's always a ton of dependencies and long installs, although some are longer than others. React and Angular both take forever, while StencilJS and Vue are quick.
3. Stencil and Angular both use TypeScript, while Vue and React don't. I'm pretty sure any of these could use TypeScript, but it's interesting to include TS in your boilerplate. I don't know any TS, so it just adds confusion when trying to understand a new framework. 
3. React, Stencil, and Vue have some JSX, but none in Angular. From what I can understand, I don't see JSX being used in Angular, but every framework I come across uses JSX nowadays. I'm guessing Angular might just be too old for that.
4. The React, Angular, and StencilJS boilerplates have routing or back-end code added in. This is nice to have for a new project, so you don't have to write it from scratch.

## Easiest to get started with
I would have to say the easiest to start using would be Vue. From what I know about Vue and can see in this boilerplate, it's very simple and easy to begin with. You don't have to know a ton of JavaScript or TypeScript to make little components. Angular would definitely be the hardest to start, since there are a ton of packages and files plus TypeScript involved. Although React has some similarities to Angular in folder size and structure, this would be the second easiest to start just because there are so many people using it. You can find React examples for just about anything now, whereas Vue is still gaining adoption. 

## Which would I choose for building a web app?
I would have to go with React for a serious web application. Although Vue, and I guess Stencil, are easy to get started, I don't know much about scaling them for a full site. Also, there will be less examples of them online. Then we have the choice of Angular or React which are pretty closely related: backed by big companies, used on a ton of sites, lots of documentation/examples, lots of dependencies, and large, complicated file systems. I choose React here only because I don't know TypeScript, and I like JSX. I don't want to learn another templating language, and I have no plans to dive into TS anytime soon. I also like React's file structure, since the pages, components, and server are all separated out the gate. With these choices in mind, I think I could scale a site with React pretty easily and have a lot of support online when I run into problems.


To get the Angular boilerplate, I followed the docs here: https://angular.io/cli