Archivo para ajax

Mejorar el rendimiento en la escritura DOM con javascript

Posted in Programación with tags , , , , , , on 15 febrero, 2010 by febrer

Uno de los principales problemas que nos encontramos al crear aplicaciones javascript, escribiendo directamente en el DOM (Document Object Model), es el mal rendimiento que este tiene cuando se realizan excesivas llamadas a AppendChild. Un claro ejemplo lo encontramos en los grids, ya que estos realizan abusivas llamadas en la creación de este (dependiendo, claro esta, del número de filas y columnas).

Una buena recomendación para acelerar este tipo de procesos, es la incorporación del elemento documentFragment en nuestros desarrollos.

Sin entrar en detalle de cómo implementar DocumentFragment en nuestros desarrollos, os muestro una tabla comparativa de ambos mecanismos con el tiempo en ms que tardan en realizar la escritura:

Browser Normal (ms) Fragment (ms)
Firefox 3.0.1 90 47
Safari 3.1.2 156 44
Opera 9.51 208 95
IE 6 401 140
IE 7 230 61
IE 8b1 120 40

Esta comparativa, junto con la manera de implementarlo en nuestros desarrollos, la encontraremos en el blog de John Resig:

http://ejohn.org/blog/dom-documentfragments

Más información sobre documentFragment:

http://therealcrisp.xs4all.nl/meuk/fragment.html

http://www.ryboe.com/2008/07/22/increasing-appendchild-performance-with-dom-tricks.html

http://www.slideshare.net/julien.lecomte/high-performance-ajax-applications

Anuncios

Framework Ajax: jQuery

Posted in Programación with tags , , , on 1 julio, 2009 by febrer

Según la Wikipedia:

jQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas web.

Actualmente, jQuery es el framework Ajax más utilizado en la red. Permite de la creación de aplicaciones Ajax de una forma rápida y sencilla.

Como componente adicional, jQuery dispone de una biblioteca para la generación de interfaces de usuario, jQuery UI. Básicamente dispone de los siguientes elementos (Widgets): Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs.

Estos widgets, junto con la posibilidad de utilizar efectos (Blind, Bounce, Clip, Drop, Explode, Fold, Highlight, Puff, Pulsate, Scale, Shake, Size, Slide, Transfer) e interaciones (Drag,Drop,Resize,Select,Sort) hacen de esta biblioteca una potente herramienta para el desarrollo de aplicaciones AJAX.

A continuación os dejo un ejemplo de como implementear ‘jQuery UI Tabs’ en nuestro código HTML:

<!doctype html>
<html lang="es">
<head>
 <title>jQuery UI Tabs</title>
 <link type="text/css" href="../../themes/start/ui.all.css" rel="stylesheet" />
 <script type="text/javascript" src="../../jquery-1.3.2.js"></script>   <!-- framework jQuery -->
 <script type="text/javascript" src="../../ui/ui.core.js"></script>  <!-- librería base jQuery-UI para desarrollo de interfaces -->
 <script type="text/javascript" src="../../ui/ui.tabs.js"></script>  <!-- librería para el control tabs -->
 <script type="text/javascript">
 $(function() {
  $("#tabs").tabs(); //activamos las pestañas
 });
 </script>
</head>
<body>
 
<div id="tabs">
 <ul>
  <li><a href="#tabs-1">Pestaña 1</a></li>
  <li><a href="#tabs-2">Pestaña 2</a></li>
  <li><a href="#tabs-3">Pestaña 3</a></li>
 </ul>
 <div id="tabs-1">
  <p>Contenido pestaña 1.</p>
 </div>
 <div id="tabs-2">
  <p>Contenido pestaña 2.</p>
 </div>
 <div id="tabs-3">
  <p>Contenido pestaña 3.</p>
 </div>
</div>
</body>
</html> 

 

Verdaderamente recomendable 🙂

Enlaces de interes:

240 plugins para utilizar con jQuery: http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/     
Framework base: http://jquery.com/  
Framework para la creación de interfaces de usuario:  http://jqueryui.com/

Herramientas Ajax (Ajax Toolkit)

Posted in Programación with tags , on 16 octubre, 2008 by febrer

Llevo varios días buscando la manera de desarrollar un interface AJAX para mis desarrollos en ASP.NET. La respuesta directa sería ASP.NET AJAX …. pues no me convence. Es un gran producto, tiene una documentación genial, tutoriales, foros, etc, etc, pero hay dos cosas que no me gustan.

Primera, esta 100% pensado para desarrollos con los controles de ASP.NET. Es decir, si utilizas el grid de ASP.NET, genial, pero seguro que hay mas de uno que como yo, no utiliza los controles de ASP.NET, utiliza los suyos propios (generando el HTML manualmente).

La segunda pega es que el toolkit solo esta disponible para la versión 3.5 del framework. Este problema no es tan grave, ya que poco a poco, los proveedores de ISP, van actualizándose, pero el proveedor que yo utilizo, todavía no dispone de dicha versión.

Los productos que estoy barajando utilizar son:

Prototype
Dojo
Mochikit
Yahoo!
Google
JQuery

Dojo, es el producto que más me convence, ya que como Jquery, dispone de una programación basada en TAGS, que permiten añadir directamente nuevas funcionalidades a los controles HTML directamente. De esta manera la integración con mis desarrollos, debería ser muy rápida.

Este es un ejemplo de programación con Dojo (Grid):

    <table dojoType=”dojox.grid.DataGrid”
     region=”top” clientSort=”true” minSize=”20″ splitter=”true”
     jsId=”table”
     store=”mailStore” query=”{ type: ‘message’ }”
     onRowClick=”onMessageClick”
     style=”height: 150px; width: 100%;”>
     <thead>
      <tr>
       <th field=”sender” width=”10%”>Sender</th>
       <th field=”label” width=”80%”>Subject</th>
       <th field=”sent” width=”10%”>Date</th>
      </tr>
     </thead>
    </table>
    
    

Directamente al definir la tabla como “dojox.grid.DataGrid”, ya disponemos de un grid con ordenación de elementos, cambio de columnas, diseño, etc, etc.

Ejemplo de un desplegable (combo, con selección de elementos mientras escribes):

       <select dojoType=”dijit.form.ComboBox” id=”${id}_subject” hasDownArrow=”false” style=”width: 40em;”>
        <option></option>
        <option>progress meeting</option>
        <option>reports</option>
        <option>lunch</option>
        <option>vacation</option>
        <option>status meeting</option>
       </select>

 

Yahoo y Google, requieren un aprendizaje mucho mayor, y por lo que he visto no disponen de dicha funcionalidad. Evidentemente, utilizar productos de Google o Yahoo, ofrecen una mayor garantía, pero también valoro mucho la rápida integración. Lo que estoy buscando es no volverme loco con la programación en javascript.