Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

lunes, 6 de julio de 2015

Untrusted: como perder una noche de sueño

Como a todo nerd, me pierden los desafíos de código. :)

Ya perturbé la salud mental de algunas amigas y amigos con Ruby Warrior, pero los amigos de JavaScript Jabber (un podcast sobre JS muy recomendable) me enviciaron con Untrusted, un juego para ir resolviendo pistas en JS, que además tiene un atractivo adicional y es que cada nivel tiene una musiquita sintética muy pegadiza.

Como suele ocurrir en estos casos, Untrusted tiene una pantalla dividida, en este caso con "el juego" a la izquierda, donde tenemos que buscar una salida, y el código a la derecha (el verdadero juego) donde tenemos que ir tocando el código en JS que arma ese nivel para poder superarlo. Lo divertido es que las soluciones son triviales en cuanto a código, pero exigen pensar como hackear la construcción del nivel para poder escaparse.

Pantalla de Untrusted

Si pierden muchas horas de sueño, ¡no digan que no les avisé!

lunes, 23 de septiembre de 2013

¡Opa! ¿Y este framework?

Opa Up and Running

El framework Opa para JavaScript es más que un framework. En realidad, es un lenguaje + una librería, pero con un objetivo bastante ambicioso: Opa intenta cubrir con mismo lenguaje el desarrollo del lado cliente, servidor y el acceso a base de datos.

Según la introducción del proyecto en su repositorio de GitHub (traduzco):

Opa es un framework avanzado para JavaScript, compuesto de dos partes:

  • Un compilador para el lenguaje Opa, que presenta una sintaxis de estilo JavaScript pero con muchas mejoras;
  • Una librería JavaScript, que se usa en tiempo de ejecución.

Siguiendo la tradición de recorrer "Raros lenguajes nuevos", lo que más me interesó de Opa es el lenguaje mismo, y ese objetivo ambicioso, así que veamos algunas características:

Opa es open source (la librería con licencia MIT y el compilador GPL 3) y se autodefine como un lenguaje "full stack" ya que cubre todas las capas, y promete soportar aplicaciones seguras y escalables.

Las aplicaciones terminan ejecutándose sobre Node.js y usan MongoDB para el manejo de datos.

Soporta nativamente HTML5 y CSS y trata de automatizar la comunicación cliente/servidor con Ajax/Comet, y brinda un modelo de programación orientado a eventos y no-bloqueante (básicamente, respeta el modelo JS, pero subiendo el grado de abstracción).

Una de las promesas más atractivas de Opa es que se puede programar sin pensar (a priori) en la distinción entre cliente y servidor. El compilador analiza y distribuye el código, haciéndose cargo de toda la comunicación. Posteriormente, sin embargo, uno puede optimizar algunas situaciones utilizando los modificadores client y server.

Veamos el clásico "Hola, Mundo" en Opa:

Server.start(
   Server.http,
   { title: "Hola, Mundo"
   , page: function() {<h1>¡Hola, Mundo!</h1> }
   }
)

El programa se corre (habiendo instalado el compilador y las herramientas, obviamente) con el comando: opa hola.opa -- y la aplicación puede navegarse en http://localhost:8080

Algo interesante de Opa es que a pesar de compilar a JS (algo ya recurrente) es un lenguaje de tipos estrictos, aunque no hace falta declararlos porque se utiliza inferencia. Sin embargo, el compilador informa de cualquier tipo de violación y es bastante inteligente al sugerir incluso las opciones para solucionarlas.

Veamos un ejemplo más, con acceso a datos. Este ejemplo de los tutoriales cuenta clics y los almacena en una tabla:

import stdlib.themes.bootstrap

database int /counter = 0;

function action(_) {
    /counter++;
    #msg = <div>Thank you, user number {/counter}!</div>
}

function page() {
    <h1 id="msg">Hello</h1>
    <a class="btn" onclick={action}>Click me</a>
}

Server.start(
    Server.http,
    { ~page, title: "Database Demo" }
)

Como puede notarse en el ejemplo de arriba, el HTML queda completamente embebido como parte del lenguaje, sin necesidad de usar comillas para los literales, que además soportan interpolación sencilla. 

Obviamente, como Opa está basado en Node, también es posible usarlo en Linux, FreeBSD, OS X y Windows, y estando disponibles todos los fuentes, es posible compilarlo en otras plataformas también.

También tiene instrucciones para desplegar fácilmente aplicaciones en plataformas como Heroku, Cloud Foundry y otras, y existen packs para varios editores como SublimeText, Emacs, Vim, Eclipse, GEdit y otros.

Esto es una brevísima introducción porque realmente hay mucho por investigar en este interesante lenguaje. Si alguien profundiza, me encantaría que me cuente. Lo mismo haré por mi lado.

Y casi me olvido: como pueden ver en la ilustración más arriba, hay un libro publicado por O'Reilly.

viernes, 13 de septiembre de 2013

JavaScript Jabber: hablando en JS

Post cortito hoy para compartir un podcast que vengo escuchando últimamente:

En este podcast semanal (en inglés), un grupo de programadores que programan en JS y otros lenguajes, se reúnen y charlan sobre un tema, en muchos casos con invitados como autores de librerías, frameworks, o miembros de equipos en organizaciones o proyectos interesantes.

Dejo aquí el último episodio (a hoy) con el autor de Grunt.js.

Episodio 74 - Grunt.js con Ben Alman

jueves, 12 de septiembre de 2013

JavaScript - La compilación del futuro (+ video)

Hace 5 años escribí en este mismo blog un post llamado "JavaScript - a programación del futuro", en honor a aquel libro clásico del Maestro ("Java - La programación del futuro", de MP Ediciones). Básicamente, mi hipótesis en ese momento, mirando alrededor, era que JS iba a impactar cada vez más, al resolverse temas de incompatibilidades entre navegadores, mejorar las implementaciones y herramientas, y solidificarse el lenguaje del lado del servidor.

