El Arte de la Programación Funcional

Rate this content
Bookmark

La Programación Funcional (FP), un paradigma en el cual los programas están compuestos por funciones puras y sin estado, es adorado por muchos programadores por lo fácil que hace predecir, probar y depurar el comportamiento del código que escribimos. Aunque la FP tiene una reputación desafortunada como un dominio de torres de marfil lleno de jerga oscura comprensible solo para aquellos con doctorados en teoría de categorías, los conceptos fundamentales son ideas sencillas que todos podemos entender, ¡e incluso divertirnos aprendiendo!


En esta charla, crearemos arte SVG generativo como una forma de explorar conceptos fundamentales de FP como la recursión y la composición de funciones, y abordaremos los desafíos prácticos de la FP en el mundo real, como lidiar con las partes complicadas como los efectos secundarios y la aleatoriedad que no encajan en el mundo seguro y estéril de las funciones puras. ¡Al final de la charla, no solo tendremos los conceptos clave y las técnicas que necesitamos para comenzar a escribir nuestros propios programas funcionales, sino que también tendremos arte funcional bastante para admirar!

26 min
17 Jun, 2022

Video Summary and Transcription

La programación funcional es un paradigma hermoso que nos permite entender programas y cómo las entidades se comportan e interactúan. Tiene características agradables como la predictibilidad, lo que facilita las pruebas y la depuración. Exploramos cómo la programación funcional maneja los efectos secundarios y el arte generativo. Aprendemos sobre dibujar patrones y cuadrículas con funciones recursivas, manejar el estado en la programación funcional y crear moda utilizando técnicas de programación funcional. También discutimos cómo manejar la aleatoriedad en la programación funcional y cómo introducir variación y aleatoriedad orgánica al arte manteniendo la predictibilidad.

Available in English

1. Introducción a la Programación Funcional

Short description:

La programación funcional es un paradigma hermoso que nos permite entender programas y cómo las entidades se comportan e interactúan. Tiene características agradables como la previsibilidad, lo que facilita las pruebas y la depuración. Muchos programadores encuentran la programación funcional fácil de amar, pero también puede ser intimidante.

¡Oh, Dios mío! ¡Estamos en tres dimensiones! Estoy realmente emocionado por esto. Los he extrañado a todos. Es genial verlos. Nos vemos. Nos vemos. Muy lejos. Muy lejos. Estoy realmente emocionado de ver a todos sintonizando virtualmente desde casa.

Me llamo Anjana Vakil. Estoy aquí para hablarles sobre React. Solo bromeo. No. Estoy aquí para hablarles sobre la programación funcional. Que está relacionada con React, porque es el paradigma de programación detrás de la forma en que trabajamos con todo en un marco funcional como React. Así que quiero hablarles sobre la programación funcional, porque creo que es un paradigma realmente hermoso. Una forma realmente hermosa de entender qué son los programas, de qué están hechas las entidades, cómo se comportan e interactúan esas entidades. En otras palabras, un paradigma de programación que creo que es bastante genial. Y no creo que sea el único.

Porque la programación funcional tiene algunas características realmente agradables. En primer lugar, los programas funcionales son muy fáciles de predecir. Son muy previsibles. Lo que significa que son fáciles de probar para asegurarnos de que estén haciendo lo correcto. Y son fáciles de depurar para asegurarnos de que cuando no estén haciendo lo correcto, descubramos por qué y lo solucionemos. Y por eso, como programadores, creo que la mayoría de nosotros encontramos la programación funcional bastante fácil de amar. Demos un aplauso si les gusta la programación funcional. ¡Sí! Funciones. Funciones. ¡Whoo! Pero en realidad creo que la programación funcional también puede dar miedo.

2. Introducción a las Funciones Puras

Short description:

La programación funcional es programar con funciones, específicamente funciones puras. Una función pura toma valores de entrada y devuelve un valor de salida basado en esos valores. Es simple, predecible y no involucra ningún estado.

Levanten la mano si tienen un poco de miedo a la programación funcional. Sí, yo también. Yo también. Exactamente. Porque tiene esta reputación, que es desafortunada, pero probablemente bien merecida de ser este mundo académico muy opaco y aterrador lleno de palabras extrañas, como términos de teoría de categorías y cosas así, que necesitas un doctorado para entender. Así que es bastante fácil tener un poco de miedo.

