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.

tecnología

Team blogs a seguir durante el 2016

La siguiente colección presenta algunos de los team blogs que estaré siguiendo durante el próximo año.

The GitHub Blog

Donde estaríamos si no fuera por Git? La mejor respuesta posiblemente sea amarrados a un version control centralizado. No hay dudas de que sino fuera por Git, Github no tendría razón de ser. Al menos no como lo conocemos hoy en día, donde prácticamente se ha convertido en un centro de desarrollo masivo en el cual constantemente nacen proyectos, ideas y experimentos que retan la imaginación, y muchas veces la lógica. Viviendo cada días más dentro de este version control system estoy convencido que debo estar al tanto de cómo se van moviendo las cosas por allá adentro. Durante el 2015 pude leer varios artículos de muy buen contenido así que vamos a ver que aparece durante este próximo año.

Stack Overflow Blog

La razón principal para seguir este blog  es debido a que el code base de Stack Overflow es en C#. Dentro de todos los proyectos bajo la sombrilla Stack Overflow, uno que me llama mucho la atención es Dapper, que prácticamente es una alternativa liviana al Entity Framework de Microsoft.

The Netflix Tech Blog

El app de Netflix prácticamente corre en cualquier aparato. Si algún día alguien decidiera conectarle un puerto HDMI a una habichuela, estoy seguro que el team de Netflix buscará la manera de ejecutar el app desde la habichuela haciendo uso de organic computing. Y es que este team si que no se cansa de programar su app en cuanto aparato exista. Cada vez que publican algo el nivel de detalle es impresionante. Vale la pena leer sus notas, que aunque los temas sean de tipo “rocket science”, siempre se aprende algo.

Instagram Engineering Blog

Siguiendo la misma línea de The Netflix Tech Blog, el nivel de detalle en cada publicación es realmente agradable. Y es que cuando se quiere aprender cómo los chicos grandes hacen las cosas es mejor ir directamente a la fuente. Este team no publica regularmente pero cuando lo hacen los temas y los problemas que atacan son de gran interés.

Yelp Engineering

Este blog habla como a través de la iniciativa Yelp Open Source podemos utilizar las herramientas que la plataforma usa para beneficio de nuestros proyectos. A mi me interesa seguir de cerca cómo utilizan Docker y cómo les beneficia esta tecnología.

High Scalability

No quiero pasar por alto este blog que, aunque no pertenece a ninguna compañía de desarrollo, sus notas son de alto contenido educativo. Sin duda un recurso que debemos tener a la mano cuando tengamos dudas de como hacen los grandes para resolvérselas escalando los problemas que trae el crecer a grandes escalas.

Extra

Los siguientes no son exactamente team blogs pero de alguna forma son personas que merecen atención. La lista pudiera ser larguísima pero durante el 2016 he decido centrarme en tres de ellos. Probablemente el nombre de Salvatore Sanfilippo no te suene, pero si menciono Redis si. Este individuo es el creador y sus notas son bastante técnicas. De esas que te tientan a pensar que realmente no eres un programador de verdad (quizás exagero). Sara Soueidan, experta en el tema de CSS, SVG y JavaScript. Sus notas proveen gran contenido sobre el tema de user experience design y las próximas tendencias relacionas al diseño web. Y por último para reforzar el área de seguridad, tema que seguirá candente este año, Troy Hunt. Además de ser un experto en esta materia sus tips sobre Azure y ASP.NET son de gran valor.

programación

Engineering en el software

Recientemente The Atlantic publicó un artículo (más largo que la deuda pública de Puerto Rico) reclamando que los programadores deberían dejar de llamarse a sí mismos ingenieros. Como era de esperarse la comunidad ripostó rápidamente (y es que en Internet nadie se puede quedar dado) destacando la ardua y compleja labor a la que la industria del software hoy en día se enfrenta. No estaremos construyendo puentes físicos pero el software es una herramienta vital para el desarrollo de la raza humana (así de grande y puedo llenar párrafos con ejemplos contundentes).

Estoy totalmente de acuerdo que la industria del software debe ser sometida a estrictos parámetros de regulación y controles de calidad (como de igual forma se hace cuando se construye un puente o un edificio). El problema es cómo construimos estas regulaciones cuando no existe un marco de referencia por el cual dejarnos llevar. Y más retante todavía, quien construirá estas regulaciones (tema que Uncle Bob tocó hace unas semanas atrás). Es evidente que no podemos usar los mismos estándares que se le aplican a un ingeniero civil o mecánico pero no por eso el software carece de elementos de ingeniera, debemos seguir patrones de diseños que fomentan las buenas prácticas del desarrollo del software.

