Avi Mehenwal

# Vuejs 3

vue3vuevuejsjavascriptvirtualdomjest

# Why vue3?

Major changes

  • Rendering improvements
    • Additional Compiler switches sent with code
  • Reactivity model is different from vue2, source code changed
    • Written in typescript
  • Composition API
    • New way of organizing shared features in components using setup()
  • New lifecycle hooks for keep-alive
Pros

vue3 Solutions

  1. Composition API syntax `setup()` (optional). Organise code by logical concerns
    1. Mixins
    2. Mixin Factory
    3. Scoped Slots
    4. Composition Functions
Cons

Vue2 Limitation

  1. Components Redability
  2. Code reuse patterns
  3. Limited Typescript support
For Example, Search component with searching and sorting

# When to use Composition API?

More advanced component syntax for logical code organization.

  • setup() Analogous to asyncData() in nuxtjs, doesnt have access to this object and runs before lifecycle hooks
    • props
    • context
    • good place to put API calls

# Design Principles of Vue 3.0

Bottleneck of traditional DOM

The performance of traditional virtual DOM is determined by the total size of template rather than the amount of synamic content in it.

How to solve this problem? Tackeling performance problem

Template --prase usinf compiler-> javascript render functions returning vurtual DOM treees --> internal rendering engine and diffing

Look for synamic content in templates, like v-for and v-if for logical block

  • Lot of people write lot of markup in theor template
  • If a piece of tempalte only containe a single dynamic binding, its inefficient to walk throught the whole template tree and diffing everything just to find out a single has changed
  • Divide templates into blocks, block tree
  • reduce the amount of recursive traversal by magnitude
  • All static content hoisted outside render functions
  • Average improvement is more than 100% in chrome

# New Vue Compiler

  • Full sourcce map support
  • Plugin based transform pipeline
  • Layered design for higher order compiler
  • Advanced block basedsynamic part tracking'
  • Static tree hoisting
  • Event handler caching
  • Stable slots detection

https://vue-next-template-explorer.netlify.app/#{"src"%3A"<div>Hello World!<%2Fdiv>"%2C"options"%3A{"mode"%3A"module"%2C"prefixIdentifiers"%3Afalse%2C"optimizeBindings"%3Afalse%2C"hoistStatic"%3Afalse%2C"cacheHandlers"%3Afalse%2C"scopeId"%3Anull}}

  • HOw vuew compiles template
  • HOisting helpful during hydration
  • Server Side Rendering

3X better SSR performance than vue2

  • New SSR compilation strategy

# DOM

  • Programming interface, wholedocument as XML tree structure
  • Connects JS to HTML
    • What pages to render
    • Which events to respond to
  • UPdating the DOM s inefficient
  • What creates DOM tree?
    • Rendering Engine => webkit in chrome
  • Which porblem does virtual DOM solves?
    • Instead of applying all the changes to real DOM we first apply them to virtual DOM
    • Which doesnt get rendered in real browser
    • it is really cheap
    • Editing a blueprint, raher than rebuilding the whole building
    • Batch changes together for efficiency

# Virtual DOM

  • Tree datastructure with JS objects
  • Exists in memory and never rendered
  • Same idea used by Angular, React and vue2
  • Also workd for mobile devices like ReactNAtive, NativeScript

How does it handles State Changes?

  • Tree is rebuilt completely on state changed
  • At any given point there are 2 virtual trees that exists in memory at the same time
  • Compare 2 trees, get the difference between them and then reconsile the changes by creating the patch
  • Diffing Algorithm - minimum number of operations necessary
  • Diffing vs Reconcialation
    • O(n3) complexity problem
    • O(n) heuristic
    • Breadth First Search
  • Createa a whole copy of exactly real DOM
  • Javascript representation of real DOM nodes
    • Compare virtual DOMs and get the minimal number of changes each time we nedd to update the DOM

When the first specification for the DOM was released in 1998, we built and managed web pages in very differently. There was far less reliance on the DOM APIs to create and update the page content as frequently as we do today.

Simple methods such as document.getElementsByClassName() are fine to use on a small scale, but if we are updating multiple elements on a page every few seconds, it can start to become really expensive to constantly query and update the DOM.

The virtual DOM was created to solve these problems of needing to frequently update the DOM in a more performant way. Unlike the DOM or the shadow DOM, the virtual DOM isn't an official specification, but rather a new method of interfacing with the DOM.

https://vuejsdevelopers.com/2017/02/21/vue-js-virtual-dom/

# 👷‍♀ TDD with vueapp

One of the pillars for writing robust softwares. Builds trust

  • Lifeline for releases, development
  • TDD - extreme Programming - Kent Beck in 90s
  • How and what to test components?
    • Public API - Black box Testing
    • props that you pass and user events interactions
    • jest will run everything running through compiler without associating the file to it
    • vue-template-compiler, vue-jest, @vue/test-utils
    • vue-jest compiles <script />, <template />, and <style /> blocks with supported lang attributes into JavaScript that Jest can run.
  • spec testing code in JS world

# Test VueJS Components

Test vuejs components

Library/Tools Description
jest Jest is a JavaScript testing framework maintained by Facebook, Inc. with a focus on simplicity. It works with projects using: Babel, TypeScript, Node.js, React, Angular and Vue.js. It aims to work out of the box and config free.
vue-jest Jest transformer for Vue SFC, loads .vue files into jest
vue-test-utils Additional classes to compile, mount vue source code and makes it possible to run tests.
@vue/compiler-sfc compiles vue to javascript
vue-sfc-rollup quickest way to generate redistributable vue components with npm
  • Test vue3
  • Transform vue files to vue-jest
  • Generate and write HTML geenerated from components to snapshot files
  • mount a component
  • Test a prop
  • Test lifecyclemethods, computed properties and methods
  • test code in --watch mode
  • spyOn() method to test is a method is called or not
  • How to find elements in DOM
    • wrapper.find()
  • fire DOM events like click, hover etc
    • in test have to sent the event manually, happens automatically in browser
    • element.trigger('click')
  • Test components with stores, crucial
    • leveraging data from store rightaway
  • Test component behaviours
    • making API calls
    • committing or dispatching mutations or actions with a * Vuex store
    • testing interaction

# Jest

Delightful testing

  • Writing meaningful test
  • How to test a module / feature in isolation?
    • Mocking, Test bed setup
  • Snapshots - For faster test execution

# Questions

  • Lazy loading | eager loading meaning?

Eager loading is the default approach of loading JavaScript code on to the DOM, for Vue JS this means using the import statement to bring in a component into the app.vue file. On the other hand, lazy loading refers to an approach where all of the scripts are not loaded on the DOM as the application starts, instead, they are only loaded when requested, making the JavaScript bundle size very small at initial load.

How to list all routes from router?

$router.options.route

router.options.routes

$router.options.routes will only have the initial set of routes. Anything added with addRoutes will be not present there.

# Resources

← Web Accessibility and W3C Standards →