Premise

• What I discuss here is not an official view.
• I will talk about "languages," but the discussion is heavily tailored to what I want to convey. Reality is not that simple.
• This is merely presenting one perspective—"you can also look at it this way."

Instructions to Computers

Whether implementing a web application, a native application, or a browser, everything is an instruction to a computer. And all of it can be expressed in binary.

However, it is not realistic for humans to write binary directly. This is like forcing a Japanese speaker to communicate in Morse code. While it can serve as a means of transmitting meaning, it is not practical.

The Abstraction of Programming Languages

Programming languages can be broadly classified into two categories.

General-purpose programming languages are languages for describing general computations not limited to a specific domain. Rust, TypeScript, JavaScript, Python, C, Haskell, and others fall into this category.

On the other hand, domain-specific languages (DSL) are languages specialized for a particular problem domain. HTML, CSS, SQL, JSON, and others fall into this category. And Vue can also be positioned here.

Hierarchy of Abstraction

Binary and ISA

ISA (Instruction Set Architecture) defines the instruction set of a CPU. x86, ARM, RISC-V, and others fall into this category.

ff 43 00 d1
ff 0f 00 b9
48 05 80 52
...

Writing to registers, arithmetic operations, conditional branching, jumps. All computations are expressed through combinations of these primitive instructions. if statements, while loops, function calls—all ultimately reduce to these.

Assembly

Assembly is binary converted to a human-readable format.

my_program:
  sub   sp, sp, #16
  str   wzr, [sp, #12]
  mov   w8, #42
  str   w8, [sp, #8]
  ldr   w8, [sp, #8]
  mov   w10, #2
...

sub is subtraction, mov is value transfer, jmp is jump. Through mnemonics, meaning was given to binary sequences.

But is this enough?

We want to give meaningful names to variables. We want to structure conditional branches. We want to describe repetition concisely. We want to group processes into units called functions. Assembly may be sufficient for computers, but it still places a high cognitive load on humans.

Evolution to High-Level Languages

int main() {
  int a = 42;
  if (a % 2 == 0) {
    a = 5;
  }
  a = a + 999;
  return a;
}

With the advent of C (and Fortran), it became possible to write programs in a form closer to human thinking. Abstractions such as variables, conditional branches, loops, and functions were introduced, significantly reducing the cognitive load on developers.

However, this was not the end.

Automatic memory management, enhanced type systems, object-oriented programming, functional programming, abstraction of concurrent processing... Every time new requirements emerged, new languages were born.

A language is a kind of "translator." It converts human intentions into a format that computers can understand. And in the process of translation, what can be written concisely and what is hidden determines the design philosophy of the language.

Motivation for Language Design

Behind the birth of a language, there is always the improvement of developer experience (DX).

• Semantics of syntax: Providing syntax that corresponds to units of thought, such as if, while, modules, namespaces
• Semantics of the target domain: Java and C++ for OOP, Rust and Go for system programming, HTML/CSS for UI description
• Optimization by compilers: Developers describe intent, and optimization is delegated to the compiler

A language is an accumulation of design decisions about "what to make easy to write" in a specific problem domain.

Vue.js is a Language

Now we get to the main topic.

What is Vue.js? Framework, library—there are various ways to describe it, but here I would like to present one perspective.

Vue.js is a domain-specific language for describing Web UI.

Let's consider what is needed to declaratively describe UI.

• Affinity with web standards: HTML, CSS, JavaScript
• Dynamic view description through data binding
• Component-based design
• Scoped styles
• Content passing through slots

<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
function increment() {
  count.value++;
}
</script>

<template>
  <button type="button" @click="increment">
    count is: {{ count }}
  </button>
</template>

<style scoped>
button {
  color: red;
}
</style>

This format called SFC (Single File Component) borrows the syntax of HTML/CSS/JavaScript while giving semantics specialized for UI description.

Practicality and Language Design

It is possible to design a completely new language. But is that realistic?

Creating a new language means building an ecosystem from scratch. Editor support, type checkers, linters, formatters, build tools... all of these need to be developed anew.

Vue.js took an incremental approach.

Leverage existing assets. Enjoy the benefits of the JavaScript ecosystem and TypeScript's type system as they are.

Maintain mental models. The script section uses JavaScript semantics directly. It does not compromise the writing experience of HTML and CSS.

This is like designing a new language as a "dialect." Without greatly deviating from the grammar of the mother tongue, but introducing unique vocabulary and syntax for specific expressions.

Optimization by Compilers

By having a compiler, a language can benefit from optimization.

Developers describe intent, and the compiler generates efficient code. Through this division of labor, developers can focus on essential problems and are freed from low-level optimization.

The Vue.js compiler has the following optimizations implemented.

• Static Hoisting: Hoists static nodes outside the rendering function to avoid regeneration
• Patch Flags: Assigns flags to dynamic parts to speed up diff detection
• Tree Flattening: Flattens nested static nodes to reduce traversal costs
• Vapor Mode: A more direct rendering mode without going through the virtual DOM

Details of these are described in the official documentation.

If you look at the output code in the SFC Playground, you can observe what transformations the compiler is performing.

Challenges

Designing and maintaining a language comes with significant costs.

• Language specification design: Balance between consistency and expressiveness
• Compiler implementation: Balancing correctness and performance
• Peripheral tool development: Language server, integration with other ecosystems

Vue.js is already mature in many areas, but there are still things to be done if you look for them. Opportunities for contribution always exist.

Conclusion

From binary to assembly, from assembly to high-level languages. The history of programming is a history of accumulated abstraction.

Vue.js can also be positioned in this lineage. A language that, for the problem domain of Web UI, provides semantics for declarative UI description while building on HTML/CSS/JavaScript.

What is Vue.js?

It's a language.