What did I need a front-end framework for?

Two years ago, I was asked to take over a project in which I was supposed to build a Graphical User Interface (GUI). The project was supposed to be small and relatively simple. We thought of it as a small addition to the bigger ecosystem we were building. We had no idea it would expand soon after.

The story of ambition and trust

I was mainly a back-end developer at that time, so getting a task like that seemed challenging. I had to choose the technology that I, my team, and possibly people that could take over the project one day would have to work with. Needless to say, It was a huge responsibility.

So why did a backed-end developer get the job then?

The thing is, I've already done some minor front-end things back then, and I wanted to learn more. Being a developer, you have this urge to improve… or at least I had. So, I spread the word and hoped somebody would give me the canvas.

I didn't have to wait long. Krzysztof, the project's lead developer got back to me and offered me a job. They needed a developer that would take over front-end responsibilities and get full ownership. I was surprised that they trusted me this much, but I accepted the offer. It seemed like a great challenge. Well, at least at first.

I'm not going to lie. It was a bit overwhelming, considering how important that decision was for the project. But I survived, and to be honest, I enjoyed the process. So if you're a back-end developer thinking of becoming a full-stack, I have to say it's not that hard and definitely worth trying.

Now, let's have a look at my thought process.

The comparison of front-end frameworks

As I was searching, three frameworks sparked my interest: React.js, Angular, Vue.js

Let’s look more closely at each of them:

React.js - often referred to and considered as a framework, but it’s actually a JavaScript library - to build an app with it, you would need other libraries and tools, e.g., routing.

Facebook created React.js in 2011 as an open source for building user interfaces. The community says it’s easy to learn and simple to use, as you literally declare what you want to build, and React will do it for you. Its use of virtual DOM speeds up the performance as updates are rendered faster.

Users of the framework are left with a lot of freedom on how to do things as it doesn’t have a strict structure to follow. Its main idea is to build UI components and reuse them as much as possible. Each component can be built separately and later connected to others to create an app. Actually, most of the tools were written by the community. For this very reason, we can talk about the incoherence of the documentation, which is one of the drawbacks of React.js.

You can build both small and scalable apps with React, but you have to be extra careful with organising the code properly, for example by breaking it into smaller components when needed. Another good practice would be selecting design patterns and libraries for the React app in the beginning (that may vary from developer to developer) and then sticking to them throughout the whole project.

Angular
- it’s an actual framework, so it allows you to build an app without the help of other libraries and tools. It was created as an open-source by Google in 2009 (AngularJS). But some problems aroused, and it had to be totally rewritten, this time in TypeScript. The second version, which we know today as Angular was released in 2016.

Angular is known for its complex and rigid architecture. There are not many ways of doing things in this framework, nor much space for individuality. You follow the rules and the documentation. It results in a pretty well-organized project.

Given that, you don’t need much experience when starting with Angular, as you are guided for the most part. And good news for the code purists - It’s easy to keep the code clean there.

Its biggest drawback is the steep learning curve. You would have to sacrifice some time to start with Angular. Another downside would be performance - it can be much slower than the other two (React.js, Vue.js) due to the big amount of features available, and the complexity of the architecture.

Similar to React you can build self-sufficient components and reuse them in different parts of the application.

Angular is usually recommended for big-scale apps, and bigger teams as you really need to put some effort and time into learning it. But then, you can get some of the time back, because of the two-way data binding ;)

Vue.js - it’s a JavaScript library (sometimes called framework as well), released by an independent creator in 2014. Evan You got familiar with AngularJS working at Google and inspired by some of its solutions created his own version of the framework. It is way less structured and much easier to learn.

Vue.js has kind of a half-open ecosystem. What I mean by that is that some of the tools were introduced by creators and some of them were written by the community. The same goes with architecture - users got some basic skeleton from Evan’s team, yet they have to figure out the rest on their own. This creates a nice balance between following the recommended structure and individuality.

Similar to React, Vue uses Virtual DOM, and is component-based which means that Vue’s development and performance are rather speeded up. Vue can also be added to the existing code, just like React.

The framework has a custom file format called Single-File Components (SFC), where all of the three main elements of web development: HTML (template), JavaScript (script), and CSS (style) are kept in one file (.vue). It saves programmers some time and effort as they don’t have to jump around the catalogs to find the things connected to each other.

The technology allows you to build custom components with interesting functions and thus create some nice working tools.

Which one was the best for my project?

As I mentioned in the beginning, my project was rather small and short-term. This made me think if I want to spend so much time learning Angular, only for this few-month project. But on the other hand, Angular had a rigid architecture that would guide me through the process.

Using less structured frameworks I would not be sure how to arrange them and I would have to spend time thinking of the best way to do that. I thought I may get confused in the process.

I had to ask myself a question, should I learn Angular, and then know exactly what to do with the files or should I choose a framework with more freedom and trust that I will figure out what to do on my own?

Given the size of the project, I decided that it will be an unnecessary effort and that Vue.js would be a better choice. I liked the half-open ecosystem and that it is easy to acquire. I appreciated the subtle guidance as well.

I rejected React early in the process, maybe it was too hasty, but I was really worried about all the freedom and responsibility that comes with that. Vue seemed like a safer choice.


Although the community is not as big as React’s or Angular’s, it is definitely a fast-growing one.

Am I happy with my decision?

Yes.

Even though the app happens to be a much bigger project than I expected, and after two years it is still ongoing.

To be honest, it wasn’t hard for me to build the application in Vue.js. It is very beginner-friendly. To create a pretty complex component, I only needed basic knowledge of JavaScript and one hour with the documentation.

I feel I can solve the problems in whatever way I want, but if I’m not sure of something, I have creators' recommendations to refer to.

The funny thing is that I chose Vue thinking it would be a small and easy application, and now when it’s quite big and more complex it’s still working perfectly and I have nothing bad to say. It does its job and it’s very convenient for me.

If I knew the app would expand this much, maybe I would reconsider my choice and sacrifice some time to learn Angular, which is great for more complex apps. The main reason for this is a well-planned architecture that helps you arrange things in the best possible way and keep the code clean.

Summary

Each developer, team, and application have different needs. Therefore, the framework or library has to be adjusted to the experience of the programmers, the scope of the app, and the technical needs of the project.

React.js, Angular, and Vue.js all do the same thing, just in a different way. Choosing the one focus on your priorities:

  • most freedom - React.js,
  • most guidance - Angular,
  • best of both words - Vue.js.