petite-vue

Progressively enhancing every application?

Vue.js Amsterdam 2022

petite-vue

Progressively enhancing every application?

Vue.js Amsterdam 2022

About me

Alexander Lichter

Web Development Consultant
Speaker & Instructor
Nuxt.js Maintainer
@TheAlexLichter
https://lichter.io
manniL

When we use …

…we often develop SPAs

But what percentage of all websites are SPAs?

Nobody knows!

We don’t know how many SPAs exist out there!

~15% of all websites use a modern JavaScript framework (Web Almanac 2021)
- e.g. Vue, Svelte or React

But not all these sites are SPAs…

We writing applications, right?

But we don’t always have a green field for our beloved stack
Often, existing projects are no SPAs
Maybe they use the LAMP stack or are "traditional server-rendered" Java based monoliths

Decisions are often made against migrating to an SPA

Not enough time
Budget too low
Too much domain knowledge in the code
Not enough experience in writing SPAs / in working with the new framework

But all these applications still need interactivity!

Ideally with a modern approach
And still support devices with no JavaScript as well

Progressive Enhancement

GIF showing the 'enhance' word pixelated first, then being enhanced and depixeled step by step

Progressive Enhancement

Deliver essential functionalities and content to as many users as possible
Also to these with disabled/unavailable JavaScript
Great design philosophy for server-rendered applications ( / / / / …)

How to apply Progressive Enhancement?

Idea: Just using directly

You can do that, but…
Build step setup
22.5 kB (but treeshakable)
Too powerful? (ROLP)
Too many things to learn for devs new to JS frameworks?

Why not using directly via CDN then?

No build step anymore, but…
35.5kB (+13) due to runtime template compiler
No DOM reuse possible
- possible when using SSR ()
- Compiling templates at run-time
- Throwing away the "existing DOM" that came from the server
ROLP / too much new too learn apply here too

How about vanilla then?

No extra files to transfer
Only JS files containing logic
Feasible for tiny bits of interactivity
- e.g. hamburger menu
Can be hard to maintain, reuse and not declarative

How about vanilla then?

const form = document.querySelector('#taskform')
const inputElement = document.querySelector('#taskform input')
form.addEventListener('submit', (event) => {
  event.preventDefault()
  const input = inputElement.value
  const isEmpty = !input.length
  if (isEmpty) {
    alert("Please Enter a Task")
    return
  }

  createTask(input)
  initRemoveForDeleteButtons()
  clearInput()
})

function createTask(input) {
  document.querySelector('#tasks').innerHTML += `
    <div class="task">
        <span class="taskname">
            ${input}
        </span>
        <button class="delete">
            Remove
        </button>
    </div>
  `
}

function initRemoveForDeleteButtons() {
  const currentTasks = document.querySelectorAll(".delete")

  Array.from(currentTasks).forEach(task => {
    task.onclick = function () {
      this.parentNode.remove()
    }
  })
}

function clearInput() {
  inputElement.value = ""
}
const form = document.querySelector('#taskform')
const inputElement = document.querySelector('#taskform input')
form.addEventListener('submit', (event) => {
  event.preventDefault()
  const input = inputElement.value
  const isEmpty = !input.length
  if (isEmpty) {
    alert("Please Enter a Task")
    return
  }

  createTask(input)
  initRemoveForDeleteButtons()
  clearInput()
})

function createTask(input) {
  document.querySelector('#tasks').innerHTML += `
    <div class="task">
        <span class="taskname">
            ${input}
        </span>
        <button class="delete">
            Remove
        </button>
    </div>
  `
}

function initRemoveForDeleteButtons() {
  const currentTasks = document.querySelectorAll(".delete")

  Array.from(currentTasks).forEach(task => {
    task.onclick = function () {
      this.parentNode.remove()
    }
  })
}

function clearInput() {
  inputElement.value = ""
}

<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script>
</head>

<body>
  <div class="container">
    <h1>Todo List</h1>
    <form id="taskform">
      <input type="text" placeholder="Enter Task">
      <button type="submit">Add</button>
    </form>
    <div id="tasks"></div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <script src="main.js" defer></script>
</head>

<body>
  <div class="container">
    <h1>Todo List</h1>
    <form id="taskform">
      <input type="text" placeholder="Enter Task">
      <button type="submit">Add</button>
    </form>
    <div id="tasks"></div>
  </div>
</body>
</html>

Okay, one more try - jQuery

Don't be like Jason (@JSONTheDev)!

But what should we use?

`petite-vue`

Released on Jul 2, 2021 (roughly a year ago!)
Created by Evan You as a side project
A minimal subset of Vue (5.5 kB)
Keeps Vue-like syntax & is powered by @vue/reactivity
Reduced feature scope
No VDOM
Can mount to specific areas of the page (as Vue can)

From a Vue SFC to the little sister

<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
<div>
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
<div>
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</template>

App.vue

<body>
<div>
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</body>
<body>
<div>
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</body>

Move the template into the HTML file

<body>
<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</body>
<body>
<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
</body>

Add v-scope directive

