This series compares my "getting started" experience and initial impressions of using React, Vue and Angular as a web developer already familiar with typescript and some frameworks. In this post, I will take a look at the websites and documentation.
The three most popular front-end web frameworks at the moment are most likely(*) React, Angular and Vue. My experience of modern JavaScript frameworks is mainly on Aurelia. I have been following the scene and listening to talks and podcasts about React and Vue, and used AngularJS few years back, but until now I haven't actually tried using any of the three.
In this series of posts, I compare the initial experience of using React, Vue and Angular, including:
- 1) The website and documentation <-- You're here
- 2) Setting up the first project
- 3) Building and composing components
- 4) Handling data and interactions -- (coming soon)
- 5) Tools for running and debugging -- (coming soon)
Instead of following tutorials or copying sample code, I will take an approach that feels more practical from my perspective. I will figure out how to solve several technical problems in a business context that I'm familiar with. This allows me to compare the features of the three frameworks as well as how easy they are to learn while solving the problem at the same time. I use TypeScript and VS Code, as I would when working on an actual project.
*) See for example The State of JavaScript 2019 and Top JavaScript Frameworks and Topics to Learn in 2020 and the New Decade.
Websites
Although the website of the framework might not be the most exciting aspect to compare, it is nonetheless an important one. The quality of the documentation and the website makes a big difference when trying a framework for the first couple of times, and later when finding solutions for more specific problems. The documentation experience can easily be the thing that tips the scales when deciding whether a specific framework is for me or not.
Below is my personal experience using the website of each of the frameworks during this series, but the goal is to bring up details that are useful for others in a similar situation.
React
React has an excellent website in all the ways I can think of. The home page has clear buttons to get started with coding or learning, links to documentation and other resources, a bit of information about React, and interactive code samples for the key features.
The React website has two sets of tutorials, one for learning by doing and another with a step-by-step guide to React features. The approach works well for me: I can search for best practices for specific problems from the first tutorial, and examples of using specific features from the second one. The writing style of the tutorials is very learning-oriented and easy to follow as someone new to React.
The only problem with React documentation is that when using TypeScript, I often need to find other sources for examples and explanations. Luckily there are some really good resources like React TypeScript Cheatsheets, and articles such as Stefan Baumgartner's series on TypeScript and React.
The tutorials and the main concepts don't mention hooks at all, so to learn about them, I have to check the Hooks-section of the documentation, which is all the way down after API Reference. Based on what I learned after using React for a while, and with a help of a friend with more React experience, I think it is something that could be introduced earlier.
The API reference on the website is not the best for searching details about a specific function in the API. But when working with React, more than a concise description of the interface, I usually needed an explanation of when and how it should be used. For that, the API reference works well.
Search works nicely and shows the hits clearly as a preview. A working search also makes finding details from the API reference much easier, making the issues I mentioned earlier even less of a problem.
Vue.js
Vue.js has a clear homepage as well, but the content is not quite as easy to navigate. The guide is a bit heavy in text, although there is also a free video course for those who prefer a more structured way to learn Vue. The video tutorial looks excellent, but it is doesn't quite fit my purpose of quickly getting familiar with specific features and best practices. The documentation also links to a CodeSandbox example, several Scrimba lessons, and has a clever idea to use the browser console as part of the samples. Having options is really nice, but at times makes the documentation as a whole feel a bit fragmented.
The styleguide is a very welcome part of the documentation, although it still leaves me uncertain of the differences between different syntax options, especially when TypeScript is thrown into the picture. There is a page dedicated to TypeScript, but it doesn't cover everything, so sometimes I find it difficult to figure out how a sample in the documentation translates into TypeScript. Just like in React, other online articles like Writing Class-Based Components With Vue.js and TypeScript come in handy.
One difficulty I have with the documentation is that examples sometimes lack context. It is not always clear where the sample code should be put and in which file, especially when there are different options on how the components can be structured.
Vue website search looks and feels very similar to the React one. I'm guessing it has something to do with the Algolia logo at the bottom.
Angular
Angular has a clear and informative website, with a bit more focus on showcasing the capabilities of the framework from a less technical perspective. The documentation is very thorough and covers a wide set of features and concepts, which makes sense considering that Angular itself is a more full-featured framework, whereas React and Vue are mainly focused on user interface. Similarly to the React website, there is a sample-based tutorial and a fundamental concepts section. There is also a separate tutorial for setting up local environment, and a complete sample application on StackBlitz to explore.
The documentation feels very technical in some places, and uses a lot of framework-specific concepts even in the getting started tutorials. For example, this is from the beginning of introduction to the basic concepts:
"The basic building blocks are NgModules, which provide a compilation context for components. NgModules collect related code into functional sets; an Angular app is defined by a set of NgModules. An app always has at least a root module that enables bootstrapping, and typically has many more feature modules."
The page doesn't give any more details about terms like compilation context or bootstrapping, and the language is quite difficult to approach without at least some prior knowledge about front-end frameworks. And even with that, it takes more effort to get through when compared to the language used by the React documentation.
One clear benefit of Angular documentation over the others is that all the samples are in TypeScript. This makes it much easier for me to apply them in the project, and it gives confidence that I'm using it as intended when the information comes from the framework website.
The search function on the Angular website is much less impressive than its comparisons. Although it shows the section in which the result is in, there is less context so it is more difficult to see which search result contains the needed information.
Conclusion
All the three frameworks have very well thought through websites with comprehensive documentation. They cover the needs of different types of learners on different levels, and give the necessary background about the framework for those who are interested.
The one that stands out for me is the React website, which has very clear navigation, writing style that is really good for learning, and tutorials that are easy to follow.
Thank you for reading! In the next part of the series I will look into setting up a project.
Top comments (1)
Interesting approach! Thanks for doing this 🙂