Top 5 Front-End Development Tips for OutSystems

Want to learn more valuable Dev Tips? Sign up for our newsletter and stay updated with the latest insights! Also, don't forget to check out our upcoming OutSystems courses to scale your career.

1. Leverage Flexbox and Grid for Layouts

When it comes to creating responsive and adaptable layouts, Flexbox and CSS Grid are your best friends.

• Flexbox: Ideal for one-dimensional layouts, such as arranging items in a row or column. For example, use Flexbox to create a mosaic layout that adjusts dynamically to content size.
• CSS Grid: Perfect for two-dimensional layouts where precise control over rows and columns is needed. A great use case is a magazine-style layout that maintains consistent alignment across both axes.

By combining these tools effectively, you can achieve flexible yet structured designs tailored to any screen size or content type.

2. Handle the OSBlockWidget Class Smartly

OutSystems automatically adds the O-S-Block-Widget class to web blocks, which defaults to display: inline. This can interfere with layout designs, especially when using Flexbox or Grid.

• To address this, consider creating a custom class like O-S-Block-Widget-display-contents to apply display: contents selectively.
• This approach ensures flexibility while maintaining control over how web blocks interact with your layout.

3. Use Links or Buttons for Clickable Elements

Accessibility should always be a priority in front-end development. Avoid using containers or divs for clickable elements; instead, opt for links or buttons.

• Links and buttons come with built-in keyboard support and semantics, ensuring better accessibility.
• They also retain standard browser behaviors like opening links in new tabs (Ctrl+Click) and proper form submission when placed inside forms.

Styling these elements can align them with your design without sacrificing their inherent functionality.

4. Disable List Virtualisation When Necessary

List virtualisation in OutSystems helps optimise memory usage by dynamically managing DOM elements. However, it can cause performance issues with complex lists.

• To disable virtualisation, set the attribute disable-virtualization=True on the List widget.
• Disabling this feature reduces scripting overhead and ensures smoother performance for complex lists, though it may increase memory usage slightly.

Evaluate your application's specific needs to decide whether to enable or disable virtualisation.

5. Choose Responsive Design Strategies Wisely

Responsive design is crucial for modern web applications. In OutSystems, you have two main options:

• isPhone() Function: An imperative approach that checks the device type at a specific moment but doesn’t update dynamically.
• .phone CSS Class: A declarative approach that adapts reactively to changes in screen size or orientation without requiring a page reload.

For most scenarios, .phone is the better choice as it ensures fluid responsiveness across devices. With these tips from Izam Basiron, you can enhance your front-end development workflow in OutSystems while delivering exceptional user experiences. 

Want to learn more valuable Dev Tips?  Sign up for our newsletter and stay updated with the latest insights! Also, don't forget to check out our upcoming OutSystems courses to scale your career.