Cinco años después, por una vez en la vida, parece que no le había errado demasiado. JS explotó en librerías, frameworks y herramientas de todo tipo, Node lo impulsó mucho más allá de los navegadores, tanto a los servidores como a aplicaciones de escritorio, middleware, robótica y mucho más.

Ahora, sin embargo, viene el siguiente paso: si JS es el lenguaje que finalmente cumplió la promesa de correr en todos lados, es hora de pensarlo más y más como EL runtime. Brendan Eich, el creador original de JS dijo hace unos años algo como "JS is the x86 of the web", insinuando que podía convertirse en el "assembler" de la web. Muchos lo acusaron de exagerado, pero...

NewImage

Desde hace tiempo, kripken (también conocido como Alon Zakai) un investigador de Mozilla, trabaja en EmScripten, un compilador de LLVM a JS. En resumen, toma bitcode de LLVM, generado con C/C++ y lo compila a JS. ¿Parece ridículo? No lo es tanto, considerando que de esa manera ese código puede ejecutarse en cualquier navegador moderno.

Parece una propuesta completamente de laboratorio, con pocas aplicaciones prácticas. Hasta que uno mira los proyectos que ya la están usando en el mundo real. Uno de los ejemplos más impresionantes es el motor de renderización 3D del juego Unreal, que se migró de C++ a JS en 4 días. El resultado puede verse en este video.

El tema no se termina ahí, en la compilación a JS. Porque no todo código en JS es el más optimizable. Y aquí es donde kripken y amigos comenzaron ASM.js, un subset de JS que si permite altísima optimización en todos los navegadores, como puede verse en su presentación.

Para que quede claro, todo esto se está logrando en este mismo momento, con los motores de JS de hoy, sin cambios importantes. Si la idea se expande, como ya está sucediendo, los motores pueden optimizar aún más este subset, utilizando técnicas de compilación existentes y probadas por años, logrando aún mayor performance.

¿Estaremos llegando al runtime final? Dejo como material para pensarlo este video de Eich en la JsConf de este año (~26 minutos). Que lo disfruten.

miércoles, 11 de septiembre de 2013

Nitrous: un entorno de desarrollo completo en la nube

Después de un año de silencio ¡vuelve Code & Beyond!

Hace aproximadamente un año cambié de trabajo y me sumé a Kleer, donde como socio tengo muchas de las responsabilidades acuciantes de cualquier start-up, lo que requirió dejar algunas actividades de lado. Específicamente, este blog no tiene sentido para mi sin una frecuencia importante, por lo que quedó congelado… hasta ahora. Espero que disfruten algunos de los aprendizajes que compartiré con ustedes en adelante, y como siempre, el feedback es bienvenido en @MartinSalias.


Imagen básica

Estoy probando la beta pública de Nitrous.io, un servicio de "dev boxes" en la nube.

Básicamente, lo que nos brinda (partiendo de un servicio básico gratuito con 384 MB de RAM y 750 MB de storage) es una "caja" con Linux (la mía es un Ubuntu 12.04.1 LTS).

Lo bueno del servicio es que puede accederse de múltiples maneras:

  • por SSH directo
  • abriendo una terminal en el navegador
  • utilizando una IDE en línea (ver botón en la imagen)
  • a través de la aplicación para Mac (a las que se espera que se sumen otras para Linux y Windows). Esta aplicación genera una carpeta local con subcarpetas para cada "box" que uno tenga, y las mantiene sincronizadas (estilo DropBox). Además de eso, agrega un icono y menú en OS X que facilita llegar al sitio o la carpeta local, abrir una terminal vía SSH o la IDE en línea, controlar el port forwarding o la sincronización, etc.
Las "boxes" se pueden crear utilizando plantillas que incluyendo componentes pre-instalados para (por ahora) Ruby/Rails, Node.js, Python/Django y Go.
 
Personalmente, lo que más me atrajo es abrir la terminal desde el browser, jugar desde ahí, crear una carpeta para probar, usar vim para crear un ejemplo pequeño en Node,js (a pesar de haber creado mi box con la plantilla de Ruby, Node ya estaba ahí), correrlo desde la consola, ir a la URL de preview (agregándoe el puerto 3000) que elegí y ver que ya estaba funcionando.
 
La aplicación para Mac anda bien, pero la sincronización de archivos agrega una latencia que prefiero evitar. Siendo poco fanático de las IDE, tener la terminal me alcanza y sobra (es lo mismo que conectar por SSH, pero desde el browser de una).
 
La verdad es que el proyecto promete, y me gusta mucho la idea de usarlo para alguno de los entrenamientos que doy regularmente.

miércoles, 8 de agosto de 2012

FertnetJS: comunidad de JavaScript en español

FernetJS

Me encontré recientemente con este sitio que imagino creado por argentinos aficionados a JavaScript y al fernet (bebida patria, sobre todo en Córdoba).

Se trata de un blo de artículos técnicos sobre JS, Node y temas similares, con muy buena información generada por los autores, más alguna que otra redifusión de vídeos o noticias. Todo el contenido es en español y admiten contribuciones, aunque mantienen la moderación.

Algunos de los colaboradores más activos son @MatiasArriola, @pnovas@dzajdband, y @Peesstt

En el sitio hay una foto donde se ve al grupo fundador:

Equipo de fernetJS

Algunos de los últimos post,para que se den una idea de temas, son:

  • Tuneando las Dev Tools de Google Chrome
  • Usando distintas versiones de jode
  • NodeJS en la nube con Nodejitsu y Nodester
  • Pateando Google Analytics desde NodeJS
  • Fernet Volador: detrás de escena
  •  Es un Array o no?
  • Del ofuscador al konami code

