Boilerplate Commonalities & Duplicates
Each of the boilerplate repositories our group selected for Angular, React, Vue, and StencilJs includes the same basic developer tools to get up and running with a bare-bones environment. This includes a basic README file detailing basic commands of how to run your local project, and each boilerplate comes ready to serve a local web server with a single command. The boilerplates each possess a package.json file detailing what scripts are available and which dependencies are installed to run your boilerplate. One crucial detail that jumps out to me is the fact that each of the boilerplate's file hierarchies are nearly identical. There are separate folders for app files, assets, components and server code which makes for a very simple and consistent experience between frameworks. It is interesting, however, to see that the React, Vue, and StencilJs boilerplates keep all of the corresponding html, css, and tsx files of a component in unique component directories, whereas Angular dumps all of the component and routing files into one large folder. It's a stylistic choice but still interesting to note.
There is some overlapping functionality with the basic features you would expect to run out of the box commonly from a boilerplate. Each of the boilerplates comes with some form of testing support. Our Angular boilerplate supports running both unit and E2E tests, the React boilerplate supports general testing, Vue supports general testing depending on your customized preferences, and StencilJs supports running unit tests as well. It's good to note that each boilerplate comes with a basic "Hello world" component that shows you the basic structure of how a JavaScript or TypeScript component is exported, imported into the main app file, and rendered to the browser.
The React boilerplate uniquely comes prebuilt with a number of its own components to use, including buttons, lists, and toggles. Our Angular boilerplate includes route handling by deafult, which is not included in the other framework boilerplates.
Best DX
In my opinion, it appears that the React Boilerplate has the most convenient, scalable, and development-ready experience of the four frameworks. Literally touting itself as having the "best DX", the repo created by Max Stoiber and a number of maintainers comes prebuilt with support for hot reloading, i18n, offline-first development, continuous integration (TravisCI), SEO support, among many other advantages. You will have to deal with a much bigger project and bundle size up front every time you create a new project, but it has all of the functionalities you could need to get started with your next side project. It does not appear to be actively maintain for the latest version of React, but it is certainly the most feature-inclusive. It even has linting, prettier, and webpack fully included.
What I would pick for my next side project
If I were not in my last semester of school and wanted to learn a framework while working on a fun side project, I would likely select React for a full-stack verbose application that integrates many pages and makes a high number of API calls. It is clear that the React boilerplate has had the highest number of people working to support it (at least when it was actively supported) which can really make the difference when you want a quick plug-and-play experience. The fact that it already has "100% test coverage" and support for SEO and native web apps is a real game changer, as I know how tedious those elements can be to get running after dealing with numerous dependency versioning conflicts.
Despite this fact, I think it is also important to highlight the StencilJs boilerplate as a very intriguing option for projects focus on learning and/or leveraging fast web components. For one, I am the least familiar with Stencil out of the 4 frameworks we considered. The Stencil boilerplate stands as a compile-time tool with TS, JSX, and lazy-loading support which are all really nice to have. I am most curious about exploring the universal web component idea that Stencil is built around. It sounds like it is a framework's version of open-wc or vanilla JS web components, which likely means a Stencil-based app would be very fast and performant. In addition to this, the offering of Server Side Rendering means that active users of the application would have a very responsive development experience since the entire page is downloaded during the first site visit.
Our organization's boilerplate repo: boilerplates
The StencilJs "Getting Started" boilerplate I selected: StencilJs - Getting Started
(This is what I would select first if I were attempting to learn StencilJs for the first time)
Top comments (0)