There are several reasons why VueJS has taken out a podium finish for 3 years running as one of the most popular JavaScript frontend frameworks – as voted by developers themselves. There’s a new player in town – and it’s not React JS.
An easy learning curve and a streamlined framework mean that VueJS may eventually edge out React as the favorite JavaScript framework or library amongst developers.
But why has it gained so much popularity? And where does it measure up against the current king – React?
What Is VueJS:
While JavaScript is its own beast, the ecosystem it exists within is more important than the programming language itself. Frameworks and libraries make the developer’s life so much easier by providing a solid platform – culminating in less bumps in the development road.
VueJS is one such framework. If you think of JavaScript as the alphabet, then VueJS is the phrasebook that enables the programmer to construct intelligent sentences to communicate with.
Vue is an open-source progressive framework that is designed to be incrementally adoptable, as the core library is focused around the view layer only. That being said, it’s more than capable of powering sophisticated single page apps with the help of modern tools and if there are libraries to support it.
Originally, VueJS was developed as a way to take the best parts of Angular, and build a custom tool around it. The data binding and data driven way of dealing with a HTML based Document Object Model or DOM was favoured in lieu of working with the DOM directly.
Unlike Facebook’s React and Google’s Angular, VueJS is developed and financed solely from donations by users via Patreon. It’s interesting to see such widespread adoption on GitHub despite not having the backing that members of the Big 4 Tech companies have.
What It’s Used For:
VueJS is primarily used to build web interfaces and one-page applications. In saying that, it can also be applied to both desktop and mobile app development thanks to the HTML extensions and JS base working in tandem with an Electron framework – making it a heavily favoured frontend tool.
Vue does this by using traditional Model View Controller or MVC architecture to view the user interface of an app or website by using its core library as the default view layer. It’s flexible in that it can also operate with Component Based Architecture or CBA – just like that used in React.
Why It’s Popular:
Put simply, it’s a view-oriented product. The view is the most essential part of everything that occurs inside the system, and all information is only validated if it interacts with views correctly. Creating just a single view is pretty basic, and here lies the main advantage and desire to use VueJS – the simplicity, and the low entry barrier. All you need to do is load the interface and add JavaScript to begin. Data is then sent to the view directly using simple syntax, where VueJS automatically renders the elements without coding – an instance of the system can then be used for the element’s rendering.
The tool allows for modification of parts of the code by keeping the information in the data object while the updates affect other linked parts in real time.
The Pros:
1 – Lightweight:
The VueJS framework is tiny, almost comically so. It’s just 18 kilobytes – blinking takes longer than the download.
2 – No Brainer:
VueJS is really easy to pick up, and it’s been this characteristic that has been the main driver behind it’s widespread and increasing adoption amongst programmers. To start coding in Vue, you don’t necessarily need expert level comprehension of libraries, JSX, or TypeScript like you do with Angular or React. All that’s required is basic knowledge in HTML, CSS and JavaScript.
3 – Be A Tool:
After 6 years post release, VueJS has accumulated a powerful set of tools for unit and end to end testing, as well as a plugin installation system. Factor in the VueJS has its own browser
debugging tools, server renderer and a state manager and you’re well equipped and on your way to building a frontend.
4 – Sense of Community:
The online VueJS community is nothing short of fantastically helpful. The crowdfunded nature of the platform, and the fact that it’s not backed by a company like Facebook or Google, has gained Vue a cult following. As a result, there are multiple guides to help you along, as well as super active Reddit and Discord channels where some Helpful Harry will be able to competently answer your queries.
5 – DOM-inant:
As we touched on, a DOM is a representation of HTML pages with styles, elements, and page content shown as linked objects. This generates something that looks like an upside-down family tree, with the document branching off into its various parts, linked by lines that demonstrate the relations.
As the user interacts with the HTML based web page, the browser has to update the information and render it to the user’s screen as objects change their state. This process is normally cumbersome and slow, as the whole page has to refresh even if just one object changes. VueJS uses a virtual copy of the original DOM that figures out what elements require updating, without re-rendering the entire DOM – greatly improving app performance and speed. Even better than React JS and Angular.
6 – Two Faced:
VueJS inherited two-way data binding from its parent, Angular. This is a connection between model data updates and the user interface view. This makes it way easier to update related components and track the data that gets updated.
In VueJS, the bound data gets updated as the DOM objects change in real time – and this reactivity makes data updating more concise and a much easier task.
7 – Divide and Conquer:
In VueJS, each piece of a web page or app is expressed as a component, an encapsulated element of the user interface. These can be written in HTML, CSS, and JavaScript without having to divide them into separate files.
These chunks of code can be reused as templates for similar system elements. As they’re stored in separate files, the layout is super easy to read and understand – meaning it’s easier to
maintain and fix. Testing can check how even the smallest components of the app work on their own.
Because of this flexibility, VueJS is able to integrate with almost any existing application. It’s JavaScript based, and doesn’t really need any other tools to work. Switching from React or Angular to VueJS doesn’t really cause any issues, as essentially Vue is a mash up of the two and can talk to both Model View Controller and Component Based Architecture.
The Cons:
1 – Language Barrier:
VueJS was developed in China, and as such, is extremely popular there. Some of the forum discussions, plugin descriptions, and instructive documents are in Chinese so expect that there may be something that gets lost in translation along the way.
2 – Poverty Pack:
So as VueJS is community funded and developed, and lacks significant backing, it lacks the support for adaptation to large scale projects. The technology isn’t stable or strongly supported enough to offer the instant fixes for issues that a huge company would demand – and could be provided from either React or Angular support.
Also, although there are more and more tools being developed, VueJS has a long way to go compared to the sheer abundance of tools that React and Angular have at their disposal – but that doesn’t mean that it won’t one day.
3 – Inexperienced:
Because VueJS hasn’t been around as long as its competitors, and took a while to break into the market and see mass adoption by programmers, there is a phenomenon where the employment market doesn’t have a great number of experienced VueJS developers.
Who’s Using It:
More and more companies are starting to use VueJS to build their front-end user interfaces and websites. Nintendo, Louis Vuitton, Adobe, BMW, Upwork, Alibaba, Gitlab, and Xiaomi are all VueJS users. Even Google built their Careers platform based on VueJS and not their native Angular framework, and Apple built their tutorial website with VueJS.
VueJS has experienced this surge in popularity because it’s just so damn easy for developers to adapt and implement the basic elements that every app or website requires to function as a user interface.
The degree of difficulty to start working within the VueJS framework is minimal, and those familiar with the basic HTML, CSS and JavaScript coding languages can literally jump right into the deep end without much concern about drowning in the pool.
The big upside is that tooling and support will only get better with more widespread use, and the fact that Vue can roll with the big boys like React and Angular while lacking the huge investment dollars shows how capable the framework is, and that it may eclipse its competitors in coming years.
Your Next Steps
Are you a JavaScript expert? Or are you seeking a Vuejs developer for a role in your startup? Kofi Group can help connect you to the best of the best in the industry. Be sure to get in touch or watch our Youtube videos for additional information.
Kofi Group is proud to be a source of knowledge and insight into the startup software engineering world and offers a multitude of resources to help you learn more, improve your career, and help startups hire the best talent.
If you enjoyed this blog you may also enjoy our other blogs like, Rust Programming Language: 5 Things You Need to Know or 9 Things You Need to Know About Kotlin.