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 tu 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.

La intención de esta nota es alentarte a que aproveches esta oportunidad que nos brinda la industria. No toda industria posee este tipo de flexibilidad colaborativa. Sin duda es grandioso ser un desarrollador de software. Veamos como podemos empezar.

Explora la opciones

Es muy seguro que en algún momento hayas escuchado de Github. Como todos sabemos, Github no es meramente un lugar para subir repositorios de nuestros proyectos. Github es una plataforma colaborativa para construir software, manejar documentación, issues, bugs etc. El componente social que ofrece esta plataforma es crucial a la hora de explorar las opciones disponibles para comenzar a colaborar en proyectos de OSS. La sección de Explore es un buen punto de partida para navegar los diferentes proyectos disponibles. Esta sección muestras los proyectos por orden de popularidad.

Otra forma es preguntar a algún compañero o amigo que ya se encuentre trabajando en algún proyecto. Siendo esta una de las maneras más  rápidas de poder agarrarle el paso a cómo se trabaja bajo esta mentalidad. Quién sabe si a lo mejor junto a tu amigo ambos puedan crear algún proyecto que se convierta en pieza integral para otro proyecto.

Organiza tu tiempo

Una vez hayas identificado algún proyecto de interés define cuánto tiempo estarás dedicándole al mismo. 1 hora a la semana, 2 días, solo los weekends, la cantidad no es importante en este momento, lo que importa es el compromiso de colaborar al proyecto y la calidad con la que manejes ese tiempo que has separado. Recuerda que tu tiempo es muy valioso y solo tú tienes el control de como administrarlo. Trata de trazarte una meta y comprométete a lograrla. El éxito muchas veces se logra, además de por el manejo  inteligente del tiempo, por el compromiso que emprendas.

Empieza por lo básico

Trata de ver si el proyecto tiene algún tipo de guía para los colaboradores. Por ejemplo, Bower maneja las tareas de los contribuidores a través de un Wiki en el repositorio principal. Empápate de cualquier otra guía o documento disponible. Si el proyecto es de una sola perosna trata de comunicarte con el autor y comparte tu intención de colaborar.

Colabora

Trata aportar al proyecto aunque sea alguna corrección a la documentación. Cualquier ayuda es buena. No te frustres si en en algún momento rechazan tu Pull Request. Siempre busca la manera de poder cumplir y entender cómo es el proceso antes de someter algún cambio. Estudia cómo se ha desarrollado el  trabajo, qué patrones de diseño siguen. Observa qué metodologías y paradigmas usan para resolver los problemas que enfrenta el proyecto o la herramienta. Mientras más rápido logres entender la base más rápido podrás aportar tu grano de arena.

Open Source como el futuro

Mucho de lo que aprenderás posiblemente lo utilices en tu próximo trabajo. O quién sabe si esa idea que tanto estás pensando sea tu próximo proyecto estrella. El movimiento OSS está  cambiando la percepción de como desarrollar y escribir software. El OSS ya no es un privilegio accesible para unos pocos, actualmente compañías privadas y gobiernos están apostando fuertemente a esta iniciativa y método de trabajo. Hay tanto por aprender, así que di Hello al Open Source.

diseño

Sticky footer usando CSS y Flex

Esta nota es para dedicada a mi futuro yo para no olvidar lo mínimo necesario a la hora de crear un layout con footer que se mantenga al final del web page. Veamos cómo hacerlo usando CSS clásico. Vamos a partir de un simple ejemplo en HTML:

<body>
  <div class="wrapper">
    <div class="header">
      <h1>Header</h1>      
    </div>
    <div class="content"></div>
  </div>
  <div class="footer">
    <p>Footer area text goes here.</p>
  </div>
</body>

A partir de ese HTML podemos usar el siguiente CSS:

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -80px; /* Aquí ocurre la magia */
}

.wrapper:after {
  content: "";
  display: block;
  height: 80px; /* Aquí también */
}

