spanish.srt

1
00:00:24,000 --> 00:00:26,000
[Música]
Probando. Uno, dos, uno, dos.

2
00:00:26,000 --> 00:00:31,489
Uno, dos, tres, cuatro.
El rápido zorro café salta sobre el perro perezoso.

3
00:00:33,489 --> 00:00:41,200
Este es el podcast de React. Soy Chantastic.
Hoy vamos a volver atrás. Muy, muy atrás.

4
00:00:41,200 --> 00:00:47,380
De regreso a los inicios de React.
Mirando 10 años atrás, parecía que React
siempre estuvo destinado a triunfar.

5
00:00:47,380 --> 00:00:52,719
Que un framework hecho por Facebook era demasiado
grande para fallar. Pero esta no es ese
tipo de historia.

6
00:00:52,719 --> 00:00:58,290
De hecho, hubieron muchas ocasiones en la
historia de React donde parecia que no iba a
tener éxito en lo absoluto.

7
00:00:58,290 --> 00:01:05,610
Entonces, ¿qué pasó?
¿Como es que React paso en 10 años de verse
muerto al llegar

8
00:01:05,610 --> 00:01:12,580
a ser el framework de front-end de
Javascript dominante que es ahora?

9
00:01:12,580 --> 00:01:18,820
Todo empieza en el 2011 en Facebook.
jQuery y Backbone dominaban el front-end
en JavaScript

10
00:01:18,820 --> 00:01:24,710
pero herramientas pragmáticas como Ember,
Angular y Knockout entraron en escena
En el mundo exterior

11
00:01:24,710 --> 00:01:30,070
"Gangnam Style" recién se había subido a YouTube,
"Call Me Maybe" estaba en la cima de las
listas de música

12
00:01:30,070 --> 00:01:35,790
y el meme más reciente era el de
"La Novia Psicópata" En tiempo del Internet,

13
00:01:35,790 --> 00:01:42,500
básicamente una eternidad. Así que ponte el
cinturón de seguridad, desconéctate de todo, y
habilita el modo de "no molestar",

14
00:01:42,500 --> 00:01:45,320
porque está es la historia de algo que
tenía pocas posibilidad de ganar.

15
00:01:45,320 --> 00:01:46,320
[Música]

16
00:01:56,000 --> 00:01:59,000
Veo que esta cámara tiene una luz roja,
pero está otra no lo tiene.

17
00:02:00,000 --> 00:02:02,000
[Música]

18
00:02:03,000 --> 00:02:05,000
Solo sujétalo con esto.

19
00:02:07,000 --> 00:02:09,000
Probando uno dos, probando.

20
00:02:10,819 --> 00:02:17,200
[Música]

21
00:02:17,200 --> 00:02:36,349
[La computadora se enciende]

22
00:02:36,349 --> 00:02:40,050
Cuando obtuve la oferta para trabajar en
Facebook, le conté a mi mamá.
Estaba muy emocionado.

23
00:02:40,050 --> 00:02:44,840
La película "La Red Social" se había estrenado,
y ella la había visto recientemente.

24
00:02:44,840 --> 00:02:48,970
Ella constantemente me desanimaba de
aceptar porque pensaba que Mark Zuckerberg

25
00:02:48,970 --> 00:02:54,769
no parecía una buena persona. Durante
el tiempo en el que trabajé en Facebook,

26
00:02:54,769 --> 00:02:59,170
no creo que vuelva a existir algo similar
nunca más. No era algo que que
hubiese experimentado antes.

27
00:02:59,170 --> 00:03:04,129
Solo unos meses antes de unirme,
Kanye West visitó las oficinas de Facebook,

28
00:03:04,129 --> 00:03:11,049
se subió a una mesa de la cafetería
y rapeó algunas rimas

29
00:03:11,049 --> 00:03:15,321
y estaba trabajando con esta persona que
recién se había graduado de la Universidad,

30
00:03:15,321 --> 00:03:20,299
y yo estaba tratando de explicarle que había
trabajado en estos trabajos de
mierda en software. Para ese entonces,

31
00:03:20,299 --> 00:03:26,410
ya habían sido 10 o 15 años,
y nada como esto había pasado antes,
no en la ingeniería de software.

32
00:03:26,410 --> 00:03:32,319
"♪ Eres mi estrés, eres mi masajista ♪"

33
00:03:32,319 --> 00:03:37,159
En aquel tiempo, JavaScript pasaba por un poco
de crisis existencial,

34
00:03:37,159 --> 00:03:44,189
acerca de si ser más como un lenguaje
de programación real, o un lenguaje
de programación de juguete.

35
00:03:44,189 --> 00:03:49,040
Había mucha agitación. jQuery era popular,
MooTools era popular,

36
00:03:49,040 --> 00:03:53,459
y había tantas opciones diferentes en guerra
tratando de llegar a la mente del público.

37
00:03:53,459 --> 00:03:57,390
Y había muchas similitudes entre ellos, pero cada
una tenía sútiles diferencias

38
00:03:57,390 --> 00:04:02,780
y ninguna era realmente fantástica para
construir interfaces de usuario y
aplicaciones complejas.

39
00:04:02,780 --> 00:04:07,220
Había esta tendencia más hacia
aplicaciones sofisticadas.

40
00:04:07,220 --> 00:04:13,230
que hacían más cosas, y en Facebook todavía
priorizabamos la tecnología para
hacer render en el server,

41
00:04:13,230 --> 00:04:18,299
y una de las cosas por las cuales
estuvimos en contra por un largo tiempo

42
00:04:18,299 --> 00:04:22,930
fue simplemente incrementar el tamaño de
los paquetes de JavaScript, así que conforme
moviamos más y más cosas al lado del cliente,

43
00:04:22,930 --> 00:04:27,370
el cliente se volvía más y más lento,
así que en realidad nos cambiamos hacia
el render del lado del servidor

44
00:04:27,370 --> 00:04:32,270
y hacia pequeñas pedazos de JavaScript
por un tiempo. Y había esta sensación de que

45
00:04:32,270 --> 00:04:37,590
sabíamos que lo que estábamos haciendo para
el desarrollo en el lado del cliente no
estaba funcionando

46
00:04:37,590 --> 00:04:43,770
pero también lo que teníamos en el lado del
servidor no nos iba a llevar a ningún lado.

47
00:04:43,770 --> 00:04:51,090
Creo que ese fue el tipo de ambiente
del cual nació salió React.

48
00:04:51,090 --> 00:04:57,620
[Música]

49
00:04:57,620 --> 00:05:03,260
Cuando me uní a Facebook en el 2010,
había colaborado mucho en código libre,
particularmente

50
00:05:03,260 --> 00:05:08,229
en el mundo de JavaScript. Era un colaborador
en la herramienta Dojo.js que fue

51
00:05:08,229 --> 00:05:14,210
uno de los abuelos del movimiento de JavaScript,
junto a los prototipos y jQuery.

52
00:05:14,210 --> 00:05:20,270
Pasé mis primeros dos años en Facebook en el equipo 
de desarrollo móvil.
Empezamos con una gran determinación

53
00:05:20,270 --> 00:05:25,289
para competir con Apple y Google, y pensamos
que nuestra mayor oportunidad de éxito

54
00:05:25,289 --> 00:05:32,419
como compañía era ir directamente
hacia la web, y abogar para construir
el ecosistema de HTML5.

55
00:05:32,419 --> 00:05:38,819
Así que, como parte de eso, yo y otros
dos ingenieros llamados
Vladimir Kolesnikov y Will Bailey

56
00:05:38,819 --> 00:05:43,970
construimos un framework llamado
Bolt.js (Tornillo.js)
Lo llamamos así porque

57
00:05:43,970 --> 00:05:50,630
justo "atornillábamos" muchas cosas
que cada uno nos interesaba.
"Bolt" era más o menos la implementación de Facebook

58
00:05:50,630 --> 00:05:55,699
de un modelo vista-controlador (MVC) para
el lado del cliente. Creo que era una versión
bastante buena, tal vez una mejor versión

59
00:05:55,699 --> 00:06:01,400
de cosas como Backbone y algunos otros
frameworks que existían
en aquellos tiempos.

60
00:06:01,400 --> 00:06:08,510
Pero nació desde unas limitaciones
muy específicas de Facebook.
Es el corazón de tu experiencia en Facebook.

61
00:06:08,510 --> 00:06:14,190
Lo re-pensamos completamente desde las raíces.
Habíamos trabajado en el durante todo el año,

62
00:06:14,190 --> 00:06:20,400
y lo llamábamos "Timeline". Facebook era
uno de los primeros grandes productos
que era realmente una experiencia más que nada.

63
00:06:20,400 --> 00:06:25,759
No estás tratando de comprar comida u
obtener boletos, o algo así en Facebook.

64
00:06:25,759 --> 00:06:30,259
Lo que realmente quieres es entretenimiento.
Y por ello sabes que la interfaz de usuario

65
00:06:30,259 --> 00:06:35,960
necesita ser interesante. Bolt no solo era
una caja de herramientas,

66
00:06:35,960 --> 00:06:42,389
realmente era un framework para desarrollo 
de aplicaciones. Algo diseñado y hecho 
para construir

67
00:06:42,389 --> 00:06:48,580
aplicaciones complejas y altamente 
interactivas, y estaba siendo usando para 
construir productos realmente complejos

68
00:06:48,580 --> 00:06:53,330
en Facebook. Al final terminamos 
prácticamente recreando
la mayor parte de Facebook:

69
00:06:53,330 --> 00:06:59,111
toda la variedad de aplicaciones: timeline,
chat, la sección de noticias. 
Teníamos toda una aplicación de fotos

70
00:06:59,111 --> 00:07:04,440
que construimos, y obviamente el 
equipo tenía que expandirlo.
Así que en algún punto pensé

71
00:07:04,440 --> 00:07:09,270
que probablemente teníamos alrededor de 
25 ingenieros trabajando en todo esto, 
entre los que construían Bolt y

72
00:07:09,270 --> 00:07:13,420
y los que creaban aplicaciones usando Bolt, 
y eso solamente contando al equipo de 
aplicaciones móviles.

73
00:07:13,420 --> 00:07:18,460
Bolt nunca fue el problema, fue la 
arquitectura lo que terminó por derrotarnos.
El producto por sí mismo

74
00:07:18,460 --> 00:07:23,690
se volvió más complejo, y entre más 
añadíamos ingenieros al equipo, no nos 
topamos con la pared, pero si comenzó a ser

75
00:07:23,690 --> 00:07:28,460
muy, muy díficil hacer cambios.
Fue justo por aquellas fechas

76
00:07:28,460 --> 00:07:42,949
que Jordan estaba en el equipo de anuncios,
y el se comenzó
a preguntar si había una mejor forma.

77
00:07:42,949 --> 00:07:48,320
Jordan es una figura enigmática. 
El es un poco privado, así que no hay 
mucho que sepa de el.

78
00:07:48,320 --> 00:07:54,699
Jordan y yo no eramos el centro de atención.

79
00:07:54,699 --> 00:07:59,111
Especialmente Jordan evitaba ser el 
centro de atención
desde los primeros días.

80
00:07:59,111 --> 00:08:05,979
Jordan era un ingeniero de producto 
por aquel entonces, trabajando en 
anuncios, y los anuncios eran una de las partes

81
00:08:05,979 --> 00:08:12,830
de interfaz de usuario más complicadas 
de todo Facebook. Como equipo, 
se topaban constantemente

82
00:08:12,830 --> 00:08:18,310
con los límmites de lo que se 
podía lograr sin React,
hablando de complejidad.

83
00:08:18,310 --> 00:08:22,560
Y solo la habilidad de los desarrolladores 
para mantener en su mente y entender un poco 
de código que alguien más había hecho

84
00:08:22,560 --> 00:08:27,370
mientras miran el monitor y piensan: 
"ok, entonces este código
hace esto y necesito saber porqué".

85
00:08:27,370 --> 00:08:32,560
Jordan tenía muchas ideas muy 
interesantes acerca de como

86
00:08:32,560 --> 00:08:36,550
podríamos tomar lo que se había 
hecho en Bolt y hacerlo más
funcional y fácil de escalar

87
00:08:36,550 --> 00:08:41,269
junto con la habilidad de las 
personas de entender aplicaciones grandes

88
00:08:41,269 --> 00:08:44,990
Así que teníamos muchas conversaciones, y el
iba y venía con nosotros con varias ideas

89
00:08:44,990 --> 00:08:49,720
acerca de como cambiarlo. Creo que uno de
los nombres originales para React era FBolt,

90
00:08:49,720 --> 00:08:53,450
que significaba Functional Bolt.

91
00:08:53,450 --> 00:08:59,310
Jordan vio que había una oportunidad de 
resolver algunas de las partes más 
complicadas en Bolt

92
00:08:59,310 --> 00:09:06,500
de una forma más sencilla. Así que lo 
que Jordan decidió hacer, o al menos
la historia que me contó

93
00:09:06,500 --> 00:09:15,060
fue: "Oye, no sería más sencillo si cada 
vez que algo cambiara en la app: el estado 
de la API, el usuario escribió algo...

94
00:09:15,060 --> 00:09:19,670
solamente destruyéramos toda la UI y
volvieramos a recrear todo?"

95
00:09:19,670 --> 00:09:25,300
Lo que el resto de los frameworks
hacía entonces se llamaba
"enlace de datos bi-direccional"

96
00:09:25,300 --> 00:09:30,940
y esto no era eso. Era alg así como:
olvídate del enlace de datos

97
00:09:30,940 --> 00:09:35,459
no vamos a hacer eso en lo absoluto.
Cada vez que algo cambie vamos a 
repintar todo

98
00:09:35,459 --> 00:09:38,380
pero hay un gran asterico que dice 
"en realidad no vamos a repintar todo, 
vamos a repintar lo menos posible"

99
00:09:38,380 --> 00:09:43,690
pero conceptualmente no vamos a manejar 
estas relaciones entre vistas y modelos

100
00:09:43,690 --> 00:09:48,589
Honestamente pensé que era una una locura.

101
00:09:48,589 --> 00:09:53,880
Por aquel entonces estaba muy convencido
en la idea de los frameworks en general,

102
00:09:53,880 --> 00:09:58,190
y pensé que algo así no iba a funcionar.
Para algunas personas, parecía magia.
Estaba muy lejos

103
00:09:58,190 --> 00:10:10,560
de la idea que todos tenían acerca
de como funcionaban y como deberían
funcionar las cosas. Tomó mucho para convencerlos.

104
00:10:10,560 --> 00:10:16,340
[Música]

