DEV Community: Mikko Vuorinen

Comparing React/Vue/Angular "Getting Started" experience - Building and Composing Components

Mikko Vuorinen — Sun, 28 Jun 2020 15:36:31 +0000

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 go through creating and composing components.

The series consists of the following posts:

1) The website and documentation
2) Setting up the first project
3) Building and composing components <-- You're here
4) Handling data and interactions -- (coming soon)
5) Tooling support -- (coming soon)

Building and Composing Components

Most modern front-end web development can be described as component-oriented, but when it comes to implementation, the common ground is very small. Initiatives like web components have limited support in the most popular frameworks, and each framework has it's own flavour of components. In fact, it's probably one of the most important features to consider when deciding which framework to adopt.

Although components look very different in different frameworks, there is really no approach that is the best for all situations. Most of the time it's a matter of preference, but when deciding between frameworks, experience with multiple options is extremely valuable.

The application I'm building with each of the three frameworks is a wishlist services I named Listr. Visitors see a page that has a list of items, and they can reserve items or cancel their reservation. The idea is based on an existing service I have built and maintained. Links to the repositories are on each of the sections.

React

In React, a component is a function that returns a representation of the component's view. With a JSX extension to JavaScript, this representation can use a combination of HTML-like syntax and JavaScript expressions.

Using classes to define components in React is also possible. Because of my Aurelia background, I initially tried using the class syntax, but I soon realised that classes don't fit in well with React's approach. React limits the way objects and their state can be used, and classes don't behave the way I would expect them to. In my view it's better to use the function syntax.

React style for defining components as a function starts to feel natural fairly quickly. The structure itself is simple and straightforward, and coding is very slick thanks to great support provided by VS Code. There are several times when I need to google how TypeScript fits into the picture.

Creating component hierarchies is definitely one of the strong points in React, especially when using JSX syntax. Before trying it myself, I was quite sceptical about writing HTML in JavaScript, but with the right tooling, it's far from the string concatenation and escape character mess that I thought it might be.

Child components are defined as HTML-like elements in the return value of the component function. Below is an example of an Item-component that shows the item label, number of reservations, and two child components that represent buttons:

export const Item: FunctionComponent<ItemProps> = (props) => (
    <div className="listr-item">
        <span className="listr-item-name">{props.item.label}</span>
        <span className="listr-item-count">({props.item.reservedCount}/{props.item.count})</span>
        <ReserveButton />
        <CancelButton />
    </div>
)

Creating more complex structures within the component view is very easy because it can be done by using JavaScript:

return (
    <div className="listr-list">
        <h1>{props.name}</h1>
        {list?.items.map((item, index) => (
            <Item
                key={index}
                item={item} />
        ))}
    </div>
);

In short, creating components is where React is at its best. At this point, I'm starting to like writing React quite a bit, and looking forward to learn more!

Source code: Listr components in React

Vue.js

Vue.js components are a step closer to the MVVM style that I'm more familiar with. Although components can be written in one file, there is a separate view template and a script part (let's call it "view model").

The template syntax is fairly easy to follow, but documentation is needed to know how to handle ifs and loops and the like. Some of the small details are not intuitively clear, for example the restriction that {{}} cannot be used inside HTML attributes.

<template>
  <div class="listr-list">
    <h1>{{ name }}</h1>
    <div v-if="!!list">
      <Item
        v-for="(item, index) in list.items"
        v-bind:key="index"
        v-bind:item="item"
        />
    </div>
  </div>
</template>

The most confusing part with Vue components when starting to build the first view model is that there are several different styles to pick from. The Vue CLI generated the template using the class syntax and @Component decorator, but the documentation only shows the following syntax:

Vue.component('my-component', {
  // ...
}

This makes following the documentation sometimes a bit difficult, especially when TypeScript comes into the picture as well.

There is also significantly more boilerplate code required for defining comonents in Vue. For example, all child components need to be defined in the parent component definition in the components property of the decorator. Defining component properties requires a default value in the @Prop decorator to work, as the standard property default value will not work as expected.

@Component({
  components: {
    Item
  }
})
export default class List extends Vue {
  @Prop({ default: '' })
  name!: string
}

Source code: Listr components in Vue.js

Angular

Angular is still very loyal to its MVVM roots. Roughly speaking, the HTML template of a component represents the view, and the TypeScript part is the viewmodel. There is a lot of boilerplate code required to create a component, but well defined conventions and the CLI generators built around them mean that a lot of that can be automatically generated.

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html'
})
export class ItemComponent {
  @Input() item!: ItemData;
}

Angular components are defined as TypeScript classes, and follow the object-oriented programming style much more closely than React or Vue. There are some additional JS decorators that are needed to give classes and properties specific meaning, but it's quite straightforward to design an Angular application using classes and object. Even inheritance can be used, to some extent. This seems to me one of the most prominent differences between Angular and the other two frameworks, and I think it should play a key role when making the decision. Angular seems to be in this sense much closer to Aurelia.

<div class="listr-list">
  <h1>{{ name }}</h1>
  <div *ngIf="!!list">
    <app-item
      *ngFor="let item of list.items"
      [item]="item"
      (reserve)="handleReserve($event)"
      (cancel)="handleCancel($event)"></app-item>
  </div>
</div>

Using components and composing structures in Angular templates is quite easy, but one of my main complaints about Angular is the template syntax. There are several different ways of adding bindings or logic into the template, and they all seem to use different syntax. A very simple example already uses {{data}} for displaying data and *attr, (attr) and [attr] in the element attribute names. In my opinion, this makes the HTML template look messy and difficult to see the underlying structure.