.footer {
  background-color: #AAA;
  height: 80px; /* Importante que la altura sea fija */
  width: 100%;
}

Ejemplo en CodePen.

La clave para lograr el efecto es restando a nuestro contendor el tamaño del footer. El contenedor puede ser el body o algún div.

El segundo método es usando el módulo de Flexbox Layout (Flexible Box). Siendo este medoto el mas moderno recomiendo visitar la guía A Complete Guide to Flexbox por
Chris Coyier

El CSS usando flex es el siguiente:

html {
 height: 100%;
 overflow: hidden;
}

body {
 height: 100%;
 padding: 0;
 margin: 0;
 overflow-y: scroll;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}

header {
 background: #AAA;
 -webkit-flex: 0 0 100px;
 -ms-flex: 0 0 100px;
 flex: 0 0 100px;
}

section {
 background: #EEE;
 -webkit-flex: 1 0 auto;
 -ms-flex: 1 0 auto;
 flex: 1 0 auto;
 display: -webkit-flex;
 display: -ms-flex;
 display: flex;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
}

article {
 background: #EEE;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
}

footer {
 background: #888;
 -webkit-flex: 0 0 100px;
 -ms-flex: 0 0 100px;
 flex: 0 0 100px;
}

Ejemplo en CodePen .

El atajo flex: contiene los siguientes elementos flex-grow, flex-shrinkflex-basis. Para más detalles no olvides pasar por la guía A Complete Guide to Flexbox.

Parecera mucho pero es realmente debido al uso de los prefijos de cada navegador. Te animo a que visites Flexplorer para jugar un poco con todo esto del Flexbox Layout.

 

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. El trabajo del diseñador Esslinger pasó a ser incluido en las colecciones permanentes del Museo Whitney y el MoMA. Cuando Jobs renunció a Apple en 1985, después de una lucha de poder y fundar NeXT (logotipo el cual creó otro icónico diseñador), Esslinger se unió a él. Cuando Jobs volvió a Apple en 1997 como CEO interino, Esslinger lo siguió y se le otorgó la tarea de asesorar a Jobs en desarrollar una estrategia para elevar a Apple mas allá de su posición sotanera en el mercado y a establecer la compañía como un verdadero líder de la innovación en tecnología y diseño.

En el libro Keep It Simple: The Early Design Years of Apple (librería publica), la primera colaboración de este tipo entre Esslinger y Jobs, redacta la crónica de la gestación de la grandeza de Apple en más de 380 fotografías e ilustraciones y comparte las seis recomendaciones que le hizo a Jobs en 1997. Lo sorprendente de ellos no es sólo la forma profética en que redactan – desde los fenómenos culturales que Apple no capitalizó directamente, como las redes sociales, la robótica y la realidad aumentada, a las tecnologías específicas que Apple sacó al mercado, como Siri, el Apple TV y el iPhone – sino también la claridad con la que se proyectan sobre las estrategias de un sin número de nuevas empresas contemporáneas que han tratado de copiar, con diversos grados de éxito, la estética y la ética de Apple.

