elm-ui: sustituir el CSS por un lenguaje de layout tipado

Aprender elm-ui produce en casi todo el mundo la misma secuencia de reacciones, y merece la pena anticiparla porque explica tanto su atractivo como su rechazo. La primera hora es de desconcierto: uno busca la manera de poner un margen y descubre que no hay margen; busca cómo centrar algo verticalmente y descubre que no hay que hacer nada especial; busca la propiedad que controla el desbordamiento y descubre que la pregunta está mal planteada. La segunda hora es de sospecha, porque todo parece demasiado fácil y uno da por hecho que la simplicidad se acabará en cuanto el diseño se complique. Y entonces llega el momento en que se entiende lo que realmente ocurrió: no se ha aprendido una biblioteca de utilidades sobre el CSS, se ha cambiado de modelo. En el nuevo modelo no existe el concepto de propiedad que se hereda hacia abajo, ni el de caja cuyo tamaño depende de la suma de siete valores, ni el de regla que gana a otra por ser más específica. Existe un elemento, existen dos maneras de agrupar elementos y existe un puñado de atributos que solo pueden significar una cosa. La pregunta interesante no es si eso basta para construir interfaces reales —basta— sino qué se descubre sobre el CSS al comprobar que basta.

Tres constructores y un árbol que se lee en voz alta

Todo en elm-ui es un valor de tipo Element msg, y ese tipo no describe un nodo del documento sino una pieza de interfaz con un tamaño y unas reglas de colocación. Hay tres formas de producirlo. La función el envuelve un único hijo y sirve para colgarle atributos o para crear una unidad de alineación. La función row coloca a sus hijos uno junto a otro en horizontal. La función column los coloca uno debajo de otro en vertical. No hay más constructores estructurales, y esa pobreza deliberada es el rasgo central del diseño: cualquier disposición, por compleja que sea, se expresa anidando filas dentro de columnas dentro de filas, de manera que la estructura visual y la estructura del código son literalmente la misma cosa y se pueden leer en voz alta sin traducir.

import Element exposing (Element, column, el, fill, padding, row, spacing, text, width)


verFicha : Persona -> Element msg
verFicha persona =
    row
        [ width fill
        , spacing 16
        , padding 12
        ]
        [ el [] (text persona.nombre)
        , column
            [ spacing 4
            , width fill
            ]
            [ text persona.cargo
            , text persona.correo
            ]
        ]

Los atributos siguen la misma economía. Un Attribute msg describe una propiedad del elemento al que se aplica, y la lista de atributos posibles es corta y ortogonal: tamaño, relleno, espaciado, alineación, fondo, borde, tipografía y poco más. Lo notable es que ninguno de ellos puede afectar a un elemento que no sea aquel al que se aplicó, con una única excepción explícita que veremos enseguida. No hay atributo que cambie cómo se dibujan los hijos, no hay atributo cuyo efecto dependa de qué otros atributos haya presentes, y no hay atributo que gane a otro por haber sido declarado en otro sitio. Un elemento es lo que dicen sus atributos, y nada más.

Tamaño y alineación como declaraciones del propio elemento

Cada elemento declara cuánto espacio ocupa mediante width y height, y los valores posibles forman un vocabulario minúsculo que cubre casi todos los casos. El valor shrink significa ocupar lo justo que necesite el contenido, y es el comportamiento por defecto. El valor fill significa repartirse el espacio disponible con los demás hermanos que también lo pidan, y admite una variante con peso para que un hermano reciba el doble o el triple que otro. El valor px fija una medida exacta. A esos se añaden límites mínimos y máximos que se aplican encima de cualquiera de los anteriores. Con eso está dicho todo lo que hay que decir sobre el tamaño, y lo importante es que el resultado es determinista: dado un contenedor y las declaraciones de sus hijos, el reparto del espacio se calcula sin ambigüedad y sin que ninguna propiedad heredada de un ancestro lejano pueda alterarlo.

import Element exposing (fill, fillPortion, height, maximum, px, width)


-- Barra lateral fija y contenido elastico
verPagina : Element msg -> Element msg -> Element msg
verPagina lateral principal =
    row
        [ width fill
        , height fill
        , spacing 24
        ]
        [ el [ width (px 240), height fill ] lateral
        , el [ width (fill |> maximum 900), height fill ] principal
        ]


-- Reparto proporcional entre tres columnas
verTercios : List (Element msg) -> Element msg
verTercios partes =
    row [ width fill, spacing 12 ]
        (List.map (\p -> el [ width (fillPortion 1) ] p) partes)

La alineación completa el cuadro y aquí aparece la única forma de influencia entre padre e hijo del sistema, que es explícita y acotada. Un elemento puede declarar centerX, alignRight, alignTop y sus compañeros, y esos atributos indican dónde debe colocarse dentro del espacio que su padre le concede. Al ir en el hijo y no en el padre, cada hermano puede alinearse de manera distinta sin que exista una propiedad de contenedor que gobierne a todos y contra la que haya que luchar en los casos particulares. El centrado vertical, que en CSS ha sido durante dos décadas el ejemplo canónico de dificultad injustificada, aquí es un atributo llamado centerY que hace exactamente lo que su nombre dice, en cualquier contexto, sin condiciones previas sobre el padre.

De la descripción a la página

El árbol de elementos no es todavía una página: hace falta una función que lo traduzca al tipo que el runtime de Elm sabe dibujar, y esa función es Element.layout. Recibe una lista de atributos que se aplican al lienzo entero —tipografía base, color de fondo, relleno global— y el elemento raíz, y devuelve el nodo estándar. Se llama una sola vez, en la vista principal, y todo lo que cuelga por debajo vive íntegramente en el vocabulario de la biblioteca. Ese punto único de conversión es la contrapartida directa de la decisión de tener un tipo propio, y es el mismo patrón que ya vimos en la lección anterior con otra biblioteca: la frontera existe, pero se ha concentrado en un lugar visible en vez de estar repartida.

import Element exposing (layout)
import Element.Background as Background
import Element.Font as Font


view : Model -> Html Msg
view model =
    layout
        [ Background.color (rgb255 30 30 46)
        , Font.color (rgb255 205 214 244)
        , Font.size 16
        , padding 24
        ]
        (verPagina (verLateral model) (verPrincipal model))

Queda una observación de fondo que conviene hacer ahora, porque cambia el modo de trabajar y no solo el modo de escribir. Como toda la disposición está en el árbol y no en un archivo aparte, leer una pantalla desconocida consiste en leer una sola función, y modificarla no exige averiguar qué reglas la afectan desde fuera, porque no puede haber ninguna. La consecuencia más sorprendente para quien llega del CSS es que desaparece el ciclo de abrir el inspector, buscar qué regla ganó y por qué, y volver al editor. Si el elemento está donde no debe, la razón está escrita en sus atributos o en los de su padre inmediato, y no hay ningún tercer sitio donde mirar.

flowchart TD
A[layout con atributos globales] --> B[column raiz]
B --> C[row cabecera]
B --> D[row cuerpo]
D --> E[el lateral width px 240]
D --> F[column principal width fill]
F --> G[el titulo]
F --> H[column lista con spacing]
style A fill:#f9e2af,color:#11111b
style B fill:#89b4fa,color:#11111b
style F fill:#a6e3a1,color:#11111b