Rails y React, juntos pero no revueltos?
Durante las ultimas dos semanas, estuve trabajando en un proyecto (mas bien, varios) de ToDo para experimentar las diferentes formas de trabajar con React y Rails.
Tome este tutorial como base para construir los proyectos y aquí explico el proceso que seguí y las principales diferencias que encontré como principiante en ambas tecnologías.
Rails API y React
Este proyecto consta de dos proyectos separados:
- El backend desarrollado con Ruby on Rails y,
- El frontend con React
Aqui se encuentra el código fuente para el backend y en este link para el frontend.
api
Primero, inicie desarrollando una api en rails con un CRUD la cual, gracias al scaffolding, quedó lista en unos cuantos minutos.
Omiti la bandera -api para poder utilizar el frontend de rails usando su motor de vistas erb.
React app
El proyecto fue creado con create-react-app e integra redux para el manejo del estado de la aplicación.
erb
Una vez creado el frontend con react, lo replique utilizando JS dentro de motor de vistas de rails para analizar las diferencias.
Formato de endpoint
Una funcionalidad muy util de Rails que utilice en este proyecto, fue el formato en los endpoints, en los controladores se puede decidir que hacer dependiendo si se recibió un formato .html o .json. El formato .html regresa por defecto la vista asociada con el controlador.
Rails + React
Después de trabajar el proyecto de forma separada, realice este proyecto siguiendo las bases del anterior, aqui esta el codigo fuente.
webpack
El proyecto fue creado usando la bandera — webpack=react indicando que se utilizara esta libreria de javascript para el frontend.
Hacer este proyecto fue prácticamente unir el código de los dos anteriores y renderizando el componente deseado de React dentro de la vista principal del proyecto de rails.
Diferencias
Una de las principales diferencias que note al trabajar con este y otro proyectos, fueron las rutas, cada tecnología utiliza su propio sistema de enrutamiento, y al juntarlas se debe decidir cuál es el mejor para el proyecto.
Hablando del frontend en React y erb, las diferencias eran obvias desde el principio, pero al estar aprendiendo, considere una muy buena oportunidad replicar las mismas funcionalidades usando React y usando JS puro.
Como siempre, la manera en la que se crea un proyecto y las tecnologías que se usan, dependen de las necesidades del mismo y hay que considerar diferentes factores para tomar este tipo de decisiones, pero sin duda, crear estos proyectos con un objetivo educativo ha resultado muy util.
