Durante los dos meses pasados os he contado un montón de cosas sobre TypeScript, el lenguaje de Microsoft para poner un poco de orden a Javascript, y que día a día gana más y más adeptos. Hoy toca fundir muchos de los conceptos vistos en las entradas previas, hasta tener una plantilla con TypeScript, RequireJS, jQuery y Bootstrap, lista para no empezar los proyectos de cero.
El código lo teneis disponible en GitHub, y ahora, empezamos a detallarlo. El proyecto subido está preparado para usarse con CATS, software que uso como IDE para programar en TypeScript y que ya te presenté.
Organización de ficheros
Nada mejor que disponer de una buena organización de ficheros, sobre todo si vas a tener una gran aplicación, y cuanto más ordenado, mucho mejor.
Typescript Template dirs
El directorio .settings es específico de CATS para guardar las configuraciones del proyecto, que se queda guardado en config.json.
El directorio app
El grueso de la aplicación se concentra en el directorio app, que a su vez se divide en varios directorios, cada uno de lo suyo:
- css: para las hojas de estilo
- fonts: para las fuentes de Bootstrap
- js: para las librerias Javascript
- scripts: donde se guardan los archivos generados por el compilador de TypeScript
- templates: donde se guardan las plantillas que serán cargadas mediante HandleBars.
- ts: ficheros Typescript
- typings: son las definiciones de TypeScript, normalmente procedentes de Definitely Typed.
Esta es la organización que yo utilizo, aunque por supuesto, eres libre para modificarla y adaptarla a tus necesidades.
Son varias las librerias Javascript (también sus correspondientes ficheros de definiciones .d.ts en typings) incluidas en esta plantilla, como jQuery, Bootstrap y RequireJS.
Configuración de RequireJS
Para tener acceso a trabajar con HandleBars desde RequireJS es necesario cargar los plugins de RequireJS, acción que tiene lugar en el fichero de configuración de RequireJS.
Config.ts
En config.ts es donde tiene lugar la configuración, para ello, se define dónde estará la ubicación de las librerias Javascript con baseUrl. En la imagen se define que los ficheros javascript serán cargados desde el directorio ts, porque son ahí donde se guardan los ficheros generados por el compilador.
También están detallados los plugins de RequireJS que vamos a utilizar, y que son varios, aunque el más destacado es HandleBars, lo que nos da mucha potencia a la plantilla (la veremos en funcionamiento, por supuesto!).
App.ts
Este fichero es el punto de entrada a la aplicación, que se definió al final de config.ts, con require[“app”].
app.ts
Es necesario incorporar las referencias a jquery, requireJs y Bootstrap, y luego usarlas correctamente. También es importante destacar la referencia a menu.ts, que es donde se lleva a cabo la aplicación (yo las llamo menu.ts porque normalmente, las apps tienen un menú con las distintas cosas que puedes hacer!).
Menu.ts
Aquí es donde empezarás a escribir tu aplicación con TypeScript. La clase MenuApp es donde puedes gestionar todaas las funcionalidades que tendrá la app, y ya solo queda que te pongas a programar!
Menu.app
Es importante destacar que importamos jQuery usando require, y dispones de una variable para que pongas los valores iniciales de la aplicación.
Al cargar, verás en la console el mensaje de que la plantilla se ha cargado!
Por último, el HTML
Y ya solo queda ver el código HTML, donde lo fundamental es hacer la llamada a RequireJS, y al fichero de configuración.
index.html
En la parte del HEAD se declaran las llamadas a las hojas de estilo, mientras que casi al final tiene lugar las llamadas a los scripts de require y configuración.
index.html
Esta es la primera versión de la plantilla, que supongo que irá modificandose conforme se vaya mejorando, con vuestras aportaciones, de forma que os sea más rápido centrarse en desarrollar funcionalidades de las aplicaciones bajo un entorno sencillo, basado en TypeScript, HTML, CSS, jQuery y RequireJS.
En la próxima entrada pondremos la plantilla en acción!
Happy coding!