Creo que la programación funcional en realidad, en sus principios fundamentales, puede ser muy simple de entender. Y así que me he propuesto tratar de hacer que la programación funcional sea más accesible. Tal vez me conozcan por esta charla que di llamada Aprendiendo Programación Funcional en JavaScript. Si no han encontrado la programación funcional antes o si conocen a alguien que no lo ha hecho y quiere hacerlo, vean esa charla. Se adentra mucho más en cómo funciona realmente la programación funcional en el fondo. Y para profundizar aún más, también pueden ver un curso que tengo en frontend masters llamado Primeros Pasos en JavaScript Funcional. Esta charla no va a adentrarse realmente en los detalles de cómo hacemos programación funcional excepto en la medida en que responda las preguntas de cómo hacemos programación funcional en el mundo real.

Entonces, ¿qué es la programación funcional solo en un nivel alto? Bueno, es programar con funciones. Eso es muy perspicaz. Mi charla ha terminado. Adiós. Ok. Es broma. La programación funcional es programar con funciones, como probablemente ya saben. De hecho, es programar con un tipo especial de funciones llamadas funciones puras. Entonces, ¿qué es una función pura? Bueno, una función pura es una función que convierte una entrada en una salida. Le das valores de entrada y devuelve un valor de salida. Y eso es literalmente todo lo que hace. Devuelve una salida basada en sus entradas. Por ejemplo, le puedes dar un ancho y una altura como entradas y tal vez devuelva ese relación de aspecto dividiéndolos como su salida. Muy simple, muy predecible, porque eso significa que una función pura es totalmente determinista. Entonces, si le das las mismas entradas, siempre te dará la misma salida. Y eso es porque no involucra ningún tipo de estado.

3. Programación Funcional y Efectos Secundarios

Short description:

La programación funcional se trata de funciones puras que no tienen efectos secundarios. Esto significa que no podemos imprimir en la consola, modificar el DOM o acceder a cualquier cosa fuera de nuestras entradas. Pero la programación funcional aún puede hacer lo que necesitamos utilizando técnicas para relacionarse con el mundo real. Vamos a explorar esto creando arte generativo, lo cual a menudo requiere efectos secundarios.

Donde el estado son valores que cambian con el tiempo, estos no existen en el mundo de la programación funcional. Entonces, cada vez que llames a una función con las mismas entradas, obtendrás la misma salida. Así que es determinista, seguro, predecible, lo cual hace felices a los programadores.

Esto también significa que las funciones puras no pueden tener efectos secundarios. Un efecto secundario es cualquier cosa que la función pueda hacer que no sea devolver su valor de retorno. Esto significa que hay muchas cosas que estamos acostumbrados a hacer que no podemos hacer en el mundo funcional. Por ejemplo, no podemos imprimir en la consola. Eso es un efecto secundario. No estamos devolviendo un valor. No podemos modificar el DOM. Eso es un efecto secundario. Estamos haciendo algo que no sea devolver un valor. Tampoco podemos mirar lo que hay en el DOM o mirar el estado del mundo exterior a nuestro programa. Por ejemplo, verificar el valor de cierto elemento para un atributo específico. Porque eso sería mirar algo que no son nuestras entradas, y eso significaría que eso podría cambiar, y podrías llamar a la función con las mismas entradas y aún obtener un resultado diferente. No podemos permitir eso.

Entonces, no podemos imprimir cosas, no podemos modificar el DOM, ni siquiera podemos mirar el DOM o cualquier otra cosa fuera de las entradas. Cada función solo puede mirar sus entradas y devolver su salida. ¿De acuerdo? Todos estamos de acuerdo, ¿verdad? Sí. Sí. Genial. Esto significa que no podemos hacer nada. ¿Qué podemos hacer? Si no podemos tocar nada, no podemos afectar nada en el mundo, lo único que podemos hacer es devolver valores. ¿Qué se supone que debemos hacer? Bueno, la programación funcional puede hacer lo que necesitamos, pero tenemos que acostumbrarnos a algunas técnicas para relacionarnos con el mundo real y seguir manteniendo nuestro mundo funcional puro y determinista. Así que esto es lo que vamos a ver hoy, cómo funciona la programación funcional en el mundo real y no en los pequeños círculos académicos matemáticos donde existe en como este otro plano de realidad. Sino en nuestro mundo donde queremos dibujar cosas en pantallas, por ejemplo. ¿Qué tal si dibujamos algo de arte en la pantalla, sí? ¡Woo! De acuerdo. Vamos a hacer arte generativo y ver cómo eso nos ayuda a entender cómo la programación funcional se relaciona con el mundo real al intentar hacer cosas, porque hacer arte generativo creo que es un muy buen ejemplo de hacer algunas cosas que la programación funcional a menudo siente que no es capaz de hacer o no es muy buena en hacer. Así que el arte generativo generalmente necesita algún tipo de efectos secundarios.