On the other hand, the code in viewmodels is quite easy to follow without extensive experience using Angular. Being natively TypeScript is a big plus in my books, and core interfaces can be used to help with ensuring correct usage of the framework. The code is more verbose, especially when comparing to React, but it seems to be easier to separate the framework-dependent parts from the application logic.

Conclusion

Components are used in a similar way in React, Vue.js and Angular, but each have their own take on how the component view and logic is defined. A simplified way of putting it is to say that React is more functional, Angular is more object oriented, and Vue is in between. The reality is much more complex than that, but based on my initial experience with the three, I think it's not completely untrue.

Thank you for reading! If you have any feedback or questions, please leave a comment below. I would love to hear others' experiences on the subject.

Comparing React/Vue/Angular "Getting started" experience - Setting up the application

Mikko Vuorinen — Sun, 24 May 2020 15:16:45 +0000

The series consists of the following posts:

1) Intro + The website and documentation
2) Setting up the application <-- You're here
3) Building and composing components
4) Handling data and interactions -- (coming soon)
5) Tools for running and debugging -- (coming soon)

Setting up the application

Most front-end frameworks have several different ways of setting up a new project. That makes sense, because the project set up is one of the development aspects that can have vastly different requirements depending on the context.

Newcomers are usually looking for easy set up that doesn't require learning which transpiler, pre-processor or bundler to use.
Companies with numerous systems depending on the framework will appreciate tools for quick scaffolding, maintenance and upgrading.
Products built on the framework might require heavy customization to mold the set up to fit its needs.

My approach to the comparison is mostly the one of a newcomer to the framework, with previous experience from other frameworks and web development in general, and an additional requirement to use TypeScript. The goal is to get a complete, working application as quickly as possible, so I don't spend much time on online playgrounds like CodeSandbox or StackBlitz.

React

React documentation first suggests using a no-tool approach for setting up the application, by using a script-tag that directly links the website to the CDN used by React. Although not suitable for my use (as I need tooling for TypeScript anyway, and want to take advantage of React typings), it is a really quick and easy way to start using React. But for anyone planning to use that in production, I strongly suggest to look into subsource integrity for improved security.

The recommended approach for React application set up in my case seems to be the Create React App tool. When using TypeScript, I need to look a bit further in the Create React App documentation, but the process is still very simple. All I need to do is to run the following command:

npx create-creact-app MyApp --template typescript

This will create a project with the structure that you can see on my example project repository after scaffolding. It looks very neat, with most of the configuration hidden behind the react-scripts dependency. Having the scripts as a dependency also makes upgrading them much easier.

Documentation for this and other options for setting up a project is excellent. The Create React App documentation is on a separate website, but the main documentation has a link to it (although to the github repository instead of the website, which I find a bit odd). In addition to how-to instructions, the documentation also explains the structure of the application that is created.

Once the project is set up, it can be run from command line with the command:

npm start

This will start the development server at localhost:3000, and open the browser to that location.

Vue.js

In Vue.js as well, the CLI approach is not recommended for beginners, and the documentation suggests using a script-tag that links to a public CDN. As I mentioned earlier, this doesn't really suit my purpose, but is nice to have as an option.

The documentation for my preferred approach however is not quite as straightforward as I would like. It goes straight into details about different builds, module formats, and shows examples of configuring bundlers. My experience of configuring Webpack is enough to know that I don't want any more of it, so I make my way to the vue-cli website.

The Vue CLI instructions for creating a new project are more to the point. The home page has all I need to create a project, and the manual and reference has more in-depth information. There are a lot of similarities with Create React App, but the documentation makes the Vue CLI seem somewhat more complicated.

Creating an application with Vue CLI requires first installing the CLI as a global tool, and then using it to scaffold a new application:

npm install --global @vue/cli
vue create myapp

This brings up a menu that lets you configure the project. Making the correct choices might be a bit difficult without at least a bit of prior knowledge about Vue. To set up a project for TypeScript, I need to select the option to Manually select features, which takes me to a stage where I have to pick what I want from the following list:

Afterwards, I need to choose whether I want to use "class-style component syntax", if I want to use Babel alongside TypeScript, and pick a linter and its additional features. I don't really know at this point what I will need in the project, and I'm not sure if those can be added later, so this makes using the CLI a bit confusing.

Once I settle on a set of features that sounds reasonable, the CLI creates the application structure as seen in my Vue application. It's fairly clean, with few simple configuration files. It's not quite as simple as the React one, and there are more direct dependencies in package.json, but most of the complicated configuration files are hidden behind the scenes.

Vue application can be started by running the command:

npm run serve

This will create a development build and show the URL localhost:8080 where the application is running.

Angular

Unlike the other two frameworks, Angular points directly to the Angular CLI for creating a new project. To install the CLI and run the tool to create a new project, following commands are needed:

npm install --global @angular/cli
ng new myapp

The tool shows some options for the new project, for example whether to use routing or not, and which CSS precompiler to use, but nothing that requires specific Angular knowledge. A lot of the choises have already been made for you when using Angular. One of the main ones is the choice to use TypeScript.

As you can see from my Angular application repository, there are considerably more configuration files and boilerplate code in the Angular project folder when compared to React or Vue. The development cycle relies heavily on the CLI to make the configuration easier to handle and to reduce the manual work for component scaffolding. These are some of the things that make Angular a more opinionated framework. Many common tasks are simplified in Angular by using "the Angular way" of doing them.

Running the application on a development environment is done through the CLI:

ng serve

This starts up the application at localhost:4200.

That's it, I now have a new project running on each of the three frameworks. Thanks for reading, I hope you found this article useful. If you have any comments or questions, please don't hesitate to ask. Next time I will concentrate on creating a new component, focusing more on the code.

Comparing React/Vue/Angular "Getting started" experience - Website and documentation

Mikko Vuorinen — Sun, 10 May 2020 00:47:55 +0000

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.