Generar Tablas: PHP vs Javascript-DOM

[Raziel_Ravenheart]

Hola todos, como estan?

Lo que quiero preguntar no es como hacerlo, más bien es una opinión sobre perspectiva y desempeño. Ultimamente he estado leyendo y estudiando mucho sobre Html, Javascript, DOM, PHP, Ajax, JSON y BOM.

Como todos los programadores expertos e intermedios saben, hay varias formas de hacer una tabla dinámica en html, y supongo que todos uds como yo, al principio se inclinan por uno de los métodos más fáciles el cual generalmente sería generarla desde php, algo así, para que me entiendan:

Código PHP:

 <table>
<thead><tr><th>dato 1</th><th>dato 2</th></thead>
<tbody>
<?php
foreach ($algunosDatos as  $fila){ ?> 
<tr>
<?php  foreach($fila as $dato){ ?>
      <td><?php echo $dato ?></td>
<?php } ?>
</tr>
<?php } ?>
</tbody>
</table>  

Sobre el método de imprimir las etiquetas html, prefiero no hacerlo con php, aunque algunas personas prefieren hacer :

Código PHP:

  <?php echo "<table> .... </table>"; ?>   

, jejejej

Yo se que uds entienden a que me refiero, pero debido a q he estado leyendo tantos y tan variados manuales, me parece que el hacer peticiones de datos con ajax y luego organizarlos con DOM mediante javascript, evitará que el servidor se sature con tanta generación de html, y supongo que por esto los datos apareceran de manera más rápida en el pc del usuario al ser agregados por medio de script del lado del cliente.

Mi pregunta es, basandose en su experiencia, que método prefieren? y si alguna vez lo hicieron como en mi ejemplo, que los hizo cambiar de opinion?

Les dejo los enlaces de los manuales y tutoriales que he estado leyendo, para que conozcan cuales han sido las fuentes que generaron mi cuestionamiento:

[URL="http://www.w3schools.com/default.asp"]
http://www.w3schools.com/default.asp[/URL]

[URL="http://www.librosweb.es/"]http://www.librosweb.es/[/URL]

[URL="http://www.phpya.com.ar/"]http://www.phpya.com.ar/[/URL]

[URL="http://www.elrincondeajax.com/manual-ajax/"]http://www.elrincondeajax.com/manual-ajax/[/URL]

Y obviamente por ultimo pero no menos importante:

[URL="http://www.forosdelweb.com/wiki/Manual_de_PHP?utm_source=FDW&utm_medium=Avisos&utm _content=Registrados&utm_campaign=Wiki-fdw"]Manual PHP de Foros del Web[/URL]

Muchas gracias por sus opiniones.

[pateketrueke]

El servidor no se satura de procesar hipertexto, para eso fue diseñado PHP.

Sin embargo yo usaría Spandex del lado del servidor:

Código PHP:

  $table = DOM('<table/>'); 
$tbody = DOM('<tbody/>')->appendTo($table); 
 
for ($y = 0; $y < 10; $y += 1) 
{ 
  $row = DOM('<tr/>'); 
 
  if ($y & 1) 
  { 
    $row->css('background', 'silver'); 
  } 
 
  for ($x = 0; $x < 10; $x += 1) 
  { 
    $cell = DOM('<td/>')->text("$x,$y")->appendTo($row); 
  } 
 
  $tbody->append($row); 
} 
 
echo $table;  
   

[Ronruby]

En cuanto a imprimir todas las etiquetas, a mi personalmente no me gusta. Hace el código difícil de leer y aparte se ve mejor de la forma que lo expones, solo que yo uso la sintaxis alternativa para los bucles y condicionales, es decir:

Código PHP:

  <?php foreach($algunosDatos as $fila): ?>
  <tr>
    <?php foreach($fila as $dato): ?>
      <td><?php echo $dato; ?></td>
    <?php endforeach; ?>
  </tr>
<?php endforeach; ?>   

Ahora vamos al tema realmente importante. Depende de lo que quieras hacer con tu aplicación. Al PHP ser lenguaje del servidor y Javascript del cliente no se pueden hacer muchas comparaciones y no creo que muchos hayan hecho comparaciones de rendimiento entre ambos.

