Nuestra aplicación Django de 2014 tiene un componente de código JavaScript (client-side) construido a la vieja usanza, con pruebas y modularizado, pero a la viaja usanza. Las pruebas estan escritas en Jasmine/Karma y la modularización está hecha en base «namespaces«. El bundle productivo es generado por Django.

A partir de ciertas necesidades de evolución funcional y de mejorar la experiencia de usuario decidimos llevar la parte visual de nuestro componente a React. Alguien podría preguntarse porqué React y no algún otro como Vue o Angular. La elección está basada en dos cuestiones. En primer lugar no queremos hacer una SPA, sino simplemente reemplazar componente dentro de un sitio existente. Este es uno de los escenarios explícitamente atacados por React a punto tal que ya en el tutorial inicial nos muestra como hacerlo. El otro tema es que en breve tendremos que rehacer nuestra aplicación mobile para lo cual apuntamos a React Native así que encarar este componente con React nos resultó una conveniente primera aproximación al mundo React.

A la pasada, aprovechamos y, decidimos actualizar el stack del proyecto. En primer lugar decidimos quedarnos en JavaScript (en lugar de pasar TypeScript) al mismo tiempo elegimos NPM + WebPack + Babel. También pasamos de Jasmine a Jest para los tests.

Uuuufffff. Durísimo. Si bien yo ya estaba familiarizado con lenguaje JavaScript (sintáxis, características del lenguaje, etc) estaba bastante ajeno a las cuestiones de tooling (frameworks, gestor de paquetes, bundlers, transpilers, linters, etc, etc) y meterme con estas cuestiones me ha resultado bastante desgastante. Al mismo tiempo si bien había hecho algún proyectito menor con JavaScript «moderno», en esos casos había comenzado desde cero utilizando un stack preconfigurado donde ya de entrada tenemos todo el tooling cableado. Pero en este caso teníamos una base de código existente y tuvimos que ir haciendo nosotros mismos la elección y cableado de todo el tooling. La parte positiva de esto es que nos permitió entender ciertas cuestiones con un nivel de detalle tal que al usar el stack prearmado uno ni se entera.

La cantidad de opciones existente y el vértigo de evolución de las herramientas JavaScript creo que no tiene igual en otros lenguajes. Esto lleva a que las posibilidades combinación de herramientas sea realmente muy grande y a la hora de tener que buscar información de un stack específico, todo sea más trabajoso. Esto queda muy en evidencia cuando lo comparamos con otros lenguajes donde las opciones son mucho más acotadas. Personalmente vengo muy acostumbrado del mundo .Net/C# donde en general hay una forma de hacer las cosas, si bien en ocasiones existen alternativas la comunidad ha decantado claramente hacía ciertas opciones que se han convertido en un estándar de facto. En el medio de toda esta movida fui a dar con la página stateofjs.com que realizada una encuesta y provee un interesante informe sobre la evolución del uso de las herramientas en el mundo JavaScript que confirma en cierto modo mi sensación de vértigo.

En fin, el proyecto ya está encaminado y en siguientes post iré compartiendo como hemos resulto distintas cuestiones particulares.