Entendiendo las API Fluent en JavaScript

Al diseñar Babylon.js v2.0(una biblioteca para construir 3D en la web), recientemente me encontré deseando que se fluido-es decir, deseo que la comunidad pueda leer, comprender y ampliar el trabajo con mayor facilidad mientras pasa menos tiempo en los documentos técnicos. 

En este tutorial, recorreré las API con fluidez: qué tener en cuenta, cómo escribirlas y las implicaciones de rendimiento en varios navegadores. 

¿Qué es una API fluida??

UNA API fluida, como se indica en este artículo de Wikipedia, es una implementación de una API orientada a objetos que tiene como objetivo proporcionar un código más legible. JQuery es un gran ejemplo de lo que una API fluida le permite hacer:

 PS
') .html ("Fluent API are cool!") .addClass ("header") .appendTo ("body");

La API fluida le permite encadenar llamadas de funciones devolviendo este objeto.

Podemos crear fácilmente una API fluida como esta:

var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Haga un trabajo complejo this.a + = Math.cos (b); devuelve esto 

Como puede ver, el truco consiste en devolver el esta objeto (referencia a la instancia actual en este caso) para permitir que la cadena continúe.

Si no sabe cómo funciona la palabra clave "this" en JavaScript, le recomiendo que lea este excelente artículo de Mike West.

Entonces podemos encadenar llamadas:

var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3);

Antes de intentar hacer lo mismo con Babylon.js, quería asegurarme de que esto no generaría algunos problemas de rendimiento..

¿Qué pasa con el rendimiento??

Así que hice un punto de referencia!

cuenta var = 10000000; var MyClass = function (a) this.a = a;  MyClass.prototype.foo = function (b) // Haga un trabajo complejo this.a + = Math.cos (b); devuelve esto  MyClass.prototype.foo2 = function (b) // Haga un trabajo complejo this.a + = Math.cos (b);  var start = new Date (). getTime (); var obj = new MyClass (5); obj.foo (1) .foo (2) .foo (3); para (índice var = 0; índice < count; index++)  obj.foo(1).foo(2).foo(3);  var end = new Date().getTime(); var start2 = new Date().getTime(); var obj2 = new MyClass(5); for (var index = 0; index < count; index++)  obj2.foo2(1); obj2.foo2(2); obj2.foo2(3);  var end2 = new Date().getTime(); var div = document.getElementById("results"); div.innerHTML += obj.a + ": With return this: " + (end - start) + "ms
"; div.innerHTML + = obj2.a +": sin devolver esto: "+ (end2 - start2) +" ms ";

Como puedes ver, foo y foo2 hacer exactamente lo mismo. La única diferencia es que foo puede ser encadenado mientras foo2 no poder.

Obviamente la cadena de llamadas es diferente entre:

obj.foo (1) .foo (2) .foo (3);

y

obj2.foo2 (1); obj2.foo2 (2); obj2.foo2 (3);

Dado este código, lo ejecuté en Chrome, Firefox e IE para determinar si debo preocuparme por el rendimiento.

Y aquí están los resultados que obtuve:

• En Cromo, la API regular es 6% más lento que la API fluida.
• En Firefox, ambas API se ejecutan casi a la misma velocidad (la API fluida es 1% más lento).
• En ES DECIR, ambas API se ejecutan casi a la misma velocidad (la API fluida es 2% más lento).

La cosa es que agregué una operación a la función (Matemáticas.cos) Simular algún tipo de tratamiento realizado por la función..

Si quito todo y solo guardo el regreso En todos los navegadores no hay diferencia (en realidad, solo uno o dos milisegundos por 10,000,000 intentos). Puedes probar esto por ti mismo a través de los navegadores. Y si no tiene los dispositivos a mano, hay muchas herramientas gratuitas en dev.modern.IE. Simplemente no pruebe el rendimiento de una máquina virtual con un dispositivo real. 

Así que mi conclusión es: es un go!

Una API fluida es excelente: produce un código más legible y puede usarlo sin ningún problema o pérdida de rendimiento! 

Más práctica con JavaScript

Puede que te sorprenda un poco, pero Microsoft tiene un montón de aprendizaje gratuito sobre muchos temas de código abierto de JavaScript, y estamos en la misión de crear mucho más con Microsoft Edge. Echa un vistazo a mi propia:

• Introducción a WebGL 3D con HTML5 y Babylon.JS
• Creación de una aplicación de una sola página con ASP.NET y AngularJS
• Gráficos de vanguardia en HTML

O la serie de aprendizaje de nuestro equipo:

• Consejos prácticos de rendimiento para hacer que su HTML / JavaScript sea más rápido (una serie de siete partes que abarca desde el diseño responsivo hasta los juegos casuales y la optimización del rendimiento)
• The Modern Web Platform Jump Start (los fundamentos de HTML, CSS y JavaScript)
• Desarrollo de la aplicación universal de Windows con HTML y JavaScript Jump Start (use el JS que ya creó para crear una aplicación)

Y algunas herramientas gratuitas: Visual Studio Community, Azure Trial y herramientas de prueba en varios navegadores para Mac, Linux o Windows.

Este artículo es parte de la serie web dev tech de Microsoft. Estamos muy contentos de compartir Microsoft Edge y lo nuevo Motor de renderizado EdgeHTML con usted. Obtenga máquinas virtuales gratuitas o realice pruebas a distancia en su dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.