Category Archives: programación

programación

React Snippets código fácil sin compromiso

Repetir lo mismo una y otra vez es una tarea tediosa. A la hora de crear clases en React te das cuenta que la misma base se repite una y otra vez a lo largo de los componentes. Una forma de atacar esta incomodidad es a través del uso de snippets. Los snippets son bloques de texto predefinidos que podemos añadir a nuestro código con el uso de atajos. Es el mismo concepto de los Emmet. Veamos como configuramos los snippets en Visual Studio Code.

Lo primero es buscar el lenguaje que vamos a impactar. File > Preferences > Users Snippets. En nuestro caso vamos a buscar por JavaScript React ya que lo que queremos es mejorar la experiencia al momento de escribir código de JSX.
search snippets react

Al escoger el lenguaje VSCode te mostrara un archivo tipo json con un ejemplo de cómo crear tus propios snippets. En nuestro caso vamos a utilizar el formato ya definido en el siguiente repositorio en Github. Solo necesitamos copiar el contenido del archivo snippets.json. Yo acostumbro cerrar y abrir el editor para saber que VSCode capturó el cambio.

¡Listo! Ahora cada vez que vayas a trabajar un documento JSX tendrás la opción de añadir varios bloques de código con tan solo presionar algunas teclas.

El listados completo de los atajos lo puedes revisar en el Read Me del repositorio. Si deseas realizar todo esto a través de una extensión, no hay problema, también existe.

programación

¿Qué es Redux?

Redux es una librería que se encarga de emitir actualizaciones de estado en respuesta a acciones. En lugar de modificar directamente el estado, la modificación se maneja a través de objetos sencillos llamados acciones. Luego escribes una función especial llamada reductor para decidir cómo cada acción transforma el estado de toda la aplicación. Y por último todo se maneja desde un solo lugar llamado store (ya somos experto en Redux! No?). Ya que la repetición nos ayuda a recordar las cosas podemos decir que los elementos principales de esta arquitectura o patron de diseño son:

  • Acciones
  • Reducers
  • Store

La librería Redux en sí es sólo un conjunto de ayudas para “montar” reductores a un único objeto de store global. Veamos los detalles.

Redux overview
Ilustración por Lynn Fisher

Aunque no sea importante para entender qué es Redux, debemos indicar que para instalar la versión estable usamos npm:

npm install --save redux

Principios fundamentales

Como los requisitos para las aplicaciones tipo SPA en JavaScript se han complicado cada vez más, nuestro código debe gestionar más states que nunca. Las librerías como React, Angular y Vuejs intentan resolver parte de este problema en el layer de vista eliminando tanto la asincronía como la manipulación DOM directa. Sin embargo, la gestión del state de la data se deja a tu discreción. Aquí es donde Redux entra.

Redux intenta hacer predecible las mutaciones de estado imponiendo ciertas restricciones sobre cómo y cuándo pueden suceder las actualizaciones. Estas restricciones se reflejan en los tres principios de Redux.

Única fuente de verdad

El estado de toda la aplicación se almacena en una estructura de árbol dentro de un único store.

Esto hace que sea fácil crear aplicaciones universales, ya que el estado en el servidor puede ser serializado e hidratado en el cliente sin ningún esfuerzo adicional de codificación. Un solo árbol de estado también facilita la depuración o la introspección de una aplicación. Esto permite que el ciclo de desarrollo sea más rápido.

El estado es read-only

La única manera de cambiar el estado es emitir una acción, un objeto que describe lo sucedido.

Esto garantiza que nada modificará directamente al estado de tu aplicación. Por el contrario, la acción expresa una intención de transformar el estado. Debido a que todos los cambios están centralizados y suceden uno por uno en un orden estricto, no hay race conditions que necesitemos monitorear. Dado que las acciones son objetos sencillos, se pueden registrar, serializar, almacenar y reproducir posteriormente para fines de depuración o pruebas.

Los cambios se realizan a través de funciones puras

Para especificar cómo se transforma el estado por acciones, se escriben reducers puros.

Los reducers son funciones puras que toman el estado anterior y una acción, y devuelven el siguiente estado. Esta función debe devolver objetos que presentan el nuevo estado, en lugar de cambiar el estado anterior. Puedes comenzar con un solo reductor y, a medida que la aplicación vaya creciendo, divídelo en reductores más pequeños que administren partes específicas del estado.

Actions

Las acciones son cargas útiles de información que envían datos desde su aplicación a su store. Son la única fuente de información para el store. Los envía al store mediante el método store.dispatch ().

Las acciones son simples objetos en JavaScript. Las acciones deben tener una propiedad conocida como type que indica el tipo de acción que se está realizando. Los types normalmente se deben definir como una cadena de constantes. Una vez la aplicación haya crecido, puedes mover las acciones a módulos independientes. Veamos un ejemplo:

var action = {
  type: 'ADD_USER',
  user: {name: 'Dan'}
};

Action Creators