4. Programación Funcional y Arte Generativo

Short description:

Para hacer arte, necesitamos dibujar píxeles en la pantalla, incorporar repetición y motivos recurrentes, e introducir variación orgánica a través de la aleatoriedad. En la programación funcional, exploraremos cómo manejar estos aspectos mientras creamos imágenes hermosas.

Si estás tratando de hacer arte, debes dibujar algunos píxeles en la pantalla, ¿verdad? Probablemente necesitarás algún elemento de repetición. Querrás tener motivos recurrentes en tu obra artística. Es posible que necesites alguna representación del estado, porque tal vez quieras alterar diferentes partes de la imagen de diferentes maneras, cambiando valores, ¿verdad? Pero no tenemos estado, ¿entonces cómo lo hacemos? Y probablemente también quieras incluir algún elemento de variación orgánica, por lo general, el arte generativo involucra algún aspecto de aleatoriedad.

Adivina qué es la aleatoriedad? Lo opuesto a determinista, ¿verdad? Entonces, ¿cómo lidiar con todas estas cosas en un universo funcional? Esto es lo que vamos a ver hoy, y en el camino vamos a crear algunas imágenes bonitas. ¡Yay! Muy bien, vamos a hacerlo.

5. Manejo de Efectos Secundarios

Short description:

La programación funcional maneja los efectos secundarios al empujarlos hacia el borde más externo del programa, creando una capa imperativa alrededor del núcleo funcional puro. Dentro de esta capa, podemos usar funciones puras para generar el contenido deseado, mientras que la capa externa maneja los efectos secundarios. La repetición en la programación funcional se logra a través de la recursión en lugar de los bucles for.

Entonces, efectos secundarios. ¿Cómo los maneja la programación funcional? Bueno, no lo hace. Sin embargo, lo que podemos hacer cuando necesitamos realizar efectos secundarios, como, por ejemplo, dibujar algo en la pantalla o manipular el DOM, es tomar esos efectos secundarios y empujarlos hacia el borde más externo de nuestro programa. Así podemos crear, como una especie de capa protectora alrededor de nuestro programa donde todas las cosas imperativas y desordenadas relacionadas con los efectos secundarios pueden residir en ese borde más externo. Y luego, dentro de eso, podemos mantener todas las partes internas del programa puras y funcionales, es decir, deterministas, seguras, predecibles, probables y depurables.

Entonces, lo que queremos hacer es empujar todos los efectos secundarios desordenados hacia el borde externo, la capa imperativa que envolverá un núcleo funcional puro. ¿Conmigo? Veamos cómo se ve eso en la vida real. Aquí hay un ejemplo, tengo un pequeño SVG que llamo arte. Veremos si eso sigue siendo cierto una vez que veamos qué arte dibujamos. Y lo que tengo es una función que no es una función pura. Así que la llamo impure set SVG contents. Lo que hará es realizar todos los efectos secundarios. Va a tomar mi elemento de arte del DOM. Va a establecer rápidamente y de forma sucia su contenido interno HTML para básicamente hacer un efecto secundario aquí, cambiar algo en el documento. Y eso básicamente será nuestra capa imperativa externa. Así que este no es código funcional. No es puro. Es impuro. Pero todo lo que sucede dentro de él, lo que podemos hacer es usar funciones puras para generar el arte que queremos colocar allí. Dentro de esa bonita capa que está haciendo los efectos secundarios por nosotros. Entonces, lo que puedo hacer entonces es obtener una función pura, que puedo llamar get art, que tomará los parámetros que necesito darle, y luego creará el contenido de una manera pura y determinista, que mi impure SVG contents colocará en la página de una manera imperativa y no funcional. ¿Genial? Muy bien. Veo algunas cabezas asintiendo y algunas personas que todavía están despertando después del café. Estoy con ustedes.