Buen recurso para los fanáticos de JS. ¡Gracias al equipo!

lunes, 6 de agosto de 2012

Libros: aprendiendo JavaScript con recursos gratuitos (+video)

Libros de JavaScript

JavaScript es el lenguaje ubicuo que todos tuvimos que aprender en algún momento, y que en los últimos años mejoró en cuanto a implementaciones, frameworks y técnicas generales de programación, a la vez que se posición fuertemente también del lado del servidor, evolucionando de un lenguaje que la mayoría evitaba a algo que la comunidad aprecia cada vez más.

Sin embargo para muchos todavía queda muchísimo por aprender, y a pesar de que hay una cantidad importante de recursos, suelen estar desparramados por la web. Reconociendo este tema, la gente de Revolunet (una compañía francesa de diseño web) decidió compilar esta lista creciente de libros (algunos PDF, otros en línea) sobre JS, Node, CoffeeScript y otras variantes que están disponibles gratuitamente. Por ahora los títulos están en inglés, pero la lista, que está alojada en GitHub, seguramente siga creciendo y aparezcan traducciones o títulos en otros idiomas.

Actualmente hay disponibles 11 títulos:

Libros Gratuitos de JavaScript 

De postre les dejo un video (en inglés; 25 minutos aprox) de Addy Osmani (una autoridad en JS, autor de dos de los recursos mencionados) hablando sobre cómo estructurar aplicaciones JS pequeñas, medianas y grandes (algo que es una consulta usual para los que se adentran en este terreno).

martes, 31 de julio de 2012

Codecademy: aprendiendo a programar en sociedad

Medallas en Codecademy

Acabo de descubrir este interesante sitio llamado Codecademy que unifica varias tendencias recientes:

  • Intérpretes en línea (a la TryRuby o TryPython)
  • Web social (todo se enlaza con Facebook, Twitter o Google)
  • Ludificación de las actividades (a medida que se avanza en el proceso de aprendizaje se reciben "medallas" que pueden compartirse en las redes sociales)

Piensen en este sitio para aprender a programar diferentes lenguajes y plataformas, como JavaScript, Python, Web fundamentals, jQuery u otras técnicas más breves y puntuales (como utilizar paneles o menúes colapsables, efectos y plugins de jQuery, etc).

Otro tema interesante del sitio, que es totalmente gratuito, financiado por una serie de empresas de medios ligadas a la industria de software, es que además de ser una plataforma abierta para aprender, también lo es para enseñar, ya que ofrece la posibilidad de crear nuevos cursos para compartir conocimientos. Por ahora los cursos deben ser basados en JavaScript, Python, Ruby o Web (HTML/CSS), pero imagino que la oferta se irá incrementando con el tiempo.

Espero que la iniciativa crezca, ya que es un buen recurso para aprender a programar o para acercarse a nuevos lenguajes y técnicas, haciéndolo de manera divertida y con feedback permanente, que es lo que muchas veces hace difícil el hecho de mantener la disciplina en cuestiones de auto-capacitación.

Seguimiento del entrenamiento

Lo más sencillo para experimentar el sitio es entrar directamente a él y comenzar. Me gusta el diseño y la usabilidad, ya que se puede comenzar sin siquiera registrarse. Identificarse es necesario solamente para mantener un seguimiento del avance, y para ello se destaca preferentemente el usar autenticación a través de un proveedor externo (oAuth) como Facebook, Twitter o Google, lo que facilita el compartir los avances en las redes sociales, aunque no es un tema compulsivo y uno puede ser totalmente silencioso.

Para quienes quieran conocer más detalles, el equipo mantiene un blog y por supuesto, pueden seguirlos en Twitter.

jueves, 5 de julio de 2012

Video: Desarrollando en Node.js desde Mac OS y desplegando en Azure Web Sites

Desde hace años vengo trabajando con Windows Azure, la plataforma de cloud computing de Microsoft. Hasta ahora, más allá de haber logrado algunos proyectos interesantes, la plataforma no me entusiasmaba demasiado por varios motivos:

  • Estaba muy orientada a un modelo de desarrollo específico (Platform as a Service)
  • Estaba muy orientada a .NET (había maneras de utilizar otras plataformas, pero siempre complejas)
  • El mecanismo de despliegue y actualización era muy poco eficiente

En las últimas semanas finalmente se liberaron nuevas características que me parecen mucho más interesantes. Dos en particular (que están aún en preview, pero utilizables dentro de la prueba gratuita por tres meses) son:

Azure Virtual Machines

Este servicio finalmente abre los data centers de Azure por completo. Desde el panel de control se pueden generar imágenes pre-configuradas de varias distribuciones de Linux, además de Windows, obviamente. Vean las opciones disponibles hoy:

Imagenes disponibles 

Azure Web sites

Es un servicio de hosting de aplicaciones web genérico, soportando múltiples lenguajes y con más flexibilidad que un host tradicional. Además de cubrir (por ahora) ASP.NET, ASP, Node.js, Java, PHP, Python y C++, el mecanismo de despliegue es todo un avance con respecto al anterior: se puede subir directamente desde el portal, por FTP, GIT o TFS. En cuanto la aplicación llega a Azure, prácticamente en forma inmediata queda disponible en línea.

Además de los diferentes lenguajes, otro cambio impresionante viniendo de Microsoft es que los SDK y las herramientas de consola son todas abiertas (admitiendo contribuciones; todas en GitHub) están disponibles para Windows, Mac OS y Linux, con lo que nuestra plataforma de desarrollo puede ser cualquiera.

