PurgeTSS - Estilo Moderno y Optimizado para Aplicaciones con Titanium

Introducción

Desarrollar aplicaciones móviles con Titanium SDK y el framework Alloy ofrece gran flexibilidad y potencia. Sin embargo, conforme los proyectos crecen, mantener archivos de estilo (TSS) limpios, eficientes y manejables se convierte en un desafío significativo. Aquí es donde PurgeTSS entra en juego: un toolkit de código abierto meticulosamente diseñado para automatizar, optimizar y mejorar la gestión de estilos en tus proyectos de Titanium.

¿Qué es PurgeTSS?

PurgeTSS es un toolkit de línea de comandos (CLI) que introduce una gestión de estilos moderna para Titanium, inspirado en la filosofía de Tailwind CSS:

Toolkit completo: Solución todo-en-uno para la gestión de estilos en proyectos Titanium
Biblioteca de utilidades: Más de 21,000 clases predefinidas listas para usar
Purga automática: Genera el archivo app.tss optimizado basado en las clases utilizadas en tus archivos XML
Personalización avanzada: Sistema configurable de temas, colores, espaciados y clases JIT (Just-In-Time)
Soporte integrado: Para fuentes de iconos populares (Font Awesome, Material Icons, Material Symbols, Framework7)
Integración perfecta: Se ejecuta automáticamente durante el proceso de compilación a través de Alloy.jmk
Módulo de animación: Animaciones 2D Matrix y transformaciones para elementos UI
Sistema de cuadrícula: Grid system bidimensional para alinear y distribuir elementos

PurgeTSS en detalle

Cuando desarrollamos aplicaciones móviles con Titanium, uno de los mayores desafíos a largo plazo es mantener un sistema de estilos coherente y escalable. PurgeTSS transforma este aspecto del desarrollo, ofreciendo un enfoque revolucionario inspirado en los frameworks CSS modernos.

Un nuevo paradigma para estilos en Titanium

La magia de PurgeTSS comienza con su enfoque “utility-first”. En lugar de crear estilos específicos para cada componente, trabajas con una extensa biblioteca de clases utilitarias que puedes combinar directamente en tus vistas XML. Este enfoque no solo acelera el desarrollo, sino que también crea un lenguaje visual consistente a través de toda tu aplicación.

<View class="mx-2 h-64 w-screen rounded-lg bg-blue-500">
  <Label class="text-xl font-bold text-white">Hola Mundo</Label>
</View>

Con el código anterior, has definido una vista con ancho completo, altura específica, fondo azul y bordes redondeados—todo sin escribir una sola línea de TSS. Y lo mejor es que PurgeTSS automáticamente analizará tus archivos XML y generará solo el código TSS necesario en el archivo app.tss, manteniendo tus archivos .tss específicos de cada vista intactos.

Optimización automática: menos es más

Durante cada compilación, PurgeTSS analiza tus archivos XML para identificar qué clases estás utilizando realmente. Con esta información, genera un archivo app.tss optimizado que contiene exclusivamente los estilos necesarios. El resultado: archivos más pequeños, compilaciones más rápidas y un rendimiento mejorado en tiempo de ejecución.

Esta “purga” inteligente significa que puedes tener acceso a miles de utilidades sin preocuparte por el tamaño final del código. Tus archivos TSS específicos de cada vista permanecen intactos, permitiéndote combinar ambos enfoques según sea necesario.

Personalización centralizada

Uno de los aspectos más poderosos de PurgeTSS es su capacidad de personalización a través de un único archivo de configuración. En purgetss/config.js puedes definir:

Tu paleta de colores personalizada
Valores de espaciado específicos para tu diseño
Tipografía y tamaños de fuente personalizados
Tus propias clases utilitarias o sobrescribir las existentes
Clases JIT (Just-In-Time) con valores arbitrarios directamente en tus vistas

Este enfoque centralizado simplifica enormemente el mantenimiento y la consistencia del diseño, especialmente en equipos grandes o proyectos de larga duración.

Herramientas que mejoran el flujo de trabajo

PurgeTSS va más allá de la generación de estilos, ofreciendo herramientas que mejoran todo tu proceso de desarrollo:

Integración con VSCode: Genera archivos de definiciones para autocompletado inteligente de clases en tus archivos XML
Soporte para iconos: Comandos específicos para agregar y gestionar fuentes de iconos populares como Font Awesome, Material Icons y Material Symbols
Comando “shades”: Genera variaciones de color personalizadas a partir de colores hexadecimales
Módulo de animaciones: Implementa animaciones 2D Matrix y transformaciones con una sintaxis simple y declarativa
Sistema de cuadrícula: Facilita la creación de interfaces responsivas con un sistema bidimensional para alinear y distribuir elementos