Los creadores de acciones son exactamente eso, funciones que crean acciones. Es fácil combinar los términos “acción” y “creador de acción” al momento de buscarle nombres a nuestros elementos, así que haz lo mejor que puedas para usar el término apropiado. Así evitaras confusiones.

// Action type
const ADD_USER = 'ADD_USER';

// Action Creator
var addUser = function(name) {
  return { type: ADD_USER, name}
}

// Dispatch envía un object
store.dispatch(addUser('Jaime'));

La función dispatch() se puede accesar directamente desde el store como store.dispatch(), pero es más conveniente utilizar el método connect() que tenemos en la librearía react-redux. Puedes utilizar bindActionCreators() para asociar automáticamente cuantos creadores de acción desees a la función dispatch(). Ya empezamos a tocar un poco de profundidad asi que mejor vamos a continuar con el próximo tema.

Reducers

Las acciones describen el hecho de que algo ocurrió, pero no especifican cómo cambia el estado de la aplicación en respuesta a esa intención de cambio. Este es el trabajo de los reductores. El reductor es una función pura que toma el estado anterior y una acción, y devuelve el siguiente estado.

(previousState, action) => newState

Es muy importante que el reductor se mantenga puro. Cosas que nunca debes hacer dentro de un reductor:

  • Modificar sus argumentos (entonces ya no es una función pura)
  • Ejecutar acciones como llamadas a algún API o jugar con las rutas (routes)
  • Ejecutar funciones no-puras, por ejemplo Date.now(), Math.random(), etc

La documentación es enfática en destacar que el reductor debe ser puro. Dado los mismos argumentos, debes calcular el siguiente estado y devolverlo. Sin sorpresas. Sin efectos secundarios. No llamadas de API. No mutaciones. Sólo una simple evaluación. Veamos un ejemplo:

import { combineReducers } from 'redux'
import { ADD_USER } from './actions'

function users(state = [], action) {
  switch (action.type) {
    case ADD_USER:
      return [
        ...state,
        {
          text: action.text
        }
      ]
    default:
      return state
  }
}

const reducers = combineReducers({
  users
})

export default reducers

Store

Como hemos visto las acciones representan los hechos sobre “lo que pasó” y los reductores actualizan el estado de acuerdo a esas acciones. El store es el objeto que los reúne (yey!). El objeto store tiene las siguientes responsabilidades:

  • Almacena el estado de aplicación
  • Permite el acceso al estado a través del método getState()
  • Permite que el estado se actualice a través del método dispatch(action)
  • Registra los listeners mediante el método subscribe(listener)
  • Maneja remover el registro de los listeners a través de la función que invocó al subscribe(listener). Te lo aclaro con el siguiente ejemplo:
const remove = subscribe(myListener);
// para remover:
remove();

Ya cubierto lo básico podemos tener una idea de lo que es Redux. Veamos el ejemplo completo (en producción se debe perseguir crear módulos para cada parte):

// Reducers
const users = (state = [], action) => {
  switch (action.type) {
    case 'ADD_USER':
      return [
        ...state, {
          text: action.text
        }
      ]
    default:
      return state
  }
}

//Actions
const addUser = (text) => {
  return {
    type: 'ADD_USER',
    text
  }
}

// Redux y amigos
const { combineReducers, createStore } = Redux
const userApp = combineReducers({ users })

let store = createStore(userApp)
// Registra el estado inicial
console.log(store.getState())

// cada vez que haya un cambio en el state, registrarlo
// Observa que la función subscribe() devuelve una función para remover el listener
let unsubscribe = store.subscribe(() =>
  console.log(store.getState())
)

// Dispatch some actions
store.dispatch(addUser('Wolverine'))
store.dispatch(addUser('Batman'))
store.dispatch(addUser('Ironman'))

// Remover listeners a la actualización del state
unsubscribe()

Conclusión

Esto es solo el comienzo. Esta arquitectura puede parecer un poco pesada para proyectos pequeños, pero la belleza de este patrón de diseño es lo bien que escala en aplicaciones grandes y complejas. Además, es fácil de integrar en ya sea en React, Angular, Vuejs etc.

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

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.

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…

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.

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.

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.

programación

El legado de Satoru Iwata

El trabajo de un programador es producir un buen trabajo, lo que significa que los planificadores y diseñadores no deben sentir las limitaciones del hardware. Les digo a mis programadores: piensen cuidadosamente antes de decir algo parecido a “no se puede hacer.” No hay mucho que no se puede hacer con un poco de inventiva.

La pérdida de Satoru Iwata nos mueve a reflexionar sobre cómo desafiar las limitaciones. Y más allá de enfrentarnos a ese desafío por métodos agresivo nos invita a que sea una llena de tacto.

Tal vez usted es especialmente bueno en la programación. Tal vez usted puede resolver los puzzles que otros no pueden. Cualquier cosa que te distingue está bien.

En la nota Satoru Iwata Passes Away, RIP del blog Kirai, a geek in Japan encontramos breves imágenes de su legado. Además en la serie “1994 Game Developers Interview Collection” de Shmuplations podemos leer un poco a cerca de sus métodos e ideologías.

Descanse en paz.