What is Vue.js?
Vue is an evolving framework for building user interfaces.
Evan You, the creator of Vue.js, wanted to create a frontend framework as powerful as Angular, but also "lighter" and more flexible, without all the unnecessary extensions and concepts that come with Angular.
Vue.js is one of the most popular frontend frameworks in use today and it has a very small size of around just 18KB, which is excellent compared to other large frameworks and is also excellent for improving the site's SEO and loading speed.
The core of the Vue.js library only focuses on the view part, and it is really simple to integrate it with other existing libraries or projects. On the other hand, Vue is quite capable of running single-page web applications when coupled with modern tools and complementary libraries.
Why do web developers use Vue.js?
There could be different reasons that lead a developer to use a particular technology and for Vue.js one of the main ones is simplicity.
For beginners and developers with less experience, Vue.js is one of the easiest frameworks for most developers to use because it uses JavaScript as scripting language Therefore, anyone with basic knowledge of JavaScript will be able to develop with Vue.js.
The Vue CLI tool combined with other frontend development tools makes setting up Vue.js quite easy. It comes configured by default with some functionality, but you can also create code with DRY (Don't Repeat Yourself) logic and structure.
Responsiveness is also built into Vue.js. This means that real-time functionality that was popular on the Angular framework is a breeze with Vue.js. For example, you can easily apply a simple directive like v-if in your Vue.js application. Now let's consider the main pros and cons of Vue.js.
Advantages and disadvantages of Vue.js
Vue.js is the second most popular framework in use today. Let's see what makes it popular with web developers and what keeps them away.
The advantages of Vue.js
We'll start by exploring the positive aspects of Vue.js.
Small size
Vue.js has a very small size of around 18KB which is excellent compared to other large frameworks. However, with this size, Vue.js will have a positive impact on the SEO and UX of your frontend application.
Single file component and readability
Vue.js uses a component-based architecture, thereby separating large chunks of code into smaller components. Also, in Vue.js, everything is a component, and each component is written with HTML, CSS, and JavaScript, which promotes readability and simplicity.
Solid tooling system
Vue.js supports a large number of frontend development tools out of the box, with little to no configuration on your part. For example, Vue.js supports tools like Babel and Webpack. Additionally, it provides unit testing, end-to-end testing libraries, flexible and easy-to-use routing systems, state managers, server-side rendering (SSR), and more.
Easy to use
If you've used Vue.js before, you'll agree that it's very easy to use. It modernizes the usual approach to web development, allowing any beginner to get straight into it and feel comfortable in just a few practices.
Disadvantages of Vue.js
Now that we've covered the pros, let's explore the cons of Vue.js.
Bidirectional binding
The two-way binding implementation in Vue.js is a handy tool for managing Vue.js components. Bidirectional binding refers to the sharing of data between a component class and its model, it is developed in such a way that if the data changes in one place, it automatically updates the others.
However, there is an issue regarding how responsiveness works. The reactivity system only renders triggered chunks of data. Sometimes there are errors when reading the data, which requires flattening it. You can read about this known issue and how it is fixed on the Vue.js site.
Language barrier
Initially, Vue.js was adopted primarily by the Chinese, with large companies such as Xiaomi and Alibaba helping to popularize the framework and create demand in the job market. However, with significant adoption by many Chinese companies, many forums, chat channels and the like were primarily in Chinese, making adoption difficult for non-native developers.
Today, this is no longer the case, as Vue.js has evolved to include support for many languages, but some languages are less well supported than others.
Risks of over-flexibility
As stated above, Vue.js is very flexible and easy to use. Therefore, it's easy to have a lot of spaghetti code all over the place, because everyone on a business team might have different opinions on how to do things.
Some essential things to know about Vue.js
Below are some particularities you need to know about Vue.js and why it's essential to be familiar with them.
Calculated properties
A calculated property is one of the most used features in Vue.js. A calculated property lets you create properties that can be edited, manipulated, and displayed data in an efficient and readable way.
It comes in handy when you want to repeat many small methods for things like formatting, changing values, or a large process that you need to trigger in some situation.
Calculated properties allow you to remove excess logic from your model. Too much of this logic can cause your code to bloat and become difficult to maintain quickly.
Assuming you want to format a string in uppercase, here's how you might do it:
I love {{ value.toUpperCase() }}
What if you need to change the value variable in 50 different places? Well, calculated properties are here to help:
I love {{ value }}
You can easily change toUpperCase() to toLowerCase(), and everything will reflect from a single point.
Event processing
Vue.js simplifies communication between child and parent through the use of $emit and v-on. It becomes easy and straightforward to manage communication between component hierarchies.
The $emit function accepts two parameters: a string for the name and an optional value to emit.
v-on:event-name is used by the child component to receive the event emitted by its parent component:
Add
When you trigger the Add button, the onClick method triggers the $emit event, which emits the add event to a child component listening for the add event.
Let's see how to listen to an event:
This component is listening to the ADD event
<;add-event v-on:add="onAdd">
The code above listens for the add event and responds by changing the value of showSaveMsg to true, which displays the message again.
Lazy Loading / Asynchronous Components
Lazy loading is one of the best performance hacks for Vue.js, where components are added and rendered asynchronously or on-demand, dramatically reducing file size, HTTP request response time, etc. .
Lazy loading is achieved through Webpack's dynamic imports, which also supports code splitting.
Vue.js allows lazy loading of components and can be achieved globally with the following scripts:
import View from "view";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
You can achieve it locally with a component like below:
Global components
We can achieve significant reuse in Vue.js with global components, where you register a component once and then use it everywhere in your Vue.js instance.
Global components are an important feature that can save you a lot of time by registering components individually each time, but it's easy to abuse by registering all components globally. Registering all components globally can easily lead to a large build size, which leads to poor SEO and slow page load times.
Be sure to always register global components that have many use cases in your project, as shown below:
import View from "view";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Single file component
Components are one of the most powerful features of Vue.js. They allow you to extend essential HTML, CSS, and JavaScript elements to encapsulate reusable code.
Components can help break down large projects into small, reusable pieces that we can scale across the entire project, encouraging the DRY (Don't Repeat Yourself) principle of software engineering.
It can provide organization and wrappers for large projects, reusable code, and can be separated into .vue files.
Add
The above scripts create a custom button component that we can reuse in our project. Each component has its own HTML, CSS and JavaScript.
Testing
Vue.js provides one of the most robust testing libraries, making unit testing with Jest and Mocha or end-to-end testing a breeze with little to no configuration.
A quick look at testing with these tools might be worth it to you. So we'll explore installing, configuring, and testing a demo project below.
If you are using the recommended Vue CLI tool to configure your project, run the following commands:
view add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Then, after configuration, include the code below, which demonstrates how to test a simple component:
// Import the `mount()` method from View Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '
{{ message }}
',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})
The Vue test library has two great options for testing your components: Mount and Shallow.
If you want to test a component with full isolation, use the shallow method. Alternatively, if you need to work on a component with subcomponents that you want to communicate with, the mount option works just fine.
The powerful Vue CLI tool
Vue CLI is a great CLI tool and gives a good dose of power to any Vue developer. With it, you can quickly test any component in isolation. What's great about Vue CLI is that you can fully develop a component in isolation, test it, and still have access to hot reloading as you iterate over that particular component.
To demonstrate, let's install Vue CLI globally:
npm install -g @vue/cli
Then you can test any component by running the command below:
vue serve ./components/views/Home.vue
If you want to extract a particular component to, for example, share it with your colleagues, you can do so using the command below:
view build --target lib --name goldenRule ./components/views/Home
Vue CLI is very powerful and can save you a lot of time if you master the art of using it. If you want to know more, you can take a look at the official documentation.
Property Management
Managing properties is essential for the Vue component because they can be created in different ways. You can also validate properties, create multiple properties, and edit them as needed.
To create a new property in a Vue component, you can do it in several different ways. Assuming you have your component, you need to create the isAdmin property.
Let's see the different ways to do it:
Validation of your ownership is very important. Fortunately, it is also very simple:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...
Finally, changing properties is as simple as realigning their values:
//...
methods: {
isAdmin() {
this. isAdmin = true;
}
}
//..
To assign a value to the property in a parent component:
Server-side rendering (SSR)
Despite all the features and benefits of using Vue.js to build frontend apps, Vue.js is still a client-side library that only renders and manipulates DOM elements.
Server-side rendering helps client-side frameworks like Vue.js work better. Search engine crawlers will see your website pages fully rendered when crawling.
For your website to be indexed faster by Google and Bing, it needs to have a faster and higher content live time score. This is what Vue.js server-side rendering helps you achieve.
Server-side rendering (SSR) is a popular technique for rendering a single-page application (SPA) client-side on the server and then sending a fully rendered page to the reader.
When the page is rendered on the server side, the server sends it to the client as a response. So each piece of information has already been rendered when the browser displays the search engine page.
Achieving SSR in Vue.js is difficult for beginners. It will be easier to use Nuxt.js, which has built-in SSR and a very low learning curve.
Deployment
Vue.js has a lot of warnings, errors, and bloated file sizes during development, but these issues disappear immediately when you go to production for deployment. Vue.js will automatically configure webpack build tools, minifications, CSS extraction and purging, caching, runtime error tracking, and more.
Vue.js eases the deployment process by automatically configuring and tuning the production environment without any additional steps from the developer.
To deploy your Vue.js application, you can consult its general guides. For Vue.js, PHP or other web solutions, please check our products page and please don't hesitate to contact us or your our services for custom Vue.js application development.
