Skip to main content
OutSystems

Avoid inline javascript or inline style

JavaScript code or CSS styles can be defined inside Screens and WebBlocks, in an inline fashion, by using unescaped Expressions elements or via the Extended Properties window of Service Studio.

<Show Examples>

During development cycles, developers frequently resort to these techniques for fine-tuning purposes on a specific Screen or WebBlock, like quickly adjusting the padding of an element or defining a small JavaScript function that runs when a given element is clicked.   

Impact

While the usage of inline styles or code can accelerate development given how easy they can be defined, it can lead to significant impacts in the long run.  

The proliferation of inline CSS styles often translates into code duplication making it harder to maintain when the same style needs to be changed in several places. The same can be said for inline JavaScript snippets, as they cannot be reused across Screens or Web Blocks.

From the performance point-of-view, the usage of inline styles or scripts degrades performance since the page size increases and these elements cannot be cached (unless the whole page is cached). The impact felt is greater for the case of inline scripts as the page rendering is halted while the inline code is being interpreted.

Finally, and given the typical motivation behind using inline styles or scripts, it is highly likely to leave the element undocumented, thus hindering code readability as well.

Best practices

In accordance with the separation of concerns principle, both CSS styles and JavaScript code should be decoupled from HTML code and moved to a separate location, such as CSS stylesheets or JS file, that can be cached and easily reused, as needed.

<Show where this is inside an eSpace>

Given that each Screen or Web Block can have it own custom CSS or JavaScript file, one must be careful to avoid escalating the number of resources needed to render a given page.

In order to address this issue, you should leverage the usage of a theme hierarchy that promotes reusability… (mention that you should place your JavaScript API’s in the module file as well).    

Additionally, in order to improve performance it is also advisable to minify these resources in order to reduce network traffic/payload.

For debugging and troubleshooting purposes, minification should be applied in Production environments only (might be tricky to pull off in OS….?).

  • Was this article helpful?