Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

Código fuente y demo

El código fuente está en mi GitHub y la demostración en mi página web de apps.

Explicación de la aplicación web

Ahora voy a explicar un poco sobre cómo funciona la aplicación.

Persistencia de datos con localStorage

Para guardar las notas utilicé localStorage, una API de los navegadores sobre la que ya he hablado anteriormente. Codifico y decodifico con JSON. Lo que guardo es:

1. La nota
2. Un Id
3. La fecha y hora de creación de la nota

Recordemos que los objetos de tipo Date no son serializables; por eso es que mejor guardo el timestamp que es una variable numérica.

Al recuperar las notas del almacenamiento en el navegador, las ordeno de acuerdo al timestamp; de esa manera las más recientes (ya sea agregadas o editadas) se muestran al inicio.

Ya escribí un post sobre cómo ordenar arreglos en JavaScript.

Uso de Vue.js

Utilicé Vue.JS para dibujar las notas y ocultar o mostrar formularios; además de cambiar el color. Por ejemplo, cada nota tiene el color de fondo de acuerdo a una variable llamada color.

Esa variable está ligada a un input de tipo color, y también escucho sus cambios. Cuando el color cambia, guardo el color en localStorage para que a la próxima se ponga de ese color; es decir, aunque el usuario refresque el color persiste,

Gracias a la reactividad de Vue.js, al cambiar el input también cambia el color de todas las notas.

Finalmente también utilicé Vue.js para ocultar o mostrar distintos formularios; ya que hay un formulario que se muestra al agregar, y otro al editar, el cual se muestra únicamente cuando el usuario hace click en el botón de Editar.

Bootstrap 4

Para el diseño utilicé el framework CSS Bootstrap 4; no es mi favorito, ya que mi favorito es Bulma CSS, pero igual sé manejarlo.

Me gusta mucho que lo único que hay que hacer es incluir el estilo y definir algunas clases de los componentes. Las notas son mostradas como una columna que ocupa el ancho total, para ser mostradas como un rectángulo.

Todo está dentro de un div con clase container y a su vez las columnas están dentro de un div con la clase row.

Conclusión

Gracias a la combinación de frameworks y código JavaScript con CSS es muy fácil centrarse en la lógica de la aplicación, evitando preocupaciones por el diseño o el dibujo de los datos.