Esslinger desglosa la estrategia de la siguiente manera:

  1. Hacer el diseño de Apple verdaderamente innovador nuevamente… regresando a los valores clásicos de “simple es mejor”, estimular los productos a través de ideas frescas, reenfocar la sobrecargada línea de productos. El sensacional diseño de Jonathan Ive y Thomas Mayerhofer para la iMac se convertiría en el elemento de cambio innovador que se necesitaba con urgencia, y Jonathan Ive volvería a conciliar el mantra de diseño de Apple a sus raíces, el sistema Snow White. Steve tomó la decisión correcta y colocó a Jonathan Ive a trabajar como vicepresidente ejecutivo directamente con él. Una vez más, el liderazgo en el diseño estaba en la parte superior al igual que todos los altos ejecutivos de Apple… “no hay otra manera de hacer que el diseño sea el núcleo de una empresa humano-centrista.”
  1. Haz las paces con Microsoft y Bill Gates. La plataforma Macintosh había sido seriamente perjudicada hasta tener una cuota de mercado de un solo dígito, y Apple necesitó agarrarse como salva vida al paquete de programas, Microsoft Office. Por lo tanto, Steve tuvo que reparar la relación de Apple con Microsoft. En las “conversaciones de paz” que siguieron, Bill Gates, en realidad llegó a casa de la familia de Steve en Palo Alto y, durante varios paseos alrededor de la manzana los dos hombres forjaron los inicios de una relación de trabajo. Después, Microsoft invirtió $ 50 millones en Apple. El anuncio de dicha alianza en la conferencia MacWorld en Boston fue recibida con abucheos de los más fanáticos de Apple, pero tanto la alianza y el apoyo de Microsoft fomentó la confianza en el mercado – y ayudó al balance general de la maltratada Apple.
  1. Hacer de Apple líder en “tecnología de consumo digital” mediante la convergencia de “productos electrónicos de consumo” en área de tecnología digital y el contenido multimedia. La convergencia ya era una realidad; la computación y la comunicación convergían, junto con el contenido multimedia, desde información, a la música y películas, con la Internet y la World Wide Web proporcionando una plataforma de distribución asíncrona. Dentro del nuevo mercado que estos avances fueron creando, la mayor preocupación de Steve fue Sony, [que], como líder en la micro-electrónica junto a compañías como Sony Music y los estudios de Sony, podrían ser los competidores más peligroso para Apple. Pero… Sony estaba dormido al volante, al igual que Samsung y una serie de empresas de telefonía móvil como Motorola y Nokia, que era de esperarse comenzaran a moverse en el mercado emergente de la convergencia digital universal. Estas empresas fabrican buenos y bien diseñados productos, pero no entendieron la realidad donde ciertamente estaban poniendo computadoras en manos de la gente, lo que podría permitirles una experiencia totalmente nueva y cultural… Asesoramos a Steve para asumir la competencia con una estrategia de productos orientada a las necesidades reales de las personas y las innovaciones demostradas – una estrategia que evitara riesgos estúpidos. En lugar de buscar la inspiración en los desarrollos de sus competidores reales y potenciales en el espacio de la tecnología de consumo – sea Dell, HP, Motorola, Nokia, Sony, Samsung, Canon, u otros – Apple tenía que centrarse en la creación de nuevas formas de explotar el potencial de la tecnología existente para cumplir los sueños no realizados de las personas. De hecho, Apple ha tenido que hacer realidad los sueños de la gente que no sabían eran posible.
  1. Crear la “comunidad” Virtual Apple. Mediante la conexión de sus clientes, seguidores y fans permitiéndoles comunicarse entre sí, Apple podría establecer su marca más allá de la tecnología, convirtiéndola en un estilo de vida. En ese entorno, la innovación se define por lo que la gente podría lograr con un producto de Apple, en lugar de por el nivel avanzado de tecnología del producto.
  1. Re-innovar e integrar la televisión, el audio y las comunicaciones en un nuevo paradigma. Hemos proyectado que la tecnología digital va a sustituir la exploración entrelazada analógica (line-interlace standards) de la televisión (NTSC, SECAM y PAL) y por lo que Apple debe crear su magia y distanciarse de las interfaces de usuario primitivas que aún reinaba en esas tecnologías. El audio ya había dado el salto a digital, tanto en CD a 44,1 kHz y cintas de PCM a 92KHz.
  1. Explorar e innovar los dispositivos físico-virtuales inteligentes y sobre la robótica funcional. Hemos alentado a Steve a hacer que las interfaces de Apple sean más “humana”, con controles activados por voz, gestos y sonidos con emociones. También recomendamos que Apple cree alianzas estratégicas para la co-creación con MIT y otras universidades en todo el mundo con programas en mecatrónica, nanotecnología y la investigación cerebral avanzada.