<script src="https://unpkg.com/petite-vue" defer init></script>
<script src="https://unpkg.com/petite-vue" defer init></script>

Import petite-vue

Assembled counter example

<script src="https://unpkg.com/petite-vue" defer init></script>

<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>
<script src="https://unpkg.com/petite-vue" defer init></script>

<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>

full-counter-example.html

When importing petite-vue, we can set the init attribute so it will initialize automatically
In our template, we declare the state via the v-scope directive. It will be accessible for all descendant elements
Mustache syntax and event listeners work as usual!

Without auto init

<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button>
</div>

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue
    .createApp()
    .mount()
</script>
<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button>
</div>

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue
    .createApp()
    .mount()
</script>

<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>
<div v-scope="{ count: 0 }">
  Count: {{ count }}
  <button @click="count++">
    Increment
  </button> 
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

When not using init, we have to call the createApp and mount manually
We can also use the ESM build 🔥

Mounting to specific elements

<div>
  <div>
    <h1>Welcome to my app!</h1>
    <h2>{{ count }} won't render here</h2>
    <h3>Because petite-vue did not mounted here</h3>
  </div>
  <div v-scope="{ count: 0 }" id="counter">
    Count: {{ count }}
    <button @click="count++">
      Increment
    </button> 
  </div>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount('#counter')
</script>
<div>
  <div>
    <h1>Welcome to my app!</h1>
    <h2>{{ count }} won't render here</h2>
    <h3>Because petite-vue did not mounted here</h3>
  </div>
  <div v-scope="{ count: 0 }" id="counter">
    Count: {{ count }}
    <button @click="count++">
      Increment
    </button> 
  </div>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount('#counter')
</script>

Often we only want to make a small part of our app interactive
In this case we can mark the element, e.g. via id, and pass the selector to the mount call
- like in Vue.js
Other parts of the DOM are not scanned by petite-vue

`createApp` as root scope

<div v-scope>
  Count: {{ count }}
</div>
<div v-scope>
  <button @click="increment">
    Increment {{ count }} by one
  </button> 
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    count: 0,
    increment() {
      this.count++
    }
  }).mount()
</script>
<div v-scope>
  Count: {{ count }}
</div>
<div v-scope>
  <button @click="increment">
    Increment {{ count }} by one
  </button> 
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    count: 0,
    increment() {
      this.count++
    }
  }).mount()
</script>

You can pass state to the createApp function
It will be available in all parts touched by petite-vue
Also, you can pass methods and access data in the Options API style

Computed properties

…do not exist in petite-vue
Instead you can use a getter function!

<div v-scope>
  Count: {{ count }}
  Digit sum {{ digitSum }}
  <button @click="count++">
    Increment
  </button> 
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    count: 0,
    get digitSum() {
      return String(this.count)
        .split('')
        .reduce((x, a) => x + Number(a), 0)
    }
  }).mount()
</script>
<div v-scope>
  Count: {{ count }}
  Digit sum {{ digitSum }}
  <button @click="count++">
    Increment
  </button> 
</div>
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    count: 0,
    get digitSum() {
      return String(this.count)
        .split('')
        .reduce((x, a) => x + Number(a), 0)
    }
  }).mount()
</script>

Lifecycle hooks in `petite-vue`

There are only two hooks when using petite-vue
@vue:mounted and @vue:unmounted
They can be used for each HTML element
$el can be used inline to access the element

<div v-scope="{ show: false }">
  <button @click="show = !show">
    Toggle it!
  </button>
  <div
    v-if="show" 
    @vue:unmounted="console.log('unmounted', $el)" 
    @vue:mounted="console.log('mounted', $el)"
  >
    Content is being shown!
  </div>
</div>
<div v-scope="{ show: false }">
  <button @click="show = !show">
    Toggle it!
  </button>
  <div
    v-if="show" 
    @vue:unmounted="console.log('unmounted', $el)" 
    @vue:mounted="console.log('mounted', $el)"
  >
    Content is being shown!
  </div>
</div>

`v-effect`

Every app needs side effects
To trigger them based on reactive values we can use v-effect

<div v-scope v-effect="getData()">
  <input v-model="input" type="number" min="1" max="10">
  <pre>{{user.name}}</pre>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    input: '',
    user: {},
    async getData () {
      if(!this.input) {
        return
      }
      const url = 'https://jsonplaceholder.typicode.com/users/' + this.input
      this.user = await fetch(url).then(r => r.json())
    }
  }).mount()
</script>
<div v-scope v-effect="getData()">
  <input v-model="input" type="number" min="1" max="10">
  <pre>{{user.name}}</pre>
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp({
    input: '',
    user: {},
    async getData () {
      if(!this.input) {
        return
      }
      const url = 'https://jsonplaceholder.typicode.com/users/' + this.input
      this.user = await fetch(url).then(r => r.json())
    }
  }).mount()
</script>

Components in `petite-vue` I

petite-vue provides a way to abstract components too
Components are functions returning the components state, getters and methods

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  
  function NumberList(props) {
    return {
      numbers: props.numbers,
      get min() {
        return Math.min(...this.numbers)
      },
      addNumber() {
        this.numbers.push(this.numbers.length)
      }
    }
  }
  
  createApp({ NumberList }).mount()