Entonces, hagamos algunos patrones, y tal vez esa sea una buena manera de completar nuestro contenido desde nuestro pequeño programa de capa imperativa. Los patrones son divertidos para el arte generativo. Entonces, ¿cómo podemos hacer patrones donde generalmente los patrones involucran algún elemento de repetición? ¿Cómo hacemos repetición en el mundo funcional? En el mundo funcional no tenemos estado. No tenemos valores que puedan cambiar con el tiempo, lo que significa que tampoco tenemos cosas como bucles for, ¿verdad? Porque un bucle for significa que tienes algún tipo de valor que vas a incrementar o cambiar en cada iteración que hagas. Entonces, en lugar de esta forma imperativa de pensar en la repetición como una forma de iteración, en el mundo funcional vamos a pensar en la repetición como una forma de recursión. La recursión será el subparadigma que usaremos para lograr la repetición en la programación funcional.

6. Dibujando Patrones con Funciones Recursivas

Short description:

Probablemente no sea algo nuevo para la gente, pero es realmente interesante cómo se relacionan la iteración y la recursión. Intentemos crear un pequeño patrón con diamantes o cuadrados cada vez más pequeños. Podemos crear una función recursiva para dibujar este patrón. Tiene un caso base donde no hay recursión en absoluto. Si el ancho es mayor que eso, entonces haré una llamada recursiva en mi caso recursivo. Al llamarse recursivamente, obtendremos este patrón repetitivo y alucinante dibujado. Ahora, ¿qué pasa con un patrón que no tiene esa vibra? ¿Qué tal una cuadrícula estándar? ¿Cómo dibujarías una cuadrícula estándar si no puedes usar un bucle for? Veamos una forma en la que podríamos hacer esto. Podemos comenzar con un caso base donde simplemente dibujamos una casilla.

Probablemente no sea algo nuevo para la gente, pero es realmente interesante cómo se relacionan la iteración y la recursión, o al menos eso creo. Tengo otra charla donde profundizo más en cómo funcionan en JavaScript y cómo se relacionan entre sí. Si tienes curiosidad sobre la iteración versus la recursión, en realidad no son enemigos. Puedes ver mi charla sobre recursión, iteración y JavaScript, una historia de amor, de JS Heroes 2018. Pero hoy nos vamos a centrar en la recursión, ¿cómo funciona?

Intentemos crear un pequeño patrón con diamantes o cuadrados cada vez más pequeños. Lo que podemos hacer es crear una función recursiva para dibujar este patrón. La llamaré obtener patrón, porque soy muy bueno para poner nombres. Y esto tomará un par de colores y luego un ancho determinado para el tamaño que queremos que tenga este patrón. Y como cualquier función recursiva, esta será una buena función recursiva que no colapsará mi computadora, porque tiene dos partes. Tiene un caso base donde en realidad no hay recursión en absoluto, donde, básicamente, si tengo un ancho lo suficientemente pequeño, simplemente voy a devolver un rectángulo de un cierto color, el primer color, y eso es todo. Habré terminado. Sin recursión. Sin embargo, si el ancho es mayor que eso, entonces haré una llamada recursiva en mi caso recursivo. No solo voy a devolver un rectángulo o un cuadrado, en este caso, de un cierto color, sino que también lo voy a rotar un poco y luego usar mi misma función obtener patrón, con los colores intercambiados, para generar un patrón rotado más pequeño de la misma estructura con la dirección opuesta de los colores. Y al llamarse recursivamente a sí misma, obtendremos este patrón repetitivo y alucinante dibujado. Recursión simple. ¿Estamos conmigo hasta ahora? ¿Todo bien? Veo pulgares arriba. Excelente. Pulgares arriba en la transmisión en vivo. Excelente. Muy bien. Fabuloso.

