En esta sesión os contaremos la visión de React para el desarrollo de aplicaciones web desde el punto de vista de un desarrollador de ASP.NET que tiene que aprender a trabajar con estas nuevas tecnologías.

1. una consultora tecnológica
que piensa en colores
para organizaciones vivas
una consultora tecnológica
que piensa en colores
para organizaciones vivas
React para desarrolladores de ASP.NET

2. Alberto Diaz Martin
alberto.diaz@encamina.com - @adiazcan
Alberto Diaz cuenta con más de 15 años de experiencia en la Industria IT, todos ellos trabajando
con tecnologías Microsoft. Actualmente, es Chief Technology Innovation Officer en ENCAMINA,
liderando el desarrollo de software con tecnología Microsoft, y miembro del equipo de
Dirección.
Para la comunidad, trabaja como organizador y speaker de las conferencias más relevantes del
mundo Microsoft en España, en las cuales es uno de los referentes en SharePoint, Office 365 y
Azure. Autor de diversos libros y artículos en revistas profesionales y blogs, en 2013 empezó a
formar parte del equipo de Dirección de CompartiMOSS, una revista digital sobre tecnologías
Microsoft.
Desde 2011 ha sido nombrado Microsoft MVP, reconocimiento que ha renovado por séptimo
año consecutivo. Se define como un geek, amante de los smartphones y desarrollador.
Fundador de TenerifeDev (www.tenerifedev.com), un grupo de usuarios de .NET en Tenerife, y
coordinador de SUGES (Grupo de Usuarios de SharePoint de España, www.suges.es)

3. 2002
ASP.NET 1.0
2006
JQUERY
2007
ASP.NET 3.5
2009
ASP.NET MVC 1.0
2010
Knockout JS
2012
ASP.NET WEB API 1.0

4. ¿Qué Framework JS elegir?
4

5. ¿Qué Framework JS elegir?
5

6. Expectativas de los usuarios
Rápido
Rich Clients
Reactivo
SEO
Rápido
MVC
Backbone
Angular
Knockout
View
ReactJS
Handlebars.js

7. • Una librería JavaScript para construer interfaces de usuario (UI)
• Open Source, declarativa, basada en components
• No es un framework MVC
• Isomorphic App, can render on client and server
• Unidirectional Flows. No two-way binding
¿Qué es React?

8. Con React creamos arboles de componentes, estos componentes pueden tener estado y propiedades.
React Component
8
Componente
Componente Componente
Componente Componente
App
Header
Menu
Item Item
Hello
World
Footer
Item Item

9. React Virtual DOM
• React implementa un DOM Virtual – ReactDOM
• ReactDOM es el encargado de renderizar los componentes
React en el DOM del navegador
• Virtual por:
– Para cada objeto en el DOM, existe un objeto en el
Virtual
– Los cambios en los objetos virtuales, no fuerzan
cambios en el navegador, se cambian cuando son
renderizados
– Es más eficiente el uso del Virtual DOM
– Cuando se actualiza un componente en el Virtual
DOM, React ejecuta un algoritmo de comparación
para detectar los cambios y renderizarlos
9

