programación

Componentes Vue.js en español

Vayamos rápido al grano sobre el tema de componentes en Vue.js. Por ahora, sólo necesitas saber que todos los componentes en Vue son esencialmente una extensión a la instancia de Vue.

// Instancia Vue
new Vue({
  el: '#some-element',
  // options
})

Utilizando el entorno ofrecido por la herramienta vue-cli, vamos a utilizar los archivos iniciales para ver como trabajamos con los components. Veamos el siguiente ejemplo:

import Vue from 'vue'
import App from './App.vue'

// Extendemos las instancia para crear los componentes
Vue.component('comp1', {
  template:'<div>Component 1</div>' 
}) 

Vue.component('comp2', { 
  template:'<div>Component 2</div>' 
}) 

Vue.component('comp3', { 
  template:'<div>Component 3</div>' 
}) 

// Instancia de Vue 
new Vue({ 
  el: '#app', 
  render: h => h(App) 
})

Continuar la lectura…

programación

Construir un ambiente de desarrollo para Vue.js usando Webpack

Después de haber escrito sobre lo básico de Vue.js es momento de pasar al próximo nivel, Vue.js usando Webpack. La idea este “próximo nivel” es poder tener un ambiente relativamente completo para desarrollar nuestro front-end.

Vue ha desarrollado una herramienta increíblemente práctica para este propósito. La herramienta es conocida como vue-cli y contiene todo lo necesario para arrancar el ambiente de desarrollo. Lo bueno de utilizar esta herramienta es que provee una manera oficial y opinionada de empezar un proyecto. Además provee espacio para adaptarlo a nuestra necesidades y gustos.

Para comenzar a utilizar vue-cli debes tener: Node.js (>=4.x, 6.x siendo preferido) y Git. En cuanto a npm una recomendación es tener npm >= 3.x.

Instalamos de la siguiente manera:

$ npm install -g vue-cli

Actualmente los templates oficiales disponible son:

  • webpack
  • webpack-simple
  • browserify
  • browserify-simple
  • simple

Si deseas utilizar vue-cli para trabajar con tu propio template los puedes hacer fácilmente. La documentación oficial lo explica con lujo de detalle.

Para propósitos de este tutorial y porque es el template que más utilizo estaremos trabajando con webpack. Esta versión es bien completa e incluye todo lo que necesitamos: Webpack Dev Server, Babel setup, Hot Reloading, Unit Testing, etc.

Ya que hemos instalado vue-cli, vamos a utilizarlo para crear nuestro proyecto y de una vez procederemos a instalar las dependencias.

$ vue init webpack my-project

$ cd my-project

$ npm install

Ya con todo en su lugar vamos a inicial el proyecto.

$ npm run dev

Conclusión

Es hora de repasar que tenemos hasta el momento. Hemos creado un proyecto a través de la herramienta vue-cli. Esta herramienta utiliza Webpack para manejar todo el ambiente de desarrollo de Vue. Nada “fancy” por el momento pero si analizamos todo lo que tenemos con tan solo usar vue-cli, comprenderemos el gran ahorro en tiempo y stress que esta simple herramienta nos provee.

micro notas

Micro Notas #11

A través de estas micro notas hablo brevemente de aquellas noticias o enlaces que me han parecido curiosas y relevantes al mundo de la programación y la tecnología.

How DNS works – colorida y muy animada manera de aprender el proceso detrás del funcionamiento de un Domain Name Server. Si tienes curiosidad en saber que ocurre una vez accedes el url a través del navegador este recurso es estupendo. Prácticamente cubre todos los actores envueltos en proceso de resolver el domain name, el camino hasta el server final y de nuevo el regreso a casa.

Matrix Multiplication – Por esa misma línea de aprender como funcionan las cosas, este proyecto muestra de forma visual como funciona la multiplicación de matrices. Buen proyecto si estás aprendiendo Typescript.

Consejos para reforzar la destreza de la programación – A través de los artículos Proof You Can Become a Better Programmer y Tips for Self-Learning Programming podrás obtener buenos consejos para mejorar las destrezas de programación. Lo que me ha gustado de estos artículos es el contraste de como llegar al mismo fin por diferentes caminos.

programación

Malas costumbres