105
00:10:16,340 --> 00:10:39,410
He trabajado en Facebook por
10 años hasta ahora. Y conocí a esta
persona llamada Jordan Walke.

106
00:10:39,410 --> 00:10:43,770
Algunas personas me decían que el
tenía un proyecto interesante acerca de
JavaScript, y que tal vez me interesaría.

107
00:10:43,770 --> 00:10:49,149
Así que tuve una junta con él y una de las cosas
que me preguntó al inicio de la reunión fue

108
00:10:49,149 --> 00:10:57,760
"qué es lo más difícil de hacer en
el Front End hasta ahora?" Y bueno,

109
00:10:57,760 --> 00:11:03,230
yo llevaba 6 meses que me había graduado
de la escuela. Respondí: "no sé".
Y lo que me dijo fue:

110
00:11:03,230 --> 00:11:09,470
"las actualizaciones". Tienes que
encontrar el nodo del DOM que va a cambiar,
luego tienes que cambiar el "listener"

111
00:11:09,470 --> 00:11:16,310
del evento del click y removerlo.
Hacer todo esto es bastante complicado.

112
00:11:16,310 --> 00:11:22,930
Esto también era una masiva fuente de
"bugs" dentro del código de Facebook.

113
00:11:22,930 --> 00:11:28,960
Entonces dije: "ok, tienes razón,
esto es probablemente una de las cosas
más difíciles.".

114
00:11:28,960 --> 00:11:33,310
El contestó: "tengo una solución para esto".
Pensé: este tipo esta loco, esto
jamás va a funcionar.

115
00:11:33,310 --> 00:11:39,100
Nunca va a tener un buen desempeño.
La reunión terminó y por algunas
semanas me olvidé de la idea.

116
00:11:39,100 --> 00:11:45,450
Pero un fin de semana pensé: ok, tal
vez debería probar esto,
tal vez haya algo aquí.

117
00:11:45,450 --> 00:11:53,920
Antes de unirme a Facebook, trabajé
en en una forma de encontrar tus gremios
en "World of Warcraft", y básicamente

118
00:11:53,920 --> 00:12:01,320
necesitábamos buscar entre 20,000 gremios.
Trabajé en muchas cosas de "performance"

119
00:12:01,320 --> 00:12:05,700
para que desplegara resultados lo 
más rápido posible cuando cambiabas
los filtros en tiempo real.

120
00:12:05,700 --> 00:12:12,829
Y pensé: ok, he pasado meses, 
tiempo completo, trabajando en que esto
tuviera un gran desempeño

121
00:12:12,829 --> 00:12:19,240
intentémoslo con React. 
En la práctica, me tomó cerca de
media hora escribirlo,

122
00:12:19,240 --> 00:12:25,130
y en realidad no tenía un buen 
desempeño, pero tenía
un desempeño similar.

123
00:12:25,130 --> 00:12:30,600
Yo estaba impresionado, y hasta 
este día soy el fan más grande
de React en el mundo.

124
00:12:30,600 --> 00:12:35,839
Yo estaba en el equipo de fotos y 
pasaba todo el tiempo de mis horas 
de trabajo intentando usar React

125
00:12:35,839 --> 00:12:40,740
en mis proyectos de mi equipo, 
evangelizando. Sentía que podría 
cambiar al mundo,

126
00:12:40,740 --> 00:12:45,910
lo cual ocurrió.

127
00:12:45,910 --> 00:12:48,490
[Música]

128
00:12:48,490 --> 00:12:55,880
Jordan está logrando progreso en 
su proyecto. Ha conseguido que 
otros se involucren y que

129
00:12:55,880 --> 00:13:03,329
vean el valor que tiene. Pero no 
todos están impresionados. Un manager empezó
a notarlo, pero vió el proyecto

130
00:13:03,329 --> 00:13:09,790
de Jordan como una distracción.
Así que le pidió a Lee Byron 
que se reuniera con Jordan

118
00:11:53,920 --> 00:12:01,320
necesitábamos buscar entre 20,000
gremios. Trabajé en muchas cosas de
"performance"

119
00:12:01,320 --> 00:12:05,700
para que desplegara resultados lo
más rápido posible cuando cambiabas
los filtros en tiempo real.

120
00:12:05,700 --> 00:12:12,829
Y pensé: ok, he pasado meses,
tiempo completo, trabajando en que
esto tuviera un gran desempeño

121
00:12:12,829 --> 00:12:19,240
intentémoslo con React. En la
práctica, me tomó cerca de media
hora escribirlo,

122
00:12:19,240 --> 00:12:25,130
y en realidad no tenía un buen
desempeño, pero tenía un
desempeño similar.

123
00:12:25,130 --> 00:12:30,600
Yo estaba impresionado, y hasta
este día soy el fan más grande
de React en el mundo.

124
00:12:30,600 --> 00:12:35,839
Yo estaba en el equipo de fotos y
pasaba todo el tiempo de mis horas
de trabajo intentando usar React

125
00:12:35,839 --> 00:12:40,740
en mis proyectos de mi equipo,
evangelizando. Sentía que podría
cambiar al mundo,

126
00:12:40,740 --> 00:12:45,910
lo cual ocurrió.

127
00:12:45,910 --> 00:12:48,490
[Música]

128
00:12:48,490 --> 00:12:55,880
Jordan está logrando progreso en
su proyecto. Ha conseguido que
otros se involucren y que

129
00:12:55,880 --> 00:13:03,329
vean el valor que tiene. Pero no
todos están impresionados. Un
manager empezó a notarlo, pero

130
00:13:03,329 --> 00:13:09,790
vió el proyecto de Jordan como
una distracción. Así que le pidió
a Lee Byron que se reuniera con Jordan

131
00:13:09,790 --> 00:13:13,600
y le pusiera un alto para que
enfocara los esfuerzos en Bolt.
Entramos a la sala. Al instante sabía

132
00:13:13,600 --> 00:13:17,300
que esto iba a ser raro
porque llegamos con diferentes
energías.

133
00:13:17,300 --> 00:13:23,950
Yo llegué como: ok Jordan,
quiero entender como va tu proyecto,
pero también quiero

134
00:13:23,950 --> 00:13:28,870
ayudarte a que nos aseguremos
que estás invirtiendo nuestro tiempo
de la forma correcta y que estamos

135
00:13:28,870 --> 00:13:33,100
en las cosas que van a tener
longevidad y van a resolver los
problemas que tenemos. Y Jordan llegó

136
00:13:33,100 --> 00:13:36,860
con "puedo mostarte una demo de lo
que he estado trabajando", algo así
como "esto es muy emocionante,

137
00:13:36,860 --> 00:13:40,740
y hace esto esto y esto otro".
Y eventualmente, al final de la
reunión

138
00:13:40,740 --> 00:13:46,709
tuve que admitir que tenía algo muy
interesante entre manos. Ahora estaba
muy interesado en aprender más de lo

139
00:13:46,709 --> 00:13:51,670
que estaba haciendo. Así que la
presentación de Jordan fue para mí
algo así como:

140
00:13:51,670 --> 00:13:55,810
Solo quiero invertir mi tiempo en esto y
trabajarlo si va a ser algo que
las personas van a usar,

141
00:13:55,810 --> 00:13:59,199
y si ese no es el caso, entonces
no lo hagamos.

142
00:13:59,199 --> 00:14:04,290
Pero opino que todas las formas en
las que hemos desarrollado interfaces
de usuario hasta ahora

143
00:14:04,290 --> 00:14:08,230
han tenido defectos. O son una
biblioteca de JavaScript que no
cubre nuestras necesidades,

144
00:14:08,230 --> 00:14:14,000
o es un modelo probado de hace 30 años
para el desarrollo de aplicaciones
con interfaces de usuario.

145
00:14:14,000 --> 00:14:21,260
Todos ellos sufren del mismo problema
de raíz: el manejo del estado. Y creo
que esto es el camino hacia adelante.

146
00:14:21,260 --> 00:14:27,759
y Lee, si pudieras indagar un
poco más en el código aprender más de
ello y lo probarás, y entonces volvieras

147
00:14:27,759 --> 00:14:32,120
para hablar de esto nuevamente,
tal vez podríamos encontrar una
solución a esto. Y pensé: está bien,

148
00:14:32,120 --> 00:14:38,690
Así que comencé a explorar el código y
era algo difícil de entender,

149
00:14:38,690 --> 00:14:43,339
pero eventualmente pude jugar con el y
construir algunas cosas, y tuve que admitir

150
00:14:43,339 --> 00:14:48,060
que había algo realmente interesante
ahí. Y así fue

151
00:14:48,060 --> 00:14:52,730
como me metí de lleno en el proyecto,
y terminé trabajando en el bastante
tiempo en los siguientes

152
00:14:52,730 --> 00:14:59,209
meses. Lee trajo esta meticulosa
mentalidad de diseño a estas cosas
que ayudaron

153
00:14:59,209 --> 00:15:03,940
bastante en las versiones iniciales de
React en cuestión de estándarizarlo
y convertirlo

154
00:15:03,940 --> 00:15:08,459
de algo así como un bebé feo
que había crecido en Facebook

155
00:15:08,459 --> 00:15:14,029
a algo que cualquier persona
podía entender.

156
00:15:14,029 --> 00:15:21,000
Había algunos problemas que me topé
de inmediato intentando entender
el código para construir algo.

157
00:15:21,000 --> 00:15:26,990
No eran solamente las herramientas y
la cuestión de que el modelo
mental era muy diferente

158
00:15:26,990 --> 00:15:35,220
de lo que estaba acostumbrado como
ingeniero de UI. No solo sintaxis
y los conceptos de programación,

159
00:15:35,220 --> 00:15:39,850
también la terminología era muy diferente.
Mis conclusiones eran: ok, toda la apuesta

160
00:15:39,850 --> 00:15:44,790
gira en torno a que esto es más simple, pero
no puedo evitar sentir que esto es
realmente complicado.

161
00:15:44,790 --> 00:15:51,790
Sobretodo, deseaba poder entender el modelo
pero también esperaba

162
00:15:51,790 --> 00:15:58,800
que esto de alguna forma terminara
resolviendo algunas cosas.
Quería construir un glosario.

163
00:15:58,800 --> 00:16:06,300
Qué son todas estás cosas, los
conceptos y todas las acciones o verbos

164
00:16:06,300 --> 00:16:10,649
que están ocurriendo aquí. Así
que literamente lo listé todo.
Y entonces iba con Jordan,

165
00:16:10,649 --> 00:16:13,610
iba con otras personas trabajando
en el proyecto, y les preguntaba:

166
00:16:13,610 --> 00:16:17,199
Entendí esto bien? Estás
definiciones están correctas?

167
00:16:17,199 --> 00:16:20,380
Y ellos contestaban: sí, o no,
debes verlo de esta otra forma.

168
00:16:20,380 --> 00:16:24,700
Y conversábamos una y otra vez y yo
iba ajustando estas definiciones,
y mientras tanto nos dábamos cuenta

169
00:16:24,700 --> 00:16:30,040
de que varios conceptos eran lo mismo,

170
00:16:30,040 --> 00:16:35,080
mejor vamos a nombrarlos de una
sola forma en lugar de ser dos cosas. Así que
desenmarañar todo esto y prácticamente escribirlo

171
00:16:35,080 --> 00:16:41,100
terminó siendo como reimaginar el ciclo
de vida del componente, algo así

172
00:16:41,100 --> 00:16:46,899
como todo la API pública de React.
Y yo estaba muy feliz todo el entusiasmo

173
00:16:46,899 --> 00:16:50,610
alrededor de eso. Jordan decía:
esto es increíble, esto aclara todas las ideas.

174
00:16:50,610 --> 00:16:56,050
A ese punto, varios compañeros también
comenzaron a ser parte del proyecto,

175
00:16:56,050 --> 00:17:02,060
y pasé poco más del siguiente mes,
poniendo todo en orden

176
00:17:02,060 --> 00:17:08,560
y cambiando considerablemente
la superficie de la API de React
en el proceso.

177
00:17:08,560 --> 00:17:14,400
Creo que fue fue el primer cambio, de
ser esta cosa que existia solamente
en la mente de Jordan

178
00:17:14,400 --> 00:17:18,630
y con la que otras personas jugaban, a
algo del que, de un día a otro,
todo un equipo eramos responsables.

179
00:17:18,630 --> 00:17:23,280
Donde la palabra "equipo" es algo
así como muchos ingenieros de
interfaces de usuario repartidos

180
00:17:23,280 --> 00:17:28,270
por todo Facebook que estabamos metidos
de lleno en esta visión, y del que
ahora todos ahora podíamos usar

181
00:17:28,270 --> 00:17:32,380
la misma terminología cada vez que
alguien tenía una pregunta. Ahora todos
podíamos intentar responder una pregunta

182
00:17:32,380 --> 00:17:41,179
más allá de Jordan. Ese fue el
primer gran cambio.

183
00:17:41,179 --> 00:17:49,410
Uno de los primeros proyectos donde
React fue usado fue para UFI:
Universal Feedback Interface

184
00:17:49,410 --> 00:17:54,250
(Interfaz de Retroalimentación Universal)
que básicamente son los "me gusta", los
comentarios y la opción de compartir

185
00:17:54,250 --> 00:17:59,450
en la parte baja de cada publicación.
Esto fue todavía durante la era web de
Facebook, cuando Facebook en la web era

186
00:17:59,450 --> 00:18:05,690
algo así como el mayor direccionador
de "engagement". El "Newsfeed" (Muro en
Facebook en español) tenía mil millones

187
00:18:05,690 --> 00:18:11,030
de usuarios al día, y estaba perfeccionado
para tener gran desempeño. Es una superficie
altamente interactiva, donde

188
00:18:11,030 --> 00:18:15,090
das click para dar un "me gusta",
escribes para agregar comentarios, y a la
par queremos que los comentarios lleguen

189
00:18:15,090 --> 00:18:18,970
en vivo, de manera que si le estas
poniendo atención mientras un comentario
llega queremos que aparezca justo ahí.

190
00:18:18,970 --> 00:18:24,650
Y había este deseo en el producto para
que esa interfaz se sintiera como si fuera
un chat, y eso sonaban genial para la época.

191
00:18:24,650 --> 00:18:31,540
Así que mientras eso comenzaba a funcionar,
para el segundo punto dijimos: si esto puede
funcionar para este caso único de mensajería,

192
00:18:31,540 --> 00:18:36,150
que tal si pudiera funcionar para un caso
completo de chats. Esto era un área muy
complicada y frágil, propensa a "bugs".

193
00:18:36,150 --> 00:18:41,710
Eso fue cuando muchas de las ideas en React
cuadraron, la sintaxis de JSX fue introducida
y algunas de las ideas acerca de como

