En el 2005 vimos cómo la introducción de XMLHttpRequest, más conocido como ajax, cambiaba las reglas del juego y elevaba las posibilidades del desarrollo web de una forma más que considerable, propiciando la creación de herramientas que facilitaban mucho más la interacción y que, junto a otras formas no técnicas de pensar y concebir los sitios web, desataron la fiebre web 2.0.

Desde esa época hemos visto aparecer un sinfin de nuevas tecnologías tanto de frontend como de backend que nos permiten hacer crecer nuestros sitios web usando buenas prácticas y con relativamente pocos recursos, al menos muchos menos que los que necesitábamos hace diez años.

De entre todas las opciones que van apareciendo, las tecnologías que más me han interesado recientemente son las permiten implementar patrones mvc o mvvm con javascript, separando totalmente el html + css + js que usamos en el frontend del backend.

Algunas de estas tecnologías aparecen motivadas por técnicas usadas en los frontend de Facebook o Tuenti por ejemplo, que cargaban diferentes partes de su contenido de forma asíncrona al cambiar de sección y sin refrescar todo el layout, mejorando la experiencia de usuario notablemente.

Existen varias opciones: javascriptMVC, knockout y backbone, entre otros. Yo me he decidido finalmente por backbone, básicamente porque me parecía más cercano a la forma que tengo de trabajar con soluciones de frameworks mvc para web y he visto que cuenta con un gran apoyo por parte de desarrolladores frontend.

No hace falta tener mucha experiencia en el desarrollo web para ver las tremendas posibilidades que ofrece backbone en cuanto arquitectura y escalabilidad.

La ventaja más evidente es que nos libramos de tener vistas html mezcladas con código de servidor en el backend. Las vistas se procesan y parsean en el cliente, con javascript, pudiendo usar cualquier motor de plantillas para javascript como mustache.

Mustache parece la mejor opción ya que cada vez más se viene asumiendo como estándar la sintaxis de django para templates html, que se ha adoptado en motores de plantillas de otros lenguajes como en el caso de php en el que disponemos de Twig (usado en Symfony2) o Haanga. Es importante esto si queremos dar compatibilidad a clientes que no tengan habilitado javascript en el navegador, una buena práctica que en algunos casos puede ser totalmente necesaria aplicar.

Esto nos permite tener en un sólo directorio y servir directamente como estático el código html de todas las plantillas de la aplicación web, con las ventajas evidentes de que los maquetadores y diseñadores puedan trabajar con ellas directamente sin tener que conocer el lenguaje de servidor que la web está utilizando, además de poder servir todo el html como estático, reduciendo los recursos necesarios de procesador en nuestra aplicación web y pudiendo cachear todo desde en el cliente con HTTP Cache, usando las directivas de caducidad max-age y s-max-age.

Las plantillas pueden recibir información a través de un objeto json, que normalmente incluirá el Modelo. El modelo se puede integrar muy fácilmente con nuestra API de servicios en el backend, permitiéndonos hacer un CRUD desde el cliente de forma transparente y sin importar la tecnología o tecnologías escogidas en el backend.