Recientemente estuve escuchando el episodio Two Anti-Patterns To Avoid del podcast Developer Tea (excelente podcast por cierto). En el episodio Jonathan Cutrell discute dos anti-patrones, o como mejor me gusta llamar, malas costumbres que podemos cometer en el código fuente de nuestro proyecto. Inicialmente pensé en saltarme el episodio pero teniendo en cuenta que solo discutiría dos me dio curiosidad. De todas esas cosas que sabemos no debemos hacer pero aún así hacemos mientras programados me llamó la atención que dos cosas el anfitrión destacaría en la conversación. Continuar la lectura…

tecnología

Hello Open Source

Es increíble el momentum que está experimentando el movimiento Open Source Software en la industria del desarrollo de software. Vemos como los principales nombres de la industria, lanzan proyectos en donde gente como tú y yo podemos colaborar. Con el OSS no solo podemos ver el código fuente sino también podemos sugerir y aportar modificaciones al mismo. Podemos crear una gran lista de pro vs cons de este mover, pero la evidencia apunta a que el beneficio mayormente es positivo tanto para los dueños de los proyectos como para nosotros los usuarios. Continuar la lectura…

diseño

Cómo Apple pasó de perdedor a culto a través de seis estrategias de diseño e innovación durante sus inicios

Artículo publicado originalmente en inglés en Brain Pickings: How Apple Went from Underdog to Cult in Six Design and Innovation Strategies from the Early Days por María Popova. Traducido con autorización.

“Apple ha tenido que hacer realidad los sueños de las personas que no sabían eran posible.”

En 1982, Apple contrató al diseñador industrial e inventor alemán-americano, Hartmut Esslinger para revisar la estrategia de diseño de la compañía. Él creó el lenguaje de diseño Snow White, que definiría  Apple, y tornaría al más débil de Silicon Valley no sólo en una fuerza global del diseño e innovación, sino también en una cultura singular – un culto a lo estético. Continuar la lectura…

programación

Primeros pasos usando Vue.js

Entonces un día decidí que solo aprenderé solo un, a lo máximo dos, Javascript frameworks. Así fue que me decidí por Vue.js. Y es que en estos días abundan miles de frameworks que de una forma u otra “te ayudan” a se ser más productivos. Este es el caso de Vue.js. Realmente se ha convertido en una herramienta que me hace sentir productivo. Llevo tiempo aprendiendo sobre el framework y me gustaría compartir lo divertido que ha sido utilizarlo.

Voy a utilizar como ejemplo un webapp que en resumen, se encarga de leer la lectura más reciente de los depósitos de agua en Puerto Rico, país donde resido. Hace un año atrás, nuestra isla sufrió una fuerte sequía. Durante ese proceso el tema de monitorear los niveles de las reservas de agua se convirtió en una costumbre cotidiana. En el repositorio de Github hablo un poco más sobre el asunto. Así que vayamos al grano.

¿Por qué Vue.js?

Una de las razones principales que me motivó a tratar esta librería, es la forma en que implementa el tema de reactividad en un webapp. Digamos que tenemos un objecto en Javascript definido de la siguiente manera:

var object = {
  message: 'Hello world!'
}

En el HTML tenemos un template de tipo handlebars:

<div id="example">
 {{ message }}
</div>

Con Vue.js solo decimos a donde miramos en el HTML y que objeto le voy a pegar y la librería posee toda la magia (lógica) para hacer nuestros dos elementos reactivos, two way binding sin esfuerzo alguno.

new Vue({
 el: '#example',
 data: object
})

Instalación de Vue.js

Vue.js es prácticamente compatible con cualquier browser moderno. Para este proyecto he usado la versión accesible a través de CDN.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Otra manera de utilizarla, es descargándola directamente a tu folder de trabajo. Bower es tremenda opción para esta configuración. Es altamente recomendable utilizar la versión de desarrollo (development version) y no la comprimida que es recomendable para producción. Esto debido a que la versión de desarrollo ofrece varios mecanismos que ayudan a depurar mucho más fácil el código. Para activar este modo solo necesitas añadir la siguiente declaración:

Vue.config.debug = true

Vue Instance

Antes de continuar con la descripción de la instancia de Vue, vamos a repasar lo que estamos tratando de construir. Este webapp necesita consumir data de un repositorio en Firebase. No tocaré el tema de Firebase en este momento, lo único que necesitamos saber es que desde Firebase vamos a recibir un objecto en formato JSON para poder consumirlo en el cliente. Cada vez que este objeto se actualice, Vue.js se encargará de sincronizar toda esta serie de eventos para poder ver los cambios de manera instantánea en nuestro browser. Solo necesitaremos un archivo index.html y un archivo main.js. La instancia la creamos de la siguiente forma en el archivo main.js:

