Ediciones ENI Editorial | líder en informática
Dominar los frameworks Web
Comenzar correctamente con jQuery
1. Conceptos
a. Presentación
jQuery (http://jquery.com/) es un framework que simplifica la construcción de aplicaciones web. Para ello, cuenta con un mecanismo de selectores basados en la sintaxis existente en CSS3, para filtrar ciertos nodos de la página. También se agrega una "sobrecapa" a los nodos DOM para simplificar su administración. El procesamiento de los eventos se simplifica para reducir las dependencias entre la página HTML y el código. Hay varias utilidades disponibles, como la gestión simplificada para AJAX (consulte el capítulo Desarrollar fácilmente en cliente/servidor).
jQuery es probablemente el framework de JavaScript más utilizado para la web, con una impresionante cantidad de complementos (http://plugins.jquery.com/) que ofrecen varios servicios (nuevos componentes, efectos gráficos, etc.).
Utilizar jQuery es sin lugar a dudas una ventaja, pero también debe tener en cuenta que puede haber errores y que su funcionamiento en ciertos navegadores, a veces es problemático. Esto no lo exime de ninguna manera de tener un buen conocimiento de la API DOM para "sortear" los errores.
jQuery viene con una versión orientada a GUI llamada jQuery UI (http://jqueryui.com/), que se centra en componentes gráficos y una versión móvil "jQuery Mobile" (http://jquerymobile.com/), para la integración en una tableta o teléfono móvil (iOS, Android, etc.).
Para trabajar, debe descargar jQuery, que se reduce a un archivo disponible en dos formatos:
-
Un formato compacto que no es legible, pero que es más rápido de descargar para su uso en producción (eliminación de espacios en blanco, cambio de nombre, etc.).
-
Un formato "legible" cuando está en desarrollo.
Usaremos la versión de desarrollo en nuestras pruebas, con la ventaja de poder usar el depurador del navegador.
A continuación, se muestra un primer ejemplo:
<html>
<head>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$("#hello").css(...Comenzar correctamente con Dojo
1. Conceptos
a. Presentación
Dojo es un framework JavaScript (http://dojotoolkit.org/) que se basa en la arquitectura AMD que ya hemos abordado en el capítulo dedicado a las buenas prácticas. Se divide en un núcleo (nano core), una librería Dijit para el desarrollo web, Dojo Mobile para la integración móvil, Dojo GFX para la gestión de gráficos y diversas herramientas presentes en dojox y util.
A diferencia de jQuery, las funcionalidades se distribuye en una gran cantidad de módulos. Cada módulo puede corresponder a una función o a un objeto.
La solicitud de un módulo Dojo se realiza con require (ver el capítulo sobre las buenas prácticas). Por tanto, el diseño de módulos según AMD se realiza con define.
Todos los módulos AMD están catalogados en este árbol: http://dojotoolkit.org/api/. Por ejemplo, el módulo dojo/dom se usa para encontrar un elemento a partir de su identificador (equivalente a getElementById). El módulo dojo/domReady! es especial y garantiza que la arborescencia DOM se ha cargado correctamente (a la manera de ready con jQuery). Tendrá como argumentos los módulos de funciones (es decir, que devuelven una función) indicados por un icono F o módulos objetos (que devuelven objetos) con un icono O.
Vamos a construir un primer ejemplo. Para poder utilizar los módulos AMD de Dojo, es necesario cargar el script dojo/dojo.js.
Ejemplo
<html>
<head>
<script type="text/javascript" src="dojo-release-1.8.0/dojo/
dojo.js"></script>
<script type="text/javascript">
require( ["dojo/dom", "dojo/domReady!" ],
function( dom ) {
dom.byId( "hello" ).innerHTML = "hello world";
}
);
</script>
</head>
<body>
<div id="hello">
</div> ...Construir su framework web
1. Primera etapa
a. Presentación
La creación de un framework web puede proporcionar cierta comodidad en el control y evolución de su código. Esto es especialmente cierto cuando hay elementos que se repiten en sus páginas. Usar jQuery o Dojo es ciertamente práctico, imprescindible según el caso, pero crea una dependencia respecto a su entorno que no siempre es eficiente en términos de evolución, rendimiento y corrección de errores. Tener que omitir/corregir un error de jQuery en un navegador puede tener un coste importante, lo que afecta a la ganancia en uso.
Proponemos aquí un ejemplo de framework. De ninguna manera pretende ser una sustitución de los frameworks ya mencionados, sino solo mostrarle formas de comenzar y desarrollar su código con calma.
Nos apoyaremos en la arquitectura AMD que muestra un potencial real de uso, para facilitar la reutilización del código y por tanto la construcción de un framework. También usaremos el administrador de módulo curl, que también ha mostrado muy buenos resultados en producción.
b. Organización
En primer lugar, hay que organizar los directorios para recibir los modules AMD. Proponemos esta organización:
|
Directorio |
Descripción |
|
/js |
Directorio de inicio para scripts. |
|
/js/amd |
Directorio base para módulos AMD. |
|
/js/amd/curl/plugin |
Directorio para extender curl mediante plugins. Esta es la ruta de búsqueda predeterminada con curl. |
La ruta predeterminada de carga de un plugin curl, se puede modificar usando la propiedad pluginPath en el objeto de configuración curl.
Tendremos en el directorio js el administrador del módulo AMD curl.js. Tomaremos la versión que integra el módulo domReady (https://raw.github.com/cujojs/curl/master/dist/curl-with-js-and-domReady/curl.js). Este módulo, que ya hemos encontrado en Dojo, servirá para detectar la carga de la página y ejecutar un código.
El directorio amd contendrá los módulos dividiéndolos en directorios. Podemos tener en la raíz un módulo "common" genérico, que integra funciones de utilidad general. Se utilizará una página tests.html para probar los módulos. También se puede considerar una página de prueba...