<Alloy>
  <Window>
    <View class="grid">
      <View class="h-40 grid-cols-2 bg-red-200">
        <Label>Columna 1</Label>
      </View>

      <View class="h-40 grid-cols-2 bg-blue-200">
        <Label>Columna 2</Label>
      </View>
    </View>
  </Window>
</Alloy>

Más allá de los estilos estáticos

Las interfaces modernas requieren movimiento y dinamismo. El módulo de animaciones de PurgeTSS te permite agregar efectos visuales atractivos aplicando transformaciones 2D Matrix a elementos o grupos de elementos:

<Alloy>
  <Window>
  	<Animation id="myAnimation" module="purgetss.ui" class="zoom-in-105 duration-75"/>

    <Button id="myButton" class="w-48 rounded bg-green-500 font-bold text-white" onClick="animateMe">¡Tócame!</Button>
  </Window>
</Alloy>

// En tu controlador
function animateMe() {
  $.myAnimation.open($.myButton)
}

Con esta implementación, puedes aplicar animaciones básicas a cualquier elemento. PurgeTSS instala un módulo purgetss.ui.js que proporciona la funcionalidad para animaciones en tus aplicaciones Titanium.

Transformando el desarrollo en Titanium

La adopción de PurgeTSS representa un cambio fundamental en cómo abordamos el diseño de interfaces en aplicaciones Titanium. Los beneficios a largo plazo son sustanciales:

Desarrollo más rápido: La combinación de clases directamente en XML acelera la implementación de interfaces
Mantenimiento simplificado: Un sistema de estilos coherente facilita los cambios y actualizaciones
Mejor rendimiento: Archivos TSS más pequeños significan aplicaciones más ligeras
Mayor consistencia: Un lenguaje de diseño unificado en toda la aplicación
Curva de aprendizaje reducida: Los desarrolladores familiarizados con Tailwind CSS pueden transferir su conocimiento

PurgeTSS también se ha integrado oficialmente en el SDK de Titanium desde la versión 11.0.0.GA, lo que demuestra su importancia y adopción en el ecosistema de Titanium.

Al integrar PurgeTSS en tu flujo de trabajo, no solo estás adoptando una herramienta—estás adoptando una metodología moderna que ha transformado el desarrollo web y ahora está disponible para tus proyectos de Titanium.

Instalación y Uso Básico

Instalación

Instala globalmente en tu sistema:

npm install -g purgetss

Inicializa en tu proyecto:

purgetss init

Esto creará una carpeta purgetss/ con un archivo config.js para fácil personalización.

Uso Básico

Purga Automática Simplemente compila tu aplicación Titanium como lo harías normalmente. PurgeTSS se ejecutará automáticamente, escaneará tus archivos XML y generará un nuevo archivo app.tss que contendrá únicamente las clases utilizadas en tus vistas.

Ejecución Manual También puedes ejecutar PurgeTSS manualmente:

purgetss

Ejemplo: Estilos Purgados

Considera el siguiente archivo index.xml:

<Alloy>
  <Window>
    <View class="h-20 w-10/12 rounded-lg bg-gray-100">
      <Label class="text-center text-lg font-semibold text-gray-900">¡Bienvenido!</Label>
    </View>
  </Window>
</Alloy>

Después de ejecutar PurgeTSS, tu app.tss simplificado se verá así:

// Purge TSS v6.3.12
// Created by César Estrada
// https://purgetss.com

// Ti Elements
'View': { width: Ti.UI.SIZE, height: Ti.UI.SIZE }
'Window': { backgroundColor: '#FFFFFF' }

// Main Styles
'.bg-gray-100': { backgroundColor: '#f3f4f6' }
'.font-semibold': { font: { fontWeight: 'semibold' } }
'.h-20': { height: 80 }
'.rounded-lg': { borderRadius: 8 }
'.text-center': { textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER }
'.text-gray-900': { color: '#111827', textColor: '#111827' }
'.text-lg': { font: { fontSize: 18 } }
'.w-10/12': { width: '83.333334%' }

¡Los estilos no utilizados desaparecen, dejando un archivo limpio y optimizado!

Personalización

Clases y Temas Personalizados

Edita purgetss/config.js para definir espaciados personalizados, colores, o extender/crear clases utilitarias:

module.exports = {
  purge: {
    // ... opciones de purga
    options: {
      safelist: ['custom-class'], // Clases que siempre deben mantenerse
    },
  },
  theme: {
    extend: { // Extender el tema predeterminado
      colors: {
        primary: '#002359',
        accent: '#9333ea',
      },
      spacing: {
        '128': '32rem', // Nuevo valor de espaciado
      }
    },
    // También puedes definir clases personalizadas aquí
    '.btn': {
      apply: 'h-10 w-40 bg-blue-500 text-blue-50 rounded' // Componer usando otras utilidades
    }
  }
}

Añadir Fuentes de Iconos

Para añadir, por ejemplo, iconos de Font Awesome:

purgetss icon-library --vendor=fontawesome

Luego, usa las clases de iconos directamente en tu XML:

<Label class="fas fa-envelope" />

Configurar Tipografía Personalizada (Texto e Iconos)

Coloca tus archivos de fuentes (p. ej., .ttf, .otf) en la carpeta purgetss/fonts/.
Para fuentes de iconos personalizados, incluye también la hoja de estilos CSS correspondiente en purgetss/fonts/. Para múltiples fuentes, se recomienda organizarlas en carpetas.
Genera las definiciones de estilo ejecutando: purgetss build-fonts. Esto creará el archivo purgetss/styles/fonts.tss con las clases necesarias.
Referencia las fuentes en tu XML como lo harías normalmente.

Estilos Personalizados para Elementos de Titanium

Puedes añadir o sobrescribir estilos para los elementos base de Titanium (p. ej., Window, View, Label) definiendo clases personalizadas complejas o componiendo utilidades en el archivo config.js. PurgeTSS combinará estos estilos.
Asegúrate de incluir en la lista segura (safelist) de config.js cualquier clase importante que se aplique dinámicamente mediante JavaScript para evitar que sea purgada.

Comandos CLI

> purgetss init: Inicializa la configuración de PurgeTSS en tu proyecto.
> purgetss: Procesa archivos y genera el app.tss optimizado.
> purgetss icon-library: Añade fuentes de iconos de proveedores conocidos.
> purgetss build-fonts: Genera clases CSS para tu tipografía personalizada.
> purgetss shades: Genera paletas de colores a partir de un color base.
> purgetss color-module: Crea el módulo de color para usar en JavaScript.
> purgetss module: Instala helpers UI adicionales (como el módulo de animación).

Para una referencia completa de comandos y sus opciones, consulta la lista completa de Comandos en la documentación oficial.

Mejores Prácticas

Utiliza _app.tss para tus estilos base persistentes y personalizaciones globales. PurgeTSS los combinará automáticamente.
Centraliza y extiende tus definiciones de tema (colores, espaciado) y clases utilitarias compuestas en purgetss/config.js.
Añade a la lista segura (safelist) cualquier clase que apliques dinámicamente desde JavaScript o que deba persistir por una razón específica.
Vuelve a ejecutar purgetss build-fonts cada vez que añadas o elimines archivos de fuentes en la carpeta purgetss/fonts/.

Preguntas Frecuentes (FAQ)

P: ¿PurgeTSS eliminará mis estilos personalizados en _app.tss? R: No. PurgeTSS hace una copia de seguridad de tu app.tss original en _app.tss (si no existe ya) y combina inteligentemente tus personalizaciones con las clases generadas cada vez que se ejecuta.

P: ¿Puedo usarlo con LiveView? R: ¡Sí! PurgeTSS está diseñado para funcionar perfectamente con LiveView, permitiendo actualizaciones de estilo en tiempo real mientras desarrollas.

P: ¿Es adecuado para proyectos grandes y complejos? R: Absolutamente. Sus características de automatización, optimización y capacidad para mantener una base de código de estilo limpia son particularmente beneficiosas para proyectos en crecimiento.

Recursos y Enlaces

Conclusión

PurgeTSS proporciona a los desarrolladores de Titanium una solución moderna, eficiente y automatizada para la gestión de estilos. Su arsenal de clases utilitarias inspiradas en Tailwind, configuración robusta, características de animación y cuadrícula, y profunda integración en tu flujo de trabajo te ayudarán a pasar menos tiempo gestionando la complejidad del estilo y más tiempo construyendo aplicaciones impactantes y de alto rendimiento.

Si te tomas en serio la escalabilidad, la mantenibilidad y la modernización de tus proyectos Titanium, ¡PurgeTSS es una adición esencial a tu conjunto de herramientas!

También disponible en Inglés: English Version