Si mi aplicación requiere dinamismo, es decir, tal vez la data que quiera mostrar venga de una llamada asíncrona (mediante AJAX) entonces es probable que renderice la tabla con JS. También se podría con PHP y solo insertar el código con Javascript pero todo depende.
De todas maneras, muchas veces es preferible (a mi entender) imprimirlo directamente desde PHP en vez de hacer una llamada asincrona para obtener esos datos y luego organizarlos.
Miralo de esta manera: si lo haces con PHP, es obtener los datos e imprimir las etiquetas y ya, mientras que con AJAX, tienes que primero esperar que el interprete de PHP interprete cualquier codigo que hayas escrito, luego cuando eso se renderice, el navegador del cliente se encargaria de llamar a un script, en PHP (nuevamente), para obtener los datos, los recibes y luego organizas con DOM. Definitivamente es mas facil (y mas factible en ese caso) hacerlo directamente, ya que al final como quiera terminas haciendo una llamada a PHP para que te devuelva los datos.

[Raziel_Ravenheart]

Muchas gracias a los dos, pero por ahora debido a que tengo poco tiempo tomaré la sugerencia de Ronruby, pero cuando ya esté más relajado me dedicaré a aprender algo nuevo con la sugerencia de pateketrueke... en realidad muchas gracias a los dos por responder.

Pero ya se que para los casos en que se usa ajax y se tiene obligatoriamente que recibir la respuesta para poder hacer algo dinámico como un formulario, es mejor la segunda opciión de generar el dom con javascript, aunque por ahora... la tabla q necesito generar, son solo los datos escogidos con una consulta sql.

Como dije, muchas gracias y espero q sigan así.

[Ronruby]

Iniciado por pateketrueke

El servidor no se satura de procesar hipertexto, para eso fue diseñado PHP.

Sin embargo yo usaría Spandex del lado del servidor:

Interesante, tengo que echarle una mirada. Una pregunta, ¿porque el & 1 en el condicional? Conozco la funcion y diferencias de && y &, pero porque poner & 1?

[Raziel_Ravenheart]

Iniciado por Ronruby

Interesante, tengo que echarle una mirada. Una pregunta, ¿porque el & 1 en el condicional? Conozco la funcion y diferencias de && y &, pero porque poner & 1?

Sencillo, esta si te la puedo responder, al hacer una comparación a nivel de bit con uno, siempre que se compara con un numero par devuelve 0 y con un impar devuelve 1, cuando da 0 no "entra en el if" y cuando da 1 si entra (obvio ), de ese modo alterna el color del fondo en las filas de la tabla, para distinguirlas xD

Fuente: Traumática Experiencia con esos dichosos "if" y operaciones a nivel de bit en la U me ayudaron a entenderlo.. , y con una tabla parecida que hice... ;)

[HackmanC]

Hola,

Iniciado por Raziel_Ravenheart

... Mi pregunta es, basandose en su experiencia, que método prefieren? y si alguna vez lo hicieron como en mi ejemplo, que los hizo cambiar de opinion?

Técnicamente, se debería usar Javascript para el renderizado de la tabla. Normalmente se renderiza por medio de PHP.

¿Por qué usar Javascript?

Según las bases de la programación modular orientada a capas, para facilitar la escalabilidad y mantenimiento de una aplicación, los datos deben estar completamente separados de la secuencia de instrucciones que presentan dichos datos.

Es decir, los datos deberían entrar por un lado al navegador (que en este caso es la interfaz gráfica), por otro lado debería entrar un programa, este debe de tener la capacidad para manipular dichos datos de cualquier forma, pudiendo cambiar su estructura y llevando de vuelta los cambios a la base de datos.

En otras palabras, el navegador debería de poder realizar las operaciones básicas de un mantenimiento a tablas (agregar, eliminar, modificar, buscar, filtrar, ordenar, etc.) como que fuera una aplicación de escritorio.

¿Por qué usar PHP?

