El front-end no sería lo mismo si Angular no estuviera presente. Por ello, te invitamos a escuchar este nuevo seminario, donde podrás darle un vistazo a Angular 1.5 y a la nueva versión 2.0, que acaba de lanzarse al mundo.

2. Nuestras
locaciones

3. Nuestros
Panelistas
Juan Carlos Yovera
Senior Front End
Developer
Franco Cunza
Senior Developer
Karla Cerrón
Marketing Analyst

4. 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

5. 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

6. 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.

7. ¿Por qué usar components?

8. QUESTIONS
#AngularBelatrix
Components
TemplateComponent
Class
Properties
Methods
+=

9. 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.

10. QUESTIONS
#AngularBelatrix
Components
TemplateComponent
Class
Properties
Methods
+=
Code supporting the
view
Created with TypeScript
Properties: data
Methods: logic
View layout
Created with HTML
Includes binding and
directives

11. 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

12. ¿Components unit testing?

13. 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.

14. QUESTIONS
#AngularBelatrix
Unit testing
• Karma
• Jasmine
• TypeScript

15. QUESTIONS
#AngularBelatrix
Testing End-to-End

16. El futuro llegó…

17. 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.

18. Principales características de Angular 2

19. QUESTIONS
#AngularBelatrix
Rendimiento
Image source: Angular 2: Getting Started course from Pluralsight.

20. QUESTIONS
#AngularBelatrix
Rendimiento

21. QUESTIONS
#AngularBelatrix
Moderno
Image source: Angular 2: Getting Started course from Pluralsight.

22. QUESTIONS
#AngularBelatrix
Simplicidad

23. QUESTIONS
#AngularBelatrix
Más productivo

24. 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

25. QUESTIONS
#AngularBelatrix

26. QUESTIONS
#AngularBelatrix
Good news

27. 1
QUESTIONS
#AngularBelatrix
Angular “La comunidad”

28. QUESTIONS
#AngularBelatrix
Framework hacia Plataforma

29. QUESTIONS
#AngularBelatrix
Framework hacia Plataforma

30. QUESTIONS
#AngularBelatrix
Angular 2 CLI hace la vida más
simple
https://cli.angular.io/

31. QUESTIONS
#AngularBelatrix
Angular tiene guía de estilos oficial
https://angular.io/styleguide

32. QUESTIONS
#AngularBelatrix
Angular Material es rápido

33. QUESTIONS
#AngularBelatrix
Angular 2 mobile esta listo
https://mobile.angular.io/

34. QUESTIONS
#AngularBelatrix
Angular 2 es universal
https://universal.angular.io/

35. Espacio de preguntas

36. ¡Muchas Gracias!