Vue.js: A mix of Angular and React with MVVM and Virtual DOM

Vue.js is the new star on JavaScript heaven. At the JavaScript Days Vanessa Böhner will talk about Vue. In the interview we asked the interviewer in advance why Vue.js is actually so popular and on which concepts the framework is based. Vanessa also gives tips on how to integrate Vue into existing projects!

Developer: Everyone is talking about Vue.js – why did the framework become so popular?

Vanessa Böhner: Every frontend developer knows that there are constantly new frameworks in the JavaScript world. In order to answer how Vue.js has managed to develop such a popularity in the community, one should think about why frameworks exist at all. First and foremost, it’s not about whether you want to develop component-based single-file components or separate files, have a strong community, or use third-party components. The bottom line is that it’s about solving the problem: how do you keep the state of the UI consistent with the state of the data? Since the Web has developed in many places towards Offline First and Mobile First, there are more and more applications that are primarily “client heavy”. The mass of data and data management is complicated to implement with Vanilla JavaScript. This issue is resolved by Angular, React, and Vue.js.

Angular and React serve two different user groups (users are always the developers here). Angular may remind you of Spring. It makes it easier for Java developers to work on projects in the frontend. There is a clear model-view-model model (MVVM) before. In contrast to the well-known MVC model, the controller is omitted, but a new connection between the view and the model is used to quickly process data-influencing user interactions. React, on the other hand, leaves more room for developers, but the most important is the use of a virtual DOM. With this it is possible to keep changes to the actually rendered in the browser DOM as low as possible. Because recalculations in the rendering pipeline can be very expensive, causing wobbling and flickering.

At this point came Evan You, who was then employed by Google and wrote in Angular. He wondered if he could reduce the power of the framework while retaining the benefits of MVVM. And so he created a mix of Angular and React with MVVM and Virtual DOM.

Vue.js advertises itself with words like “accessible”, “changeable” and “performant”. And that’s exactly what it is – in the Core it comes with almost no features, which is perfect for lightweight application. Getting started is easy, you will not be unnecessarily distracted as a developer and the project will not be inflated. Is there a problem when the project gets bigger? Neither. The plugin concept of the Vue CLI 3 makes it very easy to always add exactly the right plugin – no matter if First Party or Third Party. Vue.js is no longer a one-man show today. There are several great developers working together on the framework. Thus, for example, the support for older browsers was made possible, which should be important for many company products.

When you work with the progressive framework, you realize that it is not driven by a corporation. It’s from developers for developers.

Developer: Where are the biggest hurdles to getting started with Vue.js?

Vanessa Böhner: As just mentioned: There are many frameworks. As a result, there are quite a few articles dealing with the topic, which framework one should start with as a newbie. One does not even talk anymore about the fact that one now wants to learn the package “HTML, JavaScript and CSS”. Whether one could even put something online today with these techniques alone?

It may be a hurdle to Vue.js, but also to all other frameworks that it still can not work miracles. It solves problems in very elegant ways. Nevertheless, one should be familiar with the basics of web development. One to two years ago, I would have argued here at this point, that here and there may be missing documentation or examples. It was also conceivable that it could come to even larger Breaking Changes, because for example, the vue-dev-utils were still in beta state. These fears I have not since the presentation of Vue.js 3 anymore. In my opinion, it is a future-proof decision.

The stumbling blocks could be that it is still just JavaScript and therefore sets less structures than some developers would like. Yes, there are several ways to register components. For minutes or hours, ask if you can execute API requests in helper functions, in actions or mutations (parts of the Vuex store). And then you can even write only JSX, because nothing speaks against it. It is important to set up various guidelines for a project in order to minimize such decision-making processes.

Developer: Vue.js builds on single file components. What exactly does it mean?

Vanessa Böhner: The concept of single file components is the connection and at the same time capsulation of markup, style and logic (HTML, CSS and JS). In legacy legacy codebases you can find large JavaScript files that use jQuery to access far-flung HTML elements that are not really known about their existence or current state. In Single File Components it is possible to see all related components at a glance.

At the same time, it will be easier to adhere to SOLID’s “single responsibility” and “open / closed” principles. Not only is it brought together what belongs together. It is also kept away, which does not belong in a component. Helper functions and general algorithms can be removed from this component to separate knowledge and keep the component easily extensible and testable. An example: The component “Button” is clicked. It is not interesting for the button, however, which reaction it gives to the action of the user. Is the user adding something to the shopping cart or does he want to log in? Or does not this button live in an online shop? All this is not interesting at this point. The button just says (or uses emit for): “I have just been clicked in my current state X.”

Developer: What are the differences between Vue.js and a typical React application?

Vanessa Böhner: Phew, questions about differences between the frameworks or even questions about what is better now, I always rather reluctant to answer. React and Vue.js are very similar in many ways and rely on the same principles. It is openly communicated that they inspire each other. React was a new star in the sky at that time, which caused a big stir in the world of Backbone.js and jQuery. It could be argued that it also simplified the way for Vue.js, as Vue.js was able to build on it, while at the same time responding flexibly and quickly to further requests from the community.

An important subjective point for me is the way I design my markup. I’m a big fan of just writing HTML, as in Vue.js in the section. Since I am without JSX fastest in the development. With JSX you could leave your comfort zone, which does not mean it would not be a great tool if used properly. And as mentioned before – it’s no problem to use PUG or JSX in Vue.js templating.

Personally, I really enjoy developing with the Vuex Store. In the beginning, I was afraid that I would now create a big store with a lot of boilerplate for something unnecessary and small. Far from it – it is so “easy”! Since I do not write a React, I can not rate it, but I hear that Redux is very different from Vuex. It is more powerful, but also more complicated.

On the other hand React already has React Native. If you’re a fan of developing mobile applications with JavaScript, and you need them right now in your project, React might be the better choice. But also at Vue moves a lot, such. For example regarding server-side rendering. Of course, solutions for mobile applications will soon be available as well.

Before I even talk about the point: The concepts are very similar and I can not impose my opinion on anyone. Simply develop two prototypes, we still need a todo list, and learn how both frameworks feel.

Developer: Is it possible to integrate Vue.js into existing projects?

Vanessa Böhner: But sure! Before I developed independent Vue applications, I already started to install Vue.js in monoliths. And: It works wonderfully.

Whether in the same repository or split off, this does not actually matter. Both approaches have problems that need to be solved. In the existing project, you need to check your existing build pipeline to see how to best integrate the Vue.js with the full feature set for features like Hot Module Replacement. In separate repositories you are faced with the question of how intricate the components are with each other: Do you provide source or bundled code? And if already as a bundle: as npm package, or git tags? There are many approaches that all lead to the goal.

It is advisable to start with a less important, already existing component, for example the footer. This is usually no call-to-action button broken, if at the deployment or even before something is not yet. And with existing things it is easier to check the result. I would not recommend implementing the new, complex, revenue-driven feature with a new framework, though these are new experiences for all developers.

Otherwise, the project is really nothing in the way. You can easily incorporate a Vue.js Single Page Application by providing a DIV with an explicit ID if you’re still delivering HTML rendered by the server through PHP or similar. Once the page loads, JavaScript can pick the container with the correct ID and build the Vue.js application into it. Data can also easily be given via this div element or you can now start API requests in the created lifecycle hook. If the information is still widespread, you can also access data from the window object, even if I did not prefer that method.

Recent Articles

spot_img

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here