Ahora, este fue un ejemplo sencillo porque este patrón parece recursivo, ¿verdad? Parece ser recursivo. ¿Qué pasa con un patrón que no tiene esa vibra? ¿Qué tal una cuadrícula estándar? ¿Cómo dibujarías una cuadrícula estándar si no puedes usar un bucle for? Si no puedes usar la iteración. Te dejaré pensando en eso mientras tomo un sorbo. ¿Cómo dibujarías esta cuadrícula de forma recursiva? Vale. No puedo escuchar lo que estás diciendo, pero te aprecio. Veamos una forma en la que podríamos hacer esto. Si es lo que dijiste, solo grita sí. Entonces, lo que podemos hacer es comenzar con un caso base donde simplemente dibujamos una casilla.

7. Dibujando Cuadrículas Recursivas

Short description:

Podemos dibujar cuadrículas de forma recursiva tratando las cuadrículas más pequeñas dentro de las más grandes. El ejemplo de código muestra cómo determinar el ancho y alto de cada casilla y dibujar recursivamente el resto de la fila y toda la cuadrícula. Al pasar diferentes funciones a la función obtenerCasillas, podemos cambiar lo que se dibuja. Pasemos a algo más interesante introduciendo la noción de estado y un valor cambiante.

Solo una casilla. No es mucho pedir. Y luego lo que podemos hacer es verificar. ¿Estamos intentando dibujar más casillas que esta? ¿Tenemos más columnas y filas para dibujar? Y si es así, entonces podemos tratar esas como cuadrículas más pequeñas y podemos dibujar cuadrículas de forma recursiva.

Por ejemplo, podemos dibujar una cuadrícula recursiva que va hacia la derecha. Eso dibuja el resto de la fila después de mi pequeña casilla base. Y luego podríamos hacer otro caso recursivo donde dibujamos todas las columnas y filas debajo de mi primera fila.

Entonces esto es lo que podría verse en código. Sé que esto es mucho. Ten paciencia. Pero lo que tenemos es un caso base donde básicamente estamos calculando a partir del ancho y alto que queremos y el número de columnas y filas que queremos, estamos calculando cuál debería ser el ancho y alto de esta casilla en particular. Y básicamente, lo estamos devolviendo. Y si no tenemos más columnas o filas además de una, entonces hemos terminado. Pero si tenemos más columnas, eso significa que necesitamos dibujar el resto de la fila. Así que vamos a llamar recursivamente a esta función, que he llamado obtenerCasillas, para obtener este patrón de casillas. Vamos a llamar a obtenerCasillas para dibujar todo el resto de esta fila hacia la derecha. Básicamente, dibujando otra área de casillas que tiene un ancho reducido y solo una fila. ¿Entendido? Y luego, si tenemos más filas debajo de eso para dibujar, estamos haciendo, nuevamente, otra llamada a obtenerCasillas con un número reducido de filas y todas las columnas, por lo que básicamente estamos dibujando el resto completo del búho. ¿Entendido? Muy bien.

Entonces lo que tenemos es que podemos usar nuestra función obtenerCasillas. Y lo que estamos haciendo es pasar una pequeña función hacerCasilla. Esto también tiene una vibra muy funcional, ¿verdad? Pasar funciones. Porque luego podemos cambiar lo que hace esa hacerCasilla para dibujar cosas diferentes. Ahora mismo, estoy pasando una casilla muy básica que simplemente dibuja un pequeño rectángulo naranja. Y esto es lo que obtenemos. Obtenemos nuestra bonita cuadrícula de 5 por 5 cuando llamamos a obtenerCasillas con nuestra función hacerCasillaBásica. ¿De acuerdo? Genial. Ahora intentemos hacer algo más interesante.

Muy bien. Para hacer algo más interesante que tener el mismo cuadrado repetido una y otra vez, vamos a necesitar alguna noción de estado, alguna noción de un valor cambiante.

8. Manejo de Estado en Programación Funcional

Short description:

En la programación funcional, manejamos el estado representándolo con datos. Pasamos el estado actual como entrada a una función y devolvemos un nuevo objeto que representa el estado actualizado. Esto nos permite realizar un seguimiento de nuestra posición en la imagen u otra información relevante. Aplicaremos este principio para dibujar un patrón de tablero de damas utilizando un array de colores y un índice para determinar el color actual. Al cambiar el índice en el objeto de estado devuelto, podemos crear diferentes patrones.

