¿Cómo hacer que estas dos librerías convivan bajo la misma casa? ¿Cómo actualizar una UI vieja basada en jQuery y traerla a esta década con React?

1. jQuery + React
Matrimonio incestuoso

2. ¿Quién soy?
Alexys Hegmann
Web Developer
I ❤️ Javascript
http://alexyshegmann.com
@yagarasu
yagarasu

3. jQuery
● Lanzamiento inicial en 2006
● Rey de facto del front end development por 10 años +
● Conocido por el famoso $(‘selector’)
● Ofrece utilerías comunes de manipulación del DOM, manejo de eventos y ajax
para facilitar el desarrollo y reducir el código necesario.
Marzo 2012
jQuery
MooTools

4. React
● Lanzado en Marzo de 2013
● Respaldado por Facebook
● Usado por Netflix y Airbnb
● Conocido por meter cosas HTML-ish dentro del JS: return (<div>It’s ok</div>);
● Librería para escribir UI de forma declarativa. Abstrae la manipulación del DOM.
jQuery
React
Abril 2018

5. ¿De dónde salió esta idea?

6. Nota importante
● Si no tienes que combinar jQuery y React,
¡No lo hagas!
● En serio, no vale la pena.
● …
🚧

7. ¡¿Por qué no?!

8. ¡¿Por qué no?!

9. ¡¿Por qué no?!

10. ¿Cómo sí?
div

11. ¿Cómo sí?
div
React’s room

12. Demo: jQuery version
Data:
o

13. ● Es fácil hacer el comportamiento
interno
● La única forma de conectar el
componente y el “espacio
exterior” es mediante funciones
globales o metiendo los handlers
al reino de Webpack.
Demo: React
intento 1 🤮
Al cambiar, se
llama al
renderer
Se inicializa el
componente en
document ready
El handler para
guardar es una
función en la
nada...

14. Demo: React
intento 2 🤮
● La API es idéntica a la versión de
jQuery
● Todo está encapsulado
● Hay que conectar props con
funciones u opciones una por
una
● Mucho boilerplate

15. Demo: React
intento 3 🤮
● La API sigue siendo idéntica a la
versión de jQuery
● Creación del widget se abstrae
reduciendo el boilerplate
● Encapsulado y con Syntax Sugar
a la Redux

16. Adapter
(jQuery UI widget)
La idea
Página
Widget
Form
Contenido, etc
Widget
(jQuery UI widget)
Widget
(React component)
Afecta

17. ¿Para qué?
● Modernización paulatina de UIs basadas en
jQuery
● Evitar refactors agresivos
● Lograr UIs muy complejas usando React
entre UIs sencillas con jQuery
● Si ya tienes una librería de componentes,
éstas se pueden usar para proyectos más
viejos.

18. Precaución
● Esto es una prueba de concepto jamás
probada en condiciones reales
● Tanto wrapper puede ser dañino para la
salud
● Entre más componentes se metan al
bundle, éste va a ser más pesado; no hay
lazy loading
👷🏾

19. Gracias
🏾🏾
https://github.com/ yagarasu / widgetizer-poc