Ya hace algún tiempo que salio el Framework Angular 2 y muchos desarrolladores lo vienen usando, ya que brinda muchos beneficios respecto a la versión anterior como:
- Rapidez: Mejora la rapidez y el comportamiento en la actualización de grandes cantidades de datos, basándose en operaciones sobre los datos y no sobre el DOM (Document Object Model).
- Adaptado a Móviles: Angular 2 mejora la experiencia del usuario en dispositivos móviles haciendo uso de el renderizado en servidor y los webworkers de HTML5.
- Es flexible: Podemos desarrollar en diferentes lenguajes de programación como Javascript, Typescript o Dart. Además soporta diferentes formas de trabajar con estructuras de datos: POJO (Clases simples que no dependen de ningún framework especial) y functional reactive style.
- Basado en componentes: Angular 2 basa su desarrollo en componentes lo que hace que su desarrollo sea mucho más intuitivo. Un componente puede ser cualquier cosa, una silla, una mesa, un coche. Cada componente tiene su información y establece de que manera debe renderizarse.
Es por esto y muchas razones que los desarrolladores de hoy día lo prefieren.
También esta en lenguaje de programación de código abierto TypeScript que fue desarrollado por Microsoft, que es un lenguaje que convierte su código en JavaScript común. También es llamado Superset de Javascript, lo que significa que si el navegador está basado en Javascript, este nunca llegará a saber que el código original fue realizado con TypeScript y ejecutará el Javascript como lenguaje original.
¿Qué es un superset?
Se trata de un lenguaje escrito sobre otro lenguaje. En este caso Typescript es eso, un lenguaje basado en el original, ofreciéndonos grandes beneficios como el descrito anteriormente, aunque existen otros beneficios. Por ejemplo, mientras otros superset de JavaScript nos alejan del código original, TypeScript, por el contrario, es muy similar a JavaScript y a C# gracias a que su creador posee conocimientos de ambos lenguajes.
En esta ocasión les mostrare un pequeño tutorial de como empezar a usar Angular 2 usando TypeScript.
Creación del proyecto
Lo primero es establecer una carpeta que contendrá todo nuestro proyecto en este caso lo creare en mis documentos. abrimos el terminal y creamos nuestra carpeta.
tecgurus@tecgurus-linux:~$ cd Documents/
tecgurus@tecgurus-linux:~/Document$ mkdir Angular2
Ahora empezamos a crear lo necesario para usar Angular 2, en este caso voy a usar el editor de texto Sublime Text para crear algunos archivos y configuraciones de paquete que son necesarios de la siguiente manera:
- Primero creamos package.json para que defina los paquetes de la aplicación de inicio rápido y genere algunos scripts útiles para el proyecto.
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"start": "npm run lite",
"lite": "lite-server"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"angular2-in-memory-web-api": "0.0.15",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0"
}
}
- Segundo creamos tsconfig.json que es un archivo de configuración de texto mecanográfico que guía a nuestro compilador para que genere archivos JavaScript.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
- Tercero creamos typings.json para decirle al compilador acerca de las bibliotecas que carga ya que muchas veces se genera error por el compilador mecanografiado, porque no reconoce las características y configuraciones de forma nativa y esto genera un error en nuestro proyecto.
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160602141332",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160621231320"
}
}
- Cuarto, creamos systemjs.config.js que es una alternativa para cargar nuestros módulos de aplicaciones y bibliotecas….
Te esperamos en la segunda parte del artículo en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.
