El secreto de soluciones en React. Bajo costo y rápido desarrollo.

El problema:

Palabras del cliente: “Quiero desarrollar una solución excelente, linda y barata y la quiero ahora”. ¿Te suena familiar?

¿Alguna vez tuvieron que desarrollar una solución bajo mucha presión y ni siquiera los diseños estaban listos?

¿Tuvieron problemas para integrar equipos de desarrollo y diseño o para equilibrar el tiempo, el costo y el valor dado a las partes interesadas?

Yo los tuve. Estuve luchando con estos desafíos, buscando y probando muchas soluciones diferentes con pocas mejoras tangibles.

Vi a muchos profesionales lidiando con estos mismos desafíos hasta que, junto con el equipo de Natural, hemos encontrado una posible buena solución a estos problemas, déjenme contarles al respecto…

Qué hicimos:

Después de haber probado muchas soluciones mágicas de “convertir directamente diseños a código de React” y viendo que ninguna funciona por completo, en lugar de descartarlas, nos preguntamos si podíamos usar parcialmente estas herramientas para simplificar nuestro trabajo de manera que se reduzca significativamente la cantidad de tiempo desde la etapa de diseño hasta codificar.

Queríamos integrar mejor a nuestros equipos de diseño y desarrollo, por lo que investigamos estándares de interfaz de usuario que tuvieran:

• Componentes de diseño compatibles con Sketch (nuestra herramienta para diseño)
• Componentes de desarrollo compatibles con React (nuestro lenguaje de desarrollo)

Encontramos diferentes opciones que pueden funcionar, pero vamos a tomar como ejemplo a Material-UI, ya que es una de las más conocidas y con la que solemos trabajar.

Aquí están los componentes de desarrollo compatibles con Material-UI React: https://material-ui.com/components/box/

Y aquí los componentes compatibles con Sketch: https://material-ui.com/discover-more/related-projects/#design-resources

Ahora, la parte interesante: si observan estos componentes, se ven iguales en Sketch y React de manera predeterminada, por lo que si los equipos de diseño y desarrollo comienzan desde estos componentes, lo hacen desde el mismo punto, “hablan el mismo idioma”, haciendo que cualquier cambio en estos componentes sea más fácil de entender.

Luego, cuando el equipo de diseño realiza cambios visuales en estos componentes, el equipo de desarrollo solo tiene que realizar los cambios que los hacen diferentes del predeterminado, también conocido como el delta de trabajo.

Esto reduce no sólo mucho tiempo de desarrollo, sino también de diseño, ya que se comienza con una guía de diseño y componentes preconstruidos. En lugar de pensar “¿cómo debería ser mi componente?” ahora pensamos “¿Cuáles de estos componentes satisfacen las necesidades particulares de este usuario?”, lo que hace que el trabajo sea mucho más rápido.

Pero aún así, el desarrollo lleva mucho más tiempo que el diseño. ¿No hay una manera de mejorar este flujo de trabajo aún más? ¡Sí, lo hay!, usando herramientas que conecten los diseños con los desarrolladores, un ejemplo es Invision. Los diseños creados en Sketch puede exportarse a https://www.invisionapp.com/.

Al cargar los diseños en Invision, encontraremos los assets y también, podemos ver el “CSS”. Esto muestra los cambios realizados en el componente respecto del original en Sketch, que es el componente original en React.

El equipo de desarrollo solo tiene que copiar el CSS y hacer adaptaciones mínimas a los componentes de React para lograr la misma apariencia.

Conclusión:

Utilizar herramientas como Invision y bibliotecas compatibles con Sketch y React es una excelente manera de organizar nuestro trabajo.

Hemos reducido el tiempo de diseño y desarrollo entre un 25% y un 35%, lo que nos permite crear soluciones excelentes, más baratas y con menor tiempo para nuestros clientes.

¿Ustedes qué técnicas de trabajo utilizan? ¿Conocen alguna otra más eficaz? Esperamos que este posteo les haya sido útil y nos dejen sus comentarios.