var vm = new Vue({
 // opciones
})

La instancia de Vue es esencialmente la parte viewmodel del patrón MVVM, de ahí el nombre de la variable vm. Cuando creamos una instancia de Vue, necesitamos pasar un objeto de opciones que puede contener configuraciones para los datos, templates, elementos para montar, métodos, lifecycle callbacks etc. Para que nuestra instancia pueda comenzar a trabajar vamos incluir los siguientes dos métodos:

var vm = new Vue({
  el: #app",
  data: embalses
 // más opciones
})

El primero método es el nombre del tag que usaremos para mostrar la data. El método data es el objeto que contiene la información que mostraremos en el documento html. Con esto es suficiente para mostrar nuestra información. Veamos como podemos manejar esta data.

Directivas en Vue.js

v-for

Vue.js posee varias directivas que ayudan a modificar elementos del DOM. Una directiva es un marcador que se le coloca a un elemento del DOM para alterar su comportamiento o incluso para transformar elementos que se encuentren debajo de este elemento. Este marcador puede ser un  atributo, el nombre del elemento, un comentario o una clase CSS. En nuestro ejemplo he usado la directiva v-for para generar y presentar los elementos que se encuentran definidos como un arreglo en el objeto data de la instancia.

<div v-for="value in embalses">
  <div v-for="item in value">
    <div class="row">
      <div>
        <p>{{ item.city }}</p>
        <h3>{{ item.name }}</h3>
      </div>
      <div>
        <h2>{{ item.currentLevel}}</h2> 
        <p>{{ item.currentLevelTime }}</p>
      </div>
    </div>
  </div>
</div>

Debido a la estructura del objeto embalses he tenido que recurrir a utilizar un for anidado (nested for) para obtener la data de los embalses.

v-on

Esta directiva permite conectar un detector de eventos a los elementos del DOM. El ejemplo más sencillo es el evento click. Esta directiva la he utilizado para crear una serie de botones para ordenar la data por diferentes criterios.

<button type="button" v-on:click="sortBy('city')">Pueblo</button>
<button type="button" v-on:click="sortBy('currentLevel')">Nivel</button>

Métodos y eventos

En Vue.js conectar a un elemento del DOM un detector de eventos es asunto trivial. Veamos como lo hacemos para el clásico evento de onclick. De esta manera utilizaremos el evento para invocar un método que contenga la lógica para reorganizar nuestra data. En Vue.js este método es parte de la instancia. O sea que el método termina siendo una opción mas que podemos configurar fácilmente. Digamos que nuestro método se llama sortBy:

var vm = new Vue({
  el: '#app',
  data: {
    embalses,
    order: 1,
    sortKey: 'city'
  },
  methods: {
    sortBy: function(key){ 
      this.sortKey = key;
      this.order = this.order * -1;
    }
  }
})

Ahora veamos como pegamos todo esto a través de la opción de filtros. Una directiva que nos facilita completar la función de ordenar los elementos es la directiva de orderBy.

<div v-for="item in value | orderBy sortKey order">

Usando el filtro orderBy de Vue.js junto al método creado de sortBy podemos usar parte de la configuración de la instancia (sortKey, order) para organizar los elementos del objeto data.

Producto final

See the Pen Order by in Vue.js by Jaime Olmo (@jamespr) on CodePen.4734

¿Qué es lo próximo?

Hemos tocado solo lo básico del tema. El próximo paso será cómo crear componentes reactivos que es donde realmente Vue.js se destaca con su sencillez y simpleza para crear interfaces de usuarios modernas para la plataforma Web. Aún queda mucho por aprender.

diseño

Breve introducción a los Web Components

Hablemos un poco del futuro antes que sea demasiado tarde. Y es que el tema sobre Web Components cada día que pasa adquiere más tracción entre los desarrolladores web.

En un mundo ideal el lenguaje HTML sería suficiente para desarrollar interfaces de usuarios complejas que a su vez sean extensibles. Esto permitiría que otros desarrolladores puedan utilizarlas para complementar funciones que no están nativamente apoyadas en los navegadores. O simplemente para crear un producto más adaptable a las nuevas necesidades de los usuarios. Hoy día esto es “posible” gracias a los Web Components.