194
00:18:41,710 --> 00:18:47,740
Esto era un área muy complicada y
frágil, propensa a "bugs". Eso fue cuando
muchas de las ideas

195
00:18:47,740 --> 00:18:54,780
en React cuadraron, la sintaxis de
JSX fue introducida y algunas de las
ideas acerca de como trabajar con datos

196
00:18:54,780 --> 00:19:00,000
y React ya estaban claros.
Algunos de nuestros ingenieros

197
00:19:00,000 --> 00:19:05,280
junto al equipo de mensajería,
representados por Jing Chen si
recuerdo bien,

198
00:19:05,280 --> 00:19:10,470
se dieron cuenta de que necesitabamos
una forma diferente para pensar en
el estado.

199
00:19:10,470 --> 00:19:17,669
Mi nombre es Jing, y soy software
engineer en la infraestructura del
producto en Facebook.

200
00:19:17,669 --> 00:19:24,070
Flux es una arquitectura diseñada
alrededor del principio de React del
flujo de datos unidireccional.

201
00:19:24,070 --> 00:19:30,250
Junto con Flux, React podía ir más
allá de la capa de la vista para modelar
toda una aplicación entera.

202
00:19:30,250 --> 00:19:34,700
Este cambio de como pensar en el
estado encajó muy bien en la manera
en la que React actualizaba la UI, y

203
00:19:34,700 --> 00:19:39,860
esto terminó siendo el siguiente
capítulo sobre como pensar en React
como algo más que como modelar UI

204
00:19:39,860 --> 00:19:46,909
complicadas, y en lugar de ello,
como modelar apps bastante
complicadas.

205
00:19:46,909 --> 00:19:50,340
Como si esto fuera algo que
expandiera applications. Por
ejemplo: esto se expande a pantalla completa,

206
00:19:50,340 --> 00:19:55,240
expanded the full screen and multiple touch
y soporta pantallas táctiles, y tiene navegación.
Esto nos permitió avanzar al siguiente capítulo.

207
00:19:55,240 --> 00:20:00,419
Recuerdo que le pregunté a Jing: oye,
como va React? Crees que vaya a
funcionar?

208
00:20:00,419 --> 00:20:04,340
Y ella decía: esto va bastante bien.
Estoy segura que lo vamos a lograr.

209
00:20:04,340 --> 00:20:16,950
Fue entonces que me convencí aún más.
when I became more convinced.

210
00:20:16,950 --> 00:20:22,530
[Música]

211
00:20:22,530 --> 00:20:27,530
Instagram se unió a Facebook en 2012. Creo que por
ese entonces ya lo llamábamos "React"

212
00:20:27,530 --> 00:20:32,330
y había algunos ingenieros de Facebook que se unieron a Instagram
para ayudarles a expandir las ofertas del producto.

213
00:20:32,330 --> 00:20:37,860
Instagram solo era una app para iOS y Android

214
00:20:37,860 --> 00:20:49,020
y querían estar presentes también en web.
Pasé 11 años en San Francisco

215
00:20:49,020 --> 00:20:56,600
fue bastante divertido e hice varios amigos,
pero el cambio de ritmo en el campo

216
00:20:56,600 --> 00:21:00,680
es genial. Es muy pacífico y agradable.
Entrée a Facebook recién me gradué

217
00:21:00,680 --> 00:21:05,780
de la escuela. Estudie ciencias de la computación
y obtuve una maestría.

218
00:21:05,780 --> 00:21:12,750
Facebook era, aunque no lo creas, un gran lugar para trabajar
en 2010. Era un gran producto que todos usaban.

219
00:21:12,750 --> 00:21:17,870
Era muy popular en los campus de las escuelas, y
estaba muy emocionado

220
00:21:17,870 --> 00:21:23,550
de trabajar ahí.

221
00:21:23,550 --> 00:21:30,529
Entré a Facebook video. La idea era:
somos la tercer plataforma de video
más grande del mundo,

222
00:21:30,529 --> 00:21:36,480
justo detrás de YouTube y Dailymotion
creo, y había solo un ingeniero
trabajando en ello,

223
00:21:36,480 --> 00:21:39,970
y tu serás el ingeniero número dos.
Eso sonaba genial.

224
00:21:39,970 --> 00:21:42,861
Trabajamos muy de cerca con los equipos
de fotos para Android y iOS,

225
00:21:42,861 --> 00:21:48,659
y estábamos construyendo un competidor
para Instagram que nadie recuerda, pero
se llamaba Faceboom Camera.

226
00:21:48,659 --> 00:21:54,410
Una mañana, el equipo de fotos fue llamado
llegar temprano. Nos dijeron que fueramos
a las oficinas principales a las 8 am.

227
00:21:54,410 --> 00:21:57,789
El vicepresidente de ingeniería nos contó
que habían comprado Instagram, y que
ahora eran nuestros colaboradores.

228
00:21:57,789 --> 00:22:02,980
Estas personas eran nuestros rivales,
sabes?

229
00:22:02,980 --> 00:22:06,730
Los veíamos un poco como nuestros enemigos.
Estoy seguro que también nos veían
como enemigos.

230
00:22:06,730 --> 00:22:10,950
Eran un equipo muy pequeño, y habían
acertado con los fundamentos,

231
00:22:10,950 --> 00:22:15,370
pero todavía faltaban muchas por solucionar,
y no tenían un equipo que se encargara
de encontrar esas soluciones,

232
00:22:15,370 --> 00:22:19,730
y uno de esos casos era entender que
era necesario para que Instagram llegara
a la web.

233
00:22:19,730 --> 00:22:23,140
La experiencia en la web es muy important
para lograr crecimiento

234
00:22:23,140 --> 00:22:28,100
por lo que era una gran prioridad, así que
el diseñador Maykel Loomans y yo comenzamos
a trabajar

235
00:22:28,100 --> 00:22:34,370
todo lo relacionado a web.
Y es entonces cuando React entra a escena

236
00:22:34,370 --> 00:22:40,760
cuando comenzamos a trabajar en este sitio
web. [Música]

237
00:22:40,760 --> 00:22:49,270
Nos dieron la orden de usar render del
lado del cliente, así que fui con el equipo
de infraestructura de producto

238
00:22:49,270 --> 00:22:56,830
en Facebook, que estaba lidereado por Tom Occhino.
El rol de este equipo era apoyar

239
00:22:56,830 --> 00:23:03,830
a cualquier otro equipo que necesitara ayuda, y hacerlo
de forma en que tus métricas clave de éxito

240
00:23:03,830 --> 00:23:08,380
fueran otros equipos diciendo: sí, eso realme
nos ayudó. Ibas con ellos a algo así como una

241
00:23:08,380 --> 00:23:15,060
reunión con el consejo de sabios, y ellos te
daban sus recomendaciones, y les dije:

242
00:23:15,060 --> 00:23:19,900
Oigan, necesitamos hacer render en el
lado del cliente. ¿Cómo lo hacemos?
Y nos dijeron:

243
00:23:19,900 --> 00:23:22,420
No sabemos. Tenemos 3 cosas diferentes
en las que hemos estado trabajando,
deberías probar alguna.

244
00:23:22,420 --> 00:23:33,809
Tenemos algo llamado Bolt.js, otro
llamado JS.HTML, y

245
00:23:33,809 --> 00:23:39,850
esto otro llamado React.
Pete fue y habló con Jordan acerca de usar

246
00:23:39,850 --> 00:23:44,620
React, y me contó acerca de potencialmente
usar Bolt, pero creo que de verdad
le gustaban las ideas

247
00:23:44,620 --> 00:23:50,559
de Jordan acerca programación funcional.
El model conceptual de React era muy
innovador,

248
00:23:50,559 --> 00:23:55,830
y me llamaba la atención.
Mis experiencia era en sistemas
distribuidos.

249
00:23:55,830 --> 00:24:01,610
No era alguien a quien le encantara
el frontend, o que pensara que las cosas
iban bien en el frontend.

250
00:24:01,610 --> 00:24:06,070
Así que el hecho de que React llegara
con un enfoque nuevo y no le importara
en lo absoluto

251
00:24:06,070 --> 00:24:11,070
acerca de las mejores prácticas existentes,
fue lo que me convenció. Así que mientras
yo había considerado

252
00:24:11,070 --> 00:24:16,289
las 3 opcionas, estaba inmerso en la idea
de construir un prototipo hecho en React,

253
00:24:16,289 --> 00:24:22,870
y eso terminó en lo que lanzamos en
Instagram.com, que fue el segundo uso
de React en producción,

254
00:24:22,870 --> 00:24:30,590
y el primer caso de construir una
aplicación completa en React.

255
00:24:30,590 --> 00:24:35,429
Cuando elegí React para Instagram no era
tan conocido dentro de Facebook, y era
algo así

256
00:24:35,429 --> 00:24:40,300
como un loco experimento de ciencias.

257
00:24:40,300 --> 00:24:45,520
No era ni remotamente eso. Pete estaba
experimentando con React,

258
00:24:45,520 --> 00:24:50,909
y para aquel entonces, ya era mucho
mejor que los primeros días, pero aún
necesitaba muchas iteraciones más.

259
00:24:50,909 --> 00:24:55,200
Teníamos que tomar esto que estaba
muy atado a la infraestructura de
Facebook,

260
00:24:55,200 --> 00:25:01,720
que era una aplicación gigante hecha
en PHP, y tenía que hacerlo trabajar
en una aplicación de Django,

261
00:25:01,720 --> 00:25:07,440
que era un sistema totalmente distinto.
Y lo que fue clave no fue hacerlo una vez,

262
00:25:07,440 --> 00:25:12,049
sino hacerlo un proceso repetible y
asegurarnos que el proceso no se rompiera.

263
00:25:12,049 --> 00:25:17,059
Creo que alcanzamos un número muy
interesante de problemas en el camino,
que demostró que React

264
00:25:17,059 --> 00:25:22,130
aún no estaba listo para esta escala,
y mientras tanto, Pete y el equipo con
el que estaba trabajando

265
00:25:22,130 --> 00:25:50,590
construyero varias cosas interesantes.
[Música]

266
00:25:50,590 --> 00:25:56,190
Algunos de estos productos terminando
siendo exitosos. Había un período de
tiempo relativamente corto

267
00:25:56,190 --> 00:26:03,800
para entregar un producto de alta calidad.
Eso demostró que este modelo podría funcionar,

268
00:26:03,800 --> 00:26:10,010
y no solo eso, también que la gente disfrutaba
desarrollar con el. Eso se extendió y
despegó,

269
00:26:10,010 --> 00:26:15,510
y especialmente comenzó a tener más
y más inversión, y se volvió claro

270
00:26:15,510 --> 00:26:22,110
que esto era lo que queríamos usar.
Realmente el equipo de publicidad eran
quienes usaban más Bolt. that was

271
00:26:22,110 --> 00:26:28,230
kind of using Bolt more. It had a
Tenían un nivel más alto de inversión
en el, más personas trabajando

272
00:26:28,230 --> 00:26:35,929
en ese código, que ya estaban
familiarizados, y tenían muchos
componentes, así que era más difícil

273
00:26:35,929 --> 00:26:40,340
de cambiar. El equipo de publicidad,
justo antes de que me cambiara del
equipo de apps móviles, recién habían

274
00:26:40,340 --> 00:26:45,820
reescrito completamente todo el flujo
de creación de publicidad en Bolt.
Creo que les tomó unos 6 meses

275
00:26:45,820 --> 00:26:52,340
reemplazar esta aplicación vieja hecha
en PHP con lo que se consideraba
entonces una aplicación moderna

276
00:26:52,340 --> 00:26:58,679
en JavaScript. Pero al mismo tiempo,
React ya estaba lanzado en la aplicación
de Facebook, y tenía un equipo

277
00:26:58,679 --> 00:27:03,000
que se estaba formando alrededor de el.
Así que ahora teníamos dos frameworks
viables que vivían en Facebook,

278
00:27:03,000 --> 00:27:09,360
ambos resolviendo problemas reales.
No deberíamos tener ambos, especialmente
cuando los dos eran muy similares.

279
00:27:09,360 --> 00:27:12,919
Suficientemente similares como para
confundir a la gente. Si mirabas el
código, Like if you looked at the code,

280
00:27:12,919 --> 00:27:17,029
their code parecían prácticamente
idénticos, pero funcionaban totalmente
diferente. Sería una pesadilla

281
00:27:17,029 --> 00:27:24,320
si tuvieras que trabajar en ambos.
Así que tuvimos que decidir cual usar.

282
00:27:24,320 --> 00:27:26,890
[Música]

283
00:27:26,890 --> 00:27:31,580
Mucho de esto terminó siendo una
conversación entre Jordan y yo.

284
00:27:31,580 --> 00:27:36,660
Evalúamos ambas opciones. Muchas
cosas relacionadas a desempeño, y
tratando de entender todos los casos.

285
00:27:36,660 --> 00:27:42,030
Del lado a favor de React, obviamente
están todas las cosas que conocemos
ahora:

286
00:27:42,030 --> 00:27:46,890
es capaz de manejar muchísima
complejidad. Incluso cuando creamos
el flujo de creación de publicidad

287
00:27:46,890 --> 00:27:51,760
en Bolt, llegamos a un punto que no
podíamos hacer en Bolt sin escribir
código spaghetti.

288
00:27:51,760 --> 00:27:56,940
Esto se podía lograr en React.
Entonces supimos que en el futuro,
incluso si solo era 10% de la

289
00:27:56,940 --> 00:28:01,230
experiencia que estábamos construyendo,
volveríamos a toparnos con este
problema nuevamente. Tal vez solo

290
00:28:01,230 --> 00:28:05,169
sea 10% inmantenible, pero conforme
escalas esto en compañía que está
creciendo rápidamente, esto se

291
00:28:05,169 --> 00:28:10,140
convierte en un desastre. Los contras
eran que React, en muchos casos, aún
no estaba probado totalmente aún.

292
00:28:10,140 --> 00:28:13,860
Habían muchas cosas que simplemente
no funcionaban en React. No manejaba
formularios,

293
00:28:13,860 --> 00:28:17,970
no habían hecho una caja de texto,
y había muchas dificultades para
manejar el estado en controles

294
00:28:17,970 --> 00:28:22,610
de un formulario, como los botones
de radio, y otras cosas que se
complicaban. so on that it messed up.

295
00:28:22,610 --> 00:28:27,679
Just performance Problemas de
desempeño donde intentaba repintar
largos bloques para que no tuvieran

296
00:28:27,679 --> 00:28:32,830
que hacer todas esas mejoras que
actualmente existen. Del lado de la
organización,

