React also works with the HTML5 syntax, but you should keep in mind that screen readers can only interpret it optimally if instead of empty
-Container React Fragments can be used.
return
text
};
export const FragmentExampleShort = () => {
// this is the short syntax for React.Fragments
return <>
text
>;};
Listing: Example of using fragments in React
For interpretation on different devices, it is essential that the technologies can be used across platforms. This basic requirement is met by all three frameworks. Nevertheless, there are use cases in which the use of a framework with a certain specialization has proven to be useful.
For projects whose scope is limited to a single-page application, the use of Angular is suitable. This framework is known for partially updating a page when a user interacts. An application as a multi-page application is therefore possible, but not recommended.
If cross-platform development is desired, deployment on the web as well as mobile and desktop applications can be done via React. If you are focused on developing a small project with the highest possible performance, Vue.js is the most suitable option for creating progressive web apps.
Vue performance overtakes React and Angular
Performance is an important indicator of a good user experience (UX) of a website. This is characterized by short loading times and fast user interaction. To ensure this, both React and Vue.js use the virtual Document Object Model (DOM). This allows applications of any size to be rendered quickly when the content is partially changed.
Vue.js combines this technology with the principle of bidirectional data binding, which Angular also uses to deploy content that is only updated when the view changes. Although the loading process is slower, bidirectional data binding offers the advantage of synchronizing the view and data model in an automated and error-free manner, without the need for additional logic.
Representation of bidirectional data binding in Angular and Vue.js: Angular offers a directive “NgModel” for synchronizing the input within the input field “data” with the output within the p tag. Vue.js uses the directive “v-model” for this, analogous to “NgModel” in Angular.
(Source: Author)
Another aspect that affects performance is the framework size, which the following section compares in the “zipped and minified” size specification.
Due to many pre-installed features, Angular 2 is the heavyweight in the frontend frameworks category at around 111 KB compared to React and Vue.js.
React also sees itself as a comprehensive library that can be supplemented as required, for example with any React UI library such as “React Boostrap” or state managers such as Redux or MobX. Based on React 16.2.0 and react-dom, the size of the framework is approximately 32 KB, making it significantly lighter than Angular.
Considering that Vue.js can be scaled depending on the application, the performance of this frontend framework is the fastest, measuring around 23 KB (version 2.6.10). Basic functions such as state management are already included and additional features can be added as needed, which keeps the bundle size as small as possible.
SEO optimization
Development based on modern front-end frameworks now combines both the efficient rendering of simplified JavaScript and the possibility of optimization for search engine optimization (SEO). One possible approach for SEO optimization is to create an isomorphic application. In the JavaScript context, this means combining client-side and server-side rendering.
export default function Page({ data }) {
// Render data…
}
// This is called on every request
export async function getServerSideProps() {
// Get data from external API
const res = await fetch(`https://…/data`)
const data = await res.json()
// Pass data to the page via props
return { props: { data } }
}
As a very extensive library, React offers better basic requirements in the area of SEO than Vue.js. In Vue.js, it is necessary to reload modules such as vue-meta or vue-router. The meta tag management offered by these modules, which leads to faster indexing, is already available in React. Since version 11, Angular has provided SEO-friendly features, but is limited by the loading speed.
Combination options with other frameworks
Modern front-end development now includes a number of options to make development itself more pleasant and productive. In addition to the extension for SEO optimization, other JavaScript libraries or CSS frameworks can be integrated. These include cross-framework CSS frameworks such as Bootstrap and Tailwind CSS as well as framework-specific CSS frameworks. In addition, component libraries can be used to provide the design, documentation and functions of the components within a project, such as Storybook.
There are few barriers to combining React or Vue.js with other JavaScript libraries or projects. Vue.js allows, among other things, the combination of libraries such as Vite (build tool) or Vitest (unit testing framework) and self-contained libraries, for example Pinia (store library).
React, Angular and Vue.js offer the advantage that they integrate other extensions and their modular structure allows them to be integrated into other projects, for example in the form of web components.
Modularity, maintainability and testing
One of the most well-known features of the frameworks considered is their modularity. This ensures that all three are easy to maintain, which makes it easier to centrally maintain the code base in the project and thus update and revise the components. However, there are differences in the structure.
As a component-based library, React offers a high degree of flexibility and adaptability according to project requirements. The components are responsible for providing the user interface and functions. Styles are outsourced by default. In Vue.js, the user interface and functions are mapped within the modules, similar to the structure of React, while the styles are located separately.
Example of how to build a React component
(Source: https://react.dev/learn)
Example of how to build a Vue component
(Source: https://vuejs.org/guide/essentials/component-basics.html#defining-a-component)
Angular stands out from these frameworks in that components are divided into styling, templates and functions according to best practices. The modules themselves, like the entire app, are structured in the form of a JavaScript file as a bootstrap and subfolders for configuration and view. Adding and modifying the behavior within the elements is done via directives that have access to the template in the form of classes.
selector:’app-component-overview’,
templateUrl:’./component-overview.component.html’,
styleUrls: [‘./component-overview.component.css’]
})
export class ComponentOverviewComponent {
/* … */
}
Another advantage of modularity is testing at the component level. This includes end-to-end tests, integration and unit tests, and code quality assurance using linters. All three frontend frameworks offer a selection of testing tools such as Jest for unit tests, which make it easier to develop a trouble-free user interface in the frontend.
Learning curve and documentation
Another important tool in software development is documentation. With an active and responsive community and the support of Meta, the regular updates and tools for React receive extensive documentation.
New versions and features of Vue.js are documented by founder Evan You. The lower popularity of Vue.js worldwide suggests that the developer community is smaller than that of other front-end frameworks. Very detailed documentation by Google and a large community speak in favor of using Angular.
But what about the basic requirements for learning the JavaScript frameworks? In general, the focus is on using TypeScript. Therefore, developers should already be familiar with this JavaScript superset when using it. Nevertheless, React, Angular and Vue.js still support ECMAScript 6.
Learning the frontend framework Angular is very challenging due to its complexity and often provides several solutions provided by the framework itself. The project setup is complex. React requires more learning effort than Vue.js due to the JSX syntax. However, it is considered easier to learn than Angular. Vue.js is based on the simple syntax of HTML and JavaScript: JavaScript code, templates and CSS are not mixed together.
Comparison of the syntax of React, Angular and Vue.js.
(Source: Author)
Basically – as is known from other technologies in software development – it requires continuous training of developers in order to develop projects at the cutting edge.
Priorities determine the framework choice
This table shows in abstract form which properties each frontend framework offers. The symbol “+” means that the property is completely fulfilled, an “o” means that the property is fulfilled but not optimized, and a “–” means that the framework does not meet this requirement.
(Source: Author)
Frontend frameworks have become established over the last few years for good reasons. However, which framework is interesting for which use case depends on many factors.
If the project is very functionally extensive, Angular or React could be an option, as a high range of functions is already provided initially. If the focus is on high performance, then Vue.js is recommended.
If the focus is on high response and support, React could be a good compromise between functionality and performance.
If a very experienced development team is to develop an enterprise-level application with a full range of functions, they will most likely choose Angular.
To choose the framework, it is therefore essential to consider the priorities in the specific project.