Aunque actualmente se ha avanzado mucho en las tablas en Javascript, todavía no existe una forma fácil de implementar todo lo anterior (el manteniemiento a tablas), lo cual resulta en una aplicación 'a veces' inestable, que presenta un comportamiento extraño y confuso al usuario.

Adicionalmente, las diferentes implementaciones de los navegadores son tan variables que significa un trabajo sumamente difícil mantener una aplicación compatible con todos los navegadores que sea estable y no se rompa fácilmente.

Esto basado en la experiencia que observé de una aplicación muy popular (miles o millones de usuarios alrededor del mundo) que usa Javascript y AJAX para el renderizado de casi toda la información que muestra en tablas, inclusive el pagineo de la información ... la mayoría de las veces funciona correctamente en la mayoría de navegadores.

Iniciado por Raziel_Ravenheart

Sencillo, esta si te la puedo responder, al hacer una comparación a nivel de bit con uno, siempre que se compara con un numero par devuelve 0 y con un impar devuelve 1 ...

¿Pero por qué?

Todos los programadores deberían de haber estudiado a profundidad el Álgebra de Boole, teoría de conjuntos y compuertas lógicas.

Código:

El número 1 en binario : 00000001
El número en cuestion 242 : 11110010

Al hacer la operación lógica AND bit a bit:
(Es verdadero solo cuando los dos operadores son verdaderos)

00000001
11110010
-----------
00000000

El resultado es 0 puesto que el ningún bit es verdadero en los dos operandos.

Código:

El número 1 en binario : 00000001
El número en cuestion 243 : 11110011

00000001
11110011
-----------
00000001

El resultado es 1 puesto que el último bit es verdadero en los dos operandos.

Como solo existe el conjunto {0, 1} en la matemática de boole, el último bit solamente puede ser 1 en caso de los números impares o 0 en el caso de los números pares. Este método es muy usado en otro tipo de aplicaciones como programas de audio, vídeo, etc.

Saludos,

ps:

Otro método para obtener lo mismo que el operador X & 1 es usar el operador X % 2 que devuelve el residuo de la división, es esta es par devuelve 0 y si es impar 1.

[Ronruby]

Sencillo, esta si te la puedo responder, al hacer una comparación a nivel de bit con uno, siempre que se compara con un numero par devuelve 0 y con un impar devuelve 1, cuando da 0 no "entra en el if" y cuando da 1 si entra (obvio ), de ese modo alterna el color del fondo en las filas de la tabla, para distinguirlas xD

¡Excelente!

Otro método para obtener lo mismo que el operador X & 1 es usar el operador X % 2 que devuelve el residuo de la división, es esta es par devuelve 0 y si es impar 1.

De esa manera si lo habia visto, sin embargo no sabia que al comparar usando &, PHP internamente tomaba el binario del numero y luego aplicaba Algebra de Boole.
Habia usado el & solo cuando necesitaba que en un if u otro condicional o bucle se evaluaran ambas condiciones siempre (aun cuando la 1era fuera falsa, ya que PHP si encuentra una falsa usando && inmediatamente da un salto)

[Raziel_Ravenheart]

Otro método para obtener lo mismo que el operador X & 1 es usar el operador X % 2 que devuelve el residuo de la división, es esta es par devuelve 0 y si es impar 1.

Hola HackmanC, muchas gracias por las respuestas sobre las tablas, ya que con esto puedo observar las cosas de un punto más objetivo, en cuanto a la operación

$variable & 1

vs

$variable % 2

Yo creo que aunque tienes razón, la opción a utilizar en cualquier lenguaje que lo permita sería la primera, por que?

Imagina que el número a comparar se algo grande como 1 305 667, suponiendo el uso de red, procesador o cualquier contexto en que se realice dicha operación, cuando se utiliza el módulo(%), aunque no se nota, lo que hace el programa es rápidamente dividir por el segundo número, y por otro lado ten en cuenta que el sistema binario es natural de los pc's, por lo tanto le queda más sencillo convertir cualquier número a binario y luego compararlo con 1, ya que este en todos los sistemas numéricos se auto representa.