297
00:28:32,830 --> 00:28:39,590
otro contra era que recién habíamos
reescrito el proyecto en Bolt Facebook
había salido a la bolsa recientemente,

298
00:28:39,590 --> 00:28:45,750
y las acciones se habían reducido a la
mitad desde entonces. Facebook no
estaba generado suficiente dinero

299
00:28:45,750 --> 00:28:49,870
y el equipo de publicidad es el equipo
donde el dinero empieza. Si parábamos
por 4 meses

300
00:28:49,870 --> 00:28:55,679
tendríamos que decirle a todos: lo
sentimos, no hay dinero, así que había
muchas conversaciones

301
00:28:55,679 --> 00:28:59,150
acerca de todo esto. Se volvió
muy difícil. Inicialmente,

302
00:28:59,150 --> 00:29:03,620
muchos de los ingenieros que
habían usado Bolt, incluyendo
Shane, se dieron cuenta de ello.

303
00:29:03,620 --> 00:29:07,760
Hemos invertido mucho en esto,
y ha funcionado para todo,
ciertamente podemos hacerlo trabajar

304
00:29:07,760 --> 00:29:12,100
para los problemas que vengan.
Así que hubo oposición de
usar React

305
00:29:12,100 --> 00:29:16,299
sabiendo que esto era nuevo y
que ni siquiera estaba probado.

306
00:29:16,299 --> 00:29:20,750
Este es nuestro negocio, y es
muy importante. Cuando Jordan

307
00:29:20,750 --> 00:29:25,890
y yo pláticamos con ellos,
había algunas sentimientos
encontrados,

308
00:29:25,890 --> 00:29:29,640
y creo que venían de cada uno
de nosotros que no
teníamos el contexto del otro.

309
00:29:29,640 --> 00:29:34,510
Hubo muchas conversaciones.
Al final, Mike Schroepfer

310
00:29:34,510 --> 00:29:41,360
intervino y dijo: mira, toma la
decisión técnica correcta,
y haz la decisión correcta a largo plazo

311
00:29:41,360 --> 00:29:47,159
y cualquiera que sea esa
decisión, yo te respaldo.
Si necesitas parar el desarrollo de producto

312
00:29:47,159 --> 00:29:53,070
por 4 meses, puedes hacerlo.
Conseguimos algunas salas
de juntas y comenzamos a aclarar todas estas dudas

313
00:29:53,070 --> 00:29:57,320
acerca de que era un problema
técnico, que era un problema
de la organización,

314
00:29:57,320 --> 00:30:03,390
que era un problema financiero,
y comenzamos a entender,

315
00:30:03,390 --> 00:30:09,220
junto a mucho, mucho café, que
React era el camino
a tomar. Pero no era una decisión sencilla después de todo.

316
00:30:09,220 --> 00:30:14,799
El fue una los proponentes más
grandes

317
00:30:14,799 --> 00:30:21,330
para que el equipo de publicidad
migrara todo a React, y
eso no es algo que ocurra normalmente en la mayoría de las empresas.

318
00:30:21,330 --> 00:30:27,289
En casi todas las compañías, si
este proyecto es tu bebé,
tratas de desestimar a los otros

319
00:30:27,289 --> 00:30:31,860
porque sabes bien que te pones a la
defensiva de tus proyectos. Ese no
fue el caso en Facebook en ese entonces,

320
00:30:31,860 --> 00:30:39,090
y creo que Shane ejemplificó
exactamente eso.

321
00:30:39,090 --> 00:30:45,070
Había mucho trabajo por hacer en el
flujo de creación de publicidad.
Las tensiones se acumulaban y el equipo
estaba atascado.

322
00:30:45,070 --> 00:30:52,179
Y para desbloquearlos, está Jing Chen.
Teníamos este problema de gestión
algo complicado,

323
00:30:52,179 --> 00:30:55,659
todos entraban en desacuerdos en
ambos bandos:

324
00:30:55,659 --> 00:30:59,960
de un lado tenías al equipo de
publicidad, y
del otro al equipo de infraestructura.

325
00:30:59,960 --> 00:31:04,130
Envíamos a Jing a que hablara con los
ingenieros,
y salieron motivados,

326
00:31:04,130 --> 00:31:08,539
todos llegaron a acuerdos, con un plan
para seguir adelante.
Ella es muy buena

327
00:31:08,539 --> 00:31:14,430
construyendo consensos, porque es capaz
de llegar
hasta los detalles técnicos más importantes,

328
00:31:14,430 --> 00:31:18,520
los identifica rápidamente, y logra que
todos hablen
del mismo punto. Obviamente

329
00:31:18,520 --> 00:31:23,330
ella ayudó a ambos equipos a construir el
producto, pero se
aseguró que cada vez que encontraban un
bug en

330
00:31:23,330 --> 00:31:28,380
React, o había algo que todavía no
soportábamos,
simplemente iba al framework y lo arreglaba.

331
00:31:28,380 --> 00:31:32,269
O iba con el equipo de React y les
decía:
necesitamos dos o tres ingenieros trabajando

332
00:31:32,269 --> 00:31:36,340
en esto por un mes para desbloquear al
equipo de publicidad.

333
00:31:36,340 --> 00:31:40,580
El administrador de publicidad era tan
complicado
que terminó siendo una gran fuente

334
00:31:40,580 --> 00:31:48,020
para lograr mejoras en el desempeño de
React, y también
para encontrar puntos donde no escalaba
bien.

335
00:31:48,020 --> 00:31:53,039
Fue bastante acerca de usar estas piezas
que teníamos

336
00:31:53,039 --> 00:31:56,110
y que conforme las ensamblaba en lo
que parecía una aplicación compleja,

337
00:31:56,110 --> 00:31:59,410
emergían nuevos problemas que teníamos
que solucionar. Y definitivamente

338
00:31:59,410 --> 00:32:04,500
había mucho de eso. Este fue uno de los
períodos más divertidos e intensos de mi carrera.

339
00:32:04,500 --> 00:32:08,289
Ibamos a conocer al equipo y teníamos
que ayudarles a crear un feature

340
00:32:08,289 --> 00:32:14,380
y primero lo programaríamos nosotros mismos
en React para asegurarnos que ellos no

341
00:32:14,380 --> 00:32:18,740
llegaran a un caso difícil. O algo así
como encontrar todos los casos difíciles

342
00:32:18,740 --> 00:32:24,100
que pudieran enfrentar y descubrir
soluciones para eso. Así que fue muy emocionante

343
00:32:24,100 --> 00:32:28,279
estábamos trabajando en dos cosas al
mismo tiempo. Una era entregar esto,

344
00:32:28,279 --> 00:32:33,110
que era un proyecto complicado y muy
importante para Facebook: el administrador

345
00:32:33,110 --> 00:32:40,330
de publicidad. Y lo otro era refinar este
framework en el cual todos confíabamos,

346
00:32:40,330 --> 00:32:44,460
que era React. Por aquel entonces tuvimos
que rehacer el flujo de creación de publicidad,

347
00:32:44,460 --> 00:32:49,880
que creo que nos tomo 4 meses. Habíamos
probado básicamente todo: el soporte a

348
00:32:49,880 --> 00:32:55,950
navegadores, todos los campos del
formulario y problemas de desempeño

349
00:32:55,950 --> 00:33:01,710
habían sido resueltos, así que estábamos
en un punto en que se sentía que esto

350
00:33:01,710 --> 00:33:10,190
estaba listo para ser liberado como código
abierto, porque sabes? Lo usamos en múltiples

351
00:33:10,190 --> 00:33:19,610
tipos de contextos, y sabíamos que iba
a ser muy útil para el público. [Música]

352
00:33:19,610 --> 00:33:29,130
Qué dijiste, Evan? No hay, lo siento.
Para mí, publicar el código de React

353
00:33:29,130 --> 00:33:35,370
nunca estuvo en duda. Esa era la meta
desde el principio. Tom tenía esta idea

354
00:33:35,370 --> 00:33:40,580
creo que "furioso" es la mejor palabra para
describirlo. El estaba furioso de que Facebook

355
00:33:40,580 --> 00:33:46,279
estuviera contratando a todas estás estrellas del mundo
de JavaScript. Ellos llegaban a Facebook y

356
00:33:46,279 --> 00:33:50,360
sabías, porque estaban en contra de escribir JavaScript
para el lado del cliente, y porque era un

357
00:33:50,360 --> 00:33:54,900
ambiente difícil de maniobrar, que ellos elegirían
el desarrollo móvil porque había muchos desarrollos

358
00:33:54,900 --> 00:33:58,970
interesantes ocurriendo del lado del cliente.
Y Tom estaba determinado a cambiar esto.

359
00:33:58,970 --> 00:34:05,389
Recuerdo haber ido a esta conferencia y yo estaba
platicando con alguien y le dije que trabajaba en

360
00:34:05,389 --> 00:34:09,169
Facebook usando JavaScript, y el respondió: pero
porque harías eso? Odio lo que Facebook le está

361
00:34:09,169 --> 00:34:13,040
haciendo a la industria de JavaScript. Han contratado
a todas estas personas de estos grandes proyectos,

362
00:34:13,040 --> 00:34:17,050
y ahora no tenemos idea de lo que están trabajando.
No han dado nada de vuelta. Creo que cuando

363
00:34:17,050 --> 00:34:23,159
React llegó, yo recién había comenzado when React
came along I started very early a hablar de que,

364
00:34:23,159 --> 00:34:28,770
si esto realmente nos funciona, teníamos que encontrar
un camino para publicarlo como código abierto.

365
00:34:28,770 --> 00:34:33,859
Y estaba comunicando esto a la administración desde
el inicio, para que cuando llegara el 
momento de hacerlo

366
00:34:33,859 --> 00:34:45,020
código abierto, hubieran algunas juntas, 
fuera controversial, pero ya tuvieramos 
todo el apoyo que necesitáramos.

367
00:34:45,020 --> 00:34:52,220
El proceso de acerlo código abierto fue interesante.
Primero hay un problema técnico por resolver.

368
00:34:52,220 --> 00:34:55,609
Tienes que descubrir como extraerlo de tu 
infraestructura y hacerlo funcionar 
como código abierto,

369
00:34:55,609 --> 00:35:01,180
que fue toda la tarea que hicimos para Instagram.
Tuvimos esta iniciativa de que no ibamos a impactar

370
00:35:01,180 --> 00:35:05,849
la productividad de los desarrolladores en lo absoluto,

371
00:35:05,849 --> 00:35:10,660
esto va a recaer totalmente en el equipo de código
abierto, que eran solamente un montón de personas
que querían publicarlo,

372
00:35:10,660 --> 00:35:17,120
querían que ocurriera. Y para realmente hacerlo
código abierto, teníamos que escribir mucha
documentación.

373
00:35:17,120 --> 00:35:21,710
Pasamos mucho tiempo con la documentación para
explicar: esto es React, esto son los conceptos,

374
00:35:21,710 --> 00:35:27,170
y tratamos de ponernos en los zapatos de alguien
que quería crear una app.

375
00:35:27,170 --> 00:35:33,220
Como das la documentación en una forma en que
puedas ayudarlos a lograrlo.

376
00:35:33,220 --> 00:35:37,630
Paul O'Shannessy hizo mucho de esto porque tenía
la experiencia de lo que el ecosistema necesitaba

377
00:35:37,630 --> 00:35:46,240
en aquel entonces hacerlo funcionar.
Paul O'Shannessy fue una gran fuerza para

378
00:35:46,240 --> 00:35:51,770
lograrlo publicar como código abierto, al igual
que lo fue James Pearce, quien era el líder del la
división de código libre en Facebook.

379
00:35:51,770 --> 00:35:57,720
James se había unido a la compañía y realmente
quería cambiar la imagen de Facebook en el mundo
del código abierto.

380
00:35:57,720 --> 00:36:02,080
Recientemente habíamos liberado muchas cosas,
pero los abandonamos. Podíamos decir: somos una
empresa que apoya el código abierto

381
00:36:02,080 --> 00:36:06,160
aquí está nuestro gran framework, y entonces nunca
darle mantenimiento. James y Paul

382
00:36:06,160 --> 00:36:09,970
en lo particular fueron muy específicos en
mencionar que si ibamos a publicar React

383
00:36:09,970 --> 00:36:15,990
como código libre, teníamos que hacerlo bien.
Internamente había mucha emoción porque ya

384
00:36:15,990 --> 00:36:20,520
habíamos usado este proyecto por algo de tiempo
y nos estaba funcionando, y nos emocionaba eso.

385
00:36:20,520 --> 00:36:27,450
Elegimos la JSConf US, que era algo así como los
Oscars de JavaScript

386
00:36:27,450 --> 00:36:31,750
tal vez es una comparación justa?
Todas las celebridades estaban aquí

387
00:36:31,750 --> 00:36:36,340
y todos ponían atención y lo miraban en vivo 
por YouTube. Tom y Jordan crearon 
una presentación.

388
00:36:36,340 --> 00:36:40,490
Tom es un gran orador,
y Jordan es un ingeniero brillante

389
00:36:40,490 --> 00:36:46,359
y era algo así como ver a Lennon y McCartney
No había nada en esto que pudiera

390
00:36:46,359 --> 00:36:50,579
fallar.

391
00:36:50,579 --> 00:37:00,619
[Música] Fue en Florida, eran las 9:00 am.
Estábamos en Melo Park y nos despertamos temprano,

392
00:37:00,619 --> 00:37:05,050
y tomamos el primer bus a la oficina.
Estaba totalmente vacío, y estábamos listos

393
00:37:05,050 --> 00:37:09,241
para presionar el botón para exponer el repositorio
como código libre. Jordan y yo estábamos emocionados

394
00:37:09,241 --> 00:37:13,140
cuando subimos al escenario. Yo iba a hablar un poco
de como hacíamos desarrollabamos con JavaScript

395
00:37:13,140 --> 00:37:17,560
en Facebook. Era poco convencional. Hice un 
poco de esto, el hizo un poco de aquello.

396
00:37:17,560 --> 00:37:23,750
Junto con React estamos lanzando una sintaxis de XML
que llamamos JSX.

397
00:37:23,750 --> 00:37:29,301
Mostramos algo de código y ese código se veía raro.
code looked different, it looked weird. Here

398
00:37:29,301 --> 00:37:36,570
Aquí tenemos React y JSX.
Y las personas estaban escépticas.

399
00:37:36,570 --> 00:37:43,329
Todos lo odiaron. Todos pensaron
que era horrible.

400
00:37:43,329 --> 00:37:47,770
[Música]

401
00:37:47,770 --> 00:37:53,080
Internamente estabamos esperando
una mejor recepción. O al menos
un "oh, eso suena interesante"

