IronWoods.es

Desarrollo web

¿Cuándo usar JavaScript en Aplicaciones Web?

JavaScript es absolutamente necesario para la web hoy, pero no siempre.

Continuando con el tema de la entrada ¿Por qué NO usar JavaScript en Aplicaciones Web?, incluiré un ejemplo que pocos años atrás habría requerido usar JS, que hoy se puede implementar con CSS y otro que, hasta donde yo sé, sí requieren usar JS*.

Interacciones sin usar JavaScript

La página de ejemplo, implementada usando CSS, muestra una serie de cuadros de diferente color. Cuando clicamos o pulsamos un cuadro, este pierde el color de fondo que pasa a ser el color de fondo de la página mediante una transición.

Página de juego al inicio
juego de madera con patrones de colores
Página de juego tras pulsar el cuadro de color violeta
juego de madera con patrones de colores

Ejemplo 1. que requiere usar JavaScript

Nota: estas páginas funcionan sin JavaScript, pero si en este ejemplo, es decir que debe estar activado para que funcione.

La página de ejemplo muestra una cuadrícula de colores cada vez que recargamos la página.

Cuadrícula generada al azar con cuadros de colores
cuadrícula generada con cuadros de diferentes colores

El script es muy sencillo, ya que lo desarrolle para usarlo con un juego infantil que hice de madera, y viene incluido junto al CSS en la propia página para que pueda ser portada, por ejemplo, en un USB, y usada en cualquier dispositivo con un navegador web.

Imagen de juego de madera con patrones de colores
juego de madera con patrones de colores

¿Por qué usar JavaScript en este caso?

Hasta donde yo sé, aun no se pueden generar cuadrículas aleatorias con CSS.

La cuadrícula puede generarse en el servidor, pero es lógico que funcione en el dispositivo usuario. Trasladando a este el procesamiento se aligera el servidor y la conexión.

Un ejemplo quizá más ilustrativo sería si añadiéramos un botón para regenerar la cuadrícula. Al abrir la página el servidor envía al cliente la página, que incluye HTML, CSS y JavaScript. Este último genera la cuadrícula inicial. Cada vez que pulsamos el botón el JavaScript crea una nueva cuadrícula.

Sí el trabajo de generar la cuadrícula lo hiciera el servidor, se ahorra el JS necesario para regenerar la cuadrícula de colores en la página. A cambio, cada vez que se pulsa el botón se envía la petición al servidor y se descarga de nuevo la página con la cuadrícula generada. El trabajo se traslada al servidor, además se realizan peticiones continuas y de fallar la red, dejaríamos de generar nuevas cuadrículas.

Por otro lado, si JavaScript estuviera deshabilitado o bloqueado en el navegador no podríamos generar cuadrículas.


08-12-2018

Sitio libre de scripts. Solo efectos HTML / CSS