Básicamente la operación módulo(%) sirve para calcular el residuo de casi cualquier operación como por ejemplo:

5 % 3 = 2
6 % 4 = 2
7 % 5 = 2
9 % 6 = 3

Por lo tanto significa que utilizar el % para una operación tan simple como averiguar si un número es par o impar, en programadores avanzados, esto significa solo un desperdicio de recursos y procesos, creo, no estoy seguro de lo que estoy diciendo, leeré algo al respecto, ya que solo estoy deduciendolo por la naturaleza de las operaciones que se tienen que llevar a cabo...

algo sencillo de ver es que al ser una comparación booleana bit a bit, si se hace

5 & 2 = 0

Código PHP:

101
010 
====
000
 

y para 6 & 5

Código PHP:

110
101 
====
100
 

lo cual devuelve 4, (que genio, no?)

Solo quería remarcar el hecho que las operaciones bit a bit, están ahí por algo y que deberían ser la opción principal para programadores avanzados, ya por algo pueden ser de gran utilidad.

saludos!

[Raziel_Ravenheart]

De esa manera si lo habia visto, sin embargo no sabia que al comparar usando &, PHP internamente tomaba el binario del numero y luego aplicaba Algebra de Boole.
Habia usado el & solo cuando necesitaba que en un if u otro condicional o bucle se evaluaran ambas condiciones siempre (aun cuando la 1era fuera falsa, ya que PHP si encuentra una falsa usando && inmediatamente da un salto)

Hola Ronruby, como estas?

Oye podrías darme un ejemplo con código de lo que estás diciendo, es que me dejó intrigado, ya que por lo que entendí, en ese contexto, no sería lo mismo utilizar

&(bitwise AND) o ||(logical OR),

entonces si es así, para que se evalué alguna de las condiciones por que no utilizar el ||(OR) ya que no dudo que el hacerlo el código se entiende más, aunque abogando porlo que comenté anteriormente, al utilizar el & se realiza más rápido la comparación.

Espero estar errado, de ese modo tu respuesta me ayudará a aprender algo nuevo o ver desde un nuevo punto de vista q no había considerado.

Muchas gracias!

[HackmanC]

Iniciado por Raziel_Ravenheart

Yo creo que aunque tienes razón, la opción a utilizar en cualquier lenguaje que lo permita sería la primera, por que?

Imagina que el número a comparar se algo grande como 1 305 667, suponiendo el uso de red, procesador o cualquier contexto en que se realice dicha operación, cuando se utiliza el módulo(%), aunque no se nota, lo que hace el programa es rápidamente dividir por el segundo número, y por otro lado ten en cuenta que el sistema binario es natural de los pc's, por lo tanto le queda más sencillo convertir cualquier número a binario y luego compararlo con 1, ya que este en todos los sistemas numéricos se auto representa.

Exactamente, el sistema binario es natural del procesador, y tienes razón, en algunos lenguajes va a ser más rápido uno que el otro. Técnicamente, el residuo de una división se obtiene en el procesador Intel x86 con la instrucción DIV de assembler, donde el cociente está en AX y el residuo en DX, aproximadamente 4 ciclos de cpu. Mientras que la instrucción AND usará 1 ciclo de cpu. Actualmente los procesadores pueden realizar millones de ciclos de cpu por segundo, así que la velocidad pierde importancia sino es un compresor de audio o algo así, donde esta operación se realizará millones de veces.

Pero lo más importante ... ¿Cual es mas claro para una aplicación de este tipo?

Iniciado por Raziel_Ravenheart

lo cual devuelve 4, (que genio, no?)

No es una genialidad, el hecho es que te hizo falta explicarlo, simplemente.

Iniciado por Raziel_Ravenheart

... entonces si es así, para que se evalué alguna de las condiciones por que no utilizar el ||(OR) ya que no dudo que el hacerlo el código se entiende más, aunque abogando porlo que comenté anteriormente, al utilizar el & se realiza más rápido la comparación. ...

Me imagino que se refiere a la evaluación 'short circuit'.
http://en.wikipedia.org/wiki/Short-circuit_evaluation

Saludos,