402
00:37:53,080 --> 00:37:57,500
Pensamos que habría algunos nerds
de algún lenguaje de programación
que pensarían

403
00:37:57,500 --> 00:38:01,020
"oh, podría hacer programación
funcional en la UI, al menos eso
es interesante".

404
00:38:01,020 --> 00:38:05,260
Fue una lección de humildad, fue
una decepción para nosotros porque
trabajamos varias noches

405
00:38:05,260 --> 00:38:09,369
y fines de semana para tener esto
listo para ser open source, y
entonces cuando lo lanzamos,

406
00:38:09,369 --> 00:38:13,900
todos lo odiaron. El detalle en
donde todos se enfocaron fue que
las personas realmente odiaron JSX.

407
00:38:13,900 --> 00:38:24,680
No he visto este video hace tiempo.

408
00:38:24,680 --> 00:38:30,720
Estos divs no son exactamente a
lo que estas acostumbrado. No son
nodos del DOM.

409
00:38:30,720 --> 00:38:35,620
Son especialmente reactions, y
te diré porque eso es importante.
No recuerdo haber pensado en

410
00:38:35,620 --> 00:38:43,240
que lo odiarían. No recuerdo en lo
en lo absoluto haber pensado que
tuitearían tantas cosas acerca

411
00:38:43,240 --> 00:38:46,650
de eso. Esta es la diapositiva.
Aún no habíamos hablado de los
problemas que intentábamos solucionar.

412
00:38:46,650 --> 00:38:50,630
Tampoco habíamos hablado de porque
esto funcionaba para nosotros, o
cuales eran los principios de diseño.

413
00:38:50,630 --> 00:38:56,849
Estamos como boom, aquí hay algo
de XML con JavaScript y la gente
dice hey, ¿qué esta pasando?

414
00:38:56,849 --> 00:39:03,000
Pobre de Jordan. Lo que no sabiamos
era cuanta tanta diferencia habia
entre el resto del mundo de la

415
00:39:03,000 --> 00:39:07,560
comunidad de Javascript y donde
Facebook se encontraba. No los culpo.
No creo que cualquiera que tuiteó

416
00:39:07,560 --> 00:39:13,060
Facebook está loco estaba loco en
si. Creo que tenian la razon,
estabamos un poco locos.

417
00:39:13,060 --> 00:39:20,069
estaba loco en si. Creo que tenian la
razon, estabamos un poco locos.

418
00:39:20,069 --> 00:39:25,589
Hubo un momento donde personalmente
senti que mi meta con el mundo de open

419
00:39:25,589 --> 00:39:30,740
source era cerrar la brecha con la
comunidad, pero puede que nos haya

420
00:39:30,740 --> 00:39:35,430
hecho retroceder un paso. Puede que haya
demostrado que en realidad tenemos ni

421
00:39:35,430 --> 00:39:39,300
idea de lo que estamos haciendo porque en
realidad lo que estabamos haciendo es

422
00:39:39,300 --> 00:39:47,230
diferente a lo que el resto de la comunindad
estaba haciendo. E internamente habia un

423
00:39:47,230 --> 00:39:51,950
sentimiendo de 'metimos la pata.' Tomamos
la decision equivocada. Creo que la

424
00:39:51,950 --> 00:39:57,940
metrica de exito hubiera sido 'wow el
equipo de ingeneria de Facebook esta

425
00:39:57,940 --> 00:40:02,480
haciendo cosas cool' en vez de de 'el equipo
de ingenieria de Facebook tiene ni idea

426
00:40:02,480 --> 00:40:06,650
de lo que hacen.' Creo que en esa sede de
JSConf fue la ultima aparicion de Jordan

427
00:40:06,650 --> 00:40:12,589
dentro de mucho años. Tambien creo que para
Tom Occhino fue de la ultima veces que fue

428
00:40:12,589 --> 00:40:16,319
por mucho tiempo. Con el tiempo se volvio un
festival de burla por ninguna razon.

429
00:40:16,319 --> 00:40:21,160
Y particularmente por algo que era tan
innovador y útil, simplemente

430
00:40:21,160 --> 00:40:24,960
fantástico para la productividad de los
desarrolladores, y literalmente un regalo

431
00:40:24,960 --> 00:40:30,130
para todos. Era un 'miren puede trabajar
rapido de forma gratuita.' Pero el que la

432
00:40:30,130 --> 00:40:33,600
gente malinterprete y diga todas estas
cosas malas al respecto, esas fueron

433
00:40:33,600 --> 00:40:36,930
simples reacciones impulsivas dichas sin
pensar. Para Tom y Jordan estos debieron

434
00:40:36,930 --> 00:40:41,690
a ver sido momentos terribles, ambos ya
habian pasado por momentos similares

435
00:40:41,690 --> 00:40:49,230
hechas dentro de React que eran evidentes
dentro de Facebook, pero parecian una

436
00:40:49,230 --> 00:40:53,550
locura cuando estan se presentan enfrente
de otra audiencia. En la comunidad hay

437
00:40:53,550 --> 00:41:01,700
esta nocion de separacion de intereses. En
aquel entonces, no podias poner tus archivos

438
00:41:01,700 --> 00:41:06,550
de HTML, CSS, y Javascript dentro de un
solo archivo. Lo correcto era extraerlos y

439
00:41:06,550 --> 00:41:12,620
separarlos, eso se consideraba como un tipo
de buena practica en su momento. Lo que es

440
00:41:12,620 --> 00:41:16,810
interesante acera de esta metodologia de
separarcion de intereses en React es que tu

441
00:41:16,810 --> 00:41:22,060
separacion de intereses se traducia a
componentes. En vez de decir, 'aqui estan

442
00:41:22,060 --> 00:41:26,910
mis vistas y aca tengo mis modelos,' ahora
esto cambiaba a decir, 'aqui tengo mi

443
00:41:26,910 --> 00:41:31,040
newsfeed, por aca hay que poner el componente
de fotos, y aca colocamos el panel de

444
00:41:31,040 --> 00:41:35,750
admin,' Era una forma diferente de separar
intereses y esto recibio mucha critica con

445
00:41:35,750 --> 00:41:40,330
comentarios diciendo, 'esos de Facebook son
unos payasos, no saben escribir software.'

446
00:41:40,330 --> 00:41:48,960
Nosotros pensamos que React probablemente no
tenia futuo afuera de Facebook. [Music]

447
00:41:48,960 --> 00:41:59,340
Toda esperanza parecia perdida para nuestros
amigos en Facebook. Afortunadamente, alguien

448
00:41:59,340 --> 00:42:11,750
afuera de Facebook estaba dispuesto a darle
una oportunidad. [Music]

449
00:42:11,750 --> 00:42:18,069
Empecé a usar React en 2013. No era popular
en la comunidad, apenas se habia anunciado

450
00:42:18,069 --> 00:42:27,829
en JSConf. Vi el anuncio a travez de Hacker
News e imediatamente pense que seria de buen

451
00:42:27,829 --> 00:42:32,800
uso para un proyecto en el que trabajaba
entonces. Construia un editor interactivo

452
00:42:32,800 --> 00:42:38,720
para preguntas de matemáticas en Khan
Academy, el cual tenía una arquitectura

453
00:42:38,720 --> 00:42:45,220
una arquitectura similar basada en componentes.
Intente usar Backbone.js y descrubri

454
00:42:45,220 --> 00:42:49,800
que el manejo de estado se esta volviendo
dificil, y cuando vi React me dije

455
00:42:49,800 --> 00:42:56,560
a mi mismo, esto parece resolver todos los
problemas que tengo justo en este

456
00:42:56,560 --> 00:42:57,560
momento.

457
00:42:57,560 --> 00:43:05,380
Estoy viendo un post del 2013 que al parecer
escribi una semana despues que descubri

458
00:43:05,380 --> 00:43:13,339
React, y fue al comienzo de cuando apenas
inicie a usarlo y alguien me pregunto, "¿Qué

459
00:43:13,339 --> 00:43:21,170
te parece la libreria React de Facebook?" Solo
llevaba unos dias usandola asi que decidi

460
00:43:21,170 --> 00:43:29,030
escribir una respuesta basada en mi
experiencia. La respuesta es bastante

461
00:43:29,030 --> 00:43:37,810
positiva. Creo que me estaba divirtiendo
bastante y resolvia mis problemas

462
00:43:37,810 --> 00:43:43,240
muy bien. Una frase de mi respuesta dice,
"Acabo de reescribir un proyecto de 2000 lineas

463
00:43:43,240 --> 00:43:47,609
lineas de codigo a React, y tambien comenze a
abrir 'pull requests' a React. Todo lo que

464
00:43:47,609 --> 00:43:53,040
he visto hasta ahorita parece muy bien
pensado. Y es un orgullo ser el primer

465
00:43:53,040 --> 00:43:59,750
usuario fuera de Facebook." Despues hable un
poco mas sobre algunos detalles tecnicos y

466
00:43:59,750 --> 00:44:05,200
de como me ha ayudado. Es cool mirar atras,
es asi como una capsula de tiempo. Ver

467
00:44:05,200 --> 00:44:14,530
como dentro de la misma semana que React
sale a la luz, ya estaba emocionda de usarla.

468
00:44:14,530 --> 00:44:20,079
Creo que se esa emocion a durado por mucho
tiempo. Converti todo el repositorio de

469
00:44:20,079 --> 00:44:24,920
codigo en el que trabajaba a React. Creo que
termine escribiendo menos codigo y se volvio

470
00:44:24,920 --> 00:44:30,460
mas facil de leer y mucho mas eficiente.
Muy pronto me encontre diciendo, "okay,

471
00:44:30,460 --> 00:44:38,170
usando React," y termine desplegando mi código
a producción, el codigo que reescribi, y

472
00:44:38,170 --> 00:44:49,320
eso creo que fue mi primer código
corriendo en producción usando React
fuera de Facebook.

473
00:44:49,320 --> 00:44:53,579
Era un proyecto nuevo que apenas
habia salido a la comunida de open
source, y no tantos lo habian usado,

474
00:44:53,579 --> 00:44:58,619
y tenia mucho por mejorar. Parecia que
nadie habia intentado usarlo de algun
modo en particular. O parecia como si

475
00:44:58,619 --> 00:45:03,180
nada estuviera bien docuemntado y el
momento que usaba algo fuera de su
intencion original, comenzaba a notar

476
00:45:03,180 --> 00:45:07,990
estos defectos o problemas donde no
funcionaban como me lo imaginaba.
Para algunos de estos problemas

477
00:45:07,990 --> 00:45:13,980
comenze a leer el codigo de fuente e
intente averiguar: ¿por qué esto no
funciona? ¿hay algo que pueda hacer

478
00:45:13,980 --> 00:45:19,180
diferente en mi codigo para que
funcione? Asi fue como me uni al canal
IRC de chat donde varios miembros

479
00:45:19,180 --> 00:45:26,440
de equipos 'core' se estaban reuniendo
despues de a verlo lanzado al open
source. Me ayudaron a no solo como

480
00:45:26,440 --> 00:45:32,660
usar React pero tambien como contribuir
al proyecto al como iniciaba abriendo
issues y ayudaba personas que estaban

481
00:45:32,660 --> 00:45:40,381
en el chat room, y con el transcurso
del tiempo comenze a contribuir al
codigo de React poco a poco.

482
00:45:40,381 --> 00:45:45,870
Su perspectiva de Khan Academy, y como
alguien que no venia de Facebook,
trajo muchas ideas!

483
00:45:45,870 --> 00:45:52,650
Sophie comenzo como un usuario externo
de React quien lentamente fue avanzando
a contribuir a React core de forma

484
00:45:52,650 --> 00:45:59,559
externa, y asi convirtiendose en la
mayor contribuidora de React core.
Nuestro equipo comenzo a invitar a

485
00:45:59,559 --> 00:46:05,280
Sophie a las juntas semanales. De ahy
Sophie hizo un arreglo con su jefe para
que la dejaran venir los Viernes por

486
00:46:05,280 --> 00:46:11,069
la tarde a las oficinas de Facebook.
Y determinados a no hacer lo que
hicimos antes donde contratamos

487
00:46:11,069 --> 00:46:17,119
personas de la comunidad open source
y jamás contribuyen de vuelta

488
00:46:17,119 --> 00:46:22,410
De ahí Sophie hizo un arreglo con su jefe para
que la dejaran venir los Viernes por la tarde

489
00:46:22,410 --> 00:46:28,700
a las oficinas de Facebook. Y determinados a
no hacer lo que hicimos antes

490
00:46:28,700 --> 00:46:34,390
donde contratamos personas de la comunidad
open source y jamas contribuyen  de vuelta,

491
00:46:34,390 --> 00:46:43,119
ella se volvio la primera persona reclutada
proveninente de la comunidad open source.

492
00:46:43,119 --> 00:46:48,940
La participación de Sophie levantó el ánimo de
el equipo de React. Tambien los hizo pensar

493
00:46:48,940 --> 00:46:56,930
que tal vez, solo tal vez, el resto del
ecosistema habia mal entendido a React.

494
00:46:56,930 --> 00:47:03,030
Tenian algo especial, lo sabian. Lo que no
sabian era como convencer a los demas. Creo

495
00:47:03,030 --> 00:47:10,869
que hay gente como Jordan, Tom, Chadeau,
y yo que disfrutan el desafio

496
00:47:10,869 --> 00:47:17,390
y su naturaleza competitiva. Sabiamos que esta
era buena tecnologia y yo estaba

497
00:47:17,390 --> 00:47:25,450
seguro de ello. Lo comenze a ver como un
problema en el mensaje, habia que averiguar

498
00:47:25,450 --> 00:47:29,400
como transmitir el mensaje porque nadie lo
entiende y como hacerlo llegar a ellos.

499
00:47:29,400 --> 00:47:35,790
El open source se puede sentir como un logro
pero tambien como el final. Pero en realidad

500
00:47:35,790 --> 00:47:39,760
es solo el comienzo. Cuando llegas al open
source tienes cero usuarios,

501
00:47:39,760 --> 00:47:45,320
ahora hay que comenzar a crear comunidad,
arreglar todos los problemas, asegurarnos que

502
00:47:45,320 --> 00:47:50,980
esto resuelve los problemas de la
gente. Y aqui es donde el
viaje por fin comienza.

503
00:47:50,980 --> 00:47:58,190
Nos pusimos el cinturon. Y nos
dimos cuenta que cuando tienes
un proyecto como este

504
00:47:58,190 --> 00:48:03,200
tienes que convencera a la gente
uno por uno. Asi, que nos
enfocamos en esto.