Algunas cosas en mi lista de deseos hacia adelante:

  • Mejorar la usabilidad del portal exigiendo menos Login (ahora insiste varias veces ante distintas operaciones)
  • Soporte para autenticación por certificados en GIT (ahora hay que usar la password en cada push)
  • Soporte para Ruby (creo que el problema principal por ahora son las gemas que requieren compilación nativa)

Como ejemplo de todo esto, les dejo este cortísimo video (~6 minutos, en inglés) en el que Glenn Block, alguien a quien respecto mucho y que siempre impulsó las plataformas y paradigmas abiertos dentro de Microsoft (¡presten atención a su camiseta!), muestra como desplegar una aplicación Node.js (usando Express) desde Mac OS. Microsoft aún no puede sustraerse a sus carteles publicitarios al inicio y fin del video, pero el resto es recomendable.

viernes, 9 de marzo de 2012

Lindo proyecto para despuntar el vicio

Markdown

En las últimas semanas un grupo de colegas y amigos, liderados por Matias Woloski y Lito Damiani e incluyendo a unos cuantos compañeros de Southworks, lanzaron un proyecto de código abierto muy interesante, que es a la vez una herramienta muy útil y una gran idea para practicar JavaScript, Node y varios temas interesantes de programación en un entorno compartido.

El proyecto se llama MarkdownR y esta es la descripción (en mi traducción rápida al español, con links agregados):

MarkdownR es un editor colaborativo de markdown construido sobre share.js y corriendo en Node.js sobre Windows Azure que permite...

  • editar un archivo markdown en colaboración y ver los cambios que hacen los demás en tiempo real
  • abrir y guardar sobre el almacenamiento de blobs de Windows Azure
  • abrir y guardar en GitHub utilizando su API y OAuth
  • copiar y pegar imagenes desde el portapapeles que se guardan automáticamente en el almacenamiento de blobs (sólo funciona en Chrome por ahora)

MarkdownR surgió de programadores de Southworks durante su tiempo libre entre proyectos y se plantea también como una herramienta de aprendizaje. La calidad del código es la de una prueba de concepto. No hay pruebas (todavía), tiene defectos, no funciona en IE9 y no hace limpieza del HTML (así que si alguien agrega tags de script y rompe todo, que no se enoje).

El proyecto es completamente abierto (las contribuciones se aceptan como pull requests) y está alojado en GitHub, listo para clonar y jugar.

 

miércoles, 15 de febrero de 2012

Bootstrap 2.0: de Twitter para el mundo

Twitter

El equipo de la interfaz web de Twitter publicó ya hace tiempo como código abierto y gratuito Bootstrap, un conjunto de herramientas para trabajar interfaces web de manera consistente y basada en los nuevos estándares.

Bootstrap está basado en HTML5, incluye hojas de estilo en cascada (CSS) y componentes en JavaScript que brindan muchísimas flexibilidad y consistencia para lograr páginas limpias y sencillas, que a primera vista resultan familiares y fáciles de usar, como este ejemplo (sumamente básico, pero ilustrativo):

Ejemplo de Bootstrap

Hace unos días los responsables de Bootstrap, que está alojado en GitHub y es uno de los proyectos más exitosos en el sitio, que recibe además múltiples aportes de la comunidad, liberaron la versión 2.0, que agrega un esquema de trabajo sobre una grilla de 12 columnas que facilita la ubicación de elementos que pueden reacomodarse en diferentes formatos de dispositivo, y permite crear elementos anidados, relativos, etc.

Otra novedad es que todo el manejo de hojas de estilo ahora está basado en LESS, un lenguaje dinámico que extiende y mejora CSS a través de manipulación en JS.

Un último detalle que me parece muy bueno es la posibilidad de configurar el conjunto de herramientas necesarias para un proyecto en particular y poder descargar el paquete mínimo necesario, pero con todas las dependencias y configuración perfectamente resueltas. Así se puede optar por incluir o no cualquiera de estas múltiples características:

Componentes

  • Scaffolding
    • Normalize and reset
    • Body type and links
    • Grid system
    • Layouts
  • Base CSS
    • Headings, body, etc
    • Code and pre
    • Labels
    • Tables
    • Forms
    • Buttons
    • Icons
  • Components
    • Button groups and dropdowns
    • Navs, tabs, and pills
    • Navbar
    • Breadcrumbs
    • Pagination
    • Pager
    • Thumbnails
    • Alerts
    • Progress bars
    • Hero unit
  • JS Components
    • Tooltips
    • Popovers
    • Modals
    • Dropdowns
    • Collapse
    • Carousel
  • Miscellaneous
    • Wells
    • Close icon
    • Utilities
    • Component animations
    • Responsive
    • Responsive layouts

Y también se pueden seleccionar los plugins de jQuery, como transiciones, modal dialogs, dropdowns, tooltips y muchísimas cosas más.

Finalmente también se pueden personalizar los valores básicos de una serie de variables de LESS que se toman como base inicial.

La mejor manera de conocer y valorar Bootstrap es mirar un poco el sitio y descargarlo para probar.

martes, 27 de diciembre de 2011

PhoneGap: un entorno para gobernar a todos (+ videos)

PhoneGap

El terreno del desarrollo de aplicaciones para móviles es cada vez más complejo. Incluso a medida que avanza el dominio de iOS y Android, hay una cantidad de dispositivos y sistemas operativos que aun son relevantes, y las variantes entre formatos, restricciones impuestas por las tiendas de cada fabricante y demás particularidades tienden a complicar la tarea enormemente.

En estos casos siempre han surgido intentos de proveer un único entorno que permita generar aplicaciones para diferentes objetivos, pero en general los resultados no son demasiado buenos porque suelen apuntar a un denominador común que usualmente es bajo y desaprovecha el potencial de muchas de las plataformas. No es el caso con PhoneGap, una plataforma que permite desarrollar aplicaciones nativas para múltiples dispositivos, a partir de su desarrollo en HTML5 (HTML, CSS y JavaScript).