¿Qué son los Web Components?

Los Web Components son una colección de tecnologías que constantemente se refinan a través del W3C y eventualmente llegan a ser implementadas dentro de los navegadores que usamos. En pocas palabras este conjunto de estándares para la web nos permite crear elementos HTML adaptables a nuestras necesidades tal y como lo haría tu navegador.

Estos componentes consisten de varias tecnologías ya conocidas siendo las principales HTML, CSS y JavaScript. Podemos ver estos componentes como elementos reusables para crear users interfaces derivados de los estándares en los que está fundamentada la Web. Es por eso que básicamente todo lo que construyamos a través de la utilización de estos componentes puede ser reutilizable fácilmente.

Por el momento los Web Components no están implementados completamente en los navegadores de mayor uso. Esto no quiere decir que no podamos aprovecharnos de las ventajas que ofrecen este tipo de tecnologías. Utilizando alguno que otro polyfill podemos cubrir ese espacio en donde los navegadores aun no proveen dicha tecnología. Una librería poderosa para este cumplir este propósito es el proyecto Polymer de Google.

Los Web Components agrupa las siguientes cuatro tecnologías (aunque cada una puede ser utilizada de manera independiente):

  • Custom Elements
  • HTML Templates
  • Shadow DOM
  • HTML Imports

Custom Elements

La idea básica de un custom element es crear un elemento que se pueda comportar exactamente igual, manteniendo sus características y propiedades. Esto lo vemos a través de los elementos de <table/>, <input/>, <img/>, <video/> por mencionar algunos. Pero hoy en día y a medida que avancemos al futuro la web crece y crece y los elementos nativos que provee el HTML estándar se va quedando corto en cuestión de funcionalidad y extensibilidad. No podemos continuar creyendo que todo lo vamos resolver a través de un espagueti de divs sazonados con un poco de javascript. Así que los custom elements nos brinda la oportunidad de llevar el HTML a un próximo nivel. Y si vamos a cocinar un espagueti que sea con las mejores herramientas e ingredientes.

Crear un custom element es bien sencillo. Solo debes pensar en una etiqueta y listo. Se me ocurre <x-component/>. Ya, fácil, he creado mi propia etiqueta. Las misma la puedo adornar con CSS y hacer cosillas a través de JavaScript. ¿Estúpidamente secillo no?  Puede parecer  pero esto realmente no emociona mucho. Primero, para evitar colisiones con etiquetas HTML existentes se recomienda añadir un guión como parte del nombre. Veámoslo a través de un ejemplo. Para utilizar la nueva etiqueta o elemento en JavaScript puedo hacer lo siguiente:

var XComponent = document.registerElement('x-component');
var dom = new XComponent();
document.body.appendChild(dom);

HTML Templates

Venga, venimos escuchando la palabra template básicamente desde la fundación del mundo. Así que no creo pertinente discutir que es un template o plantilla. No importa el lenguaje que prefieras, PHP, C#, Ruby, etc cada uno tiene su mecanismo de templates. Pero al día de hoy no existe un mecanismo nativo que pueda ser utilizado para trabajar a base de templates en el navegador. Tener un mecanismo de templates a este nivel provee la flexibilidad para que los diferentes equipos o desarrolladores puedan dividir mejor el trabajo. Los diseñadores pueden concentrarse en trabajar los elementos visuales escritos en HTML y CSS mientras los desarrolladores encargados del back-end se enfocan en la lógica y la integración.

Recordemos que al día de hoy la arquitectura de la web ha sufrido grandes cambios. Los servidores están más dedicados a procesar data de manera más eficientes y la parte del cliente ha pasado a poseer mayor relevancia en procesar la manera en que los usuarios interactuan con nuestro sistema. Mejor no lo puede exponer Eiji Kitamura cuando dice que el modelo MVC ya no es un patrón que ocurre únicamente en la parte del back-end, ya se ha convirtiendo en algo que ocurre también en la parte del cliente.

Los dos principales problemas que ataca este componente está relacionado a como utilizamos HTML para esconder algún detalle. Usualmente esto lo hacemos a través de un div y los escondemos usando CSS. En el ejemplo, la imagen del logo será cargada por el navegador aún cuando no se vaya a utilizar, gastando ancho de banda de forma innecesaria.