Hay mucha tela que cortar en el tema. Para mi es irrelevante si somos o no ingenieros (pero a la hora de buscar empleo a nadie le estaría malo serlo). No por eso debemos bajar la guardia en alcanzar la precisión requerida a la hora de implementar una solución a algún problema que luego estudiar a fondo podamos resolver de manera eficiente.

En fin, este issue me llevó a plantearme la siguiente pregunta: “¿Estaría dispuesto a licenciarme como PE Software en Puerto Rico?”. Sin pensarlo diría que sí. Pero estoy consciente que aún nos falta camino por recorrer (a Puerto Rico como país) para poder cumplir a cabalidad con los requisitos que exige este tipo de licenciatura/papel.

Actualización:

El artículo Mi Último Día Como Ingeniero de Héctor J. Carlo, actualmente Catedrático Asociado en el Departamento de Ingeniería Industrial en UPR Mayagüez (UPRM), confirma mi percepción sobre la situación de la colegiación para ingenieros en Puerto Rico. Lectura recomendada.

programación

Primeros pasos usando TypeScript

¿Qué es TypeScript?

TypeScript es un lenguaje de programación de código abierto desarrollado y mantenido por Microsoft (así como oyes). Es un superconjunto estricto de JavaScript, y añade, de manera opcional, tipado estáticos y herramientas que ayudan a desarrollar a través de metodologías de programación orientada a objetos basado en clases. Anders Hejlsberg, quien es el arquitecto principal de C# y creador de Delphi y Turbo Pascal, trabaja en el desarrollo de TypeScript. TypeScript puede ser utilizado para desarrollar aplicaciones en JavaScript para el lado del cliente o en el servidor a través de Node.js.

Instalar

El primer requisito para utilizar TypeScript es installar Node.js. La forma mas conveniente de instalación es a través de npm, el package manager que viene por default con Node.js. Existen muy buenas referencias de como instalar Node.js tanto para OSX como para Windows. Así que no vamos a entrar en detalles de como instalar Node.js. Voy a suponer que Node.js se encuentra instalado un funcionando. Una vez confirmemos que Node.js y npm están accesible en nuestro ambiente de desarrollo podemos proceder a instalar TypeScript. Vayamos al terminal (si estas en Windows te recomiendo usar Git Bash).

npm install -g typescript

Esta instrucción instalará TypeScript de forma global. Si deseas trabajar con la versión más reciente (beta) puedes utilizar el siguiente comando:

npm install -g typescript@next

Si decides trabajar con la versión nightly (beta) de TypeScript ésta puede tener alguno que otro bug e incompatibilidades que no existen en la versión estable.

Para confirmar en que versión de TypeScript estamos trabajando usamos el siguiente comando:

tsc --version

¿Cómo compilar?

TypeScript sencillamente produce código en plain JavaScript. Podemos compilar el código de dos maneras, a través del terminal o usando algún IDE que automáticamente compile el código. Si utilizas Visual Studio 2013 ó 2015  puedes utilizar TypeScript directamente y todo sucede y funcionará por arte de magia, sin mucho esfuerzo de tener que trabajar mano a mano con el compilador. También puedes compilar TypeScript usando las herramientas de building más populares para el desarrollo web que se usa hoy en día (Grunt, Gulp, Bower, etc.). Antes de llegar a utilizar alguna de esas herramientas vamos a ver como compilamos a través del terminal.

Desde el terminal podemos compilar de forma cavernícola con tan solo ejecutar el siguiente código:

tsc greeter.ts

Pero como ya puedes imaginar es realmente tedioso tener que ir al terminal cada vez que deseamos compilar. Si estas desarrollando en OSX puedes utilizar la opción de –watch que provee el compilador para vigilar el folder de la aplicación y así cada vez que salves un cambio de tu aplicación, el proyecto automáticamente compilará. Sorpresivamente la función de –watch aún no está implementada nativamente en Windows. En Windows hay que depender de Node.js.

En OSX puedes usar la siguiente opción:

tsc -w greeter.ts

