¿Qué es Markup?

Markup es un sistema de plantillas reactivas JavaScript creado para simplificar la forma de crear interfaces de usuario web utilizando estándares web con las mínimas mejoras posibles en las API web nativas.

Consta de 3 API principales con utilidades adicionales para simplificar aún más las cosas:

• html Una función etiquetada JavaScript que le permite representar DOM utilizando cadenas literales de plantilla.
• state Una API de seguimiento de estado simple que le permite definir datos reactivos como desee.
• effect Una forma sencilla de definir las cosas que deben suceder cuando ciertos estados cambian.

¿Por qué necesitamos otra herramienta?

El desarrollo web moderno se ha vuelto muy dependiente de pasos de compilación complejos, configuración del compilador y dependencias masivas del marco. A menudo, todo lo que desea hacer es crear una interfaz reactiva, pero termina teniendo que configurar Vite, Babel, Webpack, Svelte o React solo para obtener una reactividad de estado básica.

Markup existe para resolver este problema. Cierra la brecha entre la manipulación cruda y tediosa de DOM y los marcos de componentes pesados. Al utilizar primitivas JavaScript modernas, específicamente literales de plantilla y funciones, Markup proporciona una reactividad limpia, declarativa y quirúrgicamente precisa sin ningún paso de compilación.

Compara cómo construyes un mostrador simple.

La tediosa forma con JavaScript puro

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)

El método Markup (simple y reactivo)

// 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)

Conceptos básicos

1. Funciones para la evaluación diferida

La reactividad en Markup está impulsada por funciones nativas de JavaScript. Dado que las funciones representan evaluaciones diferidas, se pueden ejecutar siempre que cambie su estado subyacente. Envolver sus valores o plantillas en funciones es el secreto detrás de las actualizaciones quirúrgicas DOM de Markup.

2. Literales de plantilla etiquetados

Markup utiliza el literal de plantilla etiquetado estándar html para representar DOM. Sin analizador JSX, sin sintaxis de plantilla propietaria y sin DOM virtual. Lo que escribe se analiza directamente en plantillas nativas HTML y se actualiza quirúrgicamente.

Beneficios clave

• 🚀 Paso de compilación cero: No se requieren compiladores, paquetes ni instalación de npm para comenzar. Coloque el enlace CDN en una etiqueta <script> y comience a codificar.
• ⚡ Actualizaciones quirúrgicas de DOM: No hay diferencias virtuales de DOM. Markup target-actualiza solo los nodos y atributos específicos que cambiaron.
• 📦 Ultraligero: Con solo 7,6 KB gzip (18 KB sin comprimir), es perfecto para microfrontends, widgets, prototipos y aplicaciones web livianas.
• 🔌 Estándar Web Components: se integra fácilmente con Web Components para proporcionar renderizado reactivo y administración simplificada del ciclo de vida.