¿Verdad? Pero no tenemos estado. Es tierra funcional. Todo lo que tenemos son valores. No tienen tiempo. Cada llamada a cada función que hacemos con los mismos valores nos dará lo mismo. Entonces, ¿cómo manejamos el estado? Bueno, lo que podemos hacer es representar el estado que nos importa con data. Y en una determinada llamada a una función, vamos a pasar cualquier entrada que la función necesite, junto con el estado actual del mundo que esta función pueda necesitar. Y luego lo que podemos hacer es devolver no solo el valor de salida de esta función, sino también un nuevo objeto actualizado. No el objeto antiguo modificado, sino un objeto completamente nuevo que representa un nuevo estado del mundo en caso de que haya cambiado. Entonces, tratando el estado como data y tratándolo como parte del valor de retorno y la entrada podemos realizar un seguimiento de dónde estamos en la imagen o en el tiempo o en lo que estamos tratando de hacer. En este caso, será dónde estamos en la imagen. Entonces intentemos usar este principio para dibujar una pieza de arte un poco más interesante donde tenemos un tablero de damas. Ahora estoy usando la misma función obtenerCasillas donde va a dibujar una cuadrícula. Pero esta vez, en lugar de pasar mi casilla básica, voy a pasar una casilla a cuadros donde lo que vamos a hacer es pasar un array de colores y realizar un seguimiento del estado, entre comillas, con un índice que me dirá qué color estoy usando actualmente. Entonces, luego cambiaré ese índice en la nueva pieza de estado que devuelvo de esta función, que luego puedo usar para pasar a la siguiente llamada a esta función y comenzar con un color diferente. Entonces, si paso dos colores, esto cambiará entre ellos. Y si paso un array más largo, rotará uno tras otro a través de ellos. ¿Genial? Así obtenemos este patrón de tablero de damas. ¿Conmigo? De acuerdo, muy bien.

9. Creando Moda con Programación Funcional

Short description:

Podemos crear moda utilizando las técnicas que hemos aprendido hasta ahora. Averigüemos cómo crear este patrón y hacer algo de moda genial.

Entonces, es como, genial, podemos jugar a las damas, supongo. Pero, ¿qué más podemos hacer con esto? Bueno, no sé si te has dado cuenta o si esto te recuerda algo, pero en realidad podemos hacer moda, chicos. ¡Whoo! Muy bien. Entonces, no sé si la gente en casa puede verlo, y pido disculpas por el caos geométrico de este atuendo. ¿Pero te gusta mi atuendo? Gracias. Es funcional. No, así que encontré estos pantalones en una tienda en Budapest, Hungría, llamada Palmetta Design, saludos a los diseñadores del mundo, haciéndolo posible. Y, por supuesto, pensé, A, necesito estos pantalones, B, necesito descubrir cómo hacer este patrón. Lo cual es lo que voy a hacer que todos ustedes hagan ahora mismo. Entonces, básicamente este es el patrón que necesitamos para hacer algo de moda genial. ¿Cómo harías esto utilizando solo lo que hemos visto hasta ahora? Oh, estamos pensando, estamos pensando. Veo mucho rascarse la cabeza, veo muchos asentimientos, veo mucho eh, muy bien, vamos a ver.

10. Creando Cuadrículas Regulares

Short description:

Para crear una cuadrícula con un aspecto más regular, podemos rotar el patrón existente. Al hacer zoom, podemos ver que el patrón consta de cuatro tableros de ajedrez diferentes. Ya tenemos las funciones para dibujar cada tablero de ajedrez, por lo que podemos combinarlos en una sola baldosa y usarla como función de enlazado. Después de rotar todo, obtenemos nuestro resultado final.

Entonces, porque lo que tenemos está un poco desequilibrado, primero vamos a tomar esto y notar que si rotáramos todo o desrotáramos, obtendríamos una cuadrícula con un aspecto más regular. Y si te fijas aquí, en realidad es la misma baldosa, el mismo patrón que se repite una y otra vez. Así que echemos un vistazo a uno de estos fragmentos de patrón y acércate, ¿notas algo? Esto son cuatro tableros de ajedrez diferentes. Entonces, lo que tenemos es un gran tablero de ajedrez cuadrado, que ya sabemos cómo dibujar, luego tenemos uno estrecho y uno ancho, que comienzan con el color alternado para que se alineen correctamente con la alternancia. Y luego tenemos otro pequeño cuadrado. Entonces, sabemos cómo dibujar estos cuatro tableros de ajedrez diferentes. Ya tenemos una función que lo hace. Entonces, lo que podemos hacer es tomar esos cuatro tableros de ajedrez y combinarlos en una sola baldosa y usarla como función de enlazado que pasamos a nuestro getTiles. Y luego rotamos todo y ya está.

