1
00:00:00,000 --> 00:00:04,480
[MUSIC]

2
00:00:04,480 --> 00:00:09,994
En el desarrollo web a menudo escuchas a la gente hablando sobre el marco MVC y

3
00:00:09,994 --> 00:00:13,020
el marco MVVM, etc.

4
00:00:13,020 --> 00:00:14,460
¿Cuáles son exactamente estos marcos?

5
00:00:15,560 --> 00:00:20,050
¿Cómo son útiles en el desarrollo web?

6
00:00:20,050 --> 00:00:22,257
Vamos a hablar de eso brevemente a continuación.

7
00:00:24,177 --> 00:00:26,688
En el mundo de la ingeniería de software,

8
00:00:26,688 --> 00:00:31,140
a menudo escuchas a la gente hablando de patrones de diseño.

9
00:00:31,140 --> 00:00:37,470
Lo que quieren decir exactamente es dejar de reinventar la rueda cada vez.

10
00:00:37,470 --> 00:00:43,880
Un patrón de diseño es una solución bien documentada a un problema recurrente.

11
00:00:43,880 --> 00:00:48,540
Muy a menudo, te ves a ti mismo resolviendo repetidamente problemas similares.

12
00:00:48,540 --> 00:00:53,860
Si tenemos una documentación bien especificada de cómo resolver estos problemas,

13
00:00:53,860 --> 00:00:56,720
¿por qué seguir reinventando la rueda cada vez?

14
00:00:56,720 --> 00:00:59,140
Así que ahí es donde se origina el concepto de patrón de diseño de ingeniería del software

15
00:00:59,140 --> 00:01:03,220
.

16
00:01:03,220 --> 00:01:08,420
A veces también se ve a la gente que se refiere a esto como un patrón de arquitectura.

17
00:01:08,420 --> 00:01:13,094
Así que para resumir, los patrones de diseño de software en particular son una solución

18
00:01:13,094 --> 00:01:17,706
reutilizable a los problemas que ocurren comúnmente y que se resuelven en el software.

19
00:01:17,706 --> 00:01:22,209
Ahora, en este contexto, a menudo escuchas a la gente hablando de la banda de los cuatro.

20
00:01:23,830 --> 00:01:29,217
Este fue un grupo de cuatro autores que escribieron este libro seminal llamado

21
00:01:29,217 --> 00:01:35,390
Design Patterns: Elements of Reutilizable Object-Oriented Software.

22
00:01:35,390 --> 00:01:39,500
En este libro, identificaron un gran conjunto de patrones

23
00:01:39,500 --> 00:01:41,770
de diseño comúnmente usados en ingeniería de software.

24
00:01:41,770 --> 00:01:48,030
Esta fue una de las primeras exploraciones bien documentadas de patrones de diseño,

25
00:01:48,030 --> 00:01:53,370
y por lo tanto, se convirtió en el estándar de oro para cualquiera que trabaje en ingeniería de software

26
00:01:53,370 --> 00:01:58,410
, especialmente preocupado por los paquetes de diseño.

27
00:01:58,410 --> 00:02:03,320
Este patrón de ingeniería de software nos permite aislar la lógica de dominio

28
00:02:03,320 --> 00:02:06,706
de la interfaz de usuario.

29
00:02:06,706 --> 00:02:11,827
Así que básicamente estás separando la vista del usuario de la información

30
00:02:11,827 --> 00:02:17,146
de la lógica real y cómo la información almacenada y manipulada.

31
00:02:17,146 --> 00:02:22,280
Ahora este concepto de separación de preocupaciones que vas a estar escuchando y

32
00:02:22,280 --> 00:02:25,600
otra vez en este contexto.

33
00:02:25,600 --> 00:02:30,290
La separación de preocupaciones es lo que facilita el desarrollo independiente de

34
00:02:30,290 --> 00:02:34,700
cada una de estas tres partes de nuestra aplicación y

35
00:02:34,700 --> 00:02:39,350
también permite probar y mantener estas diferentes partes.

36
00:02:39,350 --> 00:02:42,640
Ahora podemos dividir toda nuestra aplicación en tres partes,

37
00:02:42,640 --> 00:02:46,820
la vista que se ocupa principalmente de presentar información al usuario,

38
00:02:46,820 --> 00:02:51,930
el modelo que almacena el estado del dominio y la lógica del dominio y

39
00:02:51,930 --> 00:02:57,430
también proporciona la forma de

40
00:02:57,430 --> 00:03:02,604
manipular este estado desde el resto de la aplicación y

41
00:03:02,604 --> 00:03:08,180
el controlador que media entre la vista y el modelo.

42
00:03:08,180 --> 00:03:12,550
A continuación hablaremos de cada una de estas tres partes con un poco más de detalle.

43
00:03:12,550 --> 00:03:17,360
En el marco MVC, el modelo administra el comportamiento y los datos

44
00:03:17,360 --> 00:03:19,760
del dominio de la aplicación.

45
00:03:19,760 --> 00:03:25,433
Y el modelo responde a las solicitudes de información sobre su estado actual.

46
00:03:25,433 --> 00:03:30,374
Por lo general, cuando la vista quiere renderizar, o la vista quiere actualizar

47
00:03:30,374 --> 00:03:35,065
en sí misma, puede consultar el modelo para obtener información de modo

48
00:03:35,065 --> 00:03:38,703
que pueda representarse apropiadamente para el usuario.

49
00:03:38,703 --> 00:03:45,632
El modelo también responderá a las solicitudes de cambio de su estado.

50
00:03:45,632 --> 00:03:48,574
Esto generalmente se hace a través del control.

