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.

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.

micro notas

Micro notas #9

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.

Open Source .net libraries that make your life easier – A parte de los Top 100 packages que podemos encontrar en Nuget Thomas Van Machelen ha compilado una corta pero productiva lista de librerías de código abierto que son de gran utilidad para proyectos en .Net.

PHP vs ASP.NET – El eterno debate de nunca acabar. Aunque reconozco que el autor del artículo expone varios puntos interesantes. Muy buena lectura para aquellos que desarrollan en ambas plataformas.

Rankings de los lenguajes de programación durante el año 2014 – Aunque vayamos a mitad del 2015 nunca es tarde estudiar este tipo de información. En programación no es bueno dejarse llevar por tendencias pero no está demás visualizar a donde se está moviendo la industria.

SQLite, donde lo encajo? – En la misma documentación del proyecto te lo contestan. Buen recurso para cuando te encuentras en la disyuntiva de escoger si pasar todo el trabajo de instalar/configurar MySQL o SQL Server Express en vez de usar algo mas ligero como SQLite.

Michigan Micro Mote (M3) – Sorprendente logro de poder miniaturizar un ordenador en apenas algunos milímetros. Con la popularidad que esta alcanzando el IoT este es uno de esos proyectos que debemos mantener en el radar. Microsiervos le ha reseñado brevemente y hay un video donde explican muchas de sus utilidades.

How to Read Source Code – Spoiler de la vida de un programador… en múltiples ocasiones tendrás que leer código que no ha sido escrito por ti y llorarás, restallarás cosas de tu escritorio, suspirarás y rogarás no querer pasar por eso pero así es esto. Aria Stewart comparte una serie de consejos que harán de esta tarea una mas llevadera. Muy buena lectura si deseas aportar a proyectos open source.

tecnología

Trello, el arma secreta para el developer desorganizado

Todo buen developer al menos una vez en su vida ha defendido que ser desorganizado es una virtud. Pero muy similar a la teoría de la relatividad de Einstein, la desorganización es relativa al estado de movimiento ánimo del observador. Teoría confirmada mil veces por mi madre y luego validada a través de mis jefes de trabajo.

Recientemente leí un artículo muy bueno titulado “The most important skill in software development”. El artículo no es muy largo como para hacer un tl;dr del mismo pero trata sobre la virtud de organizar algo. En este caso coding y cómo esta característica es crucial aun contando con un conocimiento técnico elevado.

Curiosamente esa semana me encontraba en una especie de catarsis sobre que en tecnologías debo enfocar mis energías y que cosas estoy haciendo o dejando de hacer para lograr esas metas técnicas. Una de las ideas que analice fue precisamente el cómo estoy organizando mi tiempo y cómo estoy manejando mis proyectos.

Llevando usando un web app por bastante tiempo para manejar prácticamente todo lo relacionado a como organizarme y poder visualizar hacia donde debo dirigir mi atención. Esa herramienta es Trello. No hay dudas que ha sido de gran utilidad y les voy a explicar porque y como lo he incorporado a mi rutina de desarrollo. Primero veamos que es Trello.

Trello es una aplicación que permite crear boards que se componen de listas, organizadas a través de tarjetas que puedes, si lo deseas, compartirlas entre diferentes miembros de un equipo. El factor del sharing es de gran utilidad pero igual funciona si eres un solo developer. Todo proyecto de software posee cierto grado de complejidad. No importa lo sencillo que pueda sonar al momento de la implementación debemos tener claro como lo vamos a ejecutar. Por tal razón cuando trabajamos desarrollando software debemos procurar organizarnos de la mejor manera posible. La calidad del código no depende de cuan robusto sea nuestro stack. Depende de cuan organizado y claro es nuestro trabajo. Ya seas que persigas las tendencias de Personal Kanban o en mi caso Scrum, Trello es un gran candidato para ser usado como herramienta de Project Management y Task Tracking. Adobe lo usa en el desarrollo de Brackets.

Scrum example

¿Que lo hace tan especial?

Trello es un gran software y es gratis. Es creado por la gente detrás de Stack Exchange (ya sabes StackOverflow?) y su mascota es un perro Husky llamado Taco. Sus aplicaciones mobile en iOS y Android son geniales y todo se mantiene finamente sincronizado. Con Evernote he tenido varios problemas manteniendo sincronizadas las notas. Hasta el momento Trello no ha fallado. Además de usarlo para manejar las tareas de mis proyectos, lo utilizo para otras cosillas como tomar notas en reuniones, organizar links para posibles artículos, para organizar mi colección de comics, mantener al día las reparaciones del hogar y más. No es para menos hayan varios que se atrevan a decir que Trello puedo ser utilizado para organizar prácticamente toda tu vida. Y créanme no están muy lejos de la verdad.

En cada tarjeta se puede colocar una descripción, imágenes, attachments, checklists, etc. Puedes mover cada elemento a diferentes tarjetas y organizarlas como mejor entiendas. Veamos como creamos un checklist.

Trello checklist

Apenas hemos tocado lo básico. Te invito a que lo pruebes por un rato y me cuentes si te ha gustado. ¿Te animas?