10. Nuestro HTML pero en JavaScript / Typescript
JSX / TSX
public render() {
return (
<tr key={this.props.member.id}>
<td>
<span>{this.props.member.id}</span>
</td>
<td>
<span>{this.props.member.login}</span>
</td>
</tr>
);
}
return (
React.createElement
("tr", {"key": this.props.member.id},
React.createElement("td", null,
React.createElement("span", null, this.props.member.id))
, React.createElement("td", null,
React.createElement("span", null, this.props.member.login))
);

11. React Props
• Son inmutables
• Similares a atributos HTML
• Se definen cuando el componente es creado
• Ejemplo: un listado de clientes, los datos de un cliente, …
11

12. React State
• Mutables
• Mantiene el estado del componente
• Datos privados del componente
• Responde a cambios en la interfaz
12

13. Demo
react as is
13

14. Ciclo de vida de una aplicación web
Browser MVC
Get page
Query
API
Get data
Render
React
components
HTML & JS
WEB
API
Interaction
With React Components
Get data
Get data
JSON

15. Ciclo de vida de ASP.NET
15

16. Ciclo de vida de un
Componente
Tiene un ciclo de vida definido por los siguientes tipos de
sucesos:
– Eventos de montaje (mounting): métodos invocados
cuando una instancia del componente está siendo
creado e insertado (o eliminada) del DOM real.
– Eventos de actualización (updating): métodos que se
invocan cuando hay cambios en las propiedades o el
estado de un componente. Una actualización dispara
una re-renderización.
– Eventos de manejo de errores: un componente
puede capturar todos los errores producidos en su
ejecución, o la ejecución de sus subcomponentes.
16

17. Eventos de montaje
• constructor(props):
– se llama antes del montaje
– se debe llamar a super(props) para una inicialización
adecuada
• componentWillMount():
– se invoca justo antes de que ocurra el montaje, antes
de render
• componentDidMount():
– se invoca justo después del montaje
– se usa para la inicialización que depende de nodos
del DOM, cargar datos desde red, etc.
• componentWillUnmount():
– se invoca justo antes de remover el componente del
DOM, y que éste sea destruido
– se usa para realizar “limpieza”: cancelar operaciones
pendientes, eliminar referencias, etc.

18. Eventos de actualización
• componentWillReceiveProps(nextProps):
– se invoca justo antes que un componente montado
reciba nuevas props
– es útil para comparar lo pasado con lo futuro, por
ejemplo actualizando el estado
– no se invoca en el primer montaje
• shouldComponentUpdate(nextProps, nextState):
– se invoca antes de re-renderizar un componente cuyas
props y state han cambiado
– la idea es determinar si realmente es necesario re-
renderizar el componente
– debe retornar true o false, no se invoca en el primer
renderizado
• componentWillUpdate(nextProps, nextState):
– se invoca justo antes de re-renderizar
• componentDidUpdate():
– se invoca justo después de la actualización
– no se invoca en el primer renderizado
– sirve para operar en el DOM con el nuevo estado/props
actualizados

19. Eventos de manejo de errores
● componentDidCatch(error, info):
– un componente se transforma en una
frontera de errores al definir este método
– se invoca cuando se captura un error en el
componente o cualquiera de sus hijos, y
que no haya sido capturado antes
– permite manejar los errores, por ejemplo,
mostrando una UI distinta o mensajes de
error

20. Initialization
getDefaultProps
getInitialState
componentWillMount
componentDidMount
State changes
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
Props changes
componentWillReceivePro
ps
Unmounting
componentWillUnmount
render
First time
After first time
Ciclo de vida de un componente

21. Eventos
● Los componentes React/HTML aceptan los
“mismos” eventos que el HTML de verdad…
● Se escriben en camelCase: onClick, onChange,
etc…
● Como valor del handler, debe ir una función, y no
un string!
● Típicamente el handler es un método de la
clase/componente, que debe ser asociado con
bind

22. IIS Express
Project Templates
React Toolchain
ASP.NET
React
IIS Express
Project Templates

23. Node.js Package Manager
npm
23

24. Webpack
Esta herramienta se centra en simplificar la paquetizaciónde una web y nos permite
trabajar con módulos ES6, pudiendo generar código compatible ES5.

25. Typescript
Typescript es un lenguaje open source, cuyo resultado de transpilación puede ser ES5 o ES6 (es
decir javascript), ideado por Microsoft, adoptado por empresas como Google.
Es 100% compatible con typescript, solo tenemos que hacer la prueba y renombrar un .js a .ts y
sigue funcionando.
¿ Qué nos da? Dos características principales: tipos + intellisense y errores en tiempo de
transpilación… dejándonos también puerta abierta a lo dinámico (e.g. any). PRODUCTIVIDAD
El objetivo de typescript es que en unos años desaparezca, si una versión más moderna de ES
incorporar dicho nivel de productividad

26. ¿Por qué Typescript?
26

27. Visual Studio
27

28. 28
https://github.com/aspnet/JavaScriptServices
• A set of client-side technologies for ASP.NET Core
– Use Angular / React / Vue / Aurelia / Knockout / etc.
– Build your client-side resources using Webpack.
– Execute JavaScript on the server at runtime.
• A set of NuGet/NPM packages that implement functionality
for:
– Invoking arbitrary NPM packages at runtime from .NET
code
– Server-side prerendering of SPA components
– Webpack dev middleware
– Hot module replacement (HMR)
– Server-side and client-side routing integration
– Server-side and client-side validation integration
– "Lazy loading" for Knockout apps
ASP.NET CORE JavaScript Services
.NET

29. ASP.NET Core JavaScript
Services for React
Webpack Dev Middleware and Hot Module Replacement
• You don't have to run webpack manually or set up any file
watchers
• The browser is always guaranteed to receive up-to-date
built output
• The built artifacts are normally served instantly or at least
extremely quickly, because internally, an instance of
webpack stays active and has partial compilation states
pre-cached in memory
SPA fallback route
Server-side pre-rendering
<div id="react-app" asp-prerender-
module="ClientApp/dist/main-server">Loading...</div>

30. Demo
react con Visual Studio
30

31. Intro Redux

32. Intro Redux
Redux es un contenedor de estado para aplicaciones javascript.
Nos permite crear aplicaciones que tengan un comportamiento consistente.
Se puede ejecutar en diferentes entornos (cliente, servidor, nativo), y desde
diferentes librerías (angularjs, react…)
Es fácil de añadirle pruebas unitarias
Sólo pesa 2Kb

33. Esquema Redux
Container
Component
Reducers
Validations
StateStateState
Props - Action
State (readonly)
Updates + render
Actions
Update
State
Presentation
Component
Props
Dispatch
Action

34. State
Tenemos que pensar del Estado que le llega a un component de React como si de
un fotograma de un videojuego se tratase.
El fotograma actual no se puede modificar, puedo enviar mensajes para configurar
el siguiente.
es decir el estado actual que llega al componente es de solo lectura / inmutable /
desconectado, a la siguiente modificación le llegara un nuevo estado.
¿ Cómo hacemos esto eficiente… muy eficiente ? Direcciones de memoria.

35. State
{fondo: gris, estado: encogido} {fondo: gris, estado: estirando} {fondo: gris, estado: estirado}
Reducer calcula
siguiente estado
Se lanza render del
componente
Reducer calcula
siguiente estado
Se lanza render del
componente
Si hacemos una
modificación
directamente en el
fotograma se pierde

36. Alberto Diaz Martin
alberto.diaz@encamina.com - @adiazcan

37. Para estar al loro de nuestros próximos eventos…¡síguenos!
ENCAMINA @ENCAMINA+Encamina Piensa en Colores ENCAMINA
MyENCAMINA
ENCAMINA.TV encamina_piensa_en_colores
Encamina Piensa en Colores