DEV Community

loading...
Cover image for Cherry Picking from Front-End Frameworks

Cherry Picking from Front-End Frameworks

proticm profile image Milos Protic ・6 min read

Hello my fellow developer, welcome to yet another article.

People often as front-end developers, which I believe that you already are, or being interested in becoming one considering that you are reading this post, have many doubts and questions when starting a new project, but one of the main questions these days goes something like this: "Which framework is the best for me and does it fit to my project needs?"

The JavaScript world has a lot of useful tools, but sometimes this is the part that gives us the hardest headache because it makes us unsure about what we should choose for our project.

Hold on until the end of this post, we are going to try to answer the No.1 question.

While creating this post, the following framework relative milestones, which should help us decide picking one over another, came across my mind:

  1. Learning Resources and their availability
  2. The community behind it
  3. Features
  4. Usability and third party libraries

At this point, I think that satisfying the alleged milestones should be enough to at least get you started with the framework choice, but until they are, especially if you are new in the front-end world, you are probably going to bang your head against the desk.

bang-head

Learning resources and their availability

Opening up this chapter means that you've filtered out our favorite among the great tools available in the wild.

Usually, each framework has its documentation website available and this is the first place we all visit when learning something new. The home page might be appealing and well designed, but what you should really interested in is the way of how the documentation was written.

Also, the dry documentation alone is not enough. You still need additional tutorials, books and possible videos pointing to the related topic. Articles from various authors are also very well welcome.

What needs to be pointed out here is that, if you didn't find something useful at the end, the framework you are trying to learn might be new and not yet adopted by the community.

If we take a look at a couple of examples, we can say that EmberJS is very well documented. The features are well described with attached code snippets.

Angular and React are all over the web. There are a little front-end oriented websites without at least one article about one of these two. Personally, I find the React documentation website to be better and easier to navigate in order to find what we need.

Vue, on the other hand, is somewhere in between. It is not all over the web, but it might get there. The documentation website is very well written and guides us step by step from the ground up pointing out how to use the framework.

You should open yourself to as many different resources as possible. That way you increase the information input from different perspectives about the same topic. It is always better to have choices.

The community behind it

This part can have a major role when deciding which framework to choose for your project. From the developer perspective, it may be fun and cool to learn something new and exotic which comes from the latest technology set, and that is fine, but from the business perspective it is a bit more complicated.

The reason for this is that your company or client prefers something that has already been out there for some time. That way they can be confident that the framework was already well tested and bugs free.

Another business related question would be, for example, what if you decide to quit and change your job? In that case they are stuck with a project built with a framework that no one is experienced with, beside you.

These issues can become a game changer for a company, but also, to a developer, a widely adopted framework can bring some benefits too. For example, if you are working on a feature and you get stuck with it, you can easily find guidance and help from the community. I mean, if you choose React, surely you will find a various articles which will help you in one way or another.

Also if you learn and become good at something popular, you are looking at the bright future and there would be a lot of job opportunities for you out there.

job

But beware, because learning only Angular or React will only get you so far in your career.

There are other great frameworks, and they exist with a reason. You should try to learn about them in your spare time. That way you will get valuable knowledge and a breath of fresh air, especially if you have been working with the same framework for a quite some time.

Features

This is the section where you actually need to think deeply about your project and the problems you intend to solve by building it. If you do this part wrong, you can end up with a wrong framework and that can kill the project on the long run.

You can choose a less popular framework which hasn't been adopted yet, or the poorly documented one, but the worst thing you can do is to choose a framework which, at the end, doesn't provide the core features you project needs.

This will force you to write workarounds which lead to bugs and incompatibility. You may find salvation with a third party library, but of course, the chosen framework must be flexible enough to allow the integration of it without breaking the workflow.

Getting familiar with the core features of the framework is crucial. You can start by reading the docs. Usually there is a quick start guide page which will help you get started. You need to get a sense of what the framework is about in general and what it can offer.

If you are an experienced developer, this part should be relatively easy since all of the major frameworks offer similar core features. Think about it. What are you daily base routines as a developer? What packages do you use?

Within the documentation, you should search for topics like: components, mixins, HTTP communication, templating and binding, form processing, etc. Basically, everything you do as a developer on a daily basis.

If we take a look at the three most popular frameworks, React, Angular and Vue, all of them meet our requirements.

It's good to mention that EmberJS has its own object model and something called Ember Data. This is the data layer for EmberJS applications. Similar packages can be found in ExtJS, the Sencha framework, but let's not go too wide with this and stop here.

Usability and third party libraries

Finally, the desired framework has been chosen. Now, we need to dig into it and make it useful. This means that we actually need to write some code.

usability

You can watch a lot of videos, and read the documentation for hours, but the real insight won't be provided until you do the actual coding yourself. Figuring out what makes a framework usable is pretty straight forward.

While working on a project, take the time and see how long did it take to get it off the ground. What was required to make the framework up and running as your project package? How long did it take to implement a specific feature? Did it require a third party library?

At this point you collect the experience about the framework and its setup. If it was at the level you require, it's more likely that you will return and use the framework again on one of the upcoming projects.

The most popular frameworks are shipped together with a lot of helper tools and packages built by the framework owner or by the community. As the framework gains popularity, it will be easier for you to find these tools.

It is important to point out that no matter how popular your chosen framework is, of how many features does it have, the chances are that you will be facing problems that must be solved with some kind of an external tool.

It might be a hassle to integrate the external library, depending on your knowledge about the framework and on the framework itself. But one thing is for sure, if you spend hours integrating it every time when one of your projects requires it, it might not be the optimal choice.

Conclusion

Choosing the front-end framework is the most important thing when working on a project. It doesn't matter whether you are working on a small or large project, whether you are working solo or as a team member, you must take the described milestones from this post into a count. It might save you a lot of trouble in the long run.

To everyone who had the concentration and the nerves to read until the end, I wish to say thanks, I surely appreciate it. Beside that, I wish to share a project of my own that I've been working on lately.

Now, the project has no issues, and we all know that is not possible, so be kind and try it out :) If nothing else, report an issue and give me something to work on. Or throw a star if you liked it :) :)

Here is the GitHub link.

Thank you all and the best of luck. See you in the next post.

Discussion (4)

pic
Editor guide
Collapse
somedood profile image
Basti Ortiz (Some Dood) • Edited

Based on your criteria for cherry-picking frameworks, I am 100% sure that the best framework out there in terms of performance, community interaction, and documentation is Vanilla JS. 😉

Collapse
proticm profile image
Milos Protic Author

Not that far from the truth 😊

Collapse
raininja profile image
raininja

This is one of those articles where, a few paragraphs in, I say "shut up dude" and move on

Collapse
proticm profile image
Milos Protic Author

Apparently you didn't. You even took the time to write a comment and I thank you for that.