En este post vamos a presentar una pequeña pero muy útil directiva para Angular. La idea será poder editar un elemento HTML (en este caso, una etiqueta span) al hacer doble click sobre dicho elemento. Las directivas de Angular permiten extender (o decorar) elementos HTML con comportamientos, y manipular el DOM de manera relativamente sencilla pero muy potente, y además elegante y reutilizable.
El tiempo pasa y la tecnología cambia muy rápido pero los conceptos no tanto. Hace muchos años en 1995 apareció con Java Applet una forma de ejecutar código de alto nivel (en este caso Java) mediante una máquina virtual en el navegador, la Java Virtual Machine (JVM). El concepto era poder utilizar aplicaciones tan potentes como las de un escritorio en un navegador web y que el trabajo duro lo realizara cliente.
Aunque no acabó triunfando, ya que la JVM era pesada en la descarga y en el arranque de cada applet, el concepto evolucionó y Adobe lo llevó hasta su concepto de las RIAs (Rich Internet Application)creadas con Flex y basadas en otra máquina virtual Flash Player, mucho más ligera y que era un estándar ya que el 99% de los usuarios la había adquirido para ver contenido Flash.
Siempre se auguró como el futuro de internet este concepto y en la actualidad los frameworks JavaScript para aplicaciones web «single page» han tomado el relevo de crear sistemas en los navegadores donde gran parte de su lógica de negocio depende del cliente.
Sin tener experiencia previa, elegir un framework u otro puede ser una jungla difícil de atravesar. En este artículo vamos a comparar los que pensamos que son los frameworks JavaScript más populares: Backbone.js, AngularJS y Ember.js, primero desde un punto de vista lo más objetivo posible y posteriormente vamos a atrevernos a mojarnos y dar nuestra opinión personal sobre cada uno de ellos como la elección que hemos tomado en nitsnets | studios.
A la hora de diseñar una aplicación o software, es bastante común el caso de necesitar realizar un listado de datos anidados o jerarquizados. Por ejemplo: una lista de equipos pertenecientes a una liga y que incluye el entrenador y los jugadores de cada equipo, o un listado de autores con sus libros, que puede tener un nivel más de anidamiento si cada libro incluye, por ejemplo, una lista con cada una de las ediciones que ha tenido.
Desde la versión del framework 1.2, AngularJS nos provee con dos nuevas directivas diseñadas para facilitarnos esto. Estas dos nuevas directivas son ng-repeat-start y ng-repeat-end. Utilizando ambas junto con la clásica ng-repeat podemos conseguir una visualización de datos anidados sencilla pero realmente potente y adaptable.
La idea de este post es replicar uno de nuestros primeros post de utilidades para Flash, guardando jpgs en servidor con ActionScript3 pero utilizando tecnologías web estándares, es decir HTML5, CSS y JavaScript. En particular vamos a centrarnos en el elemento canvas de HTML5 para dibujar sobre él, y su método toDataURL para capturar la imagen en un stream de datos binarios que posteriormente enviaremos al servidor y guardaremos en un archivo PNG.
A partir de la versión 1.1.4 del framework (descargar aquí del Google CDN), AngularJS viene con soporte nativo para animaciones y transiciones gracias a la nueva directiva ng-animate. Os recomendamos encarecidamente echarle un vistazo al fantástico artículo en el blog yearofmoo que nos explica cómo utilizar esta nueva y genial feature de AngularJS y nos proporciona un buen número de ejemplos.
Puesto que esta directiva es una novedad de esta versión, debemos consultar la documentación de ngAnimate en los docs de la versión 1.1.4 ya que en versiones anteriores no vamos a encontrar referencias a las animaciones.
Cuando presentamos el framework JavaScript Ember.js ya comentamos que uno de los principales problemas de este framework era la dificultad de hallar buenos recursos de aprendizaje actualizados y por tanto los inicios eran (por decirlo suavemente) un tanto duros. Sin embargo, también advertimos de que los creadores del framework eran conscientes de ello y por tanto podíamos esperar interesantes mejoras y novedades al respecto. Pues bien, Tom Dale, uno de los autores del framework, se ha puesto manos a la obra y ha grabado un fantástico screencast de introducción a la programación de una Web App JavaScript en Ember.
Backgrid es un componente Datagrid para el framework Backbone, pensado para construir widgets datagrid que sean semánticos y fácilmente adaptables. Al igual que al trabajar en el framework Backbone, la filosofia de este componente es que las tareas comunes sean fáciles de llevar a cabo, y a su vez posibilitar la realización de tareas difíciles o más especializadas posibilitando una fácil personalización y extensión de sus elementos.
No vamos a esconder nuestra admiración por Jeff Atwood, afamado autor del blog Coding Horror y cofundador de Stackoverflow y ahora Discourse, una aplicacion JavaScript open source para foros de discusión desarrollada en Ember.js. Precisamente fue en el evento EmberCamp 2013, durante la charla de clausura que Atwood hizo algunas reflexiones muy interesantes sobre el pasado y el futuro de JavaScript y las aplicaciones y el desarrollo web en general.
No olvidemos que fue allá por 2007, con la web 2.0 aún prácticamente en pañales, cuando Atwood publicó en su blog la (narcisísticamente nombrada) Atwood’s Law:
“Any aplication that can be written in JavaScript, will eventually be be written in JavaScript”
¡No se puede ser más profético!
Entre otras cosas, Atwood destaca cuatro factores (ya sean características de JavaScript o circunstanciales) que han contribuido al auge de este lenguaje y su actual popularidad entre los desarrolladores.
Después de la demo de Webapp en AngularJS y de la demo de Backbone vamos a hacer una pequeña introducción a un framework JavaScript relativamente nuevo y que tiene un nivel de hype altísimo debido a algunas características realmente interesantes y potentes: Ember.js
En el momento de escribir este post el framework Ember se encuentra ya en versión 1.0 Release Candidate y cada vez más cerca de una versión estable. Por desgracia, la información y ejemplos de código actualizados que se pueden encontrar sobre este framework son escasos, así que nos parece que este ejemplo puede resultar muy útil para alguien que quiera empezar con Ember a través de un ejemplo de App sencilla (pero funcional).
Vamos a replicar la demo de Webapp en AngularJS que publicamos esta misma semana, pero esta vez utilizando otro de los frameworks JavaScript para Webapps más populares, Backbone.js como alternativa. Al igual que en el caso de AngularJS, vamos a intentar ofrecer una introducción al framework así como una posible estructuración de proyecto.