Technight: 6 times Vue.JS saved my day

  • 03/05/2019
  • 4 minuten leestijd

Technight: 6 times Vue.JS saved my day

In this technight Prashant shared his experience where Vue.js saved his day, which translate into 6 topics. He gets right into the specifics. But true to Vue.js paradigm also stays very understandable and easy to follow.

6 times Vue saved my day Speaker: Prashant Palikhe

By: Raoul Wittenberns & Danh Nguyen

Before the talk started we had the chance to talk to Prashant about Vue.js and some of its issues and solutions. From the start it was clear that Prashant is very passionate about frontend and Vue.js in particular. He seemed like a really relaxed and approachable guy to have a chat with.

We really share the same experience where we just get happy from Vue.js and it’s simplicity. Sure it comes with it’s own limitations, but as Vue.js is so true to plain JS it always seems so easily overcome with your own creativity.

In this technight Prashant shared his experience where Vue.js saved his day, which translate into 6 topics. He gets right into the specifics. But true to Vue.js paradigm also stays very understandable and easy to follow.

Vue’s reactivity system

At the core of Vue.js lies the fact that it tries to solve the problem of automatically updating the DOM when data changes: it’s reactivity system.

  • Plain JS objects contain data
  • Objects are remapped with getters and setters
  • Change watchers are triggered by getter and setter calls
  • The new objects are converted to VNodes (virtual nodes)
  • Vnode are performantly rendered to actual DOM nodes

A nice tip to check Vue.js performance Pashant gave us is to use Vue.config.performance = true; This makes it possible to check how long it takes for your component to initiate, render or updates. You can find the output in the Chrome Dev Tools in the performance tab.

First class support for code splitting

It becomes a problem when we load a lot of scripts. This can result in a lot of network requests. So why not load only the necessary code. Vue.js comes with an dynamic import option. Dynamic imports will only load the requested component on demand. For example visiting a page or loading a modal on click will be lazy loaded.

To make this possible you can convert an existing import to a function.

For example: from: import Component from ‘Component.vue’; to: const Component = () => import(‘Component.vue’);

More in depth info can be found in the docs: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

Modern code for modern browsers

Babel transpiles modern code to work in older browsers. But sadly transpiled code can be very big which makes it very difficult to debug. But wouldn’t it be nice to only ship the code, new browsers support without the big chucks of code Babel generates? You can by adding targets in the .babelrc file. To use the new bundled code, you can add type=”module” attribute to the script tag: <script type=”module” src=”bundle.js”></script>. This lets the browser load ECMAscript modules directly in the browser. For older browser you can use the transpiled bundle from babel and load it with the nomodule attribute: <script nomodule src=”bundle.es5.js”></script>.

A nice tip Pashant gave us to cleanup unused CSS is to use PurgeCSS.

<keep-alive/> components.
The <keep-alive/> component is a nifty built in feature that lets you maintain a components state and stop it from re-rendering when it’s no longer shown in the screen. Normally Vue.js would destroy the component the moment you would leave a page and then re-render it when you would that page again. For instance, you want to save the current active tab on a page after you navigated somewhere else on your site and then return to that page again. HTML <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> More in depth info can be found in the docs: https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components

Reusable components with scoped slots

Scoped slots makes it possible to inject content from outside with data from the current component. This technique enables you to mix into eachother different components without adding additional logic. Your components do not need to know anything about each other and don’t get tightly coupled but can still interact.

Component.vue: <slot :user=”user”>{{ user.name }}</slot>

Page.vue HTML <template v-slot:user> {{ user.name }} {{ user.email }} </template> More in depth info can be found in the docs: https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots

Web components

As Pashant tells us, it turns out that Vue can export any component as a web component. These web components can be used in any web application, with or without a JS framework and maintaining it’s full capabilities. Given that you must include the vue runtime build in the application.

All you need is the vue-cli to run this command: vue build --target wc --name your-component

He shows us that it’s quite easily dropped into an existing react app where props are given and the component is rendered:

<script src="https://unpkg.com/vue"></script> <script src="path/to/my-element.js"></script>

<!-- use in plain HTML, or in any other framework --> <my-element></my-element>

More information can be found here: https://cli.vuejs.org/guide/build-targets.html#web-component

In under an hour Pashant has given us plenty of tips and techniques to show that Vue is an easy and mature framework full of possibilities. He is also an able speaker capable of explaining these techniques with ease and keeping your focus on the content. Should you ever get the chance to visit one of his talk we highly recommend it!

Watch the full presentation on https://www.youtube.com/watch?v=W_GlgDFqXaQ