Es fácil ver cómo esta visión fundamental determinó el potencial de Apple, en términos creativos y culturales, durante las próximas décadas. Esslinger añade una nota sobre el contexto cultural tóxico que hacer bien y hacer el bien son de alguna manera diametralmente opuesta, un mito quizás famosamente desacreditado con ejemplos en la historia de Jim Henson [EN]. Esslinger escribe:

Sí, Steve también logró un impresionante éxito financiero, pero es su aporte cultural lo que hace que su historia sea verdaderamente única. Apple, como ninguna otra compañía, ha presentado un diseño de clase mundial y una marca impecable a un nuevo mercado de masas – un mercado que realmente creó. Y Steve se coloca en esa pequeña y excepcionalmente rara colección de empresarios como James Watt, Henry Ford, Robert Bosch, Thomas Watson Jr. y Walt Disney, que convirtió una revolución tecnológica en una visión humanista – dando lugar a un fundamental cambio social y cultural. Nadie puede copiar el genio de Steve Jobs, pero… que podría lograrse en este mundo si todos siguieran su consejo de “quedarse con hambre y tonto”?

Keep It Simple, libro de Esslinger luego de, Design Forward, es una excelente lectura para cualquier persona interesada en la historia de la innovación y el diseño como una fuerza cultural y de comercio. Escuchemos a Esslinger discutir su colaboración con Jobs, incluyendo el secreto para resolver desacuerdos, en este extracto de la fascinante entrevista por Design Matters con la leyenda del diseño Debbie Millman:

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

programación

Recordatorio amistoso para usar environment variables

Últimamente he estado pensando en cómo puedo mantener ciertos pedazos de mi código alojado en un ambiente seguro sin preocupaciones a que se filtre algún security key entre los diferentes commits que occuren a lo largo de un proyecto. Hay veces que aún sabiendo lo que hacemos puede ocurrir que tu clave de seguridad quede expuesta a la merced de gente inescrupulosa donde su único objetivo es aprovecharse lo más rápido posible de este tipo de descuido.

Es por eso que vengo coqueteando con los environment variables para poder salvaguardarme de este tipo de situación. Esta nota es de tipo recuérdate-a-ti-mismo-Jaime que debes usar un poco más este tipo de mecanismo. Además, el buen uso de esta opción mejora considerablemente el proceso de desarrollo continuo. Ya que hoy día cambiamos rápidamente de un ambiente de desarrollo a un ambiente de prueba, staging o producción, mucha de esta configuración es conveniente definirla a través de varios environment variables.

Scott Hanselman muy diligentemente ha recopilado alguna prácticas que podemos utilizar en nuestro proceso de desarrollo. A continuación voy a compartir un sencillo ejemplo utilizando Nodejs en Visual Studio.

El siguiente código no hace ningún tipo de uso de variables de configuración o de ambiente.

if (processData == true) {
    var ref = new fb("https://data-embalses-pr.firebaseio.com/v1/embalse/siteID/" + previousValue);
    ref.auth('llave-que-es-un-garabato')
// App logic a continuación

En Nodejs podemos acceder los environment variables a través del objeto process.env. Ya que estamos usando Visual Studio es casi obligatorio utilizar Nodejs Tools for Visual Studio. Para poder definir estas variables solo necesitamos pasar por las propiedades del proyecto y asignar cada variable utilizando un par nombre/valor por línea. Como lo muestra el siguiente ejemplo:environment-variable-in-node-js
Ahora podemos hacer uso de estas variables utilizando el objecto process.env.

if (processData == true) {
    var ref = new fb(process.env.SiteIdData + previousValue);
    ref.auth(process.env.FirebaseSecret)
// App logic a continuación

La idea es sencilla, utilizar algún mecanismo para agilizar la configuración de nuestro código y asegurar las claves importantes de nuestros servicios. Para abundar un poco más en el tema te invito a leer el siguiente artículo “Leer App Settings de Web Apps con Node.js y ASP.NET” del grupo de Microsoft Developer en español.