TL;DR

Para una mejor experiencia de desarrollo de React Native en Windows, recomiendo fuertemente utilizar VS Code. Con dicho editor pude hacer debugging React Native tanto en Genymotion para Android así como desde mi dispositivo remoto para iOS.

Mi experiencia

Nuclide puede que sea la mejor experiencia para debugging web. Pero cuando se trata de desarrollo mobile -y especialmente en dispositivos iOS siendo un usuario Windows- tiene varios faltantes que deben ser resueltos con algunos programas externos que logran cubrir dichos huecos -aunque no todos.

Luché literalmente un par de semanas para tener una buena configuración general hasta que logré codificar React Native con Flow y ESLint. A nivel codificación propiamente dicho funcionó excelente -especialmente en relación a la inteligencia del código. Estaba muy entusiasmado.

Intentando debugguear

Entrados varios días de desarrollo, tuve la necesidad de comenzar a debuguear la app. Y ahí es donde, como usuario de Windows, empecé a sufrir sentir la ausencia de soporte oficial (Facebook enfoca Nuclide específicamente al desarrollo en Mac). De todos modos, encontré algunas soluciones en cuanto a lo que debugging respecta.

Mi caso específico de entorno y herramientas de desarrollo es:

Lo complicado de toda la investigación era encontrar referencias cruzadas entre CRNA (React Native Create App), Expo y React Native Cli. En todos los casos, el problema con Nuclide Inspector es que:

  1. El packager que utiliza difiere del que utiliza Expo para lanzar la app.
  2. Al momento de conectar con el packager, lo hace buscando la conexión en un puerto fijo que no se puede configurar de ningún modo y se debe intentar hacerlo modificando archivos en los módulos instalados como dependencias del proyecto.

Adicionalmente, casi todos los casos de éxito de remote debugging en dispositivos iOS eran tutoriales de desarrolladores Mac. A medida que avanzaba en mi investigación mi frustación y decepción crecián: el único modo de debuggear hasta ahora era:

  1. Levantar el “Start remote JS debugging”.
  2. Utilizar la Chrome Dev Tools
  3. Incluir “debugger;” en donde quisiera que el código realice un breakpoint.

De ese modo podría ver el estado de las variables. Ahora bien, si quería realizar modificaciones en el código tendría que volver a Atom sin poder realizar las modificaciones allí mismo (como cuando realizamos js debugging en web).

React Native Debugger

Si bien nunca llegué a tener la mejor de las experiencias con el debugging, React Native Debugger me permitió obtener la posibilidad de incluir breakpoints en su programa (basado en Electron). Comprende mejor el sourcemap de los archivos. Aunque es lo máximo que pude avanzar. No logré en ningún momento modificar el archivo local tal como suelo hacer con las Chrome Dev Tools.

Conclusión

En el contexto de Windows, Nuclide es un gran avance en términos de codificación de nuevas tecnologías. Pero tal como advierten en su propio sitio web no tiene aún compatibilidad oficial con Windows y esa frase se hizo real cuando de debuguear se trata.

¿La solución? Utilizar VS Code.



¡Gracias por tu tiempo!

Soy nahuelhds. Si te gusta lo que hago, podés...