Everything Vue provides – app structure, router, virtual DOM, needs to be developed in Vanilla. Well obviously, because there is nothing, you have to build everything on your own (or take some ideas of code from StackOverflow 😊).
So, once again, difference between Vue and Vanilla:
Why does it called Vanilla and not something different, like Daisy?
Vanilla in the slang means unexciting and boring. So the idea of Vanilla JS is that it is just a pure JS without any fancy features. However, the term „Vanilla“ itself was not born this way, author of the mentioned website, Eric Wastl said that he only popularized it and the vanilla was used before he created the website. In all contexts (well maybe unless when talking about the flower vanilla), the term was used to refer to something that is untouched, original, unmodified.
When using the Vanilla js instead of the Vue js makes sense?
The biggest advantage of the frameworks is that it saves time. Time is the most valuable resource in most of the projects. Every client wants to have the result as fast as possible, no one wants you to spend your time tweaking little details instead of creating business value. Vue.js saves a lot of time because of being progressive at its nature (it means that you don’t need to rewrite the structure every time you want to add a new functionality) and the features such as virtual DOM, directives, templates, components, etc., also saves you some time.
The main resource being time, it is smart to use what is already developed. So one of the bigger rules you should follow during your road of the software development is this: reuse everything that is possible, and any time it is possible.
If you don’t need to develop something custom, don’t do it. Use something that is created proven and created by the developers that probably has more years of experience than you.
- You want to achieve a higher performance.
However, want it or not, you will face that using a Vanilla.js vs Vue.js, will cost you more time. Framework provides a lot out of the box, you will not want to re-engineer some of the things. Some of the biggest advantages of a Vue are tooling, structure and the performance. Technically, these are the advantages not only of a Vue, but of every frontend framework. Imagine reinventing the wheel again and again. And if you are not the best engineer in the world, you might invent a wheel that is not that good. Of course, the example of a wheel is just an analogy. There are many more complex tasks or features you want to implement, and you just can’t be the expert in every aspect. That’s why libraries or packages are used.
Tooling: there are many handy tools that can be used with Vue: Vue CLI, Vue-router, Vuex, Bit for Vue, Vue.js devtools and many more. While they are not necessary, it saves you a lot of time. Developing a tool each time you need some kind of a speed boost when developing, is just not worth it.
Structure: it might be easy for you to understand the structure you made from a scratch. However, when another person comes working with the code you made, it might be a headache for him to understand the code. The headache grows exponentialy with a complexity of an application. A common structure, that comes with a framework, helps to work few developers collaboratively on the same project. Probably the main thing that has to be considered before making a decision do not use a framework when developing a business application, is if other developers will be working with this. If so, then you should choose a framework.
And one extra feature – security. Myself being a security freak, I believe that security must be number one priority when making an architectural design of your app. Imagine making your own cryptography methods from scratch (which is not advisable and is a big security concern). So there are algorithms that were made by the professionals, are reliable and community proved. A lot of security issues are taken care of by the Vue, for example, HTML content is being excaped, that saves application from script injection. Whenever new security flaw arrises, Vue developers are taking care that it will be fixed as soon as possible.
Should I learn Vanilla or Vue.js first?