Monthly Archives: Agosto 2015

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.

micro notas

Micro notas #10

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.

The technology behind preview photos – Interesante explicación de como los ingenieros de Facebook trabajan con la previsualización de imágenes en sus diferentes productos.

Microsoft/WinObjC: Objective-C for Windows – Propuesta de Microsoft para convertir aplicaciones de iOS a Windows 10. Un proyecto que recién comienza y se espera que de mucho de qué hablar.

46 useful PHP code Snippets that can help you with your PHP projects – Usualmente utilizo este tipo de listas para practicar como trabaja el lenguaje que estoy usando. Me parece haber vistos alguno que otro snippet interesante. Especialmente los que utilizan la librería de CURL. Aunque ojo con los de MySQL.

How Instagram closed my account and gave it to a football celebrity – A veces el precio de la fama es el problema de otro. Interesante historia con un final feliz.

Symantec: Spam falls below 50% of all email for the first time since 2003 – Buenas noticias para todos aquellos que odiamos tener que ver nuestro buzón de correo lleno de spam.

free topic

“Get Involved!” excelente documental para el desarrollador social

Scott and Rob on Get Involved
Su lanzamiento fue en el año 2013 pero la producción no tiene desperdicio. “Get Involved!” es de esas pocas cosas que ves y dices “wow, porque no lo vi antes”. Esta serie de videos alojados en Pluralsight (ojo, es gratis), Scott Hanselman y Rob Conery agrupan en una presentación tipo documental una serie de consejos y sugerencias para aquellos que vivimos pensando en como hacer más a la hora de compartir el conocimiento adquirido en el campo de la programación. La narrativa es muy elocuente y te llevan paso a paso por el proceso de decidir si bloguear o no, o como comportarse en una red social. Y todo desde el punto de vista de un desarrollador. Los consejos que aquí se mencionan son igual de vigentes para todo aquel que esté buscando cómo hacer más dentro de su hobby, nicho o simplemente aquello que le apasione. Incluso si deseas llevar tu carrera a otro nivel o simplemente darle un nuevo giro habrán consejos que de seguro serán muy productivos.

Muchas veces estamos buscando ese empujón que nos motive a hacer algo más dentro de lo que nos apasiona y creo que Scott y Rob han dado en el clavo con esta producción. Y lo mejor es que está gratis a través de Pluralsight. Que igual sirve para experimentar cómo trabaja este servicio. Espero que te sea útil.