Iniciando con Lit

Descargar o clonar LitGirl aquí

Si descargaste el archivo .zip, lo siguiente será descomprimirlo en la raíz de tu proyecto. Es decir, dentro de la estructura principal de directorios.En relidad puedes colocarlo donde desees dentro de tu proyecto, sin embargo, recomendamos hacerlo en la raíz por un tema de practicidad. Puesto que el routing viene configurado por defecto para rastrear componentes desde esa ubicación.

Ahora bien, si por cualquier motivo, deseas instalar LitGirl en cualquier otra ubicación tienes total libertad para hacerlo. Tomando la precaución de reconfigurar la url base al momento de inicializar la aplicación. De todas formas, esto es algo realmente sencillo como veremos más adelante. A continuació, encontrarás dos enlaces a diagramas con una representación elemental de las posibles ubicaciones para el directorio root de LitGirl.

Ampliar ubicación recomendada

Ampliar otra ubicación

Ampliar estructura interna

Tal como se indica en el diagrama de estructura que se puede apreciar en el enlace anterior, LitGirl consta de una estructura extremadamente simple que vamos a anlizar a continuación:

Directorio: core

Este directorio contiene el núcleo de toda la aplicación. No hace falta entrar en mayores detalles sobre el mismo, ya que no recomendamos realizar ninguna acción en su interior. Cualquier cambio en los ficheros allí ubicados, podría provocar una falla generalizada de LitGirl.

Directorio: parts

Este directorio es donde LitGirl buscará los componentes que se compilan e inyectan en los diferentes templates (Ej: header.html, footer.html, etc). En su interior se pueden agregar nuevos subdirectorios para mantener organizadas las diferentes partes a ser incluidas agrupándolas según los criterios que se consideren convenientes de acuerdo al proyecto que se esté desarrollando.

Directorio: src

El directorio "src" está destinado a los módulos u objetos JS y los ficheros JSON a ser importados por la aplicación. Ya sea que contengan datos a ser cargados o componentes que seran inyectados como HTML dentro de los templates.

Directorio: resources

Como habrás podido percibir, la instalación base de LitGirl procura proveer una estructura por defecto para la organización por defecto de la aplicación. El directorio "resources" no tiene una función predeterminada en la versión actual de LitGirl que es la Alfa 0.0.1. Se provee como una ubicación propuesta para almacenar aquellos recursos que no forman parte propiamente dicha de la misma. Como por ejemplo, archivos de imagen, hojas de estilos, etc. En caso de utilizar una estructura diferente para el proyecto, o ya tener otra ubicación destinada a tal fin, puedes eliminarlo sin ningún riesgo o dejarlo vacío.

Root: index.js

Este fichero ubicado en la raíz de LitGirl, es el encargado de exponer "Lit" al exterior y proteger el núcleo de la aplicación. Contiene la importación de todo lo necesario para que puedas trabajar con LitGirl. Además de traer incluida la configuración más elemental para arrancar "Lit".

Inicio rápido

Una vez instalado el directorio LitGirl en nuestro proyecto, lo siguiente es inicializar el módulo principal. En esta guía de inicio rápido los ejemplos de código propuestos, se centran en cubrir los aspectos más básicos necesarios para poder utilizar "Lit".

* Si deseas profundizar sobre el uso de los diferentes métodos que provee LitGirl, te recomendamos visitar la sección de la documentación referida a los Métodos .

Inicialización básica

A continuación representamos el aspecto que tiene el fichero index.js que se encuentra en la raíz de LitGirl, el cual proporciona acceso a sus métodos.

#index.js

import{Lit} from './core/start.js';
const lit = new Lit();
lit.setDataLit();
lit.init();   

import{Lit} from './core/start.js';   

const lit = new Lit();

lit.setDataLit();

lit.init();

Utilizar Lit en templates

Para finalizar esta Gía de Inicio Rápido vamos a dedicar un apartado especial a la forma de importar el módulo Lit dentro de los templates del sitio. Si bien forma parte de la guía, lo incluimos como un apendice final, ya que la importación tiene alguna particularidad a tener en cuenta.

¿Dónde declarar la importación?

<!DOCTYPE html>
<html lang="en">
<script src="path/to/litgirl/index.js" charset="utf-8" type="module" async defer></script>
<head>
    <!-- Cabeceras del sitio -->
</head>
<body>
<!-- Cuerpo de la página -->
</body>
</html>

Existen muchísimos temas referentes a los templates que no hemos abordado en esta introducción. Como son las importaciones, las variables globales y las variables de instancia, entre un largo etc.

Para poder aprender con mayor profundidad la forma en que LitGirl maneja los templates y sus diferentes características, te invitamos a leer la documentación referida a los Templates.