Having explored "Hello World" boilerplates created with Vue.js, Stencil.js, React, and Angular for IST 402, certain similarities and differences among some of JavaScript's most popular frameworks came to the forefront. In this post, I will also provide feedback on my choice between the four when it comes to developer experience.
Similarities and Differences
The most striking similarity between the four boilerplates I investigated was the significant number of dependencies they required. Prior to running any of the boilerplates, npm install was followed by a long series of dependency installations, and a new (and very large) node_modules folder within the project files. Once this was complete, though, all of the boilerplates were able to run locally and presented a similar webpage experience. As all of these projects run, at some level, on JavaScript, they also maintained a fairly similar file structure: an index.html file that maintained the markup that would display when the application was run, as well as package.json and ReadMe files.
A significant difference between the four boilerplates is where they get their logic from for the base page. In Stencil's case, this actually a TypeScript file--not JavaScript--and is located in the same folder as its index.html. The other three, on the other hand, utilize JavaScript as their main driver for the logic of their pages. However, where this JavaScript is stored varies, and in the case of Vue.js, it is combined with HTML tags in a special file type that has a .vue extension. Another noteworthy difference here is that Stencil is actually not technically a framework, despite me noting it as one for the sake of simplicity. Rather, it is labeled as a "toolchain," which can be used to create web components in conjunction with many popular JS frameworks.
Developer Experience
Of the four boilerplates, I found the React project to be the easiest to get going. Whether this was good design by the creator of the boilerplate I had tested or just React's intuitive nature, I noticed that getting the boilerplate up and running was very easy. This, compared to the amount of dependency-checking and messing around I had to do with Angular and Vue, was a breath of fresh air. Having never used it before, I appreciated that React had everything I needed to make changes to the main page encapsulated into one folder. In a similar vein, I noticed React seems to have a large community of support behind many of its components and dependencies, which would have been helpful had I run into any issues getting my code to run.
Which would I choose?
Despite what I just said about React, given the opportunity to begin building an app on impulse I'd choose to work with Stencil.js. It was almost as easy as React to get up and running, and I think it'd be easier to manipulate past the "getting started" phase of working with it. Stencil's prioritization of web component compatibility is really attractive given how tough it can be to ensure all users can view your application. Further, the added accessibility that Stencil provides due to its ability to be embedded into other web frameworks also seems to add a useful level of flexibility. Although I do not know TypeScript, which it relies on for its logic, every option would have its adjusting due to the amount of jargon the other frameworks employ.
*These conclusions were reached based on the research performed by my team and the boilerplates that are located in this GitHub repository. I located my specific boilerplate, which was written with Vue.js, here.
Top comments (0)