Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

UN POCO DE HISTORIA…

Slide 5

Slide 5 text

PRINCIPALES CARACTERÍSTICAS

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

CONCEPTOS BÁSICOS

Slide 10

Slide 10 text

CONCEPTOS BÁSICOS

Slide 11

Slide 11 text

COMPONENTES Angular ofrece todo lo necesario para trabajar con componentes web. El uso de componentes facilita la reutilización del código.

Slide 12

Slide 12 text

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.

Slide 13

Slide 13 text

COMPONENTES

Slide 14

Slide 14 text

COMPONENTES

Slide 15

Slide 15 text

COMPONENTES

Slide 16

Slide 16 text

COMPONENTES

Slide 17

Slide 17 text

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.

Slide 18

Slide 18 text

PLANTILLAS

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

DIRECTIVAS ESTRUCTURALES

Slide 21

Slide 21 text

DIRECTIVAS DE ATRIBUTO

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

LIFECYCLE HOOKS • OnChanges • OnInit • DoCheck • AfterContentInit • AfterContentChecked • AfterViewInit • AfterViewChecked • OnDestroy

Slide 24

Slide 24 text

LIFECYCLE HOOKS

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

SERVICIOS

Slide 27

Slide 27 text

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.

Slide 28

Slide 28 text

INYECCIÓN DE DEPENDENCIAS

Slide 29

Slide 29 text

INYECCIÓN DE DEPENDENCIAS

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

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.

Slide 33

Slide 33 text

RxJS Y OBSERVABLES PATRÓN OBSERVADOR

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

HERRAMIENTAS

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

ANGULAR CLI Angular CLI es una herramienta NodeJS, podemos instalarla por medio de NPM. Utiliza Webpack para el manejo de tareas.

Slide 42

Slide 42 text

ANGULAR CLI

Slide 43

Slide 43 text

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.

Slide 44

Slide 44 text

AUGURY

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

STACKBLITZ

Slide 47

Slide 47 text

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.

Slide 48

Slide 48 text

VERSIÓN 7 Y MAS ALLÁ

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

JIT

Slide 52

Slide 52 text

AOT

Slide 53

Slide 53 text

Renderer 2

Slide 54

Slide 54 text

Ivy

Slide 55

Slide 55 text

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.

Slide 56

Slide 56 text

MUCHAS GRACIAS @brolag