505
00:48:03,200 --> 00:48:10,859
Aprendimos mucho de esto.
Descubrimos que las ideas en
React son buenas, pero el

506
00:48:10,859 --> 00:48:14,790
problema no son las ideas
cuando adoptas un framework.
El reto tiende a ser

507
00:48:14,790 --> 00:48:20,280
la documentación y los mensajes
de error. Lo que necesitan
mas que nada al comienzo

508
00:48:20,280 --> 00:48:26,030
es encontar una forma de adoptarlo
poco a poco. El equipo
comenzo a trabajar en esto.

509
00:48:26,030 --> 00:48:32,859
Se enfocaron en difundir React
un concepto a la vez, una
persona a la vez.

510
00:48:32,859 --> 00:48:40,850
Luego una oportunidad surgio:
una conferencia. Despues,
gracias a dios, ese mismo

511
00:48:40,850 --> 00:48:46,020
año, Pete dio una charla en
JSConf EU. Tenia mi escritorio
a lado del equipo de

512
00:48:46,020 --> 00:48:53,780
infraestructura de producto.
Estaba sentado a lado de Tomo
y me dice, 'patrocinaremos

513
00:48:53,780 --> 00:48:57,970
JSConf EU y tenemos que dar el
discurso de apertura pero no
quiero ser yo quien lo de.'

514
00:48:57,970 --> 00:49:01,470
Creo que no queria pasar por el
proceso. No queria lidiar con
bucheos o gente gritando

515
00:49:01,470 --> 00:49:06,359
cuando sales de la plataforma.
o cuando vas a platicar con la
gente en los happy hours. No

516
00:49:06,359 --> 00:49:11,109
es lo mas placentero del mundo.
Y despues lo vi y le dije, yo
lo hago! Yo tomo el viaje

517
00:49:11,109 --> 00:49:16,970
gratis a Berlin y doy la charla
en la conferencia. 'Hola me
llamo Pete, y les hablare

518
00:49:16,970 --> 00:49:23,630
sobre una libreria que permite
crear interfaces de usuario que
llamamos React. La lanzamos

519
00:49:23,630 --> 00:49:28,880
en JSConf EU hace unos meses. Y la respuesta
fue algo sarcastica en Twitter, un poco

520
00:49:28,880 --> 00:49:34,930
burlona por su mayoria. No estabamos
comunicando bien lo que intentabamos hacer.

521
00:49:34,930 --> 00:49:39,980
Asi que hoy me gustatria contarles de las
decisiones del diseño en React, sus diferencias

522
00:49:39,980 --> 00:49:44,460
en comparacion con otros frameworks, y el tipo
de implementación que permitio ejecutar estas

523
00:49:44,460 --> 00:49:50,190
decisiones, y a la vez hacerlo rapido.' En la
platica queria mostrar que hacia React diferente.

524
00:49:50,190 --> 00:49:52,839
No estoy intentando decir que es bueno, ni
si quiera digo que lo usen, lo que quiero decir

525
00:49:52,839 --> 00:49:56,780
es lo que vuleve interesante. Hay muchas cosas
inteteresante de que platicar,

526
00:49:56,780 --> 00:50:03,319
pero queria que la audiencia pusiera atencion
a lo que hace que funcione. Y eso resono

527
00:50:03,319 --> 00:50:07,350
con la gente. Y comenzamos a recibir a estos
inovadores. Imaginemos un diagrama cruzando el

528
00:50:07,350 --> 00:50:13,150
abismo. donde tienes a tus pioneros, y los
rezagagos, y justo en medio esta tu

529
00:50:13,150 --> 00:50:17,700
empresa promedio. Esa platica logro que los
pioneros se emocionaran y evangelizaran React
dentro de sus empresas.

531
00:50:23,160 --> 00:50:26,311
El interes comenzo a surgir. La gente empezo
a poner atención. La gente queria ver si

532
00:50:26,311 --> 00:50:31,530
habia algo interesante que ver en ello. Asi que
fue este proceso lento de adopción de React.

533
00:50:31,530 --> 00:50:36,230
Y esto abrio varias conversaciones intesantes.
Estas lograron atraer a Brandon Bloom a la

534
00:50:36,230 --> 00:50:41,230
comunidad quien venia del mundo de programacion
functional. Luego, el hablo con sus amigos

535
00:50:41,230 --> 00:50:46,870
a quien les dijo, 'Creo que que vale la pena
darle un ojo a React' Y luego va y habla con

536
00:50:46,870 --> 00:50:51,099
su amigo David Nolen, quien esta muy conocido,
espetado, y tambien gran musico y desarrollador

537
00:50:51,099 --> 00:50:58,150
quien esta muy conocido, espetado, y
tambien gran musico y desarollador de
Javascript.

538
00:50:58,150 --> 00:51:03,040
En ese entonces el trabajaba en el New York
Times y yo visitaba New York para algo

539
00:51:03,040 --> 00:51:10,710
y tomamos un cafe. Y le hize preguntas a
Pete, tambien Brandon Bloom quien es mi
amigo, me habia dicho

540
00:51:10,710 --> 00:51:16,890
cosas buenas sobre React. Y la razon
por la cual yo estaba emocionado por ello,

541
00:51:16,890 --> 00:51:21,540
más de lo que creo que podrías si fueras
desarrollador de JavaScript,

542
00:51:21,540 --> 00:51:25,119
Javascript es multiparadigma, puedes usarlo
para programacion orientada objetos, puedes
usarlo

543
00:51:25,119 --> 00:51:31,980
para programción funcional pero no es
requerido. Pero en Clojure y Clojurescript,
funcional es

544
00:51:31,980 --> 00:51:37,349
lo mas idiomatico lo cual no existia.
Logramamos hacerlo funcionar pero siempre
habia fricción.

545
00:51:37,349 --> 00:51:42,730
Estaba en una etapa temprana en mi
carrera y este

546
00:51:42,730 --> 00:51:48,040
ingenerio super listo quien es el
tipo de persona quien te puede

547
00:51:48,040 --> 00:51:53,109
hacer preguntas y en algun momento me
quedaba sin respuestas o lo explicaba de
forma pesima.

548
00:51:53,109 --> 00:51:58,930
Y despues el repetiria lo que le dije
pero de una forma supe eloquente que yo
estaba como sí, ¡voy a robar eso!

549
00:51:58,930 --> 00:52:04,520
Y así cuando me senté con Brandon y
Pete, fue como si se encendiera una
bombilla.

550
00:52:04,520 --> 00:52:11,430
En eso yo dije, esto es tan aleatorio,
Facebook hizo que este framework
funcional para armar

551
00:52:11,430 --> 00:52:18,700
interfazes de usuario. ¡Eureka!
Quiero decir, definitivamente fue un
momento eureka. Permitió a los

552
00:52:18,700 --> 00:52:25,020
programadores de ClojureScript escribir
finalmente interfaces de usuario
funcionales con rendimiento razonable.

553
00:52:25,020 --> 00:52:29,490
Y fue muy natural, fue una combinación
muy, muy buena. Como una semana o dos
después,

554
00:52:29,490 --> 00:52:35,030
titulado 'El futuro de los MVCs de
JavaScript' que simplemente cambió la
trayectoria del proyecto.

555
00:52:35,030 --> 00:52:39,849
De muchas maneras, cuando miras React,
piensas que no hay manera de que esto
pueda ser rápido,

556
00:52:39,849 --> 00:52:46,400
no hay forma en que pueda ser eficiente.
Y luego mostré estos diagramas de cómo
Backbone y React/Om

557
00:52:46,400 --> 00:52:52,119
se comparan y React es mucho mejor.
Especialmente cuando se usan estructuras
de datos persistentes.

558
00:52:52,119 --> 00:52:59,570
Creo que mi artículo se enfocaba puramente
en los beneficios técnicos del diseño.
Eliminó la consideración superficial y creo

559
00:52:59,570 --> 00:53:05,109
que la gente empezó a decir: "Bueno,
lo intentaré". No "lo usaré",

560
00:53:05,109 --> 00:53:12,109
pero eliminó ese "nunca voy a usar eso"
a "oh, voy a probarlo, esto es
interesante".

561
00:53:12,109 --> 00:53:17,660
Una vez que ese artículo salió, diría que
en unos tres meses éramos uno de los
principales contendientes si estabas

562
00:53:17,660 --> 00:53:21,690
eligiendo un framework de JavaScript.

563
00:53:21,690 --> 00:53:25,849
Si quieres difundir una idea, debes
convencer realmente a unas pocas personas
y hacer que esas personas compartan tu

564
00:53:25,849 --> 00:53:31,731
mensaje, no puedes estar gritándolo tú
mismo.

565
00:53:31,731 --> 00:53:40,750
Cada vez más personas comenzaron a darse
cuenta de que React tenía algunas buenas
ideas y hacía que el desarrollo de UI

566
00:53:40,750 --> 00:53:47,010
fuera más simple de muchas maneras.
Durante los próximos años, digamos dos o
tres, seguimos

567
00:53:47,010 --> 00:53:53,070
rastreando cosas como Google Alerts para
ver cuántas veces se menciona, quién está
escribiendo

568
00:53:53,070 --> 00:53:58,420
sobre él, qué proyectos están surgiendo.
Debido a que React era muy poco dogmático
acerca de

569
00:53:58,420 --> 00:54:04,559
un montón de cosas que necesitas para
construir una aplicación web de front-end
y la gente

570
00:54:04,559 --> 00:54:08,790
llenaría los vacíos. Surgieron un montón
de bibliotecas de gestión de estado y de
enrutamiento,

571
00:54:08,790 --> 00:54:13,590
Y estrategias de renderizado en el servidor.
Así que hubo una especie de

572
00:54:13,590 --> 00:54:18,280
lenta adopción durante el siguiente año o dos.

573
00:54:18,280 --> 00:54:24,040
React es una pequeña biblioteca de UI enfocada,
pero demostró ser capaz de enfrentar los problemas

574
00:54:24,040 --> 00:54:30,840
más difíciles de Facebook y otras grandes empresas.
Pero hubo una empresa especialmente ansiosa por

575
00:54:30,840 --> 00:54:39,490
repensar las mejores prácticas.

576
00:54:39,490 --> 00:54:46,880
[Music]

577
00:54:46,880 --> 00:54:51,340
Primero escuchamos sobre React en 2014.
El sitio web de Netflix había sido

578
00:54:51,340 --> 00:54:57,380
construido en Java Web. Era muy lento,
tardaba alrededor de 15 minutos en construir y

579
00:54:57,380 --> 00:55:03,160
decidimos pasar a un marco de trabajo más moderno.
Ahí vamos. En ese momento no estábamos muy seguros

580
00:55:03,160 --> 00:55:07,240
si, ya sabes, esto de React iba a funcionar.
Era algo nuevo y estábamos muy aprensivos,

581
00:55:07,240 --> 00:55:12,530
especialmente porque estábamos construyendo el futuro
de los próximos 10 años del sitio web.

582
00:55:12,530 --> 00:55:18,030
Si tomábamos una mala decisión, tendríamos que
retroceder años de trabajo. Y así que muy cautelosos

583
00:55:18,030 --> 00:55:22,670
de no saltar a algo que fuera demasiado de 
vanguardia. Y así que lo que hicieron 
fue crear a dos equipos.

584
00:55:22,670 --> 00:55:26,869
A cada uno se le dio 30 días para construir 
un prototipo con uno siendo React 
y el otro Backbone y después de

585
00:55:26,869 --> 00:55:31,430
30 días la elección era clara.

587
00:55:32,430 --> 00:55:37,950
Así que gracias a todos por venir esta noche.
Estamos realmente emocionados de tenerlos aquí

588
00:55:37,950 --> 00:55:42,220
y compartir las lecciones que hemos 
aprendido construyendo la nueva 
interfaz de usuario en React

589
00:55:42,220 --> 00:55:46,580
durante el último año. Era no en esta etapa,
era nuestra próxima etapa, donde 
di mi presentación

590
00:55:46,580 --> 00:55:53,220
que en 2015. La misma sensación de "oh Dios 
mío, tengo que convencer a todas 
estas personas de

591
00:55:53,220 --> 00:55:56,890
Que React es asombroso".

592
00:55:56,890 --> 00:56:01,390
Pero supongo que funcionó. Así que fui
parte del equipo que construyó el nuevo sitio
usando React.

593
00:56:01,390 --> 00:56:05,820
Al principio era muy torpe, como cuando
escribes componentes y no están del todo,
¿sabes?,

594
00:56:05,820 --> 00:56:10,450
estás poniendo demasiada lógica en ellos o
estás pensando en algo demasiado grande. No
está claro la diferencia en el paradigma.

595
00:56:10,450 --> 00:56:14,100
Y luego comienzonzas a usarlo y piensas:
"espera, espera, estoy pensando mucho más
atómicamente". De ahí el símbolo de React.

596
00:56:14,100 --> 00:56:19,579
Estoy pensando en esta reutilización individual,
ahora estoy pensando en la testabilidad de
estos componentes, estoy viendo que beneficios
surgen de ello.

597
00:56:19,579 --> 00:56:23,450
Puedo reutilizar esto aquí, podemos probar
esto aquí, podemos agregar props aquí.
Y se vuelve muy emocionante ver ese nuevo

598
00:56:23,450 --> 00:56:27,830
ello. Puedo reutilizar esto aquí, podemos probar
esto aquí, podemos agregar props aquí.

599
00:56:27,830 --> 00:56:32,460
Y se vuelve muy emocionante ver ese nuevo paradigma
en juego y pensar: esto va a ser revolucionario,

600
00:56:32,460 --> 00:56:37,120
esto va a cambiar la forma en que construimos
aplicaciones.

601
00:56:37,120 --> 00:56:41,180
Volvamos en el tiempo
un año atrás a la antigua interfaz de Netflix,
ustedes podrían

602
00:56:41,180 --> 00:56:45,690
recordarla. La apariencia general es como la de
las viejas cajas de DVD,

603
00:56:45,690 --> 00:56:49,850
Y así que quiero mostrarles uno de los primeros
prototipos de lo que pensábamos que se 

604
00:56:49,850 --> 00:56:55,960
vería la nueva interfaz de usuario. Sabíamos que
hacia adelante el mundo estaba cambiando, la
web estaba cambiando,

605
00:56:55,960 --> 00:57:00,059
las cosas se movían más rápido, y nuestra
competencia también se movía más rápido.
Así que elegir React

606
00:57:00,059 --> 00:57:04,260
y optar por un framework más moderno realmente
nos ayudó a acelerar la velocidad a la que
podíamos construir