51
00:03:48,574 --> 00:03:51,712
En un sistema impulsado por eventos,

52
00:03:51,712 --> 00:03:57,810
el modelo también se puede configurar para notificar a los observadores.

53
00:03:57,810 --> 00:04:02,670
Para que los espectadores puedan registrarse como observadores para el modelo y, por lo tanto,

54
00:04:02,670 --> 00:04:06,940
cuando el modelo se actualice, las vistas se activarán automáticamente a

55
00:04:06,940 --> 00:04:10,960
actualizarse basándose en el cambio a ese estado del modelo.

56
00:04:12,160 --> 00:04:17,290
La vista en sí misma se refiere a presentar la información a los usuarios en un elemento de interfaz de usuario

57
00:04:17,290 --> 00:04:23,690
de tal manera que facilite tanto la presentación de información

58
00:04:23,690 --> 00:04:29,630
al usuario como también permita al usuario interactuar con la aplicación.

59
00:04:29,630 --> 00:04:33,970
Por lo tanto, la vista puede representar una representación del estado del modelo.

60
00:04:33,970 --> 00:04:38,662
Por lo tanto, desde un solo modelo, puede derivar fácilmente varias formas

61
00:04:38,662 --> 00:04:43,449
presentando esta información al usuario, dependiendo de por ejemplo

62
00:04:43,449 --> 00:04:47,051
, dependiendo del tamaño de la ventana gráfica.

63
00:04:47,051 --> 00:04:51,840
Así que una ventana gráfica de pequeño tamaño como en una aplicación móvil,

64
00:04:51,840 --> 00:04:57,359
la información se presentará de una manera diferente a

65
00:04:57,359 --> 00:05:03,000
a un puerto de vista más grande que se facilita en una computadora de escritorio.

66
00:05:04,248 --> 00:05:08,620
Entonces, en un marco MVC, toda la visualización de información tiene una correspondencia de uno a

67
00:05:08,620 --> 00:05:13,490
uno con el estado del modelo.

68
00:05:15,850 --> 00:05:20,380
La tercera pieza de rompecabezas en el marco de MCV es el controlador.

69
00:05:21,400 --> 00:05:26,750
El trabajo del controlador es recibir información de la vista.

70
00:05:26,750 --> 00:05:30,500
Por lo tanto, cualquier interacción del usuario que se realice será capturada y

71
00:05:30,500 --> 00:05:35,720
luego pasada al controlador para actuar sobre estas interacciones del usuario.

72
00:05:35,720 --> 00:05:40,040
Y es el trabajo del controlador entonces iniciar un cambio del estado de

73
00:05:40,040 --> 00:05:46,870
el modelo, si es necesario en esta situación particular.

74
00:05:46,870 --> 00:05:51,940
Entonces, el controlador causará apropiadamente el cambio del estado del modelo.

75
00:05:51,940 --> 00:05:55,940
Así que para resumir, el controlador puede aceptar la entrada

76
00:05:55,940 --> 00:06:00,860
del usuario en términos de las interacciones del usuario que han tenido lugar, y

77
00:06:00,860 --> 00:06:06,935
entonces instruirá al modelo para cambiar el estado.

78
00:06:06,935 --> 00:06:09,500
Simultáneamente, el controlador también puede

79
00:06:09,500 --> 00:06:14,470
hacer que la vista cambie la forma en que se muestra la información en la vista.

80
00:06:14,470 --> 00:06:19,230
Así que esa es la razón por la que en esta imagen tienes dos flechas

81
00:06:19,230 --> 00:06:24,000
yendo desde el controlador, una hacia el modelo y la otra hacia la vista.

82
00:06:25,060 --> 00:06:29,910
A veces escuchas a la gente hablando sobre el enfoque de la vista de modelo.

83
00:06:29,910 --> 00:06:33,490
El enfoque del modelo de vista de modelo es, en cierto sentido,

84
00:06:33,490 --> 00:06:37,050
una derivada del enfoque del controlador de vista de modelo.

85
00:06:37,050 --> 00:06:40,620
A veces también escuchas a las personas que se refieren a él como el enfoque de encuadernación de vista del modelo

86
00:06:40,620 --> 00:06:41,768
.

87
00:06:41,768 --> 00:06:45,502
Aquí tienes el modelo que representa la lógica de negocio y

88
00:06:45,502 --> 00:06:47,311
los datos de tu aplicación.

89
00:06:47,311 --> 00:06:52,367
Del modelo, se deriva un modelo de vista, que encapsula esa parte

90
00:06:52,367 --> 00:06:58,095
de la información necesaria para representar una vista específica.

91
00:06:58,095 --> 00:07:02,635
Así que el modelo de vista es la abstracción de la vista que expone

92
00:07:02,635 --> 00:07:07,395
las propiedades públicas y los diversos comandos que están disponibles.

93
00:07:07,395 --> 00:07:10,125
Así que esto proporciona un enlace de datos declarativos.

94
00:07:11,690 --> 00:07:16,300
En cierto sentido, la forma en que se implementan el componente y

95
00:07:16,300 --> 00:07:21,520
las plantillas en angular, se puede ver como

96
00:07:21,520 --> 00:07:27,250
una variante del enfoque de vista del modelo view-model.

97
00:07:27,250 --> 00:07:32,006
Con esta rápida comprensión del MVC y el marco MVVM,

98
00:07:32,006 --> 00:07:36,686
vamos a proceder a entender más acerca de los servicios angulares.

99
00:07:36,686 --> 00:07:43,099
[MÚSICA]