Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a Angular

Introducción a Angular

Principales características de Angular y cómo utilizarlas.

8dbca2c5e7e0296afd964af7d1f7b55e?s=128

Alfredo Bonilla

February 16, 2019
Tweet

Transcript

  1. INTRODUCCIÓN A ANGULAR GDG Pura Vida Alfredo Bonilla @brolag

  2. HOLA Soy Alfredo Bonilla. Desarrollador Web. Co-organizador Angular Costa Rica.

    Organizador Asistente en GDG Pura Vida Entusiasta de las tecnologías de código abierto. Quejas y sugerencias -> @brolag
  3. ¿QUÉ ES ANGULAR? • En un framework de código abierto

    desarrollado en TypeScript por Google. • Se utiliza para crear aplicaciones de una sola página o SPAs.
  4. UN POCO DE HISTORIA…

  5. PRINCIPALES CARACTERÍSTICAS

  6. TYPESCRIPT Es un superconjunto de JavaScript que añade tipado estático

    y objetos basados en clases. Extiende la sintaxis de JavaScript. Angular no obliga a utilizar TypeScript sin embargo lo recomienda fuertemente. Ayuda a que la documentación y la estructura del código sea más estandarizada.
  7. FRAMEWORK DOGMÁTICO Quizás la principal característica de Angular es que

    ofrece muchas opiniones sobre como hacer las cosas. Esto evita que el desarrollador invertir tiempo en la toma de decisiones sobre como organizar su aplicación, que librerías básicas necesita para empezar, cuál debe ser la arquitectura, etc.
  8. MULTIPLATAFORMA Con Angular es posible crear aplicaciones para distintas plataformas,

    desde aplicaciones de escritorio con Electron hasta aplicaciones móviles, utilizando estrategias de Cordova, Ionic o NativeScript. También permite la creación de de aplicaciones web progresivas (PWAs), cuyo objetivo es semejar la experiencia de usuario de una aplicación nativa.
  9. CONCEPTOS BÁSICOS

  10. CONCEPTOS BÁSICOS

  11. COMPONENTES Angular ofrece todo lo necesario para trabajar con componentes

    web. El uso de componentes facilita la reutilización del código.
  12. COMPONENTES COMPONENTE Es el bloque básico para la construcción de

    una aplicación Angular. Se definen por medio del decorador @Component. Una aplicación Angular se conforma por un conjunto de componentes. Un componente siempre va a tener una plantilla.
  13. COMPONENTES

  14. COMPONENTES

  15. COMPONENTES

  16. COMPONENTES

  17. PLANTILLAS PLANTILLAS Definen la vista de un componente. Se escriben

    en HTML decorado con otros componentes y directivas que enriquecen su comportamiento. Cada componente tiene una plantilla asociada.
  18. PLANTILLAS

  19. DIRECTIVAS DIRECTIVA En una aplicación Angular, el DOM se renderiza

    en base a las instrucciones de las directivas. Las directivas se utilizan para transformar el DOM. Existen tres tipos de directivas: estructurales, atributos y componentes.
  20. DIRECTIVAS ESTRUCTURALES

  21. DIRECTIVAS DE ATRIBUTO

  22. LIFECYCLE HOOKS Un componente tiene un ciclo de vida gestionado

    por Angular. Angular crea el componente, lo procesa, crea y procesa sus componentes hijos, comprueba cuando cambian sus propiedades enlazadas a los datos y lo destruye antes de eliminarlo del DOM. Angular ofrece ganchos para el ciclo de vida que proporcionan visibilidad de estos momentos clave de la vida y la capacidad de actuar cuando se producen.
  23. LIFECYCLE HOOKS • OnChanges • OnInit • DoCheck • AfterContentInit

    • AfterContentChecked • AfterViewInit • AfterViewChecked • OnDestroy
  24. LIFECYCLE HOOKS

  25. SERVICIOS SERVICIOS Los servicios son simples clases que pueden ser

    inyectadas en los componentes. La responsabilidad de acceso a los datos se le delega a los servicios, de manera que los componentes no sepan nada de cómo se realiza. Además de esto, permiten compartir datos entre componentes que no están relacionados entre sí de ninguna manera.
  26. SERVICIOS

  27. INYECCIÓN DE DEPENDENCIAS INYECCIÓN DE DEPENDENCIAS (DI) La inyección de

    dependencias esta cableada por todo Angular y permite proveer a los componentes de los servicios que necesiten. Los componentes consumen servicios, de manera que los servicios se pueden inyectar en los componentes para darles acceso a estos. Por cada dependencia se debe registrar un proveedor. Los proveedores se declaran en el módulo.
  28. INYECCIÓN DE DEPENDENCIAS

  29. INYECCIÓN DE DEPENDENCIAS

  30. MÓDULOS MÓDULOS Las aplicaciones Angular son modulares. Un módulo pueden

    contener componentes, servicios, directivas, y cualquier pieza de código relacionada con un mismo conjunto de capacidades. La cantidad de módulos que se utilicen depende de cada aplicación pero puede utilizarse una estrategia tan granular como sea necesario.
  31. RxJS Y OBSERVABLES RxJS La programación reactiva es un paradigma

    de programación asíncrona que abarca los flujos de datos la propagación de los cambios. RxJS es una librería de JavaScript que utiliza observables que facilita el manejo del llamados asíncronos y el código basado en call-backs.
  32. RxJS Y OBSERVABLES OBSERVABLES Permiten pasar mensajes a subscriptores, permiten

    el manejo de múltiples valores y eventos de manera síncrona o asíncrona. Define una función para publicar valores que pueden ser mensajes, literales o eventos. En otras palabras, es posible suscribirse a un observable y cuando los valores están listos, este va a emitirlos a un subscriptor.
  33. RxJS Y OBSERVABLES PATRÓN OBSERVADOR

  34. RxJS Y OBSERVABLES OBSERVABLES vs. PROMISES • Los obserables son

    declarativos y no comienzan su ejecución hasta que exista una subscripción. Las promesas se ejecutan directamente cuando son creadas. • Los observables pueden devolver muchos valores, las promesas solamente uno. • Los observables se pueden cancelar por medio de cancelar la subscripción mientras que una promesa eventualmente llamará al callback de éxito o rechazo.
  35. FORMS Son una de las partes más importantes del framework

    ya que permiten manejar la información del usuario para gran cantidad de tareas como autenticación, actualizar el perfil personal, crear nueva información, etcétera. Existen dos tipos de formularios: • Formularios manejados por plantilla. (Template-driven). • Formularios reactivos. (Reactive Forms).
  36. FORMS FORMULARIOS REACTIVOS Permiten un manejo explícito del estado de

    un formulario en un momento específico. • Más flexibles. • Escalabes. • Fáciles de probar por medio de unit testing. • Estructura más compleja.
  37. FORMS FORMULARIOS Template-Driven Útiles para construir formularios simples como un

    formulario de contacto o de subscrición. • Más fáciles de implementar. • Los enlaces de datos y directivas ocurren “por debajo”. • Difíciles de probar por medio de unit testing.
  38. ROUTING Rutas en Angular Facilitan la navegación de una vista

    a otra por medio de una ruta. Es un servicio opcional que puede inyectarse en el módulo principal para configurar rutas para los distintos componentes de la aplicación. Permite añadir seguridad a nuestra aplicación por medio de rutas restringidas utilizando guards.
  39. HERRAMIENTAS

  40. ANGULAR CLI Angular CLI permite empezar a desarrollar aplicaciones Angular

    de manera sencilla. Es una herramienta de línea de comandos que permite generar, probar y desplegar aplicaciones Angular. Es desarrollada por el mismo equipo de desarrollo de Angular.
  41. ANGULAR CLI Angular CLI es una herramienta NodeJS, podemos instalarla

    por medio de NPM. Utiliza Webpack para el manejo de tareas.
  42. ANGULAR CLI

  43. AUGURY Es una extensión de Chrome o Firefox que permite

    debuggear fácilmente aplicaciones Angular. Ayuda al desarrollo de aplicaciones por medio de visualización de árbol de los componentes.
  44. AUGURY

  45. STACKBLITZ Es un editor de código en línea. Permite crear

    aplicaciones Angular con un solo clic. Posee una interfaz muy similar a Visual Studio Code, pero en el navegador.
  46. STACKBLITZ

  47. ANGULAR CONSOLE La consola de Angular permite ejecutar comandos de

    Angular CLI por medio de una interfaz gráfica intuitiva. Se recomienda su uso para desarrolladores principiantes.
  48. VERSIÓN 7 Y MAS ALLÁ

  49. VERSION 7.0.0 • Scroll virtual • Ng add • Mejoras

    de rendimiento por medio de la optimización de pollyfils.ts • Drag and Drop en Angular Material • Lanzamiento de Stackblitz 2.0 • Versión estable de @angular/fire
  50. EL FUTURO IVY Ivy será el nuevo motor de renderizado

    de Angular. Permitirá que una aplicación “hola mundo” pese 3.2kb. • Contará con mejores técnicas de Tree Shaking. • Mejoras en la compilación de las plantillas. • Mejoras en el uso de la memoria.
  51. JIT

  52. AOT

  53. Renderer 2

  54. Ivy

  55. IVY • El proceso de Tree Shaking es mejor. •

    El código generado es más fácil de debuggear. • Compila un archivo a la vez. • Remueve el archivo de metadata. • Los templates serán parte del stack trace.
  56. MUCHAS GRACIAS @brolag