Aplicaciones web en varios dispositivos

Estos días estoy participando en un reto colaborativo que se llama cien días de código. El experimento consiste en dedicar una hora al día a escribir código durante cien días, a ver qué sucede. Tus habilidades como programador mejoran notablemente a la vez que aprendes cosas nuevas de otros desarrolladores.

Se puede seguir en Twitter mediante el hashtag #100DaysOfCode.

Me gusta porque hace hincapié en el hecho de que uno mejora sus habilidades técnicas como programador a medida que se involucra en proyectos de programación, valga la redundancia.

Programando se aprende a programar.

Así pues, como Phileas Fogg en La vuelta al mundo en ochenta días, me he propuesto escribir en cien días una aplicación que genera formularios dinámicos (un form builder) y he creado un repositorio en GitHub que se llama programarivm/formbuilder.

Sí, como Phileas Fogg, déjame soñar un poco y que alguna empresa compre mi software, por qué no.

¿Qué es un software generador de formularios?

Los generadores de formularios dinámicos ayudan a los administradores a crear formularios HTML para que otras personas puedan integrarlos fácilmente en sus páginas web. De este modo los usuarios pueden cumplimentarlos posteriormente.

Ejemplo típico: una plataforma de email transaccional que permite crear formularios de suscripción mediante una interfaz web de usuario amigable.

La gracia está en que los formularios HTML se crean sin necesidad de conocer el lenguaje de marcas de la World Wide Web pero esto que se dice tan rápido tiene sus entresijos; de hecho hay empresas que ofrecen generadores de formularios dinámicos a cambio de dinero.

¿Desarrollamos esta app web juntos en equipo?

Voy a aprovechar el reto de los cien días de código para crear un producto mínimo viable (MVP) para una startup, o al menos intentarlo. De momento, mi repositorio de GitHub tiene como objetivo implementar la parte cliente, o frontend si lo prefieres, del creador de formularios dinámico. Un poco más tarde se integrará con una API en la parte servidora para lo cual utilizaremos PHP.

Estoy utilizando React junto con el patrón de diseño de software Redux y los nuevos Hooks.

Si bien la aplicación no es excesivamente compleja, tampoco es del todo sencilla, y precisamente por esta razón es interesante utilizar una librería como React. Redux nos ayudará a escribir un código limpio y sencillo, fácil de entender para otras personas, de acuerdo a unas buenas prácticas ya conocidas en la comunidad de desarrolladores JavaScript.

O sea, vamos a hacer las cosas bien como todo el mundo.

Si estás dando tus primeros pasos con React y Redux, es recomendable que primero te leas algunos tutoriales que explican cómo hacer las cosas desde el principio. Pero si eres de los que tiene un estilo de aprendizaje que observa reflexivamente desde varias perspectivas te invito a visitar mi repositorio.

Sigue el historial de commits e intenta hacerte una idea de cómo estoy desarrollando esta aplicación compleja.

Vamos a pasárnoslo bien

En este proyecto personal intento pasármelo bien en la medida de lo posible y una de las finalidades que me he propuesto es la de escribir código sencillo.

Es una afición que descubrí hace poco, escribir código sencillo.

Que conste que no soy ningún experto en React. Básicamente estoy utilizando la experiencia que he ganado trabajando en proyectos personales con React, aunque dicho sea de paso también estoy aplicando mi conocimiento de otros lenguajes de programación, arquitecturas y librerías.

Soy consciente de que algunos desarrolladores dirán que Redux es algo complejo, pero yo no estoy de acuerdo del todo con esa afirmación. En mi opinión humilde Redux no es más que un patrón de diseño de software que, si bien utilizado, nos ayudará a construir un producto mínimo viable para una startup sin perder mucho tiempo con quebraderos de cabeza.

Lo que pasa es que no todo el mundo sabe utilizar Redux sabiamente porque un patrón de diseño es un patrón de diseño de software, es decir, nos estamos moviendo en el plano del conocimiento tácito.

El conocimiento tácito o implícito es el tipo de conocimiento que es difícil de transferir a otra persona por medio escrito o hablado.

Muchas empresas se ven desesperadas por contratar desarrolladores pero nadie dice que se aprende a programar bien en años, con la práctica, en 10 años según Peter Norvig. Supongo que hay que tener un poco de paciencia para utilizar Redux como la gran herramienta que es en realidad.

¿Por qué tienes tanta prisa? Hay que tomárselo con filosofía.

Las empresas necesitan seguir produciendo y arreglando aplicaciones aunque haya pocos desarrolladores, así que no caigas en el error de pensar que eres un mal programador porque te cuesta entender el código que han escrito otras personas en determinadas circunstancias, o que tal o cual patrón de diseño es malo porque hay prisa.

¡Tú puedes conseguirlo!

Volviendo a nuestro reto de los cien días de código, ¿seremos capaces de construir una aplicación compleja con pocas líneas código? Es curioso que los expertos programadores escriban código sencillo de modo que un principiante pueda entenderlo sin problemas. Habremos cumplido el objetivo si nos lo pasamos bien escribiendo código complejo de calidad que funciona bien.

No sé cuál es tu experiencia previa con React y Redux pero tampoco creo que sea demasiado importante para crear un MVP en el contexto de los cien días de código. ¿Qué dice tu intuición? Espero que el siguiente vídeo ayude a entender un poco mejor de qué va todo esto de almacenar el estado global de una aplicación React en un store Redux.

Figura 1. Depurando la app con la ayuda de Redux DevTools

El vídeo muestra cómo añadir etiquetas input, select y textarea. La aplicación se depura con la extensión Redux DevTools en el navegador Google Chrome.

Ahora te cuento un secreto...

Hoy es el quinto día y no hay nada más implementado. La app solo permite añadir etiquetas HTML muy básicas como muestra el video anterior, pero dentro de poco añadiré unos graciosos botones para borrar y editar las etiquetas HTML porque, claro, se trata de un formulario dinámico.

También te puede interesar leer esto...

Previous Post Next Post