Angular FRAMEWORK

 AngularJS

!==

Diferencias

• Javascript vs TypeScript

• Component-based UI

• SEO Friendly

• Bindings

• Bootstrapping

ProblemA

Javascript puro

Re-hacer la rueda, todo a mano

Jquery

Jquery enfocado al UI, pero no te ayuda con la lógica ni el manejo de datos

Single page APP

Las aplicaciones empezaron a crecer en usuarios y contenido

Y se vio la necesidad de escalar los servidores, moviendo partes de código a el cliente

Usar un Framework

Te guían en como hacer tu aplicación

Componentes que puedes usar

Angular

Imagen de lo que todos esperaban

Cómo funciona

Template

La plantilla que contiene la estructura de la vista

Un HTML con componentes que se van a renderizar

Componente

Una pequeña parte de la aplicación

Es quién controla la información que el template muestra

Servicio

Lo que maneja la lógica pesada

Tiene un propósito específico y es su responsabilidad

Inyector de Dependencias (DI)

La inyección de dependencias administra los servicios

Se le entregan a quién las pida

Inversión de control (IOc)

Las clases deben configurar sus dependencias desde afuera

Los componentes reciben servicios en su constructor

PAra qué DI/IOc

Permite hacer nuestros componentes independientes de los servicios

Permite que podamos probar nuestras clases de forma fácil

Ventajas

Las ventajas que obtienes al usar angular:

- Framework

- Componentes web

- Injector de dependencias

Existen herramientas que ya están construidas y con las cuales puedes programar

Para qué Componentes web

La aplicación se convierte en algo modular, puede crecer con facilidad

TypeScript

TypeScript es un superset de Javascript

porqué typescript

• TypeScript es que es abierto (open source)

• Madurez del código

• TypeScript me permite explicar mis APIs a terceros

• Compilado

Configurando modulos

ModuleWithProviders

UTilizandolo

injectando

@Inject(token:String)

convenciones

• forRoot se debe usar en el módulo raíz
• forChild debe ser usado en módulos hijos
• Nada fuerza estos nombres, son convenciones

Ejemplo

ProblemA

¿Qué tan difícil es manejar datos asincrónicos?

SoluCión?

No me importa si tienes los datos o no, solo continua

No esperar a los datos y continuar procesando

Solución?

Espero que los datos lleguen pronto, esperaba que llegaran hace mucho tiempo

funciones callback

SoluCión

Te doy mi palabra que te daré un resultado, o al menos te diré si fallé al intentarlo

Promesas

SoluCión

Promesas

MultipleS veces

Cómo funciona

GENERATOR​​

OBSERVABLE​

PROMISE

FUNCTION

Synchonous

Asynchonous

Promise VS observable

Los observables se pueden cancelar (unsubscribe)

Los observables se pueden repetir (retry)

Programación reactiva

¿Qué es programación reactiva?

streams de datos

Eres capaz de crear un stream de datos a partir de cualquier cosa

variables, input de usuario, propiedades, caches, estructuras de datos, etc.

funciones y más

Te dan un conjunto de funciones que te permiten combinar filtrar y hacer cambios sobre cualquiera de los streams

Overview

Tenemos muchas funciones que nos ayudan:

• Transformar (map, scan ...)
• Filtrar (filter, take ...)
• Combinar (concat, combineLatest ...)
• Otros (reduce, retry ...)

Rxjs marbles

http://rxmarbles.com/

Ventajas

Los Sistemas Reactivos son:

- flexibles y escalables

- altamente responsivo

- tolerante a fallos

- evolutivo

Flexible

Cuando un cambio es requerido la respuesta es manejada por nuestras herramientas

Cambios en streams de datos son fáciles de hacer

Responsivo

El usuario tendrá una respuesta inmediata

No hay demora entre una acción y su resultado

Evolutivo

La aplicación puede crecer y expandirse, incluyendo nuevas funcionalidades de forma rápida

Hacer el código fácil de mantener y evolucionar

Desventajas

Aprenderlo es difícil, aún más difícil por la falta de buen material

DESVENTAJAS

La master sword - empieza con poco poder

DESVENTAJAS

No sabes como usar la master sword,  solo la mueves

DESVENTAJAS

A través del entrenamiento incrementas el poder de la master sword

DESVENTAJAS

La master sword se convierte en el arma más poderosa que puedes usar

DESVENTAJAS

• Solo un conjunto de herramientas, no sabes como utilizarlas

• Difícil de hacer debugging

• Aprender require experimentación

• Difícil de poner observables en aplicaciones complejas que ya existen 

DESVENTAJAS

RXJS 6

• Mejorar el rendimiento
• Propuesta de Estándar Observable.
• Dar más modularidad a la estructura de archivos
• Dar mejores 'call stacks' para hacer el debugging más fácil.

Cuando usarlo

Applicaciones que usen gran cantidad datos, que se puedan representar en una secuencia asincrónica

Cuando NO usarlo

Cuando los datos asincrónicos son de unica respuesta

La aplicación no crecerá en datos, y la complejidad es baja

RX Más que solo JS

http://reactivex.io/

RX Más que solo JS