PhoneGap es código abierto y gratuito y fue creado por una pequeña empresa llamada Nitobi que fue comprada en octubre por Adobe, que mantuvo el compromiso de mantener las características abiertas de la plataforma, delegando incluso la base de código a la Apache Software Foundation.

Desarrollando en HTML/JS, PhoneGap permite acceder a todas las API nativas de cada plataforma (salvo en casos ne que no existen) y el empaquetado posterior genera aplicaciones nativas y ajustadas a los requerimientos de los mercados de cada proveedor. Las plataformas cubiertas actualmente son:

  • iOS
  • Android
  • Blackberry (OS 4.6 hasta 6.0)
  • WebOS (de hp)
  • Windows Phone 7
  • Symbian
  • Bada (la plataforma de Samsung)

Y las APIs cubiertas cubren casi todo lo que cada tipo de dispositivo tiene disponible (muchos no tienen brújula o no soportan video, por ejemplo), incluyendo:

  • acelerómetro
  • cámara
  • brújula (si hay)
  • contactos
  • archivos (en los sistemas que lo permiten)
  • posición geográfica
  • media (audio/video)
  • red
  • notificaciones visuales, sonoras o vibrador
  • almacenamiento

Veamos un ejemplo rápido de cómo utilizar el acelerómetro en JS:

function onSuccess(acceleration) {
    alert('Acceleration X: ' + acceleration.x + '\n' +
          'Acceleration Y: ' + acceleration.y + '\n' +
          'Acceleration Z: ' + acceleration.z + '\n' +
          'Timestamp: '      + acceleration.timestamp + '\n');
};

function onError() {
    alert('onError!');
};

navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);

Esta interfaz funciona en Android, iOS y BlackBerry OS 5.0 o superior. De manera similar puede accederse a casi todos los recursos de los dispositivos, y la funcionalidad es la mejor posible para cada uno de ellos, ya que no se reduce todo al denominador común, sino que hay soporte para toda la funcionalidad de las plataformas. Es importante entender que no hay magia y cada plataforma final mantiene sus requerimientos originales. Por ejemplo, para generar aplicaciones iOS es necesario trabajar en Mac OS, y para genera aplicaciones Windows Phone es necesario Windows; Android requiere en el SDK y Eclipse, etc.

Quedan a continuación un par de vídeos (en inglés) mostrando PhoneGap en acción para iOS y Android.

lunes, 26 de diciembre de 2011

Raros lenguajes nuevos: Dart (+ video)

Dart

Hace ya varios meses comenzó a circular el rumor de que Google estaba trabajando en un nuevo lenguaje. Entre los rumores se mencionaba un nombre: Dash, y un par de personas, conocidos para los que siguen las novedades en cuanto a lenguajes y máquinas virtuales: Gilad Bracha y Lars Bak.

En la conferencia GOTO, en Aarhus, Dinamarca, durante octubre de este año, se descorrió el velo y se presentó el nuevo lenguaje, con nombre definitivo similar al inicial: DART.

Efectivamente los autores detrás son Bracha y Bak. Bracha se ha autodenominado Teólogo Computacional Emérito, y conocido por ser coautor de la Especificación del Lenguaje Java y creador de los lenguajes StrongTalk (un entorno de Smalltalk, en realidad, creado antes de entrar en Sun) y más recientemente, Newspeak. Lars Bak es un reconocido en máquinas virtuales, habiendo liderado en Sun proyectos como HotSpot y Java ME, el entorno de ejecución de Self y más recientemente V8, el motor de ejecución de JavaScript abierto que forma parte de Google Chrome.

Google mantiene dos proyectos en paralelo respecto a la evolución de JavaScript: por un lado sigue apoyando fuertemente el desarrollo de EcmaScript (el verdadero nombre de JavaScript) para resolver algunos de los problemas de diseño que acarrea a lo largo de los años. Por otro lado, reconociendo que este es un camino que tomará muchísimos años y será complejo implementar algunas soluciones, mantiene también a Dart como una alternativa posible.

Dart es un lenguaje con muchas características conocidas, que no sorprende demasiado, pero con una base muy fuerte en su motor de ejecución, y mantiene la capacidad de ejecutarse nativamente dentro del navegador, algo que todavía no está completamente soportado ni en Chrome, pero si experimentalmente en una versión particular de Chromium (el proyecto abierto) siguiendo instrucciones particulares para compilarla.

Las características principales de Dart como lenguaje son:

  • Tipos estáticos opcionales (si no se declaran son dinámicos)
  • Herencia simple basada en clases con interfaces
  • Genéricos
  • Sintaxis muy similar a JS
  • Interpolación de strings
  • Lambdas
  • Modelo de aislamiento similar a Erlang (cada Isolate es un conceptualmente un proceso sin nada compartido, comunicándose por pase de mensajes, pudiendo correr en paralelo)

Las opciones de ejecución son realmente tres:

  • Compilar de Dart a JavaScript (la única opción que permite generar y ejecutar aplicaciones hoy en día)
  • Ejecutar el código Dart en su propia máquina virtual (aun no soportada realmente en ningún navegador, pero si en las herramientas Dart)
  • Crear una imagen (se trata de una imagen del heap de una aplicación que puede empaquetarse y reactivarse instantáneamente, similar a una imagen de Smalltalk).

Para utilizar Dart es necesario descargar y utilizar un conjunto de herramientas empaquetadas como un plugin de Eclipse, o para probar el lenguaje en un contexto más básico se puede utilizar Dartboard, un pequeño editor en linea con las herramientas detrás, en el servidor. En la imagen debajo pueden ver DartEditor corriendo en mi computadora:

Dart Editor

