Petite-vue

Hace tiempo que no publico en este blog. Aprovecho para crear una pequeña introducción a la nueva librera Petite Vue del mismo autor de Vue pero de tamaño mucho ms reducido (6kB). Veremos qué hace, cómo funciona, cómo compararlo con Vue y con Alpine.js y cómo empezar a usarlo. petite-vue est optimizado para pequeñas interacciones sobre pginas HTML... existentes generadas por un una plataforma de servidor, y con ello simplificando la mejora progresiva. Puedes incluir simplemente petite-vue en una etiqueta script para conseguir sus ventajas en una pgina HTML: {{ count }} inc Las ltimas versiones de Vue y de Alpine ocupan 22.9kB y 9.9kB minificadas y comprimidas lo que contrasta con los 6.4kB de petite-vue. Un desarrollador familiarizado con la sintaxis de templates de Vue encontrar muy fcil moverse entre Vue y petite-vue. Como subconjunto de Vue, petite-vue usa la mayora de la sintaxis familiar de Vue. Por ejemplo, petite-vue usa interpolación de templates del tipo {{cuenta}} y escuchadores de eventos de templates como @click. A diferencia de Vue, React y de la mayora de otras libreras y plataformas de frontend, petite-vue no usa virtual DOM. En su lugar, muta el DOM in situ. Como resultado, petite-vue no necesita un compilador decrementando su tamaño. El paquete @vue/reactivity es el responsable de la reactividad de ambos, Vue y Alpine. petite-vue usa la misma técnica de reactividad. petite-vue es similar a Vue en muchas formas. Como se ha mencionado, ofrece la misma sintaxis de templates y modelo @vue/reactivity provisto por Vue estndar. Pero la diferencia ms significativa es que petite-vue se ha creado para la mejora progresiva. Vue estndar se diseñó para usar un paso de generación o build para crear aplicaciones de una pgina (SPAs) con fuertes interacciones. Utiliza funciones de renderizado que reemplazan los templates existentes en DOM. petite-vue, por otro lado, recorre el DOM existente y lo muta in situ, por lo que no requiere de un paso de generación. petite-vue introduce algunas caractersticas que no estn ...Read More