Si algo ha ocurrido con la entrada de Ajax allá por 2005 fue que el paradigma del desarrollo web cambió por completo. Con AJAX llegaron las peticiones asíncronas (aunque Microsoft ya las tenia anteriormente) hemos conseguido que la interacción usuario-web sea más ágil y optimizada. Curiosamente durante estos últimos años estamos viendo como los WebDevelopers están creando técnicas que realmente aprovechan la capacidad de Ajax. Ahora el “frontend” tiene mucho que hacer ya no solo es el encargado de renderizar html y ejecutar unas cuantas lineas de JavaScript, ahora el frontal debe hacer mucho trabajo, consiguiendo así liberar de proceso al “backend”. Prácticas habituales como pueden ser la ordenación y búsqueda de resultados ya no tiene porque procesarla nuestro servidor, no tenemos que subestimar la capacidad de nuestro front porque en muchas ocasiones es mas potente que el propio servidor.
En esta ocasión vamos a descubrir alguna de las “features” de LungoJS gracias a su extensa API JavaScript, demostrando que no es casualidad que el proyecto termine por las siglas JS (JavaScript). LungoJS es conocedor de que el frontend es muy importante en toda WebApp y nos proveé de técnicas avanzadas como pueden ser: DataBinding o Caching de una manera sencilla y semántica.
En apenas 30 minutos que dura este screencast, descubriremos una práctica habitual en toda webapp:
- Consumir un servicio RESTful: En este caso un JSON del servicio Panoramio
- Crear un template para los resultados del servicio
- Ejecutar un DataBinding entre RESTful y Template
- Crear un sistema de “caching” para no volver a llamar al RESTful (si no es necesario)
LungoJS como hemos podido comprobar nos pone las cosas fáciles (muy fáciles) para que realmente nos esforcemos en crear una mejor app evitando realizar estructuras repetitivas. Es aquí donde se encuentra el fuerte de LungoJS respecto al resto de frameworks, en su API JavaScript que realmente aprovecha y nos ayuda las capacidades actuales de nuestros navegadores. En próximos screencasts descubriremos otras técnicas y trucos que se esconden dentro de LungoJS y os animo a que nos mandéis sugerencias a la comunidad que se ha creado en http://community.lungojs.com.
Este es el segundo screencast que ofrecemos gracias a la colaboración de Javier Jimenez. Nos gustaría que nos dijerais en los comentarios: ¿Qué funcionalidades os gustaría ver explicadas en los próximos Screencast? Vuestros deseos son ordenes.
Javi Jiménez es el CEO y Lider Creativo de Tapquo, empresa especializada en desarrollo móvil HTML5 y creadora de nuevas experiencias en movilidad.
Evangelista de los estándares WEB, enamorado empedernido de JavaScript y autor del framework LungoJS y de la libreria QuoJS
Puedes seguirlo en Twitter: @soyjavi
Más información | LungoJs
En Genbeta Dev | LungoJS: “easy prototype” o lo fácil que es crear prototipos de WebApps
Comentarios
Cuando Juan Quijano nos mostró LungoJS ya dije que su estilo me gustaba mucho.
La parte de MVC del podcast sigue esa línea sencilla y potente.
Lo que ya no entiendo es la forma tan enrevesada de cachear la llamada, cuando se puede hacer trivialmente, por ejemplo en "service.js":
if(this.cached_data) return this.cached_data;
var self = this;
$$.get(... function(result) { self.cached_data = result; ...
y ya.
Además, el sistema de caché hay que intentar que sea transparente a todo el sistema y esté lo más cerca posible de la fuente de datos (ej. como he indicado); en el podcast se extiende el sistema de caché nada más y nada menos que a los archivos "events.js", "service.js" y "data.js".
Quizás haya alguna razón para haberlo hecho así (ej. para mostrar el almacenamiento y acceso a datos usando Data.Sql) aunque yo no la veo.
NOTA: ¡¿para cuando posibilidad de meter código (ej. vía <TAG>)?!
-- editado por última vez a las 10:32
Muy sencillo Jose Juan, lo que tu propones no cache sobre WebSQL vamos que solo estas cacheando el objeto. Imaginate que necesitas del conjunto de datos obtener algo especifico (lanzando una SQL)...
Tambien existe otro "ingrediente" dentro de LungoJS que es para los cacheos que tu propones: lng.Data.Cache
"Imaginate que necesitas del conjunto de datos obtener algo especifico"
Entonces (como ya he dicho ["...aunque yo no la veo"]) te estás imaginando otro problema, con otra solución.
Si vamos al grano (lo que hace el podcast, ni más, ni menos), si tu haces una petición REST, respecto a la caché:
1. confía que el servidor envíe información de caducidad y que el cliente sepa administrarla. Ergo, olvídate del tema de caché.
2. si [1] no funciona, házlo simple (ej. si tu framework admite .get(url, {cache: true})
3. si [2] tampoco funciona, házlo simple (ej. this.cached_data = bla, bla)
Si lo que queremos es mostrar el uso de Data.Sql, sugiero usar otros ejemplos y, en cualquier caso, mantengo mi opinión de que está enrevesado.
Gracias.
(nota, desconozco si mi tono suena tosco o no, independientemente de que esté en lo cierto o no, hago la crítica con la intención de mejorar la claridad de los post y/o mi conocimiento de ellos)
Jaja, bueno, yo creo que sí suena algo tosco (solo algo, ¿eh?), pero los que ya te conocemos sabemos que lo haces con la mejor de las intenciones.
Se dice muchas veces que los más inteligentes suelen ser menos expresivos (o no se preocupan por serlo). Este parece ser un ejemplo.
Tenemos un ejemplo en Wozniak y su contraejemplo en Jobs. Vamos, una tontería como otra cualquiera.
Javi, me encantan estos screencast, en poco tiempo enseñas ejemplos prácticos y sencillos. Solo tengo un pero: ¿vale? (se repite mucho esa coletilla, si pudieras reducir su uso quedaría más "mejor", no es importante pero ayuda a método didáctico.
Vale :)
Que por cierto no sé si te lo había dicho antes, pero está "cojonudo" LungoJS.
Tengo unas ganas de terminar los tres proyectos en los que estoy metido para empezar uno con LungoJS que no puedo, pero hasta Julio no voy a tener tiempo. Igual así ya me pongo con la versión 1.2 que comentas en el vídeo.
Siempre digo lo mismo cuando hay alguna noticia sobre LungoJS pero creo que nunca está de más, gracias a @soyjavi y a todo el equipo de LungoJS por facilitarnos el aprendizaje a los novatos en este mundo.
pd: no he podido ver el screencast, en cuanto pueda lo veo y comento que me gustaría ver para próximos screencast.
Saludos!
Nuevamente reconocer la grandiosidad del screencast y nuevamente reconocer que vuelven a haber ausencias de tildes y algún otro error gramatical, como es el caso de "ya no tiene PORQUE procesarla" cuando es "por qué".
Ya dices en el video que estás modificando el tema de las plantillas, y espero que esa modificación elimine la forma de crearlas dentro de un string de javascript. Es mucho más limpio y mejor crear plantillas HTML con etiquetas script de tipo text/template.
-- editado por última vez a las 18:13
"con etiquetas script de tipo text/template"
¡Muy buena!, me gusta.
Habitualmente uso mecanismos como $.get, pero en situaciones en que se debe cargar al inicio (o va incrustada en la página por ser plantilla específica) el uso de text/template es genial.
Desde luego, separar las plantillas es muy recomendable, sobre todo si maquetan personas diferentes a los programadores.
Tranquilos en la 1.2 el sistema de "templating" va a ser mucho robusto, solo os pido un poquito de tiempo... tener en cuenta que LungoJS lo estoy desarrollando solo (ahora mismo). Y el avance es lento pero seguro.... :)
El templating de la 1.2 va a tener precompilado de templates remotos/locales... creación de templates por JSON y muchas mas cosas... pero solo os pido un poco de paciencia.
Saludos y buen code!
"solo os pido un poco de paciencia"
Faltaría más. Tómate el tiempo que necesites. Agradecidos estamos por lo ya realizado.
Ya seguí el primer videotutorial y me encanta la manera de funcionar de lungojs.
Pero me he encontrado algún problema. En el tutorial todo bien, pero al intentar hacer algún test diferente por mi cuenta no me funciona el scrolling, y al cargar con android 2.3 no me aparece el botón de mostrar el menú lateral.
Tampoco funciona la url de http://community.lungojs.com/, da un error 500.
Por fin otro screencast! ^^ cuanto mas aprendo de lungo mas me gusta. Encuentro que es hna forma muh estrucutrada y limpia de desarrollar y sobretodo me encanta como aprovecha la semantica del html.
Un saludo ;)
Como se llama el editor de código que usas en el screencast? Es el Kod?
SublimeText 2 (en beta pero gratis de momento)
Esta guapísimo!
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conéctate con FacebookConnect