Lax — The service Lightning Component to write a clear asynchronous JavaScript code

This story will show you how to write clear asynchronous JavaScript code in your Lightning Components.

In case you just need a link to the component sources: Lax repository

Introduction

Apex server-side actions produce most of asynchronous code in LC. Lax is created to resolve a list of things related to calling action from Lightning:

• It is hard to maintain the code that call the server several times in the chain. For example, when the call depends on the previous call result. As a result it produces “callback hell”:

• Lightning doesn’t provide a standard way to call several actions with shared callback. For example, the callback should run when all actions got back from the server.
• In case you use standard JavaScript Promise to call actions, you should wrap callback function using $A.getCallback() utility:

Getting started with Lax

Lax is mostly based on JavaScript Promise and provide simple and easy to use API. It is a service component that doesn’t display any HTML DOM.

Below is an example of component initialization:

Lax has required context attribute that receives a consumer’s component object. It dynamically creates a property for the context component object on the initialization stage. Then it is accessible from the consumer’s component controller — component.lax:

Calling actions efficiently with Lax

You also can queue actions by passing parameter and options:

Note: next examples use JavaScript ES6 arrow functions to assign callbacks

Enqueue simple action:

• component - A reference from a list of parameters that every client-side controller function has
• params - An object with list of parameters (optional)
• options - An object with list of options that can be applied to the action (optional):
  * background - to sent the action separately from any foreground actions
  * abortable - to make the action potentially abortable while it's queued to be sent to the server
  * storable - to quickly show action cached data from client-side storage without waiting for a server trip. It is not recommended to use with Promise API by Salesforce. Use lax.action instead

.enqueue() - The function returns LaxPromise object which inherited from Promise. It overrides .then() and .catch() functions to automatically wrap a callback using $A.getCallback().

Chaining actions to run subsequently:

Use standard Promise API to chain server-side actions:

An error handling:

.then() function has bound to the “SUCCESS” action state. You should call .catch() function to assign a callback for “ERROR” action state:

Enqueue a list of actions concurrently:

There are cases where you should call several actions concurrently. And the callback will run after all actions are ready:

• actions - The array of actions to enqueue concurrently:
  * name - the name of an action
  * params - an object with list of parameters (optional)
  * options - an object with list of options that can be applied to the action (optional)
• The success callback will call when all enqueued actions be back from the server
• results - The list of values returned from enqueued actions

Enqueue an action using Builder pattern:

Lax provides some of the functionality in Builder pattern. You can also build and queue actions using next approach. lax.action(name) — create and return LaxAction builder:

LaxAction is an object with the list of functions to construct a server-side action

• The approach is useful for Storable actions, because LaxAction does not use Promise API
• Actions can’t be chained or called concurrently using LaxAction builder approach
• The list of functions available on LaxAction:
  * setParams(params) — to set an object with list of parameters
  * setThen(callback) — to set a success callback function
  * setCatch(callback) — to set a failure callback function to handler errors
  * enqueue() — to enqueue the constructed action. (returns undefined)
  * setStorable() — to set an action as a Storable
  * setBackground() — to set an action as a Background

Conclusion

There are plans to add additional functionality to the Lax component:

1. To fire an Application or Component event using the Builder Pattern approach with Lax
2. Dynamically Create Component functionality with Promise callbacks
3. An ability to handle "INCOMPLETE" state of the server-side action

References

• sfdc-lax repository — https://github.com/ruslan-kurchenko/sfdc-lax
• Salesforce Open Source and sfdc-lax discussion with Xi Xiao — https://salesforceway.com/podcast/open-source/

You could contribute to this project if you have ideas. It would be awesome to get your feedback about the component. Feel free to post issues or pull requests using GitHub. You could also contact me directly or post a comment.

If this article was useful for you, please sign it with an 👏 or share with your friends. It will force me to stay work on articles like that more, thanks!

Ruslan Kurchenko is an Advanced Salesforce Engineer from Kiev, Ukraine. He is passionate of Salesforce, JavaScript and Modern WEB Development. Connect with him on LinkedIn, Instagram or say Hi! on Twitter.