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 look into setting up the project structure.
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.
Top comments (0)