HTML5 introduce una característica que puede mejorar sustancialmente las aplicaciones web, los WebSockets, los cuales permite crear un canal de comunicación bi-direccional entre el cliente y el servidor, solucionando los problemas que presenta Ajax o Comet. El ancho de banda ahorrado tiene una proporción de 500:1 y una latencia de 3:1, resultados increíbles que hacen que los de Google anden muy interesandos en esta tecnología (el ahorro en aplicaciones como GMail puede ser considerable).
Por ahora sólo funciona en Google, pero un código de ejemplo sería el siguiente:
if ("WebSocket" in window) {
var ws = new WebSocket("ws://websockets.org:8787"); //this service bounces messages back
ws.onopen = function() {
// Web Socket is connected. You can send data by send() method.
ws.send("message to send");
};
ws.onmessage = function (evt) { var received_msg = evt.data; alert(evt.data); };
ws.onclose = function() { /* websocket is closed.*/alert("WebSocket Closed!"); };
}else{
// the browser doesn't support WebSocket.
alert("Websocket is not supported in your browser");
}
Para las aplicaciones web es importante darle al usuario la posibilidad de personalizarla a su gusto.
El post que os pasamos a continuación explican muy bien los pasos que hay que dar para poder permitir que el usuario personalice la web a su gusto:
Existen varios tipos de personalización:
Recolocar contenido en la página
Añadir elementos (widgets)
Modificar preferencias
Personalizar los estilos (skins)
Eso sí, hay que tener en cuenta algunos aspectos a la hora de permitir personalizar la web:
Es necesario un botón de reset para volver a la configuración inicial.
Permitir bloquear la configuración para que el usuario borre o elimine algo accidentalmente.
Facilidad para desplazar los módulos.
Pero lógicamente existen pros y contras:
Pros
Personalizar hace que el usuario sienta que un pedazo de web le pertenece.
Hace la web más interesante, ya que el usuario la dispone a su gusto y quita cosas que le sobren.
Le da frescura ya que las modificaciones permiten hacer sentir que los contenidos se actualizan con mayor frecuencia.
Contras
No a todo el mundo le gusta la personalización, a parte requiere tiempo para realizarlo y eso puede hacer que no se haga.
Lo simple a veces es mejor, aunque claro, el diseño por defecto debe ser suficientemente bueno para que la personalización sea una opción, no una necesidad.
Requiere complejidad, que no suele ir muy bien con la usabilidad.
Un usuario puede querer añadir mucha información, perjudicando el rendimiento general.
Algo bastante importante en un proyecto es la configuración y cómo se gestiona. Para facilitar la gestión usaremos dos librerías dotenv y confidence, la primera permite usar ficheros .env en nuestro entorno de desarrollo para simular variables de entorno. La segunda nos ayudará a recuperar las variables de un objeto permitiendo usar filtros, por ejemplo según de las variables de entorno.
Instalaremos los paquetes:
npm i dotenv
npm i confidence
Confidence necesitará un criterio que nos permitirá obtener distintos resultados según su valor. Imaginemos que tenemos el siguiente criterio:
Si queremos acceder al nivel de debug, al ser env igual a development, obtendíamos INFO.
Vale, ¿y cómo lo usamos en el proyecto? Primero creamos una carpeta config, donde crearemos el fichero index.js que tendrá toda la configuración del servidor:
const Confidence = require( 'confidence' );
const Dotenv = require( 'dotenv' );
Dotenv.config( { silent: true } );
// NODE_ENV is used in package.json for running development or production environmentconst criteria = {
env: process.env.NODE_ENV,
};
const config = {
port: 3001,
};
const store = new Confidence.Store( config );
exports.get = function( key ) {
return store.get( key, criteria );
};
exports.meta = function( key ) {
return store.meta( key, criteria );
};
Dotenv simplemente se usa para obtener de las variables de entorno de servidor el valor de NODE_ENV. Por ahora solo tendremos la variable port, pero ya estará preparado para poder añadir otras variables de configuración posteriormente.
Creamos un store de Confidence y exportaremos los métodos get y meta.
Haremos algo parecido para el manifest necesario para Glue, creando el fichero manifest.js dentro del directorio config:
Interesantes consejos que nos ofrece Ilia Alshanetsky sobre la optimización de nuestras aplicaciones. Resumiendo el PDF de una charla que dió que ha compartido, tenemos:
Ten claro que va a hacer tu aplicación antes de meterte a optimizar
Basa tus cálculos sobre crecimiento y escalabilidad sobre datos reales, no sobre pajaras mentales de los comerciales
Más código no implica más lentitud, modulariza tu código para obtener mejores resultados
Piensa sobre el tiempo/gasto de desarrollo por ingenieros y el gasto en nuevo hardware. Esta solución no siempre es válida, ya que evitar cuellos de botella añadiendo servidores puede ser causa de mayores problemas en el futuro. Si tu código o consultas a la BD no son eficiente, es mejor optimizarlas. Para conseguir una mejora de rendimiento del 5% mejor no te molestes en optimizar el código.
La optimización de código puede originar fallos en otras partes de la aplicación
Cuidado con los includes: la compilación puede tardar más que la propia ejecución
Cache, preferiblemente en memoria, tanto datos recuperados de la BD como procesos que tarden en ejecutarse
No todo tiene que ser en tiempo real
Fíjate sobre todo en la base de datos, suele ser lo primero que necesita optimización
Usa herramientas para encontrar los cuellos de botella
Micro-optimizaciones no solucionarán tus problemas de rendimiento
Si crees que vas a crecer, la escalabilidad es más importante que la velocidad
No reinventes la rueda, crearte funciones que hacen lo mismo que funciones nativas de PHP es inutil
Para aquellos que necesiten ofuscar su código Javascript para que sea más difÃcil de entender a los usuarios, les vendrá bastante bien esta lista de aplicaciones que modificarán nuestro código:
Jasob 2: modifica los nombres de variables, borra comentarios y elimina espacios entre muchas otras cosas.
Javascript Obfuscator: trata los scripts y ficheros js contenidos en una página html, modificando los espacios, comentarios, nombres de variables y funciones y lo escribe todo en una única lÃnea, añadiendo punto y coma cuando sea necesario. Existe versión online.
Cuando desarrollamos una aplicación web, algo muy importante es separar la lógica de la aplicación de la presentación. En el siguiente artÃculo, nos comentan como hacerlo mediante PHP y el sistema de plantillas Smarty.
Primero nos explica la direfencia entre la lógica de aplicación, la cual se encarga de las operaciones como acceso a base de datos, validación de formularios, de la lógica de plantillas, que es la que se preocupa únicamente de mostrar la información.
Dentro de la lógica de aplicación nos tenemos que ocupar de la inicialización y configuración de la lógica de plantillas:
<?php
$smarty = new Smarty();
$smarty->display('index.tpl');
?>
Hay que tener cuidado de no cometer el error de en la plantilla modificar el formato del texto, por ejemplo quitarle espacios u otras cosas que corresponden a la lógica de aplicación.
Os recomiendo el artÃculo, porque viene muy claramente explicado, con ejemplos y nos puede ser de mucha ayuda.
¿Qué quiere decir que solamente funciona en google? ¿Solo funciona en Google Chrome?
SÃ, que sólo funciona en Google Chrome
Supongo, que funcionara con WebKit. todos los navegadores html5