Hoy día el mundo de las tecnologías frontend parece abrumador, hay quien comenta que cada día aparece una tecnología nueva o un framework nuevo, cada cuál vendiéndose como la mejor de las mejores. Por lo tanto estar al día es todo un reto.
El frontend, es la capa de las aplicaciones, que más en contacto está con el usuario y que engloba disciplinas tan importantes como diseño de interfaces, UX experiencia de usuario, usabilidad, diseño gráfico, estética, pasando por sensibilidad artística e incluso psicología. Es por ello, que se hace un esfuerzo tan importante en mejorar y aplicar los últimos avances en tecnología.
En concreto para Javascript existen más de 50 superset, que podemos consultar en este directorio, dentro de esta lista podemos destacar los 3 más populares e importantes TypeScript, CoffeeScript y Dart. Con diferencia entre todos ellos el más usado actualmente es TypeScript.
Esperamos que este post os haya ayudado a entender un poco mejor Typescript y todos los beneficios que puede aportar.
Si te resulta interesante el tema y crees que puede ser útil para otros lectores, no dudes en compartirlo en las redes sociales y en dejar un comentario si quieres complementar el post ;-)
El frontend, es la capa de las aplicaciones, que más en contacto está con el usuario y que engloba disciplinas tan importantes como diseño de interfaces, UX experiencia de usuario, usabilidad, diseño gráfico, estética, pasando por sensibilidad artística e incluso psicología. Es por ello, que se hace un esfuerzo tan importante en mejorar y aplicar los últimos avances en tecnología.
Tengo la oportunidad de presentar un lenguaje que no le faltan atributos para dar mucho que hablar en los próximos meses.
Typescript
Se llama Typescript, creado originalmente por Microsoft, es un lenguaje basado en Javascript pero con algunas mejoras que os presentaré a continuación.
Solo con su nombre ya podemos intuir alguna de sus características, "type" en español "tipo", nos induce a pensar que es un lenguaje tipado, pues así es, en Typescript tenemos tipado estático de forma opcional, es decir, podemos decidir a priori la naturaleza del contenido que vamos a almacenar en una variable.
JavaScript es el lenguaje de programación por excelencia en el lado del cliente (navegador web) y casi todo el mundo frontend web gira entorno a este lenguaje. Y esto quiere decir que funciona muy bien.
No obstante cada vez el trabajo que queremos que desempeñe es más y más pesado,
y a día de hoy el propósito de este lenguaje dista mucho del propósito original.
Originalmente se pensó para conseguir pequeños efectos, animaciones o alguna petición ajax de forma muy local, dándole un poquito de "vida" al HTML puro. A raíz de ello, poco a poco hemos ido exprimiendo el potencial hasta conseguir crear aplicaciones completas con Javascript.
Por tanto podemos afirmar que tiene una potencia infinita, pero arrastra algunas pequeñas incomodidades que hacen que pueda verse limitado o impiden que tu proyecto pueda escalar correctamente.
Solo con su nombre ya podemos intuir alguna de sus características, "type" en español "tipo", nos induce a pensar que es un lenguaje tipado, pues así es, en Typescript tenemos tipado estático de forma opcional, es decir, podemos decidir a priori la naturaleza del contenido que vamos a almacenar en una variable.
JavaScript es el lenguaje de programación por excelencia en el lado del cliente (navegador web) y casi todo el mundo frontend web gira entorno a este lenguaje. Y esto quiere decir que funciona muy bien.
No obstante cada vez el trabajo que queremos que desempeñe es más y más pesado,
y a día de hoy el propósito de este lenguaje dista mucho del propósito original.
Originalmente se pensó para conseguir pequeños efectos, animaciones o alguna petición ajax de forma muy local, dándole un poquito de "vida" al HTML puro. A raíz de ello, poco a poco hemos ido exprimiendo el potencial hasta conseguir crear aplicaciones completas con Javascript.
Por tanto podemos afirmar que tiene una potencia infinita, pero arrastra algunas pequeñas incomodidades que hacen que pueda verse limitado o impiden que tu proyecto pueda escalar correctamente.
"Typescript se define como un superconjunto o "superset" de Javascript."
¿Que es un superconjuno de Javascript?
En programación, entendemos un superconjunto de un lenguaje, como otro lenguaje totalmente compatible con el primero, pero que además ofrece nuevas funcionalidades. No te preocupes si te suena raro, más adelante ponemos ejemplos.
Los lenguajes superconjunto se crean para suplir carencias o solucionar ciertos problemas que se dan en el lenguaje "padre", en nuestro caso Javascript.
Poniéndonos un poco en contexto Javascript se basa en ECMAScript (ES) y es el que define las características del lenguaje.
ECMAScript con cada versión hace evolucionar el lenguaje e introduce nuevas mejoras.
Typescript trata de adoptar dichas mejoras, junto con algunas características propias adicionales.
¿Qué sentido tiene TypeScript cuando ES evoluciona?
El problema que existe cuando sale una nueva versión de ECMAScript con nuevas características, es que para ser operativo se deben actualizar también los interpretes, (en nuestro caso los navegadores web), y este paso suele ser lento y costoso.
En este sentido TypeScript lo hace muy bien, dado que ofrece características avanzadas de los últimos estándares de ECMAScript, pero permitiendo una compatibilidad con los navegadores web actuales.
En definitiva, con TypeScript, los desarrolladores pueden adelantarse al futuro de Javascript y disponer desde este momento de mejoras sensibles en el lenguaje, sin preocuparse de la compatibilidad con los navegadores web de sus usuarios.
¿Qué ofrece TypeScript?
Ya hemos introducido que en TypeScript contamos con tipado estático de forma opcional, pero esto no es más que el principio.
Algunos efecto de contar con tipado estático son los siguientes:
- Contar con errores entre tipos en tiempo de compilación (mejor que en tiempo de ejecución).
- Hace que los IDES (entornos de programación), nos den más ayudas, permitiendo hacer autocompletado de una forma más precisa e inteligente.
Otras características muy interesantes:
- El punto estrella de TypeScript es incorporar el paradigma de programación orientada a objetos (POO), permitiendo crear clases y hacer herencia, mediante construcciones más fáciles de leer o expresar (syntactic sugar). Todo ello permitiendo compatibilidad con versiones anteriores a ECMAScript 2015.
- Visibilidad entre atributos del las clases, usando modificadores "public", "protected" o "private".
- Declaración de variables usando `let` en vez de `var`, característica de (ES6). Ofrece un mejor control del alcance de las variables. Puedes ampliar la información en el siguiente enlace.
- Decoradores, que permiten añadir funcionalidad a un objeto de forma dinámica, extensamene utilizado en Angular2.
Esto no es más que alguna de las cosas más recalcables, pero existen bastantes más, por eso te invito a leer la documentación oficial.
¿Dónde está la magia?
El secreto de esta tecnología se encuentra en el "transpilador" de TypeScript.
Es una especie de compilador que transforman nuestro código Typescript a Javascript con la versión ECMAScript compatible que deseemos.
Para aplicar "compilación" sobre un archivo aplicamos el comando:
> tsc example.ts
Al finalizar el proceso nos encontraremos con un nuevo fichero example.js.
¿Como instalar TypeScript?
Para instalar TypeScript lo primero que necesitamos es instalar NodeJs en nuestro equipo, para ello dirígete a la página oficial.
Usando el gestor de paquete npm podemos instalar TypeScript con el comando.
> npm install -g typescript
Entornos de desarrollo para TypeScript
Para desarrollar con este lenguaje contamos extensiones para la mayoría de IDEs y editores.
- Atom, enlace plugins para atom.
- Sublime Text, enlace plugins para sublime text.
- Webstorm 2016, cuenta muy buen soporte para TypeScript.
- Emacs
- Visual Studio Code
- Netbeans
- Eclipse
- Visual Studio
¿Donde se puede usar TypeScript?
En resumen TypeScript se puede usar en todos los ambientes donde se usa Javascript, ya sea web que se ejecutan en el navegador o aplicaciones NodeJS.
Actualmente está teniendo un gran éxito, y es que Typescript ha sido adoptado por Google para desarrollar la nueva versión de su poderoso framework AngularJs 2, con toda la controversia que ello a acarreado.
Pero no es el único, muchos otros framework también se han pasado a Typescript, como React o Ionic2.
También contamos con versiones tipadas de las librerías más populares como Jquery.
También contamos con versiones tipadas de las librerías más populares como Jquery.
¿Vemos un ejemplo?
Llega el momento de poner en practica alguna de las "cositas" que hemos vistos, y ver un poquito de código.
Empezamos por un ejemplo facilito, en la siguiente imagen vemos como generamos una clase en Javascript (parte derecha del editor) desde un fichero Typescript (parte izquierda del editor).
En la captura vemos un error, lo cometo a propósito para ver un ejemplo de errores por incompatibilidad de tipos cuando hacemos uso de tipado estático.
El ejemplo es simple, con lo cual quizá no te quedes muy convencido de la potencia de Typescript, por lo tanto propongo un ejemplo un "pelín" más complejo.
En el siguiente ejemplo vemos como funciona la herencia. En este primer fragmento de código vemos una clase genérica Vehículo.
En este fragmento de código vemos como a partir de la clase Vehículo heredamos para crear clases específicas para Moto y Camión. Por último vemos como ya podemos instanciar los objetos e invocar sus métodos.
Esperamos que este post os haya ayudado a entender un poco mejor Typescript y todos los beneficios que puede aportar.
Si te resulta interesante el tema y crees que puede ser útil para otros lectores, no dudes en compartirlo en las redes sociales y en dejar un comentario si quieres complementar el post ;-)
No hay comentarios:
Publicar un comentario