11. Creando Patrón de Tablero de Ajedrez

Short description:

Este código crea un patrón de tablero de ajedrez concatenando diferentes tipos de tableros de ajedrez y verificando si es necesario voltear el primer color para obtener un patrón alternado. Muestra la programación funcional aplicada a la moda.

Entonces, aquí hay un montón de código. Pero básicamente, esto está haciendo exactamente lo que acabo de describir. Entonces, lo que tenemos es que simplemente elegimos una proporción de qué tan lejos queremos que sea esa división ancha y estrecha. Estamos calculando las dimensiones y luego estamos creando el tablero de ajedrez grande y cuadrado, el estrecho aplastado, el ancho aplastado y el pequeño cuadrado. Y básicamente los estamos concatenando todos juntos en un único valor de retorno. Y luego, la única parte interesante que estamos haciendo es verificar si, en función del número de casillas en uno de esos tableros de ajedrez, si es par o impar, vamos a decidir si necesitamos voltear el primer color para que todo se alinee correctamente y obtengamos el patrón alternado. Pero eso es básicamente todo. Entonces, lo que tenemos ahora es una programación funcional aplicada a la moda. Estoy bastante orgulloso de nosotros. No sé ustedes. Pero sí. ¡Uf! Ok.

12. Manejo de la Aleatoriedad en la Programación Funcional

Short description:

La programación funcional maneja la aleatoriedad utilizando la pseudo-aleatoriedad. Al generar valores basados en una semilla, podemos generar valores predecibles con la misma distribución que los valores aleatorios. El ruido Simplex es un algoritmo útil para el arte generativo, ya que crea un campo de valores que parecen aleatorios a gran escala pero tienen una transición suave entre valores a menor escala. Podemos utilizar un generador de números pseudo-aleatorios para crear un campo de ruido y consultar valores específicos basados en coordenadas. Al utilizar este campo de ruido, podemos crear casillas aleatorias seleccionando valores y colores aleatorios específicos. Esto nos permite introducir variación y aleatoriedad orgánica en nuestro arte manteniendo la previsibilidad.

Entonces, el tiempo del que no estoy seguro ahora porque no lo tengo, pero voy a seguir adelante porque lo que hemos estado viendo hasta ahora son cosas que son realmente regulares y predecibles. Ahora intentemos hacer las cosas un poco más interesantes agregando algo de irregularidad. ¿Cómo hacemos eso? ¿Cómo agregamos un poco de variación orgánica a nuestro arte? ¿Cómo incorporamos la aleatoriedad es lo que les estoy preguntando?

Entonces, ¿cómo maneja la programación funcional la aleatoriedad? Bueno, probablemente puedas adivinar. No lo hace. No hacemos aleatoriedad en la programación funcional. Porque si lo hiciéramos, entonces no podríamos predecir cuál debería ser el valor de retorno dado ciertos valores de entrada, ¿verdad? Y eso rompería todo nuestro cerebro y todas las maravillosas ventajas de la previsibilidad, la capacidad de depuración y la capacidad de prueba.