Para los más interesados, dejo un video y presentación de Gilad Bracha mismo en InfoQ (en inglés). Lamentablemente la gente de InfoQ no permite embeber el video de manera directa, pero es en parte porque ellos brindan una experiencia muy buena al sincronizar el video del presentador junto a las diapositivas en cuadros separados.

lunes, 7 de noviembre de 2011

jQuery 1.7 disponible

jQuery

La más popular de las bibliotecas de JavaScript, instrumental en cambiar el panorama de este lenguaje, ha sido actualizada una vez más.

Esta versión 1.7 ya está disponible para descarga tanto en el sitio oficial (versión completa o minimizada) como en las redes de distribución de contenido de Google y Microsoft, desde donde conviene apuntarlas en nuestros sitios web para garantizar la mejor eficiencia de acceso.

Algunas de las novedades principales, además de correcciones y mejoras generales, son:

Nueva API de eventos on / off:

Esta sintaxis unifica diferentes maneras de enlazar eventos como las anteriores delegate() o bind(). La sintaxis completa es:

$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );

Ejemplos de uso:

$('form').on('submit', { val: 42 }, fn);

$(window).off('scroll.myPlugin');

$('.comment').on('click', 'a.add', addNew);

Enormes mejoras en el rendimiento de eventos delegados

Muchos otros frameworks basados en jQuery, al igual que muchas aplicaciones complejas hoy día, usan eventos delegados en forma cada vez más intensiva, por lo que el equipo hizo un arduo trabajo de investigación de los escenarios más típicos y logro mejorar el rendimiento de muchas operaciones en forma dramática. Vean el siguiente cuadro comparativo de velocidad de ejecución de las pruebas en diversos navegadores:

Eventos Delegados en jQuery 1.7

Soporte mejorado para HTML5 en Internet Explorer 6, 7 y 8

Aun utilizando bibliotecas como Modernizr o html5shiv, hay tags como <section> que eran eliminados por estos navegadores. Esta versión de jQuery (que no reemplaza las bibliotecas mencionadas) permite seguir manipulando estos elementos en métodos como .html().

Mejoras en jQuery.Deferred

El objeto jQuery.Deferred es parte del API para ejecución asincrónica. Este objeto representa una promesa de retorno de un proceso que está ejecutándose asincrónicamente, mientras nuestra aplicación puede seguir trabajando en otra cosa o atendiendo a eventos.

Esto ya funcionaba perfectamente, pero en la nueva versión se ha extendido el objeto para poder manejar notificaciones de progreso, de manera de poder reportar el avance, o poder preguntar por el estado en cualquier momento.

Otras mejoras generales

También se mejoró la activación y desactivación de animaciones para hacer más intuitivo el manejo cuando éstas operaciones están anidadas, se agregó soporte para el AMD API (definición de módulos asincrónicos), que unifica varias otras bibliotecas como RequireJS o curl.js para cargar módulos dinámicamente. jQuery contempla ahora estas operaciones correctamente y deja que los procesos de carga reporten realmente cuando el documento está ready. Finalmente esta versión agrega una función muy útil: jQuery.IsNumeric() que indica si un valor es numérico, algo que no siempre es tan fácil de determinar como parece en JavaScript.

viernes, 16 de septiembre de 2011

¿Qué significan Windows 8 y su nuevo WinRT? (+videos)

imageEsta semana arrancó la conferencia //build/ (nuevo nombre del tradicional PDC de Microsoft) y el foco principal fue el lanzamiento (en versión preliminar para desarrolladores) de Windows 8 y su nuevo modelo de programación. Para quienes no las vieron, dejo debajo los videos de las charlas de apertura del día 1 (mayor foco en Windows 8) y el día 2 (mayor foco en desarrollo).

Uno de los anuncios más polémicos o complejos fue el nuevo modelo para desarrollar aplicaciones Windows que puedan ser distribuidas a través del próximo Market, siguiendo el modelo popularizado por Apple y al que ya se ha sumado toda la industria, incluyendo Windows Phone.

El siguiente es el diagrama más visto en los últimos días mostrando cómo queda el stack de Windows, y debe tenerse en cuenta que es un diagrama aproximado, porque obviamente simplifica muchas cosas para servir como modelo introductorio:

Plataforma de Windows 8

Básicamente, la mayor novedad está en la sección verde del diagrama (aplicaciones estilo Metro). Este tipo de aplicaciones serán las que puedan distribuirse a través del Market, y su particularidad es que no pueden acceder al API completa de Win32, sino que dialogan contra el API de WinRT, la nueva estrella del mundo Microsoft.

En principio, WinRT es una buena idea. Lo que hace es proveer un contexto de ejecución seguro (similar al de un navegador) para aplicaciones Metro (insisto en que el modelo anterior existe, pero NO se puede distribuir por el Market). Lo que se logra con esto es que todas esas aplicaciones tienen acceso mediado y controlado a los recursos físicos del sistema, y son muchísimo más seguras, aun cuando pueden escribirse básicamente bajo tres paradigmas:

  • En .NET (utilizando el mismo CLR pero con un perfil especial que restringe el API disponible, similar a lo que sucede al escribir aplicaciones en Silverlight), utilizando XAML para el diseño de las interfaces.
  • En código nativo (C/C++) utilizando XAML también, pero sin acceso a Win32, sino a WinRT.
  • En JavaScript, utilizando HTML/CSS para el diseño de interfaces.

Otra característica importante de WinRT es que todas sus API tienen interfaces asincrónicas, salvo las que tienen tiempo de respuesta asegurado inferior a 50 milisegundos. El objetivo de esa decisión es mejorar la respuesta de Windows sobre todo en la interacción con el usuario. Todos sabemos que es normal en Windows tener demoras en el explorador o dentro de las aplicaciones, y mirar por unos segundos la famosa ruedita girando. Con el advenimiento de las interfaces táctiles (uno de los temas más fuertes en Windows 8) esos tiempos de respuesta no son viables. Por eso es importante volver a un modelo más similar al de programación en la web (con JavaScript) basado en operaciones que devuelven callbacks, que liberan el hilo de ejecución hasta que la operación termina.

