JavaScript like a Boss: Understanding Fluent APIs

Key Takeaways

• Fluent APIs in JavaScript allow for more readable and understandable code by enabling the chaining of function calls, achieved by returning ‘this’ object in each function. This makes the code more intuitive and easier to debug, especially when dealing with complex sequences of function calls.
• Performance testing on different browsers (Chrome, Firefox, IE) showed that using Fluent APIs does not significantly impact performance. In some cases, the Fluent API was even faster than the regular API, indicating that they can be used without concerns about performance losses.
• Fluent APIs are not only applicable to JavaScript but can be used with any JavaScript library or framework. Many popular libraries and frameworks, like jQuery, already use Fluent APIs to make their methods more readable and expressive. However, they should be used judiciously, considering the needs of the project and the familiarity of the team with the Fluent API pattern.

This article is part of a web dev tech series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

While designing Babylon.js v2.0 (a library for building 3D on the web), I recently found myself wishing that more APIs were fluent – that is, I wish the community could more easily read, understand, and build upon the work while spending less time in the tech docs. In this tutorial, I’ll walk through Fluent APIs – what to consider, how to write them, and cross-browser performance implications.

What Makes an API Fluent?

A fluent API, as stated by this Wikipedia article, is an implementation of an object-oriented API that aims to provide for more readable code. jQuery, for example, is a great example of what a fluent API allows you to do:

<span>$('<div></div>')
</span>     <span>.html("Fluent API are cool!")
</span>     <span>.addClass("header")
</span>     <span>.appendTo("body");</span>

A fluent API lets you chain function calls by returning the this object. If you are not aware of how the this keyword works in JavaScript, I recommend reading this great article.

We can easily create a fluent API like this:

<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}</span>

As you can see, the trick is just about returning the this object (a reference to the current instance in this case) to allow the chain to continue.

We can then chain calls:

<span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);</span>

Before trying to do the same with Babylon.js, I wanted to be sure that this would not generate some performance issues.

So I did a benchmark!

<span>var count = 10000000;
</span>
<span>var <span>MyClass</span> = function(a) {
</span>    <span>this.a = a;
</span><span>}
</span>
<span>MyClass.prototype.foo = function(b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span>    <span>return this;
</span><span>}
</span>
<span>MyClass.prototype.foo2 = function (b) {
</span>    <span>// Do some complex work   
</span>    <span>this.a += Math.cos(b);
</span><span>}
</span>
<span>var start = new Date().getTime();
</span><span>var obj = new MyClass(5);
</span>obj<span>.foo(1).foo(2).foo(3);
</span><span>for (var index = 0; index     obj<span>.foo(1).foo(2).foo(3);
</span><span>}
</span><span>var end = new Date().getTime();
</span>
<span>var start2 = new Date().getTime();
</span><span>var obj2 = new MyClass(5);
</span><span>for (var index = 0; index     obj2<span>.foo2(1);
</span>    obj2<span>.foo2(2);
</span>    obj2<span>.foo2(3);
</span><span>}
</span><span>var end2 = new Date().getTime();
</span>
<span>var div = document.getElementById("results");
</span>
div<span>.innerHTML += obj.a + ": With return this: " + (end - start) + "ms<br>";
</span>div<span>.innerHTML += obj2.a + ": Without return this: " + (end2 - start2) + "ms";</span></span></span>

As you can see foo and foo2 do exactly the same thing. The only difference is that foo can be chained whereas foo2 cannot.

Obviously the call chain is different between:

obj<span>.foo(1).foo(2).foo(3);</span>

and:

obj2<span>.foo2(1);
</span>obj2<span>.foo2(2);
</span>obj2<span>.foo2(3);</span>

Given this code, I ran it on Chrome, Firefox and IE to determine if I have to be concerned about performance.

And here are the results I got:

• In Chrome, the regular API is 6% slower than fluent API
• In Firefox, both APIs are almost running at same speed (the fluent API is 1% slower)
• In IE, both APIs are almost running at same speed (the fluent API is 2% slower)

I added an operation into the function (Math.cos) to simulate some kind of processing done by the function.

If I remove everything and just keep the return statement, on all browser there is no difference (actually just one or two milliseconds for 10,000,000 tries). You can test this for yourself across the browsers. And if you don’t have the devices handy, there are plenty of free tools on modern.IE. Just don’t perf test a virtual machine against a real device.

So my conclusion is: It’s a go!

Fluent APIs are great, they produce more readable code and you can use them without any problems or performance losses!