<div style="display:none;"> 
    <div> 
        <h1>Web Components</h1> 
        <img src="http://webcomponents.org/img/logo.svg"> 
    </div> 
</div>

Otra forma de lograr eso es usando la etiqueta de <script/>. Pero este método puede comprometer la seguridad del web app exponiéndola a un cross site scripting vulnerability si no se verifica adecuadamente la lógica del mismo.

<script type="text/template"> 
    <div> 
        <h1>Web Components</h1> 
        <img src="http://webcomponents.org/img/logo.svg">
    </div> 
</script>

Utilizando HTML Templates podemos lograr lo siguiente:

<template id="template">
  <style>
    ...
  </style>
  <div>
    <h1>Web Components</h1>
    <img src="http://webcomponents.org/img/logo.svg">
  </div>
</template>

Y con un poco de JavaScript podemos implementarlo en nuestro web app.

<script>
  var template = document.querySelector('#template');
  var clone = document.importNode(template.content, true);
  var host = document.querySelector('#host');
  host.appendChild(clone);
</script>
<div id="host"></div>

Shadow DOM

Una de las funcionalidades principales del Shadow DOM es proveer la encapsulación necesaria al modelo de objeto de documento (DOM en inglés) para limitar su alcance. A través del Shadow DOM estos elementos pueden ser asociados de forma diferente. A estos nuevos nodos se le conocen como shadow root. Esto se logra separando estos elementos del DOM principal del documento. Aclaremos el asunto a través de una imagen.

shadow-dom

Para crear un Shadow DOM necesitamos conectar o pegar el siguiente método de Javascript, .createShadowRoot(), a cualquier elemento, sea HTML nativo o custom element. Este elemento es lo que se conoce como shadow host. Ahora bien, todo elemento creado bajo el shadow host es lo que se conoce como shadow root y es actualmente lo que el navegador muestra al momento de presentar el Shadow Dom.

En términos generales creamos un Shadow Dom cuando invocamos el método .createShadowRoot() en X elemento para convertirlo en el shadow host y así poder añadir a este elemento lo que será el shadow root. Para abundar un poco mas sobre el tema y jugar con varios ejemplos te recomiendo el artículo Shadow DOM 101 por Dominic Cooney.

HTML Imports

Este componente se encarga de enlazar elementos de un documento HTML como una referencia externa a otro documento HTML. De esta manera podemos rehusar elementos que tengamos en un documento HTML X en multiples documentos. Si te suena a SSI (Server Side Includes) pues no estas muy lejos, ya que es muy similar el fin y su uso. Veamos un ejemplo:

Digamos que tenemos un documento llamado index.html. Para hacer uso del HTML Import utilizamos el tag link con el keyword import como atributo del rel. Y por último en el atributo href indicamos el documento html que queremos importar.

<link rel="import" href="component.html" >

Dentro de ese documento, component.html, puedes utilizar cualquier recurso incluyendo js, css, y web fonts, tal y como lo harías con cualquier documento html:

component.html

<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>

Este documento no necesita del típico encabezado que se utiliza para definir un documento HTML. Basta con definir los recursos y listo.

Es muy lamentable que de los cuatro componentes este es el que menos apoyo está recibiendo de los principales navegadores. Siendo la posición de Mozilla darle más espacio hasta ver cómo JavaScript implementa el sistema de módulos en las nuevas versiones (ES6, 7, etc). Y digo que es lamentable porque el HTML Imports puede verse como el pegamento que nos ayudaría a combinar lo que son el HTML Template, Shadow DOM y los Custom Elements. Cosa que las más famosas librerías actualmente hacen a través de polyfills. ¿No seria nítido que lo pudiéramos hacer de manera nativa?

El futuro hoy

Hoy día muchos de los elementos que se agrupan bajo lo que son los Web Components se utilizan en los principales frameworks y librerías de desarrollo (React, Angular, Vuejs por mencionar algunas). O al menos los desarrolladores están persiguiendo que haya una buena integración con las funcionalidades principales tal y como se definen en los specs. Sin duda alguna los Web Components son un buen punto de partida para entender hacia donde se dirige el desarrollo web y como ir poco a poco adaptándonos esos cambios para que no nos tomen por sorpresa.

Referencias