O que é Markup?

Markup é um sistema de modelagem reativa JavaScript desenvolvido para simplificar a maneira como você cria interfaces de usuário da Web usando padrões da Web com o mínimo de aprimoramentos possíveis nas APIs da Web nativas.

Consiste em 3 APIs principais com utilitários adicionais para simplificar ainda mais as coisas:

Por que precisamos de outra ferramenta?

O desenvolvimento web moderno tornou-se fortemente dependente de etapas complexas de construção, configuração de compilador e dependências massivas de estrutura. Freqüentemente, tudo o que você deseja fazer é construir uma interface reativa, mas acaba tendo que configurar o Vite, Babel, Webpack, Svelte ou React apenas para obter a reatividade básica do estado.

Markup existe para resolver esse problema. Ele preenche a lacuna entre a manipulação bruta e tediosa de DOM e estruturas de componentes pesados. Ao utilizar primitivos JavaScript modernos — especificamente literais de modelo e funções — o Markup fornece reatividade limpa, declarativa e cirurgicamente precisa sem quaisquer etapas de construção.

Compare como você constrói um contador simples.

A tediosa abordagem com JavaScript puro

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)

O jeito Markup (simples e reativo)

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)

Conceitos Básicos

1. Funções para avaliação preguiçosa

A reatividade no Markup é alimentada por funções nativas do JavaScript. Como as funções representam avaliações lentas, elas podem ser executadas sempre que seu estado subjacente mudar. Agrupar seus valores ou modelos em funções é o segredo por trás das atualizações cirúrgicas DOM do Markup.

2. Literais de modelo marcados

Markup usa o literal de modelo marcado html padrão para representar o DOM. Sem analisador JSX, sem sintaxe de modelo proprietária e sem Virtual DOM. O que você escreve é ​​analisado diretamente nos modelos HTML nativos e atualizado cirurgicamente.

Principais benefícios

Comece >>
editar este documento