Before we dive into today's main discussion, let's ask ourselves one very important question.
Why do front-end frameworks like React, Vue, and Angular, actually exist in the first place?
Why not simply use Vanilla JavaScript to build our apps?
Well, let's answer that question right away in this article.
The rise of front-end frameworks came into existence when Vanilla Javascript was no longer reliable to build complex UI. Let’s establish the fact that building any front-end application is all about handling data and then displaying that data in a nice user interface. That's basically all a web application does if you think about it.
So, it receives data, changes it as the user uses the app, and always displays the current data on the screen.
This means that the primary responsibility of a single-page app, and indeed any application or website, is to ensure that the user interface accurately reflects the current state of the data. In other words, the UI should always display the most recent data.
Let’s use the Airbnb application as an instance;
If you look closely at the picture provided, you will see that there is so much data. As we know, all of this data needs to be kept in sync with the user interface and the other pieces of data because they're all interconnected.
For example, when we change the data about location or dates, the UI needs to show those new dates, and the list of apartments needs to be updated. The map also needs to show the location of the apartments. Therefore, when the apartments change, the map must also change.
Now, just as a side note, in a real-world app like when using React, we call each data piece a state.
So, based on the example I showed you, I would say that without a framework, it would be virtually impossible to keep this huge amount of data in sync with this super complex UI.
But still, you might be wondering why. Why would it be so hard to build something
like this with Vanilla JavaScript?
Well, it comes down to the following: first, when building a complex front end with vanilla JavaScript alone, you should be aware that it requires large amounts of direct DOM traversing and manipulation.
Like in this application here, when building it with Vanilla JS, you would have to code
Manually target the element, do class toggling, DOM traversing, and even manipulation of text and CSS styles, and this is guaranteed to be an absolute nightmare for the developer in a complex app like Airbnb because the code would be extremely complex and hard to understand, and we will probably end
up with a huge mess of what is usually called spaghetti code in the world of technology.
So, the rise of front-end frameworks like React, Angular, and Vue came into play. While there are different choices of front-end frameworks to use, there are still some slight differences and similarities between the front-end technologies, and that is what we will discuss in the next few paragraphs.
React, Vue, and Angular have several differences and similarities:
Brief Definition
React is a library for building UI components built by Facebook. It uses a virtual DOM and emphasizes a functional programming style.
Vue is a progressive framework that can scale from a library to a full framework built by Evan You. It offers a gentle learning curve and two-way data binding.
Angular is a Full-fledged framework with extensive features. It uses a component-based architecture and TypeScript to provide out-of-the-box solutions. It was built by Google.
Let’s talk about the languages used. For React, it is primarily JavaScript with JSX (JavaScript XML) for templating. Don’t worry if you aren’t familiar with all these terms; join the HNG internship, where they use React for their front-end projects.
Vue uses a template syntax similar to HTML and can also use JavaScript for rendering. Lastly, Angular is built with TypeScript, enhancing type safety and tooling support.Another difference is that React uses a one-way data binding system, which enhances predictability. Vue used two-way data binding, making it easier to work with forms. Lastly, Angular also uses two-way data binding through its template syntax, offering a declarative way to bind data
If you are a newbie who wants to use the frameworks, I would say Vue is much easier to learn if you judge by the learning curve. It is much more good for beginners. Followed by React with a moderate learning curve, focusing on JavaScript knowledge and understanding of JSX. While Angular is not that easy, maybe due to its extensive features and use of TypeScript.
They all have quite some similarities, like the component-based architecture, the updating of the UI, support for Modern Features, and many more.
These frameworks offer powerful tools for building modern web applications, each with unique strengths catering to different project needs and developer preferences. But for me, I went for React because it is what I want and use in every project.
So, what is your choice??
Drop that in the comment section
Don't forget to click on this link: https://hng.tech/internship if you want to start a career in technology like me, and if you want extra packages, click this link: https://hng.tech/premium to get some extra packages while learning in HNG.
As I am in this HNG internship, I want to use this opportunity to achieve my dreams. I want to build apps and collaborate on different projects while learning. Here is the catch: it is probably free.
Thanks😉
Top comments (1)
Hey there!
While we appreciate you sharing posts here, please see DEV's Content Policy available in our Terms and be careful not to share content that is too promotional. The terms state:
Going forward, be careful to avoid sharing articles that are too promotional in nature. While it's generally okay to promote your product, business, personal brand, etc., just make sure that the posts you share have value beyond promotion.
If promotion is your primary goal, then consider signing up for Pro Tools which gives you access to:
Hope you understand our reason for limiting promotional content and that you continue to enjoy DEV!