607
00:57:04,260 --> 00:57:08,089
el sitio web, la velocidad a la que podíamos
sacar nuevas actualizaciones, la velocidad a
la que podíamos probar mejoras

608
00:57:08,089 --> 00:57:13,619
para nuestros clientes para crear la mejor
experiencia posible.

609
00:57:13,619 --> 00:57:18,240
Y debido a eso, hemos estado a la vanguardia
de liderar cómo se ve el diseño de la interfaz
de usuario en términos de

610
00:57:18,240 --> 00:57:23,720
desarrollo web. Hemos tenido muchas empresas que
nos han copiado, lo que tomamos como un gran
cumplido,

611
00:57:23,720 --> 00:57:27,750
pero nosotros estuvimos allí primero debido a
React y su capacidad para moverse tan rápidamente
en términos

612
00:57:27,750 --> 00:57:33,170
de diseño. Así es como terminó resultando y
esta es una interfaz de usuario que es grande
e inmersiva

613
00:57:33,170 --> 00:57:42,940
y completamente construido en React. Así que
estamos muy muy orgullosos de ello y del resultado.
[Música]

614
00:57:42,940 --> 00:57:48,410
Netflix estaba elogiando públicamente a React
y con una segunda gran empresa apostando
fuerte por React,

615
00:57:48,410 --> 00:57:54,740
el framework se hizo más popular. De hecho, tomó
vida propia y la comunidad

616
00:57:54,740 --> 00:58:02,270
comenzó a despegar.

617
00:58:02,270 --> 00:58:14,089
[Música] En este punto, React estaba ganando más
popularidad y alguien en Twitter mencionó

618
00:58:14,089 --> 00:58:19,820
"sería genial tener una conferencia de React"
y muchas personas comenzaron a comentar y

619
00:58:19,820 --> 00:58:24,770
tuitear sobre esto. Y fui a mi gerente
Tom Occhino. Y él dijo: hoy hay como

620
00:58:24,770 --> 00:58:31,020
50 tweets sobre React, como la gente está
hablando de organizar conferencias, ¿deberíamos

621
00:58:31,020 --> 00:58:34,200
organizar una conferencia? Y yo estaba como,
no sé lo que eso significa, no sé

622
00:58:34,200 --> 00:58:38,680
cómo hacerlo, pero tal vez. Estaba muy
en contra de hacer una conferencia.
Pensé que era

623
00:58:38,680 --> 00:58:47,079
muy cool que obtuviéramos tanto vuelo
sin invertir mucho dinero en marketing.

624
00:58:47,079 --> 00:58:51,920
A pesar de que React provenía del gigante de
la tecnología Facebook, era un pequeño grupo

625
00:58:51,920 --> 00:58:56,099
de personas que estaban realmente dedicadas,
a ver que esta cosa tuviera éxito, así que

626
00:58:56,099 --> 00:59:03,079
se sintió como este proyecto indie muy tipo
Alianza Rebelde. Y así que yo estaba como,
no necesitamos

627
00:59:03,079 --> 00:59:07,869
una conferencia de usuarios, como tenemos
esta vibra genial sucediendo, veamos hasta
dónde podemos llegar.

628
00:59:07,869 --> 00:59:12,630
Estaba completamente equivocado. Nos dijimos
a nosotros mismos, creo que sería divertido
organizar una conferencia de React,

629
00:59:12,630 --> 00:59:18,210
pero ¿hay suficientes personas que usan React
que querrían ir a eso, y finalmente

630
00:59:18,210 --> 00:59:24,570
decidimos: bueno, intentémoslo, intentemos
organizar la conferencia y ver cómo va.

631
00:59:24,570 --> 00:59:30,390
En cuestión de minutos, todas las entradas se
agotaron y colapsamos el sitio web que

632
00:59:30,390 --> 00:59:34,349
manejaba el sistema de pagos.

633
00:59:34,349 --> 00:59:42,559
Schrep, el CTO de Facebook, me contactó
diciendo: tengo un 

634
00:59:42,559 --> 00:59:48,630
VP o CTO muy importante de alguna compañía que
quería entrar pero no pudo.

635
00:59:48,630 --> 00:59:56,010
Me preguntó si podía hacerle un favor y le dije
que me encantaría, ya que era el CTO y todo,

636
00:59:56,010 --> 01:00:00,900
pero sabía que ya estábamos completamente llenos.
Realmente nos sorprendió lo rápido que se

637
01:00:00,900 --> 01:00:05,740
agotaron las entradas. No nos dimos cuenta
de cuánto había crecido el ecosistema de React y

638
01:00:05,740 --> 01:00:11,580
cuánto entusiasmo había creado entre los
primeros adoptantes.

639
01:00:11,580 --> 01:00:26,780
[Música]
Lo organizamos bastante rápido en lo
que respecta

640
01:00:26,780 --> 01:00:31,910
a la planificación de la conferencia y lo hicimos
en el campus en una de nuestras cafeterías, y

641
01:00:31,910 --> 01:00:38,349
llevamos a la gente desde el hotel más cercano.
Fue muy, muy mal producido,

642
01:00:38,349 --> 01:00:46,510
pero funcionó muy bien.
-¡Buenos días a todos y bienvenidos a React.js Conf!

643
01:00:46,510 --> 01:00:50,920
La conferencia fue extremadamente, extremadamente
bien. Como organizador de la conferencia,

644
01:00:50,920 --> 01:00:56,940
estoy muy emocionado de estar ahy. Y compartimos
varios de nuestros proyectos de código abierto,
como React Native,

645
01:00:56,940 --> 01:01:00,930
y empezamos a hablar sobre GraphQL y Relay.
Así que sí, fue un éxito masivo.

646
01:01:00,930 --> 01:01:09,230
Hay este momento en el que vas y ves el escenario
y hay un gran corte de 

647
01:01:09,230 --> 01:01:15,940
como logotipo del átomo React. Y yo estaba
como, mi amigo Maykel, el diseñador de Instagram,

648
01:01:15,940 --> 01:01:19,750
lo dibujó frente a mí en medio de la noche antes
de que abriéramos esta cosa

649
01:01:19,750 --> 01:01:22,589
y yo le dije a Maykel que hiciera algo rápidamente.

650
01:01:22,589 --> 01:01:27,730
Y ahora es esta cosa que alguien ha construido con 
un gran letrero con esto.

651
01:01:27,730 --> 01:01:32,230
Hay algo sobre el impacto físico de eso,
que es realmente genial.

652
01:01:32,230 --> 01:01:37,490
Ese fue el momento en que me di cuenta de que
React estaba convirtiéndose en algo diferente, tú

653
01:01:37,490 --> 01:01:43,350
sabes. Durante mucho tiempo, lo que era React
para mí era un proyecto de software y la razón

654
01:01:43,350 --> 01:01:46,819
por la que quería que la gente lo adoptara
era porque realmente pensaba que haría que su software

655
01:01:46,819 --> 01:01:51,150
fuera mejor y haría que sus vidas fueran mejores
y haría que sus rotaciones de guardia fueran mejores.

656
01:01:51,150 --> 01:01:56,109
Hay muchas razones por las que pensé que les
ayudaría. Después de esa conferencia, me di cuenta

657
01:01:56,109 --> 01:02:00,619
es que React se estaba convirtiendo en una
comunidad. Había reuniones que sucedían la próxima

658
01:02:00,619 --> 01:02:04,880
semana que tendrían una audiencia ampliada y
podrían profundizar en algunas

659
01:02:04,880 --> 01:02:09,440
de las cosas que se discutieron, fue realmente,
realmente genial y un reconocimiento enorme para
nosotros de que

660
01:02:09,440 --> 01:02:15,920
la comunidad iba a ser una parte increíble de
lo que haría que React funcionara y en ese momento

661
01:02:15,920 --> 01:02:20,410
ya era definitivamente una parte realmente
importante de lo que había llevado a React
a ese punto

662
01:02:20,410 --> 01:02:28,640
hasta ahora. [Música] Me ha demostrado que
interactuar con tu comunidad de código abierto es en realidad

663
01:02:28,640 --> 01:02:32,650
más importante que el trabajo técnico en sí
mismo, como si no tuvieras una comunidad no tienes

664
01:02:32,650 --> 01:02:37,079
un proyecto de código abierto. Estoy emocionado
de que sigamos repensando las mejores prácticas.

665
01:02:37,079 --> 01:02:40,799
Quiero agradecer a esta comunidad por hacer
posible que sigamos invirtiendo en esto

666
01:02:40,799 --> 01:02:48,190
y sigamos trabajando en ello. Eso es todo
lo que tengo, gracias!

667
01:02:48,190 --> 01:02:52,720
Fue un verdadero punto alto para no solo
para mí, sino para el equipo, y creo

668
01:02:52,720 --> 01:02:59,681
para la ingeniería de Facebook. Realmente
sentimos que no solo estábamos validados
sino que estábamos

669
01:02:59,681 --> 01:03:05,230
realmente haciendo algo que a la gente le
importaba y fue una sensación realmente muy buena.

670
01:03:05,230 --> 01:03:10,320
Ya se usaba más ampliamente dentro de la empresa, 
pero ahora era como, bien,

671
01:03:10,320 --> 01:03:15,661
¿cómo empezamos a convertir todo a React, cómo
removemos y eliminamos todas

672
01:03:15,661 --> 01:03:21,561
de las otras estructuras y realmente nos
enfocamos en React? Oh, ¿cómo va todo? Pasando

673
01:03:21,561 --> 01:03:27,440
de ser un producto interesante a ser la
próxima gran cosa. Así que fue un momento realmente asombroso

674
01:03:27,440 --> 01:03:33,599
para estar presente y hacer que toda la
empresa trabajara junta como una sola, ya
sabes, para hacer

675
01:03:33,599 --> 01:03:35,079
esto suceder.

676
01:03:35,079 --> 01:03:46,830
Vamos a ver, tengo algunos recuerdos aquí arriba,
que no serán fáciles para mí de bajar.

677
01:03:46,830 --> 01:03:48,700
Pero... Vamos a ver.

678
01:03:48,700 --> 01:03:56,740
Tengo algunas calcomanías, oh esta es divertida,
esta es la primera calcomanía de corte React.

679
01:03:56,740 --> 01:04:01,329
Pedimos un montón de estas y las pusimos
en nuestras computadoras portátiles y nunca
quise usar la

680
01:04:01,329 --> 01:04:07,970
última que tenía. Calcomanías de código abierto
de Facebook. Ah, algunas de estas serán un viaje

681
01:04:07,970 --> 01:04:15,160
por el carril de los recuerdos para la gente. React conf.
Hicimos, ya sabes, en 2018 Facebook de código abierto es

682
01:04:15,160 --> 01:04:23,630
bueno. Insignia de asistente a React conf. Este
era un libro de la conferencia React.js original

683
01:04:23,630 --> 01:04:30,940
en la sede de Facebook, así que tenía una lista
de los oradores y el horario y aquí está

684
01:04:30,940 --> 01:04:39,110
la presentación principal. Yo y Christopher Chedeau.
Teníamos todo tipo de cosas promocionales y un montón de

685
01:04:39,110 --> 01:04:45,329
otras cosas... Así que cosas bastante buenas,
recuerdos bastante buenos.

686
01:04:45,329 --> 01:04:51,819
El equipo se inundó con preguntas de la comunidad
y un nuevo desarrollador entra en la

687
01:04:51,819 --> 01:04:55,900
órbita de React.

688
01:04:55,900 --> 01:04:59,980
[Music]

689
01:04:59,980 --> 01:05:20,059
¿Qué debo hacer con mis manos?
¿Entonces estás diciendo que debería en realidad...

690
01:05:20,059 --> 01:05:25,901
empezar así, dejame enfocarme un segundo.
Solo para que conste, yo no creé React,

691
01:05:25,901 --> 01:05:33,349
React fue creado por Jordan Walke. Yo trabajaba
en una pequeña startup. Estábamos creando una especie

692
01:05:33,349 --> 01:05:38,940
de plataforma de publicación digital, por lo que
había un editor de publicaciones realmente complejo
con diferentes

693
01:05:38,940 --> 01:05:43,930
bloques o un texto desplazable con diferentes
efectos y cosas por el estilo. Y así, crear

694
01:05:43,930 --> 01:05:50,030
un editor dinámico e interactivo para estas cosas
fue realmente difícil.

695
01:05:50,030 --> 01:05:53,700
Y lo estábamos haciendo con Backbone.
Quería probar React porque se suponía que

696
01:05:53,700 --> 01:05:59,180
resolvía este problema. El primer componente
de React que escribí fue un botón "me gusta",
así que era solo como un botón que haces clic

697
01:05:59,180 --> 01:06:05,309
y dice "te gusta esto" o "tú y alguien más
les gusta esto"

698
01:06:05,309 --> 01:06:11,020
o "tú y 40 personas más les gusta esto". Así
que había un poco de lógica dividida,

699
01:06:11,020 --> 01:06:18,900
y luego la forma en que lo expresarías en otros frameworks
en ese momento, tenías que vigilar manualmente lo que

700
01:06:18,900 --> 01:06:23,549
ha cambiado y actualizarlo. Y en React
simplemente podías decir expresar cosas como,
si a nadie le gusta esto muestra esto,

701
01:06:23,549 --> 01:06:28,359
si a una persona le gustó esto, muestra aquello,
de lo contrario, muestra esto. Es una forma
muy natural

702
01:06:28,359 --> 01:06:33,630
de escribir este tipo de código. Y sí,
escribí ese botón y pensé

703
01:06:33,630 --> 01:06:40,980
"sí, se ve bien, publícalo". Y así reconstruimos
toda la aplicación en React durante

704
01:06:40,980 --> 01:06:46,470
aproximadamente 9 meses mientras seguíamos
añadiendo nuevos features. Así que React
aceleró nuestro desarrollo

705
01:06:46,470 --> 01:06:51,270
tanto que pudimos agregar nuevas features
más rápido, al mismo tiempo que reemplazabamos

706
01:06:51,270 --> 01:06:58,140
features antiguos, por eso me enamoré de él.

707
01:06:58,140 --> 01:07:02,849
Muchas cosas no existían en aquel entonces.
Como no existía todo un ecosistema de React.

708
01:07:02,849 --> 01:07:08,400
Así que si necesitabas algo y no existía,
tenías que escribirlo.

709
01:07:08,400 --> 01:07:13,260
Porque de lo contrario no tendrías
un producto, ¿verdad?

710
01:07:13,260 --> 01:07:18,099
Así que eso es lo que hice para muchas cosas.
Uno de esos proyectos en particular

711
01:07:18,099 --> 01:07:26,560
fue... vi una gran oportunidad allí. Se llamaba
React Hot Loader en ese momento

