👁 NoCodeTrend #6 - Hacia el desarrollo visual
En esta edición de la NoCodeTrends, hablamos de la tendencia de escapar del término no-code y acercarnos hacia el término "desarrollador visual".
Las NoCodeTrends son reflexiones acerca del futuro del movimiento No-code, reflejando las tendencias que vamos viendo en el ecosistema.
Si te parece interesante, no hay nada que nos ayude más, que que la compartas.
✨ TL;DR
El término “desarrollador visual” permite describir con mayor precisión una gran parte del movimiento no-code. Reflexionamos sobre qué término tiene más sentido emplear.
📖 El contexto
El movimiento no-code, ha cogido una gran popularidad en los últimos años, aunque sea algo que viene realmente de lejos, como te contábamos en nuestra primera NoCodeTrend. (Si no la has leído, aquí te dejo el enlace).
Sin embargo, un sentimiento generalizado al hablar de la democratización que aporta el No-code es la sensación de que es algo fácil, únicamente pensado para construir pequeños artefactos, validar ideas o crear MVP.
En nuestra experiencia en Nocodehackers y minimum.run, hemos visto que usado de la manera correcta y en el contexto adecuado, puede ser una opción perfectamente robusta y válida para crear productos y artefactos digitales que impacten en miles de personas, siendo alternativa perfectamente válida al desarrollo tradicional.
Herramientas como Webflow, Make, Flutterflow, o Bubble - de las que siempre he dicho que están en otra liga - están alcanzando un nivel de refinamiento suficiente que hace que sea una alternativa real a la hora de empezar un proyecto.
Porque lo que haces con estas herramientas es desarrollar. Solo que de manera visual.
👀 Una breve historia del desarrollo visual
En los años 60 y 70, la gente ya estaba experimentando con representaciones gráficas de logica basados en diagramas de flujo. Herramientas como Pygmalion o GRaIL (Graphical Input Language) hacían un gran esfuerzo de vincular imágenes en la pantalla con instrucciones entendibles para el ordenador.
(Si quieres ver cómo funcionaba esta fantasía, aquí te dejo un vídeo)
Incluso Apple en el año 87, hacía sus exploraciones con softwares como Hypercard1, buscando el desarrollo más ágil y rápido de aplicaciones.
Sin embargo, más conocido por todos, probablemente sea Visual Basic - fruto de mis pesadillas y odio por el mundo de la programación - que nace en 1991 como una manera de construir aplicaciones simplemente moviendo y arrastrando bloques y elementos visuales. (Sería más bien un IDE).
Desde aquellas épocas, siempre ha habido un gran interés por facilitar la creación de Software de manera visual, sin embargo nunca hemos sido capaces de reemplazar la sencillez, agilidad y mantenibilidad de escribir código basado en texto.
Lo que parece prometedor y sencillo, muchas veces puede acabar resultando en expresiones más complejas, incluso para construir algoritmos y programas sencillos.
De hecho, hasta hay un término que particularmente me fascina: Spaghetti Code.2 Una abstracción de la lógica que tiene que hacer tu programa - una suerte de “quiero que mi programa haga esto y funciona de esta manera” - pero que luego tienes que bajar al mundo real y programarlo.
Sin embargo, en los últimos años han surgido ciertas alternativas que realmente te permiten solventar estos problemas y programar cosas con cierta complejidad sin escribir una línea de código.
Especialmente en dos sectores: el sector educativo y los videojuegos.
👧 Scratch: El lenguaje que enseñará programación a tus hijos/as
Si no conoces Scratch, es un lenguaje desarrollado por el MIT en 2002 y es una abstracción de la programación, que te permite mediante bloques interactuar con elementos de la pantalla.
Lo habitual es hacer “minijuegos” en los que “programas” las animaciones del avatar que ves en la pantalla.
Combinando bloques le puedes dar instrucciones para que por ejemplo se mueva, reproduzca un sonido o haga animaciones más complejas. De hecho, se pueden llegar a crear cosas realmente increíbles en Scratch. (Un ejemplo)
Está diseñado para que los niños puedan aprender programación, sin embargo sufre el problema de la complejidad que adquiere desarrollar sistemas más complejos, en los que es dudoso que realmente sea más sencillo que simplemente aprender la sintaxis y escribir el código.
Como herramienta de aprendizaje me parece una maravilla - consigue que miles de niños de todo el mundo se acerquen de una manera amable al mundo de la programación.
Pero no vamos a desarrollar nuestra próxima aplicación en Scratch.
Sin embargo, hay un campo en el que sorprendentemente tiene una gran acogida la programación visual: el mundo de los videojuegos.
🗑 Unity - El motor que te permite crear videojuegos sin código
El mundo de los videojuegos está bastante avanzado en lo que a desarrollo visual se refiere, gracias a motores de juegos como GameMaker o Unity, te permiten crear videojuegos en 2D o 3D de manera realmente sencilla.
Solucionan la mayor parte de la complejidad por ti, para que de una manera visual y lógica puedas construir el videojuego que tengas en mente.
Sin duda Unreal Engine y su Blueprints te permite crear juegos realmente complejos sin tener que aprender lenguaje (como tal) de programación, ya que está basado en un lenguaje visual.
A través de conectar nodos entre si, puedes crear acciones realmente complejas, creando juegos como FPS, RPG o lo que tengas en mente.
Mira, si no te lo crees aquí un tutorial para que te crees tu primer videojuego sin código.
Esto hace que sea una alternativa más “sencilla” para acercar el mundo del desarrollo de videojuegos a la gente que no sea tan técnica y que no tengan que aprender lenguajes como C# para poder empezar a construir sus videojuegos. (¿Te suena el mensaje?)
Al fin y al cabo es un lenguaje más. Simplemente que tiene una fuerte componente visual asociada - pero que es necesario aprender y asentar las bases lógicas de cómo funciona el mundo de la programación - nadie te libra de esto.
❌ No-code no significa fácil.
Escuchaba esta semana en el podcast de Product Hackers a Victoriano Izquierdo (founder de Graphext) que argumentaba con mucho criterio que la asociación de no-code con sencillo, es totalmente errónea.
“Hay muchísima más demanda que programadores. Hay un perfil nuevo de gente que se forma por su cuenta con herramientas que no son fáciles, pero multiplican la productividad por 10 o por 100, respecto a hacerlo con código.”
”Permite que gente espabilada - no cualquiera - que antes hacía maravillas con Excel, ahora puede hacer cosas que antes nunca llegaría”
Aunque haya herramientas como Glide que prometen convertir hojas de google sheets en aplicaciones por arte de magia, en mi experiencia, enseñando a cientos de personas cómo funcionan estas herramientas, en cuanto quieres salirte del A-B-C que viene por defecto, la cosa se complica.
Por mucho que Flutterflow, Webflow o Bubble te lo hagan más sencillo, es necesario tener unas bases de conocimiento sobre cómo funciona una aplicación, una página web o incluso nociones de diseño.
Y esto es un proceso que no es sencillo.
Hay que asentar conceptos que no son intuitivos, como entender qué es una base de datos relacional - por mucho que Airtable lo haga sencillo, o cómo funciona la relación entre la interfaz y la base de datos.
Es por eso que muchas veces que caemos en la simplificación y sencillez - que es cierto que para muchas ocasiones se cumple - pero en el momento que quieres crear proyectos más complejos, deja de ser cierto.
Es ahí donde encontramos una diferenciación en el acercamiento a la creación de productos (apps, webs) completamente diferente. Y para poner el ejemplo, nos vamos a centrar en dos que hacen cosas similares: Glide y Flutterflow.
📱 Dos enfoques completamente diferentes a la hora de crear apps
Por si no la conoces, Glide es una herramienta que te permite construir aplicaciones de manera increíblemente rápida a partir de una base de datos de Google Sheets.
Simplemente ten tus datos bien organizaditos y la aplicación te generará una interfaz que puedes publicar a web - o incluso tener en tu móvil. Se pueden llegar a crear aplicaciones realmente increíbles con Glide.
Su approach es simplificar y abstraer el código.
Tú no tocas código. No puedes modificarlo de manera directa. Simplemente trasteas con los bloques predefinidos de Glide para construir tu interfaz.
¿Quieres que se vea como una lista? Ok, pulsa aquí. ¿Quieres que sea una Card? No te preocupes, pincha aquí.
Esto lo que permite es construir productos de manera increíblemente ágil, a cambio de tener una serie de limitaciones en cuanto a diseño, funcionamiento o incluso lógica.
En cambio Flutterflow tiene un acercamiento diametralmente opuesto.
No buscan darte una interfaz sencilla que te permita a partir de bloques pre-construidos construir tu aplicación, si no que te dan una serie de elementos que de manera visual puedes modificar para construir tu aplicación.
Y realmente lo que estás haciendo no es crear una abstracción que te lo haga más sencillo, si no que mediante arrastrar, modificar valores y crear lógica, vas construyendo el código de tu aplicación.
De hecho, en Flutterflow en cualquier momento puedes descargar el código en tiempo real de tu aplicación, viendo como cambia al instante cuando añades un elemento o modificas sus propiedades.
La gran diferencia es que no buscan abstraerte del código, si no acercarte a que sea mucho más rápido crear ese código.
Y esta sutil diferencia es lo que marca una diferencia de categoría entre herramientas como Glide o Softr y herramientas como Bubble, Webflow o Flutterflow.
👨🏻💻 Desarrollo Visual: ¿Qué ventajas ofrece?
Sin duda, hay dos grandes ventajas. La facilidad de aprendizaje y la rapidez.
Empezando por el principio, el desarrollo más visual permite que una persona que está empezando en el mundo, por ejemplo del desarrollo web pueda ver de manera inmediata lo que está haciendo.
Recibe un feedback instantáneo con cada cambio de propiedad.
Recuerdo cuando estaba empezando a aprender HTML y CSS que Flexbox me parecía realmente complejo. Tener que recordar si era align-center o justify-center. Probar. Darse cuenta de que estaba mal. Cambiarlo, volver a empezar.
En Webflow es tan simple como pulsar dos botones y ver el cambio en vivo y directo.
Esto proporciona que el ciclo de feedback que te lleva a aprender (equivocarte, razonar por qué, hacer cambios y ver resultados) sea mucho, mucho más rápido.
Poco a poco, vas estructurando tu cabeza de manera lógica a un ritmo mucho mayor, permitiéndote comprender conceptos complejos de una manera más ágil. Porque es necesario ir asimilando conceptos que no son baladí.
Con lo cual una persona que se acerque al mundo del desarrollo web que empiece por Webflow, probablemente tenga un acercamiento mucho más placentero y rápido que una persona en un taller de iniciación a HTML.
Been there, done that.
Llevo dos años enseñando a crear webs en Webflow y en menos de dos horas, siempre hemos conseguido que cualquier persona sin importar su background o incluso edad pueda tener al menos una Hero Section en condiciones.
La cara de la gente al ver que son capaces de hacer cosas tan complejas, es una auténtica maravilla.
Sin embargo, como es normal, acaba convirtiéndose en frustración al darse cuenta de la cantidad de conceptos que hay que interiorizar antes de poder hacer realmente lo que quieran con sus páginas webs.
Realmente, aprender Webflow es aprender HTML y CSS.
Desarrollar una web es mucho más que saber colocar bloques pre-definidos o modificar una plantilla. Tienes que entender el modelo de cajas, flexbox, grids, clases, elementos HTML, accesibilidad, responsive…
Recuerda que no-code no significa fácil. Pero sí que más rápido. Y más accesible para la mayoría.
(Te recuerdo que sólo el 3% del mundo sabe programar)
Una vez que ya eres desarrollador/a y tienes estos conceptos asimilados, estas herramientas te dan una velocidad increíble.
Puedes crear en minutos lo que te llevaría horas si lo tuvieras que escribir todo tú desde cero.
Ejemplo práctico con Flutterflow, en el que en menos de 15 minutos, tienes una aplicación con Login con Google, usuarios en Firebase y una página de inicio de tu app.
Crear diseños a medida en Webflow en semanas, no en meses. Construir apps personalizadas en semanas, en vez de meses con Bubble.
En el momento que necesites ir un paso más allá, el código siempre va a estar a tu disposición para poder exportarlo y continuar desarrollando cuando y donde quieras. (menos en Bubble).
Y aunque no sea una solución perfecta para todos los casos, es una solución más que suficiente para la gran inmensidad de casos.
He tenido la suerte de ver cómo desarrolladores cogen Webflow y en días/semanas están siendo productivos y creando webs para clientes como si fuera una segunda naturaleza.
Pero también he visto gente sin background técnico, como Francesca, que acaban convirtiéndose en auténticas desarrolladoras web.
🤝 El poder del desarrollo visual: Acercarse a perfiles no técnicos
El primer paso siempre es el más difícil.
Hay un salto increíble de dificultad (y de tiempo y dinero) entre que aprendes lo básico de HTML, CSS y cómo funciona la web a estar creando webs para clientes reales.
Sin embargo con Webflow, esto se reduce inmensamente.
Gente lista, con iniciativa y con ganas puede aprender de una manera increíblemente acelerada y sacar trabajo que pueda salir a producción.
No sin su dosis de errores, de equivocaciones y de inexperiencia, que requieren de la guía de una persona que mentorice o un curso que te guíe.
Pero es capaz de encender una chispa. ✨
La chispa de que eres capaz.
Demostrarte que puedes construir webs y que si dedicas el tiempo suficiente, podrás crear proyectos y webs que jamás hubieras imaginado que serías capaz sin tener que pasar por el peaje de aprender a escribir el código correspondiente.
Porque aunque hay gente que le atrae un editor de código, existe otro perfil que busca un aprendizaje mucho más visual y ¿intuitivo?.
Con la gran demanda de desarrolladores que existe en el mercado, vemos una gran oportunidad de acercar el mundo del desarrollo a un público más amplio, creando una nueva hornada de desarrolladores visuales.
Desarrollador/a visual: Persona que es capaz de construir productos digitales mediante una interfaz visual, sin ser capaz de escribir el código equivalente desde cero.
Por ponerte un ejemplo, dame Webflow y te construyo la UI que quieras. Ponme delante de Visual Studio y no tengo ni idea de por donde empezar.
❌ Los contras del desarrollo visual
Con esto no queremos decir que el desarrollo visual vaya a ser el único futuro.
Existen casos perfectamente válidos (y seguirán existiéndolos) en los que escribir código y aprender a programar sea la mejor solución. Me atrevería a decir que la demanda de este tipo de soluciones nunca dejará de aumentar en el corto plazo.
No tienes un control tan fino sobre cómo se estructura el código que se genera, puede que no se adapte a la manera de trabajar de tu equipo, puede que haga falta una funcionalidad que la herramienta no te permite por el momento o que incluso lo que quieras hacer sea imposible de hacer con esta herramienta.
Incluso es probable que tengas una primera versión que sea perfectamente funcional, pero necesites escalarlo para dar cabida a miles de usuarios, cuando tu solución actual deje de cumplir su objetivo. No vamos a construir Twitter sin escribir código - por mucho que hagas un clon en Bubble.
Sin embargo para una gran cantidad de retos y sobre todo, para una gran cantidad de gente, el desarrollo visual puede ser una gran manera de acercarse a una nueva profesión, dar un cambio de trayectoria o simplemente trasladar ideas en realidad.
📖 En conclusión…
El término de desarrollador/a visual se acerca mucho más a lo que vemos que más valor está aportando en el mercado ahora mismo.
No es crear pequeños artefactos para validar.
Es crear productos digitales mediante interfaces visuales.
Acercando a una mayor cantidad de gente que cree posible, gracias a su menor curva de aprendizaje y su entorno más “amigable” y menos hostil.
En mi opinión, es un término que cogerá relevancia en el futuro cercano dentro del movimiento no-code, y que describe con mayor precisión lo que hacemos en minimum.run.
Hasta aquí la NoCodeTrend.
¿Qué te ha parecido? Me encantaría abrir un debate sobre esto y conocer tus opiniones, así que respóndeme al correo con tu opinión y prometo responder cada uno de los mensajes.
Si te ha parecido útil, compártela.
https://bubble.io/blog/visual-programming/
https://blog.statebox.org/visual-programming-what-went-wrong-and-is-there-room-for-improvement-86fdf06f74f7