CRaZy TeaM » Javascript

Escribiendo código javascript eficiente

Ignacio Sánchez — Thu, 11 Feb 2010 08:45:21 +0000

Acabo de ver una presentación, sobre cómo escribir código javascript eficiente, en slideshare escrita por Nicholas Zakas que me ha parecido interesantísima. Son 130 páginas, más o menos.

Writing Efficient JavaScript

View more presentations from Nicholas Zakas.

A mi me ha resultado interesantísima.

Ajax (II): Unión de tecnologías

Ignacio Sánchez — Fri, 21 Nov 2008 17:21:21 +0000

En un post anterior explicaba una definición y una introducción a lo que era el Ajax, que historia había seguido y en qué navegadores se había estado implementando este objeto.

Tecnologías para Ajax

Como bien se dijo, Ajax no es una tecnología en sí, sino una unión de tecnologías con el fin de crear una mejor experiencia de usuario. Estas tecnologías son:

XHTML y CSS basada en estándares.
DOM para la interacción dinámica con el documento.
XML, JSON,…, para el intercambio de datos con el servidor.
XMLHttpRequest establecer el canal de comunicación entre el cliente y el servidor.
Javascript para tratar el fichero (XML, JSON) del servidor, tratarlo e incluirlo por DOM a la página.

Figura 2.1. Tecnologías que agrupan el concepto Ajax

Como bien se ve en la figura 2.1, Javascript es el puente entre las comunicaciones y la presentación.

Modelo tradicional vs Modelo Ajax

El proceso en las web tradicionales era:

El usuario pide una página a un servidor,
El servidor le devuelve la página que pidió al usuario,
El usuario interactúa con los datos de la página (formularios, tablas, …),
El usuario realiza una acción (ejecutar un href, un formulario, …),
El servidor procesa los datos que introdujo el usuario y calcula la respuesta,
Y el servidor devuelve otra página completa con los nuevos datos al usuario.

Figura 2.2. Comparativa entre el modelo clásico y el modelo Ajax

Como se ve en la Figura 2.2, la gran diferencia que existe entre el modelo clásico web y el modelo Ajax Web es lo que envía el servidor. En el modelo clásico envía la página completa con las hojas de estilo, los javascript asociados, las imágenes y los componentes que necesite esa página. En el modelo Ajax lo único que envía el servidor son los datos que necesitan ser refrescados al cliente.

Las dos mayores ventajas son:

No hay que refrescar la página del cliente para mostrar nuevos datos
Se reduce bastante la transferencia del servidor

Figura 2.3. Comparativa de sincronización entre el modelo clásico y el modelo Ajax

En el modelo tradicional el que hace la petición es el navegador, en el modelo actual la petición HTTP la hace Javascript.

Fuentes e Imágenes obtenidas de:

Artículo en adaptative path de Jesse James Garret
Capítulo 1 del libro de Ajax en librosweb.es

Draggable: Plugin de CRaZy TeaM para JQuery

Ignacio Sánchez — Mon, 10 Nov 2008 08:16:53 +0000

Viendo todo el rendimiento, las facilidades y la aceptación que está teniendo JQuery en toda la comunidad de desarrolladores web (yo incluido), mucha gente prepara plugins que, con la base de JQuery, ofrecen una funcionalidad, usabilidad o experiencia de usuario mucho mayor.

Desde CRaZy TeaM hemos preparado un plugin para convertir una capa (posicionada en relativo o en absoluto por CSS) se pueda arrastrar por la pantalla.

PAra convertirla en draggable únicamente hay que hacer lo siguiente

$("#id_de_mi_capa").draggable({layer:".arrastrar",/*Opcional*/ opacity:‘.7′})

El código fuente de draggable se podría descargar de nuestro servidor

JSON. Otra forma de hacer Ajax en la Web

Ignacio Sánchez — Mon, 10 Nov 2008 07:49:24 +0000

Todo el mundo que sepa programa ha oido o conoce bien XML. En pocas palabras es un metalenguaje extensible de etiquetas desarrollado por la W3C.

JSON es un formato ligero de intercambio de datos. Similar a los namespaces de javascript.

Estos dos formatos, junto con texto (poco recomendado bajo mi punto de vista) o html son las estructuras de datos para hacer Ajax en la web.

La estructura básica de JSON es:

{

"colegio" : "Menesiano",

"ciudad" : "Madrid",

"profesores" :

[

{

"nombre":"Manuel",

"asignatura":"Química",

"edad":"54"

},{

"nombre":"Joaquín",

"asignatura":"Lenguaje",

"edad":"59"

},{

"nombre":"Felipe",

"asignatura":"Matemáticas",

"edad":"28"

}

],

"alumnos" :

[

{

"nombre":"Juan Carlos",

"curso":"1 Bachillerato",

"edad":"16"

},{

"nombre":"Oscar",

"asignatura":"1 ESO",

"edad":"12"

}

]

}

Vista más o menos la estructura del JSON, las ventajas son:

Peso bastante reducido. Se pierde mucho peso con las etiquetas puesto que se engloban los datos entre dos caracteres ( ‘{’, ‘}’). En aplicaciones con mucha transferencia de datos puede ser muy relevante
La evaluación de los datos es muy veloz, puesto que la propia estructura JSON puede ser una variable javascript.
Aunque eval() suponga un pequeño agujero de seguridad, una buena implementación desde servidor es suficiente para que eval ya no sea importante

Sus desventajas son:

para evaluarse se usa la funcion javascript nativa eval(), y por temas de seguridad, los desarrolladores nos planteamos a veces usarla. en Gmail o Yahoo está implantado el uso de JSON
Estructuras complejas son difíciles de leer respecto a XML o HTML.

Viendo las ventajas y desventajas, los ámbitos de aplicación de JSON pueden ser entornos con grandes cargas AJAX.

Desde la página de jsonlint, se puede indentar correctamente el código y comprobar posibles errores. Además, en la web oficial de json se pueden encontrar multitud de librerías en diferentes lenguajes para hacer la conversion o creación

No dudéis en consultarnos cualquier duda sobre Ajax y JSON

CRaZy TeaM » Javascript

Escribiendo código javascript eficiente

Artículos Relacionados

Ajax (II): Unión de tecnologías

Tecnologías para Ajax

Modelo tradicional vs Modelo Ajax

Artículos Relacionados

Draggable: Plugin de CRaZy TeaM para JQuery

Artículos Relacionados

JSON. Otra forma de hacer Ajax en la Web

Artículos Relacionados