La contra de este modelo en general es que el nivel de complejidad para manejar callbacks anidados y el control de errores se eleva considerablemente. No es casualidad entonces que tanto en .NET 4.5 como en JavaScript veamos crecer el uso de patrones asincrónicos (en C# 5 a través de las nuevas cláusulas await y async, heredadas de F#) y en JS con la creciente adopción de promesas (utilizando las abstracciones .then() y .when() ) en bibliotecas como jQuery, Dojo y otras derivadas de CommonJS.

Entre otros temores surgidos a partir de las presentaciones del nuevo modelo, está la confusión sobre si .NET ha perdido importancia. Personalmente creo que no, pero Microsoft ha vuelto a las fuentes en algunos sentidos, volviendo a poner énfasis en el código nativo para aplicaciones de alto rendimiento. Los lenguajes manejados dan mayor productividad en general, pero sólo en C/C++ se pueden crear aplicaciones de muy alto rendimiento en velocidad, consumo de recursos e incluso consumo de energía. Estos tres factores no eran tan importantes hasta hace un par de años porque pensábamos nuestra aplicaciones para correr en computadoras de escritorio o servidores, pero el desarrollo de los dispositivos móviles (teléfonos, tabletas, y otros) ponen de nuevo foco en ellos. Y en el otro extremo, aplicaciones del lado del servidor que ahora tenemos que pensar para miles de usuarios concurrentes hacen que tengamos que el ahorro de recursos en alta escala financie con creces el tiempo extra de desarrollo.

En fin, quedan muchos temas disparados que espero seguir tratando más adelante. Cualquier comentario o pregunta son bienvenidos. Les dejo los videos para que se diviertan.

Apertura del día 1 - Windows 8

Apertura del día 2 - Desarrollo y Operaciones

miércoles, 3 de agosto de 2011

JavaScript dentro de .NET

Siguiendo con sus planes de dominar el mundo, JavaScript tiene desde hace un tiempo un interesante motor construido en .NET que permite ser embebido en cualquier aplicación: Jint

El proyecto es de código abierto y fue iniciado por Sébastien Ros y colaboradores antes de ingresar a Microsoft, donde trabaja en el equipo del proyecto Orchard.

A diferencia de otros proyectos que intentan emitir código IL a partir de JavaScript, lo que es problemático por el problema de no poder descargar los ensamblados generados, o de otros proyectos basados en el Dynamic Language Runtime, Jint es un intérprete completo basado en ANTLR.

Jint permite utilizar JS como lenguaje para extender aplicaciones dinámicamente, algo que en .NET muchos hicimos previamente utilizando IronPython o IronRuby. Pero JavaScript es bastante más amplio en su uso, y esta clase de recursos siempre es muy valioso, sobre todo en este caso en que el soporte es muy completo, cubriendo la especificación completa de ECMAScript 3.0, y soportando en el último release muchos elementos del estándar 5.0.

Dejo el ejemplo más básico de uso desde C# (obviamente puede ser embebido en cualquier lenguaje .NET):

script= @"
function square(x) {
return x * x;
};

return square(number);
";

var result = new JintEngine()
.SetParameter("number", 3)
.Run(script));

Assert.AreEqual(9, result);

martes, 26 de julio de 2011

Patrones de Diseño en JavaScript, por Addy Osmani

imageAddy Osmani es un reconocido diseñador y desarrollador web, experto en jQuery y colaborador del equipo de documentación de ese proyecto.

Recientemente Addy publicó el primer volumen de su libro en línea “Essential JavaScript Design Patterns For Beginners” (en inglés) que me parece un gran trabajo sobre patrones de diseño, cubriendo la definición conceptual de éstos, sus categorizaciones típicas, y finalmente recorre varios de ellos en JavaScript, no como una simple traslación de los patrones originales del GoF, sino apuntando a aquellos que muestran particularidades de JavaScript, y agregando otros muy específicos de este entorno.

Los patrones recorridos para JavaScript son: Creational, Constructor, Singleton, Module, Revealing Module, Observer,
Prototype (que en JavaScript es central), Command, DRY, Façade, Factory, Mixin y Decorator.

Pero Addy no podía dejar de lado jQuery, por lo que cubre también los siguientes patrones de diseño en jQuery (verán algunos repetidos, porque analiza el patrón en el contexto de la biblioteca, no en sí mismo): Module, Lazy Initialisation, Composite, Wrapper, Façade, Observer, Iterator, Strategy, Proxy, Builder, Prototype, Flyweight.

Como valor agregado de este post, les dejo debajo esta presentación de Addy sobre trucos de rendimiento de jQuery:

jueves, 7 de julio de 2011

Raros lenguajes nuevos: CoffeeKup (más y más cafeína)

CoffeeKup

El matemático Alfréd Rényi decía que "un matemático es una máquina que convierte café en teoremas", frase que usualmente se le atribuye a su compatriota y colega Paul Erdös, quien solía repetirla.

Los programadores somos de alguna manera aparatos para convertir cafeína en algoritmos, lo que se hace explícito en la tradición de Java, JavaScript y el reciente CoffeeScript, todos inspirados en este alcaloide de venta libre.

Siguiendo la tradición cafetera, Maurice Machado ha colaborado con un reciente experimento notable basado en Node.js y CoffeeScript. Como breve recordatorio, CoffeeScript es una sintaxis simplificada de JavaScript, con un estilo más sucinto, bastante similar a Ruby, que se está haciendo tan popular que ya viene integrado en la distribución de Ruby on Rails 3.1, por ejemplo.

