With an abundance of Vue.js developers all around the world, hiring a Vue.js developer (and a good one at that) may seem like a difficult task. Whether it’s remote work or bringing your developer on site, the first steps of the hiring process are always the same: examining a candidate’s knowledge in this specific field. We’ve prepared a neat cheatsheet for your next interview with a Vue.js developer — this article will cover all questions you can ask to test your candidate’s competence, making your hiring process easier than ever.
Section 1: Abstract, high-level knowledge about Vue.js, other frameworks, and technologies
Technologies like Vue.js don’t exist in a vacuum: they’re heavily intertwined with other tools that web developers use. Therefore, we can check if the candidate possesses broader knowledge of their area of expertise, their technical erudition, so to speak. Although it’s impossible to be proficient in all spheres of web development, good question results in this section may indicate that the candidate strives to make their knowledge not only deep but also wide.
Question 1: What are the benefits of SSR? What framework can be used to utilize SSR’s benefits?
Answer: The main benefits are: a) performance improvement and b) optimal SEO. Better performance is achieved via rendering the HTML page layout without waiting for the JavaScript elements to load; the idea is to allow users access the page faster and start exploring it, completely skipping the “blank white page” loading step (although still waiting for some time before the user can interact with it).
Vue applications are somewhat lacking in SEO-friendliness — this is an important factor to consider beforehand; this can be remedied by choosing server-side rendering over client-side one, but this option may not be ideal for some projects. This is where we can use Nuxt.js, a Vue.js framework created to address these issues. Nuxt solves the SEO problem by generating the app on the server and managing routes (enhancing the SEO tags you add).
Question 2: What about static site generators?
Answer: They also provide fast loading speeds and great SEO performance, coupled with security (thanks to their simple structure). A good solution to use would be VuePress: it provides easy themes customization, multilanguage support and flexible management of Markdown files (e.g. putting Vue directly into Markdown and working with Markdown extensions).
Is Google Analytics supported? Yes, but it is heavily (and we can’t stress it enough) advised to stay up-to-date with the current GDPR norms. Another caveat is configuring Google Analytics to anonymize IPs when necessary.
Can we use Nuxt for this? We can, but this won’t be the optimal solution as Nuxt focuses more on building applications.
Question 3: Progressive web apps?
Answer: Utilizing the most modern web capabilities, PWAs are blurring the line between web pages and apps. Their main features are: responsiveness, improved connectivity (able to run even on lower-end 3G networks thanks to service workers), app-like interface (bridging the gap between the UX paradigms of web pages and apps).
However, due to PWAs’ complexity, many factors need to be considered beforehand, including the app’s responsiveness, asynchronous loading and so on. Also, Google has compiled a checklist for this purpose.
Is there any test automation tool? Google’s Lighthouse tool can be used.
Question 4: What mutation methods can be used for array detection?
Answer: i.e. how can the original array be modified: push(), pop(), shift(), unshift(), splice(), sort(), reverse().
What happens to a list when such a method is performed? A view update will be triggered.
Question 5:What non-mutation methods can be used for array detection?
Answer: To avoid any changes in the original array, these methods can be utilized: filter(), concat(), slice().
Section 2: Concrete & specific knowledge about Vue
Having tested the web developer’s more abstract Vue.js knowledge, we then move on to more concrete examples.
Question 6: How to optimize Vue.js performance?
Answer: As a project grows in size, we add an increasing number of modules to it, eventually making our JS bundle bigger as well — and running the risk of our users losing their patience before the loading completes. Therefore, we can focus our efforts on making the bundle smaller: we can do this via methods like lazy loading and code splitting.
Lazy loading will allow us to save resources by loading app components only when they’re actually needed. To do this, we split our app into lazy-loaded parts. In that regard, Vue.js offers a simple solution:
const lazyComponent = () => import('Component.vue')
This will make the single file component (along with associated CSS and HTML elements) be downloaded only when requested.
Question 7: What are the differences between computed properties and watchers?
Answer: Although they offer similar functionality (updating values based on data), a computed property’s efficiency and readability surpass those of a watcher’s. This can be illustrated by this example:
Question 8: What are the new features of Vue 2.6?
Answer: With a new version of Vue just being released, it’s reasonable to expect that a candidate is keeping up with the changelog. New features include: changes in slots (new syntax and improved performance with the goal of slots components unification in Vue 3.0), async error handling, dynamic directive arguments, prefetching of data during SSR, and more.
Question 9: What is Vuex?
Answer: Vuex is a pattern utilizing the architecture of flux, redux and Elm used for state management. Its aim is to provide the web developer with a reliable state management system, contributing to making the project’s structure better and its code more readable.
Vuex achieves this by introducing another layer of abstraction in which Vue components and their states are managed: its key concepts are store (alongside its states and changes in them via either committing mutations or dispatching actions), store getters and store modules.
Question 10: How can plugins be used?
Answer: Plugins enhance Vue apps with functionality on a global level. Some of their use cases are:
- • Adding a global method or a property (e.g. vue-custom-element)
- • Adding a global asset: it can be in the form of directives, filters or transitions (e.g. vue-touch)
- • Adding an option to a component via a global mixin (e.g. vue-router)
- • Adding Vue instance methods via linking them to Vue.prototype
- • Using a library with its own API (e.g. vue-router)
Hopefully, now you see that hiring a remote Vue.js developer is pretty doable — all you need to do is to follow our guidelines and start hiring!
There are many other companies looking to hire Vue.js developers, but they just don’t know how to find the right candidate. ( 🙁 ) Hm… But what if you shared this article with a recruiter you know who’s currently having this problem?
( 🙂 )
