angular: el presente-futuro
TRANSCRIPT
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!