En Windows tienes que recurrir a Node.js a través del siguiente comando:

node "c:\el\path\al\compilador\tsc.js" -w greeter.ts

Mientras tanto crucemos los dedos para que puedan mejor la experiencia en Windows.

¿Y la opción elegante?

Cuando pienso en esa opción elegante es la que comúnmente conocemos como el botón mágico que cuando lo presionamos todo fluye maravillosamente por arte de magia y el mundo es mil veces más feliz. Para crear toda esa magia vamos a implementar un workflow automático usando Gulp. De igual forma como mencioné hace un rato sobre la instalación de Node.js, existen muy buenas referencias para instalar y configurar Gulp. Por el momento vamos a limitarnos a lo básico.

Gulp es de esas cosas que realmente hace maravillas. Además de Gulp vamos a utilizar una herramienta para compilar TypeScript de Ivo Gabe de Wolff, ivogabe/gulp-typescript. Este plug-in es el que mencionan en el wiki oficial de TypeScript como una opción para compilar automáticamente TypeScript usando Gulp. Empecemos con Gulp.

Para instalar Gulp globalmente:

npm install gulp –g

Ahora si comienza lo interesante. Vamos a crear un folder llamado WebProject (realmente puede ser cualquier cosa) y como parte de nuestro proyecto usaremos Gulp. En el terminal ejecutaremos el siguiente comando dentro del folder WebProject.

npm install gulp

Esto habilitará Gulp para que lo podamos usar en nuestro proyecto. Ahora instalemos el compilador de TypeScript para Gulp:

npm install gulp-typescript

Ahora vamos a proceder a crear el archivo de configuración para Gulp, gulpfile.js. Le he añadido algunos comentado al archivo para que puedas observar donde y como colocar las funcionalidades que estaremos usando.

var gulp = require('gulp');
var ts = require('gulp-typescript');

// Task para compilar TypeScript
gulp.task('typescript', function () {
    // Seleccionar todos los archivos .ts
    var tsResult = gulp.src('./*.ts')
    .pipe(ts({
    noImplicitAny: true
 }));
    // Destino del proyecto compilado
    return tsResult.js.pipe(gulp.dest('built/local'));
});

// Task para observar los cambios al proyecto
gulp.task('watch', function() {
    // Observar proyecto
    gulp.watch('./*.ts', ['typescript']);
});

// Trigger a los tasks
gulp.task('default', ['typescript', 'watch']);

Supongamos que tenemos el siguiente código TypeScript en el archivo greeter.ts dentro de nuestro folder WebProject:

// TypeScript
function greeter(person: string) {
    return "Hello, " + person;
}
var user = "Jaime Olmo";
document.body.innerHTML = greeter(user);

Ahora con tan solo ir al nuestro proyecto en el terminal y escribir gulp automáticamente se compilará nuestro código cada vez que presionemos la opción de save.

Gulp and

Conclusión

TypeScript realmente luce prometedor. Si dominas JavaScript utilizar TypeScript será un grato paseo. En mi opinión Microsoft realmente está tratando de crear ese ambiente de desarrollo multi-plataforma y con esta propuesta podemos ver que se están tomando muy en serio lograr dicha meta. Son cada vez más los grupos y compañías que están comenzando a mover sus proyectos en JavaScipt a código de TypeScript ya que uno de los problemas que resuelve TypesScript es precisamente la facilidad de manejar proyecto masivos escritos en JavaScript. Angular 2 es uno esos proyectos. Con la versión 2 a la vuelta de la esquina, y sabiendo que se está desarrollando usando TypeScript no dudo que se convierta muy pronto en una herramienta de muy alta demanda.

Si deseas explorar un poco más sobre TypeScript te recomiendo el curso “Introduction to TypeScript” de edX. A mi TypeScript me tiene muy entretenido.

free topic

Designing for Performance

Designing for Performance es un libro electrónico que puedes leer gratuitamente. Trata sobre varios temas acerca de optimización de aplicaciones web tocando bastante el tema del diseño. También habla sobre algunas herramientas que podemos utilizar para monitorear el rendimiento de nuestros websites. Sin duda una buena referencia. La lectura es ligera aunque a veces te quedas con la sensación de querer continuar indagando sobre el tema. Si te es de utilidad y lo consideras un buen recurso no dudes en apoyar el trabajo de Lara Callender Hogan comprando una copia digital.