Developer: Everyone is talking about Vue.js – why did the framework become so popular?
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?
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.
Developer: Vue.js builds on single file components. What exactly does it mean?
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.
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.