</script>
<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  
  function NumberList(props) {
    return {
      numbers: props.numbers,
      get min() {
        return Math.min(...this.numbers)
      },
      addNumber() {
        this.numbers.push(this.numbers.length)
      }
    }
  }
  
  createApp({ NumberList }).mount()
</script>

<div v-scope="NumberList({ numbers: [1, 2, 3] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

<div v-scope="NumberList({ numbers: [0] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>
<div v-scope="NumberList({ numbers: [1, 2, 3] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

<div v-scope="NumberList({ numbers: [0] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

Components in `petite-vue` II

But what about component templates?
<template> to the rescue!

<div v-scope="NumberList({ numbers: [1, 2, 3] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

<div v-scope="NumberList({ numbers: [0] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>
<div v-scope="NumberList({ numbers: [1, 2, 3] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

<div v-scope="NumberList({ numbers: [0] })">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</div>

<div v-scope="NumberList({ numbers: [1, 2, 3] })">
<div v-scope="NumberList({ numbers: [0] })">

<template id="number-list-template">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</template>

<script type="module">
  /* ... */
  function NumberList(props) {
    return {
      $template: '#number-list-template',
      /* ... */
    }
  }
  createApp({ NumberList }).mount()
</script>
<div v-scope="NumberList({ numbers: [1, 2, 3] })">
<div v-scope="NumberList({ numbers: [0] })">

<template id="number-list-template">
  <p>{{ numbers }}</p>
  <p>Min: {{ min }}</p>
  <button @click="addNumber">Add Number</button>
</template>

<script type="module">
  /* ... */
  function NumberList(props) {
    return {
      $template: '#number-list-template',
      /* ... */
    }
  }
  createApp({ NumberList }).mount()
</script>

Limitations of `petite-vue`

No render functions (due to missing VDOM)
Teleports, Suspense and other SPA features
Transitions (can be theoretically added as a plugin though)
No ref, no computed
No CSP-safe build (there is a fork for that though)

Alpine.js

<div v-scope="{ count: 0 }">
  <button @click="count++">Increment</button> 
  <span>{{ count }}</span>
</div>
<div v-scope="{ count: 0 }">
  <button @click="count++">Increment</button> 
  <span>{{ count }}</span>
</div>

petite-vue.html

<div x-data="{ count: 0 }">
  <button x-on:click="count++">Increment</button>
  <span x-text="count"></span>
</div>
<div x-data="{ count: 0 }">
  <button x-on:click="count++">Increment</button>
  <span x-text="count"></span>
</div>

alpine.html

Alpine.js and `petite-vue`

Alpine.js is a lightweight JavaScript framework as well
It was inspired by Vue and uses @vue/reactivity under the hood
petite-vue on the other hand was inspired by Alpine

Differences between Alpine and `petite-vue`

Alpine is 2x larger than petite-vue and comes with a few more features (like a transition system)
It also steers towards its own ecosystem
petite-vue was thougth as even more minimal compared to Alpine, but also "vue compatible"
Comes in handy for potentional later migration to Vue.js if desired

My decision tree

When building applications

Live Coding

Conclusion

Not all projects are SPAs and some don’t have to!
Use the appropriate tools in your toolbelt
petite-vue + progressive enhancement = perfect match
Part of the Vue ecosystem
Easy migration to "full Vue"

Thanks for your attention

Alexander Lichter

Web Development Consultant
Speaker & Instructor
Nuxt.js Maintainer
@TheAlexLichter
https://lichter.io
manniL

Thanks a lot to my sponsors!

petite-vue

Progressively enhancing every application?

Vue.js Amsterdam 2022

About me

Alexander Lichter

petite-vue

Progressively enhancing every application?

Vue.js Amsterdam 2022

About me

Alexander Lichter

When we use …

…we often develop SPAs

But what percentage of all websites are SPAs?

Nobody knows!

We don’t know how many SPAs exist out there!

But not all these sites are SPAs…

We writing applications, right?

But all these applications still need interactivity!

Progressive Enhancement

Progressive Enhancement

Idea: Just using directly

Why not using directly via CDN then?

How about vanilla then?

How about vanilla then?

Okay, one more try - jQuery

Okay, one more try - jQuery

But what should we use?

petite-vue

From a Vue SFC to the little sister

Assembled counter example

Without auto init

Mounting to specific elements

createApp as root scope

Computed properties

Lifecycle hooks in petite-vue

v-effect

Components in petite-vue I

Components in petite-vue II

Limitations of petite-vue

Alpine.js

Alpine.js and petite-vue

Differences between Alpine and petite-vue

My decision tree

Live Coding

Conclusion

Thanks for your attention

Alexander Lichter

Thanks a lot to my sponsors!

`petite-vue`

`createApp` as root scope

Lifecycle hooks in `petite-vue`

`v-effect`

Components in `petite-vue` I

Components in `petite-vue` II

Limitations of `petite-vue`

Alpine.js and `petite-vue`

Differences between Alpine and `petite-vue`