Entonces, vamos a hacer lo mismo que cualquier otra pieza de cálculo porque en realidad todas las computadoras son deterministas incluso cuando pretenden no serlo. Y vamos a utilizar la pseudo-aleatoriedad. Donde vamos a generar valores que tienen la misma distribución que los valores aleatorios, pero en realidad podemos predecir qué valores vamos a generar en función de una semilla que le damos a un generador de números pseudo-aleatorios. Entonces, el generador de números aleatorios que podemos utilizar, el generador de números pseudo-aleatorios podría ser algo como el ruido Simplex. El ruido Simplex es realmente genial para el arte generativo, porque básicamente lo que hace es generar un campo de valores, como una cuadrícula de valores para ti, que si te alejas y lo ves a gran escala, parece totalmente aleatorio. Pero si te acercas y ves una parte más pequeña del campo de ruido que genera, en realidad puedes ver que los valores están relacionados entre sí, por lo que obtienes esta agradable transición suave y orgánica de un valor pseudo-aleatorio al siguiente. Entonces, este es un algoritmo realmente útil para hacer arte generativo. Y lo que podemos hacer es obtener un paquete de ruido Simplex de una fuente muy impura del mundo exterior, pero luego podemos obtener de manera impura un campo de ruido que nos dará de manera predecible los mismos valores aleatorios. Entonces, cómo funciona esto es si instancio un campo de ruido con este algoritmo, con una cadena en particular como una semilla, obtengo una cuadrícula 2D determinada que luego puedo consultar en un punto determinado y obtener un valor determinado. Así que tomo mi campo 2D. Le doy una coordenada x, y y obtengo un valor. Y si genero este campo con una semilla diferente, obtendré un valor diferente. Si genero un nuevo campo con la misma semilla, obtengo el mismo valor. Esto es determinista. Es pseudo-aleatorio, no es realmente aleatorio. Pero para nuestros propósitos, funciona igual de bien. Y lo que tenemos ahora, podemos hacer una función como make random tile, donde voy a pasar el campo de ruido como datos en los que se preocupa y algunos colores y un índice para cada casilla para representar cada casilla. Y luego voy a usar ese índice de casilla para determinar un valor aleatorio específico del campo de ruido que representará esta casilla, usar eso para elegir aleatoriamente un color para esta pequeña casilla, y luego incrementar mi índice de casilla en cada llamada a esta función para obtener un valor diferente para cada casilla diferente. Y lo que esto me da entonces es un campo ruidoso pero elegido de entre los colores que elegí. Y a partir de aquí, podemos comenzar a cambiar aleatoriamente o mover algunas propiedades de nuestro arte basado en estos valores que son pseudo-aleatorios pero lo suficientemente diferentes de casilla a casilla, que parecen aleatorios para nosotros, para nuestros tontos ojos humanos. Así que lo que tengo aquí es que estoy dibujando estos pequeños relojes. Cada una de estas casillas va a ser un círculo con un color particular y una manecilla de reloj particular que está girada un cierto número de grados. Y todo lo que estoy haciendo es usar el mismo concepto, usar el índice de casilla para determinar un número aleatorio de grados para girar esta casilla. Y en este caso, en realidad no estoy eligiendo un color aleatorio.

13. Recap and Conclusion

Short description:

En este caso, alternamos colores para crear un patrón agradable que se repite pero es aleatorio. Aprendimos cómo incorporar variación orgánica y simular la aleatoriedad en un mundo funcional puro. Cubrimos los efectos secundarios, la repetición con recursión, el manejo del estado como datos y la generación de valores para la aleatoriedad. ¡Estemos orgullosos de nuestro arte funcional!

Y en este caso, en realidad no estoy eligiendo un color aleatorio. Estoy alternando los colores, igual que hicimos en nuestro tablero de ajedrez, para crear este tipo de patrón agradable que se repite pero también es aleatorio. Así que este es un ejemplo de cómo podemos incorporar, incluso en un mundo funcional puro, esa variación orgánica y fingir que tenemos aleatoriedad.

De acuerdo. Estoy súper atrasado. Así que hagamos un resumen rápido. Miren todo lo que hicimos. Descubrimos cómo hacer efectos secundarios. En realidad, dibujamos algunas cosas en la pantalla al ponerlo todo en una estructura imperativa alrededor de nuestro núcleo funcional puro. Descubrimos cómo hacer repetición. Siempre con recursión. No necesitamos bucles for aquí. Estamos bien. Tenemos recursión. Descubrimos cómo hacer un seguimiento del estado tratándolo básicamente como más datos y asegurándonos de que si necesitamos cambiar algo en el estado, devolvemos nuevos datos en su lugar. Y descubrimos cómo lidiar con la aleatoriedad generando en nuestra estructura imperativa un campo de valores que luego podemos usar para simular la aleatoriedad en nuestros programas.

Así que acabamos de hacer mucho arte funcional. Estén muy emocionados y orgullosos de ustedes mismos. Creo que hicimos un gran trabajo. Pueden ver el código de estos ejemplos en observableHQ.com. Pueden seguirme en Twitter. Les agradezco mucho su tiempo, ¡y vayan y hagan arte! ¡Woo!

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.

Workshops on related topic

GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
React Advanced Conference 2022React Advanced Conference 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.