Back in issue 326, I wrote a tutorial
on how to build a one-to-one chat
application with Angular. Since then I
have built out the project in both Vue
and React to see how it would compare.Versions used
O Angular: 8.3.5
O React: 16.11O Vue: 2.6.10Stability
All three frameworks were capable of
creating the app without any issues and
were all very stable versions. Even if I
enhanced the app by adding things like
group chat, I believe they would still all
be as stable as each other.Differences
The main changes were the syntax
and the structure. A lot of it is down
to the developer and what they are
comfortable with. I also don’t think there
was a lot a difference in terms of time.
The flexibility in structure with React
and Vue wasn’t really an advantage, I did
prefer the structured nature of Angular;
however, some people may prefer that
flexibility. Angular had its own Firebase
solution called AngularFire but, again,
this didn’t have any bearing on time.Size
The file size with Angular was larger than
React and Vue. I don’t think this is a huge
problem because of web speeds today
and all three frameworks are constantly
looking at optimising their solutions.Support
During points of the project, I decided
to do some research on particular
areas that people may struggle with.
In all cases, I found answers on Stack
Overflow and on dedicated forums.All three frameworks have undergone
changes since their releases but one thing that’s
critical to understand is the syntax
Building a project
in Angular, React
and Vue
How does the syntax of
the frameworks compare?
All three frameworks have undergone
changes since their releases but one thing
that’s critical to understand is the syntax
and how it differs. Let’s have a look at
how the syntax compares when it comes
to simple event binding:
Vue: The v-on directive is used to attach
event listeners that invoke methods on
Vue instances. Directives are prefixed
with v- in order to indicate that they are
special attributes provided by Vue and
apply special reactive behaviour to the
rendered DOM. Event handlers can be
provided either inline or as the name of
the method.