New Vaadin, Angular and React comparison tool
Tags: vaadin, react, angular, comparison
Published: 2020-07-09 16:44:05

---
title: New Vaadin, Angular and React comparison tool
published: true
description: This new tool lets you compare popular frontend frameworks side-by-side with code snippets and a complete full-stack example app.
tags: vaadin, react, angular, comparison
canonical_url: https://vaadin.com/blog/new-vaadin-angular-and-react-comparison-tool-available
---

One of the most natural ways of learning for us humans (sorry, Google bot) is to compare new concepts we come across with something we already know from before. 


> _"What's a dosa?"_-- It's like a savory Indian crepe made with fermented rice and lentil dough and filled with deliciousness. 


> _"How is the new Mac different from the current one?"_ -- It's going to feature a new ARM-based processor architecture, but it will still run the same software. 


> _"Is Finnish similar to Swedish?"_ -- Hahahahaha. [No](https://www.theguardian.com/education/gallery/2015/jan/23/a-language-family-tree-in-pictures).

By using something you already know as a reference, you pick up new knowledge and skills faster. You reuse your existing mental frameworks to give context and meaning to new information, perhaps even deepening the understanding of things you already know. 


## A new web framework comparison tool for fast learning

The most common question I get when introducing Vaadin to new developers is, _"How does Vaadin compare to &lt;the framework they are using>?"_ 

It makes sense. The fastest way to make sense of Vaadin is to relate it to the framework they're already familiar with: what's similar and what’s different?

With that in mind, I created a new web framework comparison tool that lets you compare the code for accomplishing everyday programming tasks in three popular web frameworks: Vaadin, Angular and React.

![Comparing the component models of Vaadin and Angular](https://dev-to-uploads.s3.amazonaws.com/i/klewelp3g06tgytl7q82.png)

_Comparing the component models of Vaadin and Angular._

You start by selecting a pair of frameworks: for instance, Vaadin and Angular. The tool then shows you side-by-side code examples to achieve the same thing in both frameworks. It includes:



*   Component model
*   Templating
*   Forms
*   Routing
*   State and rendering
*   Styling
*   Backend communication

The tool covers both Vaadin's Java component API and the new TypeScript-based web component API. You can even use it to compare the two if you're interested to see how they differ.


## Same app, four implementations

In addition to relating basic concepts, the comparison also walks you through an example full-stack application built with each framework and a Spring Boot Java backend. 


![Vaadin TypeScript app running in GitPod, an online IDE](https://dev-to-uploads.s3.amazonaws.com/i/9wdc4qk8n71uyjl481o7.png)
_The Vaadin TypeScript app running on GitPod in a browser._

You can try out the projects right in your browser using [GitPod](https://gitpod.io/), or clone the GitHub repo and run them on your computer. 

👉 **[Go to the web framework comparison](https://vaadin.com/comparison)**

(Originally published on the [Vaadin blog](https://vaadin.com/blog/new-vaadin-angular-and-react-comparison-tool-available))