Como en todo buen framework MVC para web, disponemos de un router en el que podremos definir las urls de nuestra aplicación siguiendo un esquema de urls ajax basadas en hashbang (utilizando el símbolo #) perfectamente indexable por buscadores.

Cada ruta dispara un evento al que podemos suscribirnos para cargar el contenido necesario en el layout de cada vista. Estas peticiones se hacen mediante ajax, por lo que podemos pensar en las siguientes ventajas:

Primera ventaja: Utilizando correctamente HTTP access control podremos distribuir como queramos, y en base a nuestras necesidades, cada recurso o parte de nuestra aplicación en servidores, clusters o servicios cloud distintos, teniendo cada uno en su propio dominio o subdominio.

Al poder ser nuestro frontend totalmente estático (se basa en html, js y css), podemos utilizar frontales web que únicamente sirvan html o incluso servicios de storage cloud, como Amazon S3 con CloudFront, teniendo distribuida nuestra aplicación geográficamente con un coste inicial bastante bajo si tenemos implamentada una buena estrategia de caché en el cliente y en el backend.

Segunda ventaja: Podemos utilizar diferentes tecnologías para cada parte de nuestra web. Esto lo podíamos hacer ya utilizando Edge Side Includes a nivel de proxy con Varnish por ejemplo, ahora no es necesario aunque podría ser completamente complementario.

Tercera ventaja: Nos obliga a desarrollar la capa de servicios desde el principio, teniéndo nuestra arquitectura frontend-backend desacoplada, respetando totalmente REST, permitiéndonos de una forma cómoda en un futuro usar clientes diferentes al navegador sin tener que plantear hacer una api como una problemática adicional.

Cuarta ventaja: Podemos usar el histórico de Backbone o directamente el History de HTML5 para cachear la navegación del usuario en el navegador, haciendo cosas tan interesantes como el Tree Slider de Github.

Backbone nos da más opciones y herramientas útiles para el desarrollo con javascript, pero creo que las que he mencionado son lo suficientemente interesantes como para motivarnos a pensar en otras formas de plantear nuestros sitios web en el futuro.

Incluso en algunos casos podremos plantear prototipos de nuestros productos, perfectamente testables en html, antes de tomar ninguna decisión tecnológica de backend e incluso antes de tener que desarrollarlos.

Las posibilidades son increíblemente atractivas.

PD: El título es sólo para llamar vuestra atención, actualmente prefiero el sexo a backbone.js.

En Ideateca Factory os hemos servido esta semana el primer entrante, Filesocial.

Filesocial es una aplicación web para twittear archivos, es decir una aplicación que se integra con Twitter y mediante el cual podemos compartir cualquier tipo de archivo con nuestros followers.

La idea original y desarrollo ha corrido por parte de Alberto Bajo, el diseño por parte de Antonio Ballesteros y la maquetación por parte de Joel Gonçalves.

Filesocial hace uso de servicios de Amazon, tanto s3 para almacenamiento como ec2 para las instancias del frontend y la base de datos.

Las tecnologías usadas hasta ahora son Ubuntu server para el sistema, mySQL para la base de datos, Lighttpd para el servidor web, php5 sobre symfony y memcached para la cache.

Tenemos abierto un espacio para que nos enviéis bugs, feedback o alguna idea que se os ocurra en userVoice, también podéis enviarlas a feedback at filesocial.com.

Ya estamos desarrollando y planeando implementar algunas de las valiosas sugerencias que nos estáis enviando (gracias!).

Esperemos que el proyecto os guste, iremos mejorándolo en base a vuestras opiniones.

Happy sharing :)

Teóricamente, debido a esta política, JavaScript no puede lazar peticiones o consumir datos entre dominios distintos. Digo teóricamente, porque esto puede conseguirse con algunas técnicas de hacking como csshttprequest.

Para no tenir que recurrir a estas técnicas existe una forma más elegante de conseguir esto y es mediante jsonp.

Básicamente se basa en una técnica en la que entran en juego tanto el frontend como el backend, en la petición/respuesta json.

El cliente envía una petición de tipo jsonp con un parámetro en la url que tendría como valor el nombre de la función que manejará la respuesta de dicha petición. En el servidor se retorna una respuesta json como valor de una variable con el Mismo nombre de dicha función.

Jquery puede trabajar con jsonp, el proceso sería el siguiente:

Javascript en el frontend con jquery

$(document).ready(function () {

$.ajax({
dataType: "jsonp",
data: "",
url: "http://example.com/json?method=?",
success: function(json){ alert(json.key); }
});

/*

Si el método que se le pasa en la url

tiene un valor "?" jquery generará

un valor aleatorio para la función que

manejará la respuesta. Esto nos evita

problemas con la cache

*/

})

Código de respuesta en backend en php

header('Content-type: text/json');

$respuesta = array('key'=>'valor');

echo $_GET['method']."(".json_encode($respuesta).")");

exit();

Esto nos permitirá trabajar con ajax entre dominios y gestionar la respuesta json a  nuestro antojo.

Al margen de la oleada cool que se ha generado, provocado por dicha evolución, se ha notado un cambio en el uso y desarrollo para internet, el usuario ahora tiene más facilidades para automatizar la obtención y divulgación de información.

Tan importante es ese cambio, que realmente una persona que quiera competir en internet y no sea capaz de integrarse y aprender de él, estará fuera de todo éxito.

Las empresas dirigidas por personas medianamente inteligentes se han dado cuenta hace ya bastante tiempo que deben no sólo adaptarse al cambio, sino cambiar de una forma real en su forma de trabajar y sobre todo de acercarse al consumidor.

