elm-lang.org es un proyecto web oficial implementado con el lenguaje Elm, conocido por sus mensajes de error claros, excelente rendimiento y archivos de recursos eficientes. Esta guía técnica detalla los pasos necesarios para compilar y desplegar el proyecto en entornos de producción, partiendo desde el código fuente.

Preparación del entorno y obtención del código fuente

Para iniciar el proceso de construcción, es esencial configurar las herramientas requeridas. El proyecto utiliza Elm como lenguaje principal, por lo que se necesita el compilador de Elm. Además, los scripts de automatización dependen de Node.js y el gestor de paquetes npm.

Primero, clona el repositorio del proyecto en tu máquina local:

git clone https://gitcode.com/gh_mirrors/el/elm-lang.org
cd elm-lang.org

El archivo de configuración clave es elm.json, que define parámetros como el tipo de proyecto, directorios de origen, versión de Elm (0.19.1) y dependencias como elm/browser, elm/core, y elm/html.

Análisis del script de construcción: flujo de trabajo de build.sh

El proyecto incluye un script denominado build.sh que automatiza la copmilación. Ofrece dos modos: producción (prod) y desarrollo (dev). A continuación, se desglosa su funcionamiento.

Selección del modo de compilación

El script verifica los argumentos de línea de comandos para determinar el modo:

if [ $# -ne 1 ]; then
    echo "Se requiere un argumento para ./build.sh, por ejemplo: ./build.sh prod o ./build.sh dev"
    exit 1
fi

En modo producción, se aplica la bandera --optimize para optimizar el código y se usa uglifyjs para comprimir archivos JavaScript. En modo desarrollo, se omite la optimización para acelerar la compilación y facilitar la depuración.

Verificación e instalación de dependencias

El script comprueba si Elm y uglifyjs están instalados; de lo contrario, los instala mediante npm:

if ! [ -x "$(command -v elm)" ]; then
    npm install elm@latest-0.19.1
fi
if ! [ -x "$(command -v uglifyjs)" ]; then
    npm install uglify-js
fi

Manejo de recursos estáticos

Durante la construcción, los recursos del directorio static, como hojas de estilo CSS, archivos JavaScript e imágenes, se copian al directorio destino _site:

cp -r static/* _site/

Proceso central de compilación: de código Elm a páginas HTML

Compilación de páginas

Los archivos de origen de las páginas se encuentran en el directorio pages, donde cada archivo .elm se compila a JavaScript y luego se genera una página HTML. En producción, se aplica compresión adicional:

for archivo in $(find pages -type f -name "*.elm")
do
    elm make $archivo --optimize --output=salida.js > /dev/null
    uglifyjs salida.js --compress 'pure_funcs="F2,F3,F4,F5,F6,F7,F8,F9,A2,A3,A4,A5,A6,A7,A8,A9",pure_getters,keep_fargs=false,unsafe_comps,unsafe' \
      | uglifyjs --mangle \
      | makePageHtml pagina.html nombre
done

Construcción del editor en línea

El editor de código ubicado en editor se procesa fusionando y comprimiendo archivos JavaScript relacionados con CodeMirror y el código Elm del editor:

cat editor/cm/lib/codemirror.js \
    editor/cm/mode/elm.js \
    ... \
    | uglifyjs -o _site/assets/editor-codemirror.js

(cd editor ; elm make src/Page/Editor.elm --optimize --output=editor.js)
uglifyjs editor/elm.js --compress ... | uglifyjs --mangle -o _site/assets/editor-elm.js

Compilación de ejemplos de código

Los ejemplos en examples se compilan a páginas HTML para visualización en línea:

for archivo in $(find examples -type f -name "*.elm")
do
    elm make $archivo --output=_site/examples/_compiled/ejemplo.html > /dev/null
    cat $archivo | makeExampleHtml ejemplo.html nombre nombre dependencias
done

Proceso de despliegue: desde compilación local hasta producción

Pruebas de compilación local

Los archivos del sitio estático se generan en _site. Para pruebas locales, puedes usar un servidor de archivos estático, como el integrado en Python:

cd _site
python -m http.server 8000

Accede a http://localhost:8000 en el navegador para verificar el sitio.

Despliegue en entornos de producción

Como sitio estático, elm-lang.org puede alojarse en servicios como Nginx, Apache, Netlify o Vercel. Los pasos generales son:

1. Ejecutar la compilación en modo producción: ./build.sh prod
2. Subir el contenido de _site al directorio raíz del servidor web.
3. Configurar el servidor para manejar el modo de historial de HTML5 si es necesario.

Para Nginx, una configuración típica podría ser:

location / {
    try_files $uri $uri/ /index.html;
}

Consideraciones y recomendaciones de optimización

Durante la compilación, pueden surgir errores como dependencias faltantes o problemas de sintaxis. El compilador de Elm ofrece mensajes detallados para facilitar la depuración. Se recomienda:

• Verificar que la versión de Elm sea 0.19.1.
• Asegurar que las dependencias estén instaladas con elm install.
• Revisar los mensajes de error para corregir el código.

Para mejorar el rendimiento, considera estas estrategias:

• Utilizar CDNs para la entrega de recursos estáticos.
• Habilitar compresión Gzip o Brotli.
• Optimizar imágenes usando formatos y tamaños apropiados.
• Implementar políticas de caché del navegador.