More hands-on with JavaScript

It might surprise you a bit, but Microsoft has a bunch of free learning on many open source JavaScript topics and we’re on a mission to create a lot more with Project Spartan coming. Check out my own:

• Introduction to WebGL 3D and HTML5 and Babylon.js
• Building a Single Page Application with ASP.NET and AngularJS
• Cutting Edge Graphics in HTML

Or our team’s learning series:

• Practical Performance Tips to Make your HTML/JavaScript Faster (a seven-part series from responsive design to casual games to performance optimization)
• The Modern Web Platform JumpStart (the fundamentals of HTML, CSS, and JS)
• Developing Universal Windows App with HTML and JavaScript JumpStart (use the JS you’ve already created to build an app)

And some free tools: Visual Studio Community, Azure Trial, and cross-browser testing tools for Mac, Linux, or Windows.

This article is part of the web dev tech series from Microsoft. We’re excited to share Project Spartan and its new rendering engine with you. Get free virtual machines or test remotely on your Mac, iOS, Android, or Windows device at modern.IE.

Frequently Asked Questions about Fluent APIs in JavaScript

What is a Fluent API in JavaScript?

A Fluent API in JavaScript is a way of structuring your code to make it more readable and easier to understand. It involves chaining methods together in a way that reads like a sentence or a series of instructions. This is achieved by ensuring each method returns an object, allowing another method to be immediately invoked from the result of the previous method. Fluent APIs can make your code cleaner and more intuitive, especially when dealing with complex sequences of function calls.

How do I create a Fluent API in JavaScript?

Creating a Fluent API in JavaScript involves designing your methods to return the object they belong to. This allows you to chain methods together. For example, consider an object ‘car’ with methods ‘startEngine’, ‘accelerate’, and ‘stop’. If each of these methods returns ‘this’ (the car object), you can chain them together like so: car.startEngine().accelerate().stop().

What are the benefits of using Fluent APIs?

Fluent APIs can make your code more readable and easier to maintain. By chaining methods together, you can express complex operations in a way that reads like a sentence. This can make your code easier to understand and debug. Fluent APIs can also make your code more expressive and flexible, allowing you to create more powerful abstractions.

Are there any drawbacks to using Fluent APIs?

While Fluent APIs can make your code more readable, they can also make it more difficult to debug if not used properly. Because method calls are chained together, a problem with one method can affect all subsequent methods in the chain. Additionally, Fluent APIs can sometimes be less intuitive for people who are not familiar with the pattern.

Can I use Fluent APIs with asynchronous code?

Yes, you can use Fluent APIs with asynchronous code, but it can be a bit more complex. You’ll need to ensure that each method in the chain returns a promise, allowing you to use ‘.then()’ to chain methods together. Alternatively, you can use async/await syntax to write asynchronous code that looks synchronous, which can make your Fluent API easier to read and understand.

How does Fluent API compare to other design patterns in JavaScript?

Fluent API is a design pattern that focuses on readability and expressiveness. It can be compared to other design patterns like the Builder pattern, which also aims to make code more readable and easier to work with. However, while the Builder pattern focuses on constructing complex objects step by step, Fluent API focuses on making method calls chainable for a more readable flow of operations.

Can Fluent APIs be used with JavaScript libraries and frameworks?

Yes, Fluent APIs can be used with any JavaScript library or framework. Many popular libraries and frameworks like jQuery and Lodash already use Fluent APIs to make their methods more readable and expressive.

How can I debug a Fluent API?

Debugging a Fluent API can be a bit tricky because method calls are chained together. However, you can use console.log statements within your methods to log their output. Additionally, using a JavaScript debugger can help you step through your code and see the state of your objects at each step in the chain.

Can Fluent APIs improve performance?

Fluent APIs are primarily about improving code readability and maintainability, not performance. However, by making your code easier to read and understand, Fluent APIs can help you spot and fix performance issues more easily.

Are Fluent APIs a good fit for every project?

Fluent APIs can be a great fit for projects where readability and maintainability are a priority. However, they may not be the best fit for every project. If your team is not familiar with the Fluent API pattern, it may take some time for them to get used to it. Additionally, Fluent APIs can make debugging more difficult if not used properly. As with any design pattern, it’s important to consider the needs of your project and your team before deciding to use Fluent APIs.

The above is the detailed content of JavaScript like a Boss: Understanding Fluent APIs. For more information, please follow other related articles on the PHP Chinese website!