712
01:07:26,560 --> 01:07:31,750
Así que quería hablar de eso, pero alguien más
había hecho una charla que lo mencionaba

713
01:07:31,750 --> 01:07:36,760
anteriormente en React conf. Un tipo muy
ingenioso llamado Dan Abramov descubrió esto

714
01:07:36,760 --> 01:07:42,040
y creó el React Hot Loader. Y sentí que
bueno, entonces eso no sería

715
01:07:42,040 --> 01:07:46,210
interesante porque la gente ya lo había visto,
lo cual, en retrospectiva, no creo 

716
01:07:46,210 --> 01:07:50,359
que fuera cierto, pero así lo vi en ese momento.
Así que quería darle un poco de sabor y

717
01:07:50,359 --> 01:07:55,960
quería hacer una prueba de concepto de una cosa
que vi cuando Bret Victor

718
01:07:55,960 --> 01:08:02,200
hizo un demo que a menudo se llama viaje en el
tiempo. Si estás diseñando algo incrustado

719
01:08:02,200 --> 01:08:06,630
en el tiempo, necesitas poder controlar el tiempo,
necesitas poder ver a través del tiempo,

720
01:08:06,630 --> 01:08:11,390
de lo contrario estás diseñando a ciegas. No sabia
como hacerlo, pero pense que era una idea cool

721
01:08:11,390 --> 01:08:16,810
para dar una charla. Entonces mande la propuesta, y
si la propuesta tenia exito entonces vere que hago.

722
01:08:16,810 --> 01:08:20,540
Y resultó que la propuesta fue más exitosa de lo
que pensé que sería, 

723
01:08:20,540 --> 01:08:25,600
así que hice una prueba de concepto 
y esa prueba de concepto se 

724
01:08:25,600 --> 01:08:33,270
convirtió en Redux. Así que mi charla trata
sobre herramientas para desarrolladores porque React
y Hot Reloading y

725
01:08:33,270 --> 01:08:39,960
viaje en el tiempo on todas herramientas para
desarrolladores. Literalmente estaba creando Redux

726
01:08:39,960 --> 01:08:44,850
para poder dar esta charla, y la llamé desarrollo
impulsado por presentaciones porque

727
01:08:44,850 --> 01:08:49,541
lo que surgió de ello fue esta especie de
biblioteca canónica de gestión de estados

728
01:08:49,541 --> 01:08:54,750
para aplicaciones React durante varios años.
La mayor parte de mi trabajo se
centra en el ecosistema porque

729
01:08:54,750 --> 01:08:59,770
fue lo que me inspiró a contribuir al código
abierto en primer lugar, pero hay

730
01:08:59,770 --> 01:09:06,120
dos proyectos en particular sobre los que hablaré
hoy. Fue muy gratificante

731
01:09:06,120 --> 01:09:14,850
dar esa charla, pero no me sorprendió la
respuesta porque bueno, tenía mis dudas

732
01:09:14,850 --> 01:09:21,720
pero también pensé que era una buena charla.

733
01:09:21,720 --> 01:09:27,250
Y me alegró que a la gente también le gustara,
pero creo que en realidad no fue la charla lo que me alegro

734
01:09:27,250 --> 01:09:33,350
fue realmente el momento para mí. Creo que fue
simplemente estar allí. Me sentí un poco como

735
01:09:33,350 --> 01:09:38,408
ir a Hogwarts por primera vez. Creo que tenía
esta sensación

736
01:09:38,408 --> 01:09:44,389
porque había todas estas personas que solo
las conocía como avatares y cuando conoces

737
01:09:44,390 --> 01:09:48,870
a alguien en persona, se vuelven tridimensionales,
por supuesto. Ves todo

738
01:09:48,870 --> 01:09:53,738
el cuadro completo. Y creo que fue solo una
sensación tan buena. Es la sensación

739
01:09:53,738 --> 01:09:58,870
de que todos estamos tratando de averiguar qué
podemos hacer con esto y aún no lo sabemos

740
01:09:58,870 --> 01:10:05,929
y estamos jugando con ello.

741
01:10:05,929 --> 01:10:11,850
Eso también es donde conocí a Jing Chen. Le había pedido
consejo antes porque es una de 

742
01:10:11,850 --> 01:10:17,400
las co-creadoras de la arquitectura Flux. Así que
fue agradable conocerla en persona y ella

743
01:10:17,400 --> 01:10:23,390
mencionó que en realidad Facebook estaba
contratando en Londres. Y así me programaron
una entrevista

744
01:10:23,390 --> 01:10:27,429
en la misma conferencia,
que era nuestro proceso de entrevista normal

745
01:10:27,429 --> 01:10:31,989
creo que fueron como cuatro entrevistas o algo así,
pero me perdí el segundo día de la conferencia

746
01:10:31,989 --> 01:10:37,100
Y solo hicimos una entrevista allí. Así es como
entré en Facebook. Lo

747
01:10:37,100 --> 01:10:43,120
sacamos rápidamente de la conferencia, un poco
en secreto, y luego

748
01:10:43,120 --> 01:10:50,699
realizamos las entrevistas en el sótano de
un hotel, creo. ¿Es normal en Facebook?

749
01:10:50,699 --> 01:10:55,580
No, Dan es especial, siempre ha sido un poco especial.
Creo que yo podría considerarme

750
01:10:55,580 --> 01:11:02,520
el primer miembro de lo que se convertiría en
el equipo de React tal y como lo conocemos hoy,

751
01:11:02,520 --> 01:11:08,989
porque me uní un poco antes que Andrew, Brian,
Luna y otras

752
01:11:08,989 --> 01:11:14,219
personas que trabajan con nosotros ahora. Y me
uní en un momento en el que algunas personas

753
01:11:14,219 --> 01:11:19,969
que habían trabajado con nosotros antes estaban
a punto de irse. Así que estaba en este período
de transición

754
01:11:19,969 --> 01:11:23,980
cuando el equipo estaba cambiando mucho.

755
01:11:23,980 --> 01:11:40,053
[ Música ] ¿Recuerdas la primera vez que
conociste a Andrew? Creo que sí. ¡Sí!

756
01:11:40,053 --> 01:11:43,739
Creo que lo conocí en React conf. Bueno,
ese fue el momento claro, tal vez,

757
01:11:43,739 --> 01:11:50,570
¿fue la primera vez? ¿Te invitaron a React conf
por eso? Él tenía un discurso.

758
01:11:50,570 --> 01:11:56,729
Lo conocí, creo, antes de eso. Conocí a ti,
Sophie, Joe y Tim en la

759
01:11:56,729 --> 01:12:01,580
misma semana. Sí, empezó a hacer preguntas que
eran muy similares a las preguntas

760
01:12:01,580 --> 01:12:06,159
que estábamos discutiendo internamente en el
equipo y recuerdo haber pensado: tengo que
conectarlo

761
01:12:06,159 --> 01:12:09,580
con Sebastian, Jordan y el resto del equipo.
Sí, y también

762
01:12:09,580 --> 01:12:13,810
le dije a los reclutadores que teníamos que
contratar a este tal Andrew.

763
01:12:13,810 --> 01:12:17,540
Creo que tuvimos mucha suerte al principio
de contar con un grupo de personas que se unieron

764
01:12:17,540 --> 01:12:22,064
y dijeron "esto parece genial, quiero ser parte
de esto, quiero ayudar".

765
01:12:22,064 --> 01:12:26,460
No me di cuenta de que en ese momento era
como sentirse en una clase de primer año. Sophie

766
01:12:26,460 --> 01:12:31,280
había empezado a dirigir el equipo en esa
época también y no podría haber pedido

767
01:12:31,280 --> 01:12:38,739
un proyecto mejor ni un equipo y colegas
mejores para unirme. El inicio de la fase dos,

768
01:12:38,739 --> 01:12:45,850
sí, es genial. [Música] ¡Impresionante! Siento
que lo hicimos muy bien al 

769
01:12:45,850 --> 01:12:47,730
final

770
01:12:47,730 --> 01:12:57,170
Como si hubiera anotado un gol en soccer.

771
01:12:57,170 --> 01:13:02,690
[Música] React estaba ahora fuera de las manos
de sus fundadores. Estaba listo para enfrentar

772
01:13:02,690 --> 01:13:09,699
nueva vida bajo el cuidado de una nueva
comunidad creciente y un equipo enfocado al futuro.

773
01:13:09,699 --> 01:13:15,660
Tratamos de observar algunas de las cifras,
como el número de estrellas de GitHub o el
número de descargas de npm en Google

774
01:13:15,660 --> 01:13:21,690
Trends, cuántas personas buscan React, y ninguna
de esas cifras es perfecta,

775
01:13:21,690 --> 01:13:29,340
pero básicamente todas siguieron aumentando
con el tiempo y eventualmente llegamos a un
punto en

776
01:13:29,340 --> 01:13:35,810
que dijimos, "Oh sí, millones de personas
están utilizando React". Hay

777
01:13:35,810 --> 01:13:43,090
muchos detalles en cómo hacíamos las cosas que
fomentan que el ecosistema participe,

778
01:13:43,090 --> 01:13:49,060
que fueron partes críticas para hacerlo lo que
es hoy. No pusimos todo en el

779
01:13:49,060 --> 01:13:54,389
framework.  Dejamos mucho para que el ecosistema
innovara. Y obtuvimos muchas contribuciones,

780
01:13:54,389 --> 01:14:01,239
mucho interés de esa manera, y muchas cosas
surgieron a partir de eso.

781
01:14:01,239 --> 01:14:07,679
Nunca fue una conclusión preconcebida. Todavía
me resulta surrealista que sea tan popular como lo es.

782
01:14:07,679 --> 01:14:13,550
Es un gran ejemplo de esta tecnología inesperada
dentro de una gran empresa donde podrían haber

783
01:14:13,550 --> 01:14:18,040
habido fuerzas que se opusieran. Creo que muchos
elementos

784
01:14:18,040 --> 01:14:24,310
de buen momento, buena fortuna, buena suerte,
buen apoyo de liderazgo, todo se agregó para
hacer que esto suceda

785
01:14:24,310 --> 01:14:31,740
para permitir que React sea un éxito, si nos
hubiéramos saltado algunos de esos o si
hubieran fallado algunos más

786
01:14:31,740 --> 01:14:36,550
en lugar de tener éxito, entonces no creo
que React estaría en el lugar en el

787
01:14:36,550 --> 01:14:42,840
que está hoy. Siento que no puedes sacar a nadie
de esto y que siga siendo lo que se convirtió.

788
01:14:42,840 --> 01:14:46,550
Creo que en los primeros días, obviamente Jordan,
tenía razón. Como esta cosa no existiría. Y

789
01:14:46,550 --> 01:14:51,560
luego Jing Chen fue absolutamente crítica.
Quiero decir, fue tan instrumental en los primeros

790
01:14:51,560 --> 01:14:56,070
días de React que simplemente no habría sido
algo por lo que nos preocupáramos si no
hubiera demostrado

791
01:14:56,070 --> 01:15:03,449
su valor. Y luego Shane O'Sullivan es responsable
de, ya sabes, una decisión muy difícil

792
01:15:03,449 --> 01:15:07,770
de ir por este camino en lugar de ese otro.
Y luego los ingenieros que trabajaron

793
01:15:07,770 --> 01:15:12,000
en la refinación y la iteración y lo convirtieron
en algo bueno fueron Chedeau y

794
01:15:12,000 --> 01:15:16,600
Paul O'Shannessy y Pete Hunt. Y mi gerente,
Adam Wolff, cuando estaba haciendo todas
estas preguntas

795
01:15:16,600 --> 01:15:20,860
sobre si deberíamos hacerlo, si realmente valía
la pena, especialmente

796
01:15:20,860 --> 01:15:24,780
después de JS Conf cuando nos sentíamos derrotados, él estaba
allí para levantarme

797
01:15:24,780 --> 01:15:29,520
y decirme: no, mira que está entregando valor,
esto es bueno, sigue adelante.

798
01:15:29,520 --> 01:15:34,150
Y también hay diferentes fases, ¿verdad? Tienes los
primeros días, y luego para

799
01:15:34,150 --> 01:15:40,300
los próximos casi 10 años, con el liderazgo
técnico de Sebastian y Andrew y Dan y

800
01:15:40,300 --> 01:15:46,830
Dominic y Flarney y Sophie
y siento que es solo un grupo de personas increíbles

801
01:15:46,830 --> 01:15:53,150
y si sacas a cualquiera de ellos, se ve muy diferente.

802
01:15:53,150 --> 01:15:59,870
Realmente fue un esfuerzo de equipo desde el principio

803
01:15:59,870 --> 01:16:12,679
Misko Hevery dice que las soluciones impresionantes
rara vez son creadas por grandes organizaciones

804
01:16:12,679 --> 01:16:19,280
Casi siempre es una persona con pasión y visión
que lentamente comienza a infectar a otras.

805
01:16:19,280 --> 01:16:25,370
Esta es una gran síntesis de cómo React se
convirtió en React. Porque nunca fue inevitable,

806
01:16:25,370 --> 01:16:31,600
siempre fue una idea loca que fue ganando
impulso, persona por persona. Y muchos esperaban

807
01:16:31,600 --> 01:16:38,469
que React fracasara y si no fuera por el arduo
trabajo de unos pocos desarrolladores decididos,

808
01:16:38,469 --> 01:16:43,020
podría haber fracasado.

809
01:16:43,020 --> 01:16:48,639
Este es solo el comienzo de la historia de React.
La historia de cómo una comunidad transformó una

810
01:16:48,639 --> 01:16:57,199
biblioteca de UI marginada en el framework de JavaScript
más popular de hoy.

811
01:16:57,199 --> 01:16:58,199
Este es el podcast de React, soy Chantastic.

812
01:16:58,199 --> 01:16:59,199
[Música]

813
01:16:59,199 --> 01:17:26,560
Estoy tan tentado de sorprender a Jordan
ahora mismo y decirle: ¡entrevista! Es muy extraño

814
01:17:26,560 --> 01:17:46,230
pensar que estás tan cerca de la muerte. La
primera camiseta de React que hicimos.

815
01:17:46,230 --> 01:17:48,719
Miles de desarrolladores encuentran trabajo en
toda Europa usando Honeypot. Si buscas un nuevo desafío

816
01:17:48,719 --> 01:17:54,010
en una de estas ciudades europeas, regístrate
en honeypot.io. Si quieres ver más documentales de tecnología,

818
01:18:00,350 --> 01:18:03,540
entonces suscríbete para no perderte el siguiente.

819
01:18:03,540 --> 01:18:03,770
[Música]