Qu'est-ce que Markup ?

Markup est un système de modèles réactifs JavaScript conçu pour simplifier la façon dont vous créez des interfaces utilisateur Web à l'aide des normes Web avec des améliorations minimales possibles des API Web natives.

Il se compose de 3 API principales avec des utilitaires supplémentaires pour simplifier encore plus les choses :

Pourquoi avons-nous besoin d’un autre outil ?

Le développement Web moderne est devenu fortement dépendant d'étapes de construction complexes, de configuration du compilateur et de dépendances massives au framework. Souvent, tout ce que vous voulez faire est de créer une interface réactive, mais vous finissez par devoir configurer Vite, Babel, Webpack, Svelte ou React juste pour obtenir une réactivité d'état de base.

Markup existe pour résoudre ce problème. Il comble le fossé entre la manipulation brute et fastidieuse de DOM et les frameworks de composants lourds. En utilisant les primitives JavaScript modernes, en particulier les littéraux de modèle et les fonctions, Markup offre une réactivité propre, déclarative et chirurgicalement précise sans aucune étape de construction.

Comparez la façon dont vous construisez un compteur simple.

La méthode fastidieuse en JavaScript natif

javascript
let count = 0

// tedious DOM definition and manipulation
const p = document.createElement('p')
p.textContent = `count: ${count}`

const btn = document.createElement('button')
btn.type = 'button'
btn.textContent = 'count up'

// limiting event driven
btn.addEventListener('onclick', () => {
    count += 1
    p.textContent = `count: ${count}`

    if (count > 10) {
        alert('You counted passed 10!')
    }
})

document.body.append(p, btn)

La méthode Markup (simple et réactive)

javascript
// reactive data
const [count, updateCount] = state(0)

// data driven
effect(() => {
    if (count() > 10) {
        alert('You counted passed 10!')
    }
})

const countUp = () => {
    updateCount((prev) => prev + 1)
}

// reactive DOM/templates
html`
    <p>count: ${count}</p>
    <button type="button" onclick="${countUp}">count up</button>
`.render(document.body)

Concepts de base

1. Fonctions pour l'évaluation paresseuse

La réactivité de Markup est optimisée par les fonctions natives de JavaScript. Étant donné que les fonctions représentent des évaluations paresseuses, elles peuvent être exécutées chaque fois que leur état sous-jacent change. Envelopper vos valeurs ou modèles dans des fonctions est le secret des mises à jour chirurgicales DOM de Markup.

2. Littéraux de modèle balisés

Markup utilise le littéral de modèle balisé standard html pour représenter le DOM. Pas d'analyseur JSX, pas de syntaxe de modèle propriétaire et pas de Virtual DOM. Ce que vous écrivez est analysé directement dans les modèles natifs HTML et mis à jour chirurgicalement.

Avantages clés

Commencer >>
modifier ce document