Lo que Maurice generó con CoffeeKup es un lenguaje específico de dominio (DSL) sobre CoffeeScript para generar el marcado completo de la página. Esto es, en lugar de escribir HTML, podemos escribir directamente toda la estructura de la página en CoffeeScript.

Veamos el ejemplo clásico de http://coffeekup.org/:

doctype 5
html ->
  head ->
    meta charset: 'utf-8'
    title "#{@title or 'Untitled'} | My awesome website"
    meta(name: 'description', content: @desc) if @desc?
    link rel: 'stylesheet', href: '/stylesheets/app.css'
    style '''
      body {font-family: sans-serif}
      header, nav, section, footer {display: block}
    '''
    script src: '/javascripts/jquery.js'
    coffeescript ->
      $().ready ->
        alert 'Alerts are so annoying...'
  body ->
    header ->
      h1 @title or 'Untitled'
      nav ->
        ul ->
          (li -> a href: '/', -> 'Home') unless @path is '/'
          li -> a href: '/chunky', -> 'Bacon!'
          switch @user.role
            when 'owner', 'admin'
              li -> a href: '/admin', -> 'Secret Stuff'
            when 'vip'
              li -> a href: '/vip', -> 'Exclusive Stuff'
            else
              li -> a href: '/commoners', -> 'Just Stuff'
    section ->
      h2 "Let's count to #{@max}:"
      p i for i in [1..@max]
    footer ->
      p shoutify('bye')

Como puede verse, se declara la estructura jerárquica de la página (cabecera y cuerpo), con sus atributos internos, y pueden anidarse los elementos como párrafos, divs, listas, y demás. Y claro, puede embeberse código en cualquier lado. No hay una diferencia directa entre la plantilla y el código.

Parece una postura muy radical, pero me parece un espacio sumamente interesante a investigar. Los experimentos de Maurice estén disponibles en GitHub y no terminan en CoffeeKup. Hay otros relacionados, como Zappa y CoffeeScript-Bespin.

 

martes, 5 de julio de 2011

Video: JavaScript, jQuery, CSS and Razor in ReSharper 6

El video que comparto esta vez tiene un par de cosas raras para este blog:

  • Está en inglés (fue grabado en la reciente Norwegian Developers Conference)
  • Presenta un producto pago (no abierto)

¿Por qué lo publico entonces? Porque en 6 minutos, Hadi Hariri, colega que participa también en el grupo Alt.NET Hispano, y al que oportunamente espero conseguir para presentar algo de esto en español, demuestra algunas características de ReSharper 6, un complemento con Visual Studio que algunos describieron en Twitter como "una IDE que utiliza Visual Studio como host", por sus increíbles capacidades.

Específicamente, y más allá de que uno programe o no en .NET y eventualmente no utilice Visual Studio, me parece notable el nivel de análisis en vivo que pueden hacer sobre código JavaScript. Como Hadi dice en un momento del video, ya no es un tema de "estático o dinámico" sino de las herramientas adecuadas. JetBrains, la empresa detrás de ReSharper (conocidos también por su IDE para Java IntelliJ IDEA y otras como PyCharm y RubyMine) me sorprende siempre por su capacidad de innovación y de resolución de problemas complejos alrededor de la comprensión y análisis de lenguajes de todo tipo.

Va para ellos mi reconocimiento.

jueves, 23 de junio de 2011

Heroku vuelve a la consola para sumar Node.js

Heroku

El infatigable equipo detrás de Heroku (la plataforma como servicio recientemente adquirida por Salesforce.com) está sumando a su infraestructura, creada inicialmente para simplificar el despliegue de aplicaciones Ruby (Rails, Sinatra u otros frameworks) la capacidad de alojar aplicaciones para Node.js

Ya hablé antes sobre Node.js, y como esperaba, este es el año en que el modelo de aplicaciones JavaScript del lado cliente y servidor comienza a consolidarse. El que una plataforma madura y robusta como Heroku facilite la ejecución de este tipo de arquitecturas potenciará muchísimo su uso.

Algo interesante que están haciendo en Heroku, siguiendo su estilo de pensar no sólo la solución sino el flujo de trabajo completo de desarrollo, es agregar mayor nivel de soporte a operaciones desde la línea de comandos, que es el ámbito donde los desarrolladores tienen mayores posibilidades de interacción desde el principio de los tiempos.

Como describen en este post, están agregando soporte a operaciones desde la consola de comandos, que permiten ejecutar procesos aislados (cada una de las líneas siguientes inicia un proceso en una instancia virtual, llamadas dyno, totalmente nueva, ejecuta el comando y baja la instancia):

$ heroku run date
$ heroku run curl http://www.google.com/
$ heroku run rails console
$ heroku run rake -T
$ heroku run rails server

Por supuesto que levantar un servidor de Rails para que inmediatamente después termine no tiene gracia en la mayoría de los casos, por lo que existe una manera de empaquetar procesos en un archivo Procfile, que simplemente declara los componentes necesarios, como por ejemplo:

web:     node web.js
worker:  node worker.js

Que crea una aplicación Node.js con dos componentes (un servidor web escuchando tráfico externo y un servicio interno para procesos intensivos, un modelo clásico en aplicaciones en la nube).

La gracia de este modelo es el mecanismo de escalamiento. Una vez que una aplicación está desplegada de esta manera, para escalarla basta usar un comando como:

$ heroku scale web=10 worker=50
Scaling web processes... done, now running 10
Scaling worker processes... done, now running 50

Como siempre, esto es un resumen, y recomiendo leer el post original, seguido de la segunda parte (dos más están por llegar) donde se presenta en más detalle el soporte para Node, incluyendo también una excelente descripción de que es y que no es Node para los recién llegados.