Contenido

Flapjax, se nos viene otro pseudolenguaje

15 oct

+ 2

logo.pngFlapjax, es el palabro de moda en el mundo de la programación web. Pero, ¿que es? y ¿para que sirve?

¿Que es?

Flapjax, es esencialmente una implementación en Javascript de FrTime y un compilador de este lenguaje que da como resultado un fichero con Javascript bastante ajustado. Flapjax es fácil de aprender ya que la sintaxis es similar al Javascript y además funciona en los principales navegadores (IE aún no)  sin necesidad de usar un plugin u otras herramientas.

Dispone de 3 modos de uso:

  1. templated (Con templates): Permite la interpretación de un lenguaje propio que el compilador interpretará.
  2. unobtrusive  (No obstructivo): Separación estricta de la estructura.
  3. raw Javascript  (Javascript de toda la vida :D): Quizas el método más pesado de usar ya que las comprobaciones básicas se han de implementar.

¿Para que sirve?

La idea es conseguir una forma rápida, eficiente y estandarizada de desarrollar en aplicaciones web basadas en el cliente, una versión llevada más allá de las librerías JS ya conocidas. Al parecer, la mayor ventaja es que gracias a un lenguaje algo caótico al principio y más familiar con poco tiempo podamos realizar aplicaciones complejas sin necesidad de emplear grandes cantidades de tiempo.

Veamos un ejemplo del sistema de templates que usa para crear uno de los ejemplos

<html>
<head>
<title>Flapjax Demo: Follow the Mouse 2: Flapjax Templating</title>

<script lang="flapjax">
var DELAY = 500;
</script>

<body id="body">

<div id="themouse"
     style="{! {color: '#FFFFFF', backgroundColor: '#000000',
                position: 'absolute',
                left: mouseLeft_b(document),
                top: mouseTop_b(document),
                padding: '10px'} !}">
    the mouse
</div>
<div id="tail"
     style="{! {color: '#FF0000', backgroundColor: '#000000',
                position: 'absolute',
                left: delay_b(mouseLeft_b(document), DELAY) +
                      $('themouse').offsetWidth,
                top: delay_b(mouseTop_b(document), DELAY),
                padding: '10px'} !}">
    its tail!
</div>

</body>
</html>

El mismo código implementado con el lenguaje Flapjax. 

<html>
<head>
<title>Flapjax Demo: Follow the Mouse 2: Flapjax Scripting</title>

<script lang="flapjax">

var DELAY = 500;
	
insertDomB( 
  DIVB( 
    {id: 'themouse',
     style: {color: '#FFFFFF', backgroundColor: '#000000', 
             position: 'absolute',
             left: mouseLeft_b(document),
             top: mouseTop_b(document),
             padding: '10px'}},
    'the mouse!'),
  'body',
  'beginning');

insertDomB(
  DIVB(
    {style: {color: '#FF0000', backgroundColor: '#000000',
             position: 'absolute',
             left: delay_b(mouseLeft_b(document), DELAY)
                   + $('themouse').offsetWidth,
             top: delay_b(mouseTop_b(document), DELAY),
             padding: '10px'}},
    'its tail!'), 
  'body',
  'end');
  
</script>
</head>

<body id="body">
</body>

</html>

Como se puede ver el código no es muy estandard que digamos, es más ese código no mostraría nada en una página normal, pero si lo pasamos por el compilador del lenguaje obtenemos esto:


<html>
<head>
<title>Flapjax Demo: Follow the Mouse 2: JavaScript</title>
<script lang="text/javascript" src=<"/demos/flapjax.js"></script>
<script lang="text/javascript">

function loader() {
  flapjaxInit();

  var DELAY = 300;
  var mouseLeftB = mouseLeft_b(document);
  var mouseTopB  = mouseTop_b(document);

  insertDomB( 
    DIVB( 
      {id: 'themouse',
       style: {color: '#FFFFFF', backgroundColor: '#000000', 
	       position: 'absolute',
	       left: mouseLeftB,
	       top: mouseTopB,
	       padding: '10px'}},
      'the mouse!'),
    'body',
    'beginning');

  var mouseOffset = $('themouse').offsetWidth;
  var delayedLeft = lift_b(function (pos) { return pos + mouseOffset; },
                           delay_b(mouseLeftB, DELAY));
  var delayedTop  = delay_b(mouseTopB, DELAY);

  insertDomB(
    DIVB(
      {id: 'tail',
       style: {color: '#FF0000', backgroundColor: '#000000',
               position: 'absolute',
               left: delayedLeft,
               top: delayedTop,
               padding: '10px'}},
      'its tail!'),
    'body',
    'end');
}

</script>
</head>

<body id="body" onload="loader()">
</body>

</html>

Un código completamente válido y ajustado a nuestra idea inicial. El mismo se ha preocupado de crearnos nos <div></div> que perseguirán a nuestro ratón.

Más Información: 

  • Haciendo mi seminario de título se me pidió investigar “flapjax” como alternativa de Jquery (que es el que estoy usando). No entiendo muy bien cuál es la ventaja, de usar un “lenguaje intermedio” que después compilo para generar casi exactamente la estructura que tengo que generar para que Jquery funcione.
    Me refiero a qué utilidad tiene en vez de aprender jquery y usarlo directo, aprender flapjax y compilar…..se entiende la duda?

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.