digitta

Introducción a Petite Vue

2021-09-30T11:58:00.003+02:00

Hace tiempo que no publico en este blog. Aprovecho para crear una pequeña introducción a la nueva librería Petite Vue del mismo autor de Vue pero de tamaño mucho más 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 páginas HTML existentes generadas por un una plataforma de servidor, y con ello simplificando la mejora progresiva.

Características fundamentales

No necesita proceso de build

Puedes incluir simplemente petite-vue en una etiqueta script para conseguir sus ventajas en una página HTML:

<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- en cualquier lugar de la página: -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

Pequeño tamaño

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.

Sintaxis de templates compatible con Vue

Un desarrollador familiarizado con la sintaxis de templates de Vue encontrará muy fácil moverse entre Vue y petite-vue.

Como subconjunto de Vue, petite-vue usa la mayoría 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.

Sin DOM virtual

A diferencia de Vue, React y de la mayoría de otras librerías 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.

Dirigido por @vue/reactivity

El paquete @vue/reactivity es el responsable de la reactividad de ambos, Vue y Alpine. petite-vue usa la misma técnica de reactividad.

Cómo se compara petite-vue con Vue estándar

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 estándar. Pero la diferencia más significativa es que petite-vue se ha creado para la mejora progresiva.

Vue estándar se diseñó para usar un paso de generación o build para crear aplicaciones de una página (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.

Características exclusivas de petite-vue

petite-vue introduce algunas características que no están disponibles en el Vue estándar y que ayudan a optimizar la mejora progresiva:

v-scope

En petite-vue, v-scope es una directiva que marca la región de la página controlada por petite-vue. También puedes usar la directiva v-scope para pasar estados a los que una región particular de la página tendrá acceso.

v-effect

v-effect es una directiva usada para ejecutar declaraciones reactivas inline con petite-vue. En el código siguiente, la variable cuenta es reactiva , así que el v-effect se reejecutará cuando cambie la cuenta, entonces actualizar el div con el valor actual de cuenta:

<div v-scope="{ count: 0 }">
  <div v-effect="$el.textContent = count"></div>
  <button @click="count++">++</button>
</div>

Eventos de ciclo de vida

petite-vue viene con dos eventos de ciclo de vida, @mounted y @unmounted que te permiten escuchar cuando petite-vue se monta o desmonta en la página.

Características compatibles con Vue

Ahora que hemos visto las nuevas características que petite-vue trae, veamos las que ya existían en Vue:

{{ }}: vinculaciones de texto
v-bind y : : manejo especial de estilos y clases
v-on y @ : manejo de eventos
v-model: representa todos los tipos de entradas y vinculaciones :value no cadenas
v-if/ v-else / v-else-if
v-for
v-show
v-hmtl
v-pre
v-once
v-cloak
reactive()
nextTick()
Template refs

Características exclusivas de Vue

Dado su ámbito reducido, petite-vue ha descartado algunas de las características de Vue estándar:

ref() ycomputed()
Funciones de renderizado: petite-vue no tiene virtual DOM
Reactividad para tipos de colección: Map, Set, etc.
Componentes Transition, keep-alive, <teleport>, y <suspense
v-for: desestructuración profunda
v-on="object"
v-is y <component :is="newComponent">
v-bind:style auto-prefijado

Cómo se compara petite-vue con Alpine

Aunque petite-vue está inspirado por Alpine y resuelve problemas similares, difiere de Alpine debido a su minimalismo y a su compatibilidad con Vue.

petite-vue ocupa unos dos tercios del tamaño de Alpine. A diferencia de Alpine, no trae un sistema de transiciones.

Alpine y petite-vue tienen diferentes diseños. Aunque Alpine se parece a la estructura de Vue de alguna forma, peite-vue está más alineado con el Vue estándar, minimizando el coste den cambios que tendrás si quieres pasar entre petite-vue y Vue.

Empezar con petite-vue

Para empezar con petite-vue, necesitas incluir una etiqueta script que apunte al paquete de petite-vue. Creemos una simple aplicación de votación impulsada por petite-vue.

Primero creemos un archivo index.html. En su cuerpo, añade el siguiente código:

 <script src="https://unpkg.com/petite-vue" defer init></script>
  <div v-scope="{ votosPositivos: 0, votosNegativos: 0 }">
    <p>
      {{ votosPositivos }} <button @click="votosPositivos++">&#128077;</button>
    </p>
    <p>
      {{ votosNegativos }} <button @click="votosNegativos++">&#128078;</button>
    </p>
  </div>

El atributo defer de la etiqueta script hace que la carga del código de petite-vue se posponga hasta que el contenido HTML se haya parseado por el navegador.

El atributo init le dice a petite-vue que automáticamente consulte e inicialice todos los elementos que tengan v-scope.

El v-scope le dice a petite-vue que región de la página gestionar. También pasamos los estados votosPositivos y votosNegativos para que estén disponibles en esa región.

Inicialización manual

Si no quieres que petite-vue inicialice automáticamente todos los elementos que tengan el atributo v-scope, puedes inicializarlos manualmente cambiando el script:

<script src="https://unpkg.com/petite-vue"></script>
<script>
  PetiteVue.createApp().mount()
</script>

Alternativamente puedes usar la distribución de petite-vue compatible con módulos ES.

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'
  createApp().mount()
</script>

URL de CDN de producción de petite-vue

Estamos accediendo a petite-vue mediante una URL de CDN (red de distribución de contenidos). Estamos usando una URL reducida https://unpkg.com/petite-vue que es perfecta para prototipos pero no para producción. Queremos evitar costes de resolución y de redirección, así que usaremos las URLs completas.

La URL de distribución en producción global https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.iife.js expone PetiteVue global y también soporta autoinicialización.

La URL de distribución en producción ESM (módulos) https://unpkg.com/petite-vue@0.2.2/dist/petite-vue.es.js debe usarse en un bloque <script type="module">.

Cuándo usar petite-vue

Hemos aprendido las características de petite-vue y lo que puede hacer. Veamos las mejores situaciones para las que petite-vue está diseñado:

Prototipado rápido cuando no necesitas una herramienta de generación/build
Agregar funcionalidad Vue en plataformas de servidor como Sails, Laravel o Rails
Construir páginas landing o de marketing que sean estáticas con pocas interacciones
En cualquier lugar donde usarías Alpine normalmente

Conclusión

peitet-vue es una versión más ligera de Vue que añade interaciones eficientes a las páginas. petite-vue es aún nuevo (2021) e incluye un aviso sobre errores potenciales. En cualquier caso, petite-vue ya es una opción funcional con una utilidad y potencial fuertes. Es especialmente útil para el prototipado rápido, rociando funcionalidad Vue en plataformas de servidor, y construyendo páginas estáticas.

Aprender Javascript en 2016

2017-01-04T13:39:00.001+01:00

http://www.etnassoft.com/2017/01/03/aprender-javascript-en-2016/

Interesante traducción de un artículo que da justo en el clavo. Programar en Javascript actualmente siguiendo las tendencias del mercado implica aprender una cantidad absurda de tecnologías. Simplemente recordar el principio KISS (Keep It Simple, Stupid), algo así como "Hazlo fácil, estúpido"... Complicarse la vida por intentar seguir las tendencias nunca ha sido tan fácil...

Couchbase Server

2013-01-08T20:29:00.001+01:00

Acaba de ser publicado para varias plataformas la versión 2.0 del Couchbase Server. Una interesante base de datos que sigue el paradigma NoSQL que se basa en un modelo flexible sobre JSON que facilitar modificar aplicaciones sin las restricciones de tener esquemas de datos fijos. Además posee un rendimiento elevado gracias a liberarse de las restricciones propias de las bases de datos relacionales, lo que ofrece una velocidad muy elevada en comparación con aquellas. Y otra ventaja es la escalabilidad, ya que la tecnología se ha diseñado con la idea de soportar cambios de topología sin necesidad de detener el servicio en ningún momento.

2012-10-24T09:27:00.001+02:00

plv8js es un añadido de lenguaje procedural para PostgreSQL, lo que significa que puedes definir funciones JavaScript que se ejecutan en un servidor PostgreSQL usando el google V8 Engine. Una pareja perfecta para los recientes campos JSON de PostgreSQL.

2012-10-15T14:02:00.002+02:00

QuirksBlog ha publicado los resultados de una encuesta sobre uso de librería en Javascript, según el cuál, el 80% de desarrolladores usa frecuentemente jQuery, el 35% Modernizr, el 16% Underscore, y el 11% Backbone

2012-07-18T17:52:00.001+02:00

Este artículo en inglés explica magistralmente la necesidad de mantener actualizado el navegador de Internet. Una referencia interesante orientada a realizar una labor pedagógica hacia los usuarios de productos basados en la web.

2012-05-31T09:08:00.000+02:00

Stabilizing Couchbase Server 2.0. Sólo notificar el avance en el desarrollo de una nueva base de datos de documentos distribuida, fiable, eficiente y de alto rendimiento. Está basada en el conocido proyecto de "NoSQL" CouchDB...

2012-05-14T13:55:00.001+02:00

Firebase es un servicio/nube que automáticamente sincroniza datos entre tus clientes y sus servidores. Libera a los desarrolladores de preocuparse por cómo sus datos serán transmitidos y almacenados, y les permite centrarse en la lógica de la aplicación. Las aplicaciones que usan Firebase pueden escribirse enteramente con Javascript en el navegador, actualizarse directamente en tiempo real, son inherentemente escalables e interoperan con servicios existentes.

2012-05-14T11:52:00.000+02:00

Dataset es una librería JS de gestión y transformación de datos en el lado del cliente. Dataset facilita la gestión de datos en el lado del cliente gestionando la carga, proceso, ordenación, consulta y manipulación de datos desde todo tipo de fuentes. http://misoproject.com/dataset/

2012-04-25T09:21:00.002+02:00

Gracias a un mensaje de Google al respecto de Codejam, descubro ideone.com, un IDE (editor) para programar online con prácticamente cualquier lenguaje. Interesante.

Los lenguajes más usados según libros vendidos

2012-04-17T17:51:00.002+02:00

Me he encontrado con una curiosa gráfica que calcula los lenguajes de programación más usados a partir de la venta de libros en o'Reilly.

Según ella, Java y Javascript son las que más han crecido. Junto con C++. Por otro lado, han habido descensos en C#, Objective C, PHP o Visual Basic.

via readwriteweb

2012-04-17T14:58:00.002+02:00

Un IDE futurista interesante:

Light Table - a new IDE from Chris Granger on Vimeo.

via genbetadev

2012-03-12T10:18:00.001+01:00

Andrea de Web Reflection publica publica un sistema de colas de procesos, ideal para trabajar con procesos asíncronos, cuya particularidad es que ocupa sólo 96 carácteres, y que incluye ciertas características interesantes. Un lector propone una modificación bastante interesante.

2012-03-08T19:39:00.001+01:00

Andrea Giammarchi de Web Reflection propone, dado el éxito de CoffeeScript y su sucinta sintaxis, eliminar la palabra clave function de JavaScript. La idea es detectar que estamos definiendo una función a partir del par ( y ) que define los parámetros seguido de la pareja { y } que define el cuerpo del código. Además propone hacer implícito el return opcionalmente con el resultado de la última órden del código.

Por ejemplo, [1,2,3].filter(function (x){return x < 1}); se escribiría así:

[1,2,3].filter((x){x < 1});

¿Te parece buena idea?

2012-03-06T20:07:00.000+01:00

CoffeeTable, el proyecto de Alec Perkins acaba de ser actualizado con expansión de objetos. Se trata de una consola desplegable para experimentar en una página usando CoffeeScript como lenguaje. La consola tiene historial persistente y auto-sugerencias. Resulta ideal para modelar el DOM "al vuelo" y junto con un sistema que permita guardar cambios, podría valer para programar directamente sobre la aplicación web. Perfecto para aprender o para proyectos no ambiciosos.

2012-02-21T23:45:00.000+01:00

Essential JavaScript Design Patterns by Addy Osmani es un libro gratuito sobre patrones de diseño en Javascript, imprescindible para usar el lenguaje para realizar aplicaciones mínimamente complejas. Via genbetadev.com

2012-02-13T22:50:00.000+01:00

High Scalability - High Scalability - Tumblr Architecture - 15 Billion Page Views a Month and Harder to Scale than Twitter Un interesante artículo sobre la arquitectura usada para la plataforma de micro-blogging Tumblr con ideas excelentes sobre escalabilidad.

2012-02-12T16:45:00.000+01:00

Efficient JavaScript - Dev.Opera. Interesante artículo por parte del equipo de desarrollo del navegador Opera sobre cómo programar eficientemente con Javascript.

2012-02-06T23:43:00.000+01:00

CreativeJS workshops in UK and Amsterdam. Interesante vídeo con la creación de un sistema de partículas en 3 minutos:

CreativeJS for non-coders from Seb Lee-Delisle on Vimeo.

2012-02-02T20:32:00.000+01:00

Primer screencast en castellano de LungoJS. Trata sobre el easy prototype o lo fácil que resulta crear prototipos de WebApps prácticamente sin tocar código... De Vimeo

2012-02-02T20:21:00.000+01:00

Hace unos meses apareció jsfiddle.net. Era una web que permitía publicar pruebas o demostraciones de código de aplicaciones web separando el HTML, el CSS y el código Javascript y mostrando el resultado. Ha resultado ser más que útil y su uso es habitual. SQL Fiddle es una nueva herramienta para desarrolladores de bases de datos que necesiten probar consultas SQL online. En este caso cuenta con una sección para el lenguaje de definición DDL y otra para la consulta SQL, mostrando los resultados en una tabla. Funciona con MSSQL, MySQL, Oracle y PostgreSQL. Interesante para mostrar conceptos de lenguaje o para aprender...

2012-01-31T13:14:00.000+01:00

The top 20 HTML5 games. Los juegos, siempre lo he pensado, forman una de las categorías más exigentes. La necesidad de optimizar procesos es vital porque de lo contrario la experiencia obtenida es muy deficiente. En estos 20 ejemplos queda claro que empieza a haber una fuerte tendencia hacia portar juegos cada vez más complejos al navegador (sin plugins). Probablemente esto también acabe pasando en las plataformas móviles...

2012-01-31T12:49:00.000+01:00

2011: A Badass JavaScript Year In Review. Un resumen de los proyectos Javascript más significativos de 2011. La tendencia a invadir cada vez más áreas de la computación, ayudado por las implementaciones de los navegadores, dibujan un futuro más que prometedor al lenguaje...

2012-01-28T19:41:00.000+01:00

IcedCoffeeScript es un interesante fork de CoffeeScript al que le han añadido await y defer que mejoran el flujo de control asíncrono en el navegador y en el servidor. Con ello pretenden eliminar las pirámides de funciones callback y a las reescrituras masivas de código ante cambios de requerimientos de sincronización.

2012-01-27T09:20:00.000+01:00

dust.js es un motor de templates en JavaScript diseñado para ofrecer una separación limpia entre presentación y lógica sin sacrificar la facilidad de uso, y orientada a aplicaciones asíncronas o de streaming. Me ha llamado la atención porque lo han elegido en LinkedIn para sustituir su antiguo sistema Java de templates en el servidor...