Se ven nuevas formas de hacer las cosas, nuevas proezas en forma de aplicaciones y servicios web enfocados de una forma cada vez más humana y cercana al usuario.

Sin embargo todos esos servicios y aplicaciones dependen de algo sumamente importante y crítico: infraestructura de sistemas.

Esa infraestructura en España es suministrada actualmente por empresas de hosting, pero no terminan de adaptarse de una forma clara al cambio que sus propios clientes ya están asumiendo y demandan.

De nada sirve una aplicación desarrollada respetando buenas prácticas, patrones de diseño y optimizada al máximo si los servicios que consume no están preparados para aguantar la demanda que puede tener por parte de sus usuarios.

Ya no vale con migrar a una máquina más grande o escalar horizontalmente, se necesita un respaldo por profesionales con experiencia en sistemas que sean conscientes y entiendan las preocupaciones de los arquitectos de la nueva web.

Por supuesto, los obsoletos planes compartidos que encontramos en servicios de Hosting de este país, no tienen sentido para este tipo de escenarios.

Los desarrolladores web cada vez requieren tecnologías más versátiles y se ven necesitados sobre todo de las útimas versiones de sus herramientas con las que poder crear y ofrecer servicios realmente innovadores.

Muchos de esos desarrolladores se ven obligados a considerar otras opciones fuera del país, que ofrezcan servicios aparentemente mejor enfocados a lo que demandan o que sean más baratos.

Pero esto no es una solución o una opción para algunos de ellos, ya sea por la necesidad de disponer de un soporte cercano o un tiempo de respuesta de red aceptable, y finalmente se ven limitados por empresas que no les interesa o que no pueden adaptarse a sus necesidades.

Supongo que no soy el único que piensa de esta forma o que ha visto esta necesidad de cambio. ¿Qué experiencia tenéis vosotros en ese sentido? ¿Echáis de menos o necesitaís algun servicio que ahora mismo las empresas de hosting en España no os ofrecen?

Merece la pena echarle un vistazo

El evento tendrá lugar el Jueves 2 de Octubre, de 19:30 a 21:00 en el aula 205 del edificio ESIDE. Después haremos un Networking por la zona.

Como sabéis disponeis de un foro para comentar si os vais a pasar

• Tenemos un nuevo foro integrado con el blog. Si te das de alta en el foro o en el blog, tu cuenta es válida en ambos. Te agradeceríamos que participes para poder conocer que temas te gustaría ver en los próximos emprende web o si vas a asistir a las próximas convocatorias.

• Estamos intentando conseguir local por todos los medios, se empieza a ver algo de luz al final del túnel.

• Tenemos un nuevo sistema de notificación por email. Cuando se publique algo nuevo en el blog, te enteras por email. Gracias Lorena por la sugerencia ;)

• Apúntate en el foro y coméntanos si vas a asistir al próximo Emprende Web, de esa forma sabremos estimar cuanta gente va a venir :)

Hubo contrastes de tecnologías y campos: ruby on rails, php, .net, hosting, multimedia.. y eso, junto a la experiencia de cada uno, hizo que fuese muy didáctico para todos.

He publicado los apuntes de lo que ha sido la primera quedada informal de Emprende Web en Bilbao, una iniciativa que reune profesionales y gente con ganas de aprender sobre desarrollo web e internet, con el objetivo de generar debates productivos sobre tecnologías y métodos, consejos para desarrollar ágilmente y bien este tipo de aplicaciones, generar nuevos proyectos y acercar gente con pasión o ganas de divertirse o trabajar juntos creando conceptos para internet.

Esta primera quedada nos ha servido de vitamina a Javier y a mí, para intentar mejorar la siguiente convocatoria. Dicha convocatoria será en Septiembre y después intentaremos llevar una frecuencia mensual.

Durante este tiempo notaréis cambios en el sitio web de Emprende Web y aceptamos toda sugerencia o ayuda para intentar crear un buen evento en Vizcaya (por ahora) para personas con ganas de crear cosas en internet.

Al tener una base de datos interna, se sincroniza con nuesto blog cuando volvamos a tener conexión automáticamente. Otras opciónes interesantes son que podemos retransmitir en streaming desde nuestra camara web directamente o postearlo en un archivo .flv y podemos arrastrar y soltar directamente desde nuestro equipo elementos (imágenes, videos etc) al post que estamos escribiendo.