Angular: el presente-futuro

Nuestras locaciones

Nuestros Panelistas

Juan Carlos Yovera Senior Front End Developer

Franco Cunza Senior Developer

Karla Cerrón Marketing Analyst

QUESTIONS #AngularBelatrix

¿Cuál es el presente de

Angular?

Un vistazo a TypeScript

¿Por qué usar componentes?

Unit test para componentes

El futuro llegó: Angular 2

Good news

¿Preguntas? ¿Respuestas?

Overview

QUESTIONS #AngularBelatrix

¿Cuál es el presente de Angular?

La versión 1.5 es la más estable y fue creada para allanar el camino de la versión 2: • Components • Transclusión múltiple • ng-animate-swap • lazy transclusion (performance) La versión 2 ya está entre nosotros

QUESTIONS #AngularBelatrix

Un vistazo a TypeScript

• Fue desarrollado por Microsoft. • Es un super set de Javascript. • Sus principales capacidades son agregar Tipado Fuerte y

soporte a programación orientada a objetos sobre Javascript. • El código Typescript es compilado a Javascript, por lo que al

final no hay diferencias para el navegador . • Aun así los navegadores modernos incluyen capacidades para

depurar el código de Typescript directamente. • Angular 2 utiliza Typescript como lenguaje base.

¿Por qué usar components?

QUESTIONS #AngularBelatrix

Components

Template Component

Class

Properties

Methods + =

QUESTIONS #AngularBelatrix

Components

• Los Components son fundamentales a la hora de desarrollar con Angular.

• Los Components se encargan de gestionar una vista, en otras palabras una sección de nuestra página Web donde el usuario interactuará sobre ésta.

• Por lo tanto podemos decir que un Component controla una zona de la vista (zona de nuestra página Web), también podemos deducir que por cada componente que creemos crearemos una plantilla para interactuar sobre la vista.

QUESTIONS #AngularBelatrix

Components

Template Component

Class

Properties

Methods + =

Code supporting the view Created with TypeScript Properties: data Methods: logic

View layout Created with HTML Includes binding and directives

QUESTIONS #AngularBelatrix

¿Por qué usar Components?

• API más pequeña con buenas prácticas

• Encapsula vistas y código según funcionalidad

• Configuración simple

¿Components unit testing?

QUESTIONS #AngularBelatrix

Testing

Una de las mayores ventajas de utilizar Angular es que está diseñado para que pueda ser probado desde todos los ángulos. Se recomienda mucho que haya una separación funcional entre componentes y así facilitar las pruebas de integración.

QUESTIONS #AngularBelatrix

Unit testing

• Karma • Jasmine • TypeScript

QUESTIONS #AngularBelatrix

Testing End-to-End

El futuro llegó…

QUESTIONS #AngularBelatrix

Angular 2 y el futuro de la web

AngularJS en su versión 1 se define a sí mismo como un conjunto de librerías de Javascript para la creación de aplicaciones web, mientras que Angular 2 se define como una plataforma para creación de aplicaciones web y aplicaciones móviles.

Principales características de Angular 2

QUESTIONS #AngularBelatrix

Rendimiento

Image source: Angular 2: Getting Started course from Pluralsight.

QUESTIONS #AngularBelatrix

Rendimiento

QUESTIONS #AngularBelatrix

Moderno

Image source: Angular 2: Getting Started course from Pluralsight.

QUESTIONS #AngularBelatrix

Simplicidad

QUESTIONS #AngularBelatrix

Más productivo

QUESTIONS #AngularBelatrix

En resumen…

• Lazy loading

• Render más rápido

• Typescript nos provee muchos beneficios

• Los componentes ordenan y ahorran código

• Augury, Firebase y muchas herramientas para Angular 2

QUESTIONS #AngularBelatrix

QUESTIONS #AngularBelatrix

Good news

1

QUESTIONS #AngularBelatrix

Angular “La comunidad”

QUESTIONS #AngularBelatrix

Framework hacia Plataforma

QUESTIONS #AngularBelatrix

Framework hacia Plataforma

QUESTIONS #AngularBelatrix

Angular 2 CLI hace la vida más simple

https://cli.angular.io/

QUESTIONS #AngularBelatrix

Angular tiene guía de estilos oficial https://angular.io/styleguide

QUESTIONS #AngularBelatrix

Angular Material es rápido

QUESTIONS #AngularBelatrix

Angular 2 mobile esta listo https://mobile.angular.io/

QUESTIONS #AngularBelatrix

Angular 2 es universal

https://universal.angular.io/

Espacio de preguntas

¡Muchas Gracias!