Boost Your Front-End Skills with OutSystems

Table of Contents

1. Introduction
2. Under the Hood: How the Outsystems Platform Works
3. Top Front-end Techniques for Outsystems
   1. Best Practices for CSS
   2. Best Practices for JavaScript
   3. Best Practices for the Outsystems Platform
4. The Personal Area: Testing Changes Privately
5. Changing the Head: Adding Scripts and Stylesheets
6. Browser Support and Testing
7. Cutting Corners: Simplifying the Front-end Development Process
8. Fighting the Dragon: Examples of Great UI in Outsystems Applications
9. Conclusion

Introduction

In today's webinar, we will be discussing top front-end techniques for Outsystems. My name is Kuben Gonzalez, and I'm the Head of Mobile and Front-end Experts at Outsystems. Before we dive into the topic, I want to start with a disclaimer. This subject is rather extensive, so we should expect some simplifications and homework. To set the stage, let me start with a story. Once upon a time, there was a dragon named "You cannot do this in Outsystems." This dragon was terrible, and every developer was afraid of it. Whenever a project started, the developers were afraid that the dragon would attack and prevent them from delivering the project. To combat this dragon, I have put together an agenda for today's webinar.

Under the Hood: How the Outsystems Platform Works

Before we explore the top front-end techniques in Outsystems, it's important to understand how the platform works under the hood. When working in Outsystems, you use Service Studio, which is the IDE for developing applications. Service Studio generates an XML file called the Outsystems Module Language (OML) when you click publish. This module is sent to the server, where the code for the database, logic, and UI is generated. The final result sent to the client is HTML. Let's analyze the HTML structure of an Outsystems page.

In the HTML head, we have three different areas - HTML, CSS, and JavaScript. The HTML section includes meta tags for responsive design and enabling users to add the app to their home screen on iOS. The CSS section consists of different types of files, such as CSS created by the Outsystems platform, CSS created in web blocks, the theme, and CSS added directly to the page. The platform adds these CSS files in a specific order to ensure correct styling. Similarly, the JavaScript section includes scripts from the platform, web blocks, and page-specific JavaScript.

Moving to the body, we find elements related to the VSTATE and a form that wraps almost all the HTML. The form is required to ensure that user input is not lost and is submitted to the server correctly. Additional JavaScript from the platform and test boxes may also be present in the body. The test boxes are commonly used for Outsystems' Business Process Technology (BPT) feature, but they can be disabled if not needed.

Top Front-end Techniques for Outsystems

Best Practices for CSS

When working with CSS in Outsystems, it's important to follow some best practices. First, establish a code convention. This convention will ensure consistency and make it easier for multiple developers to work on the codebase. Use one rule per line, include a space between the property and value, and end each line with a semicolon.

Another best practice is to avoid unnecessary prefixes in CSS. Not all CSS3 properties require prefixes, so it's important to check which prefixes are necessary using tools like "caniuse.com" or "shouldiprefix.com." Unnecessary prefixes only add complexity to the code and make it harder to maintain.

In Outsystems, it's recommended to avoid using ID selectors in CSS. ID selectors are automatically generated by the platform and depend on the hierarchy of elements. Instead, use class selectors to ensure consistency and avoid style duplication.

To improve performance, keep z-index values as low as possible. High z-index values can make the code harder to maintain and may cause issues with overlapping elements.

Best Practices for JavaScript

JavaScript in Outsystems should also follow best practices. Avoid using global variables as they can lead to unpredictable behavior and make the code harder to maintain. Instead, Create objects and use their attributes to store variables and methods.

Avoid console.log pollution by removing debug statements before deploying the code to production. Console.log statements can slow down the application and make debugging more difficult. Use built-in debugging tools or techniques to troubleshoot code.

Prefer using strict equality (three equals signs) when comparing values in JavaScript. This ensures both the Type and value are the same, reducing potential bugs caused by type coercion.

Be mindful of the version of jQuery included in Outsystems. The platform already includes jQuery, so avoid importing additional versions unless necessary.

Best Practices for the Outsystems Platform

When developing on the Outsystems platform, there are additional best practices to consider. Avoid defining CSS styles in web blocks and pages to prevent style duplication. Instead, isolate CSS styles in a centralized theme and reuse it across multiple applications.

Follow the platform's guidelines for CSS organization, such as creating an index and dividing CSS into different sections for easier maintenance.

Consider the browser support when designing applications. Identify the target browsers and devices and test the application in those environments. Use tools like BrowserStack or CrossBrowserTesting to ensure cross-browser compatibility.

To simplify the development process, consider using tools like Sublime Text, Chrome DevTools, and Node.js. These tools can enhance productivity and provide features like live reload and CSS injection, allowing you to see immediate changes while developing.

The Personal Area: Testing Changes Privately

The personal area in Outsystems allows developers to test their changes privately without affecting other developers or projects. It provides a separate environment where developers can deploy their code and preview it in isolation. To use the personal area, navigate to the debugger and click on "Run Only in the Personal Area." This will publish your application to your personal area, which is accessible only to you. The personal area is useful for testing and validating changes before merging them with the main codebase.

Changing the Head: Adding Scripts and Stylesheets

In Outsystems, it's possible to change the head of a page and dynamically add scripts and stylesheets. This can be done using the HTTP Request Handler extension, which provides actions for adding meta tags, scripts, and stylesheets to the head. The "Add Post-Processing Filter" action is particularly powerful as it allows you to use a regular expression to modify the HTML content.

By leveraging these capabilities, developers can inject custom scripts or stylesheets into their applications. This gives them greater flexibility and control over the application's behavior and appearance.

Browser Support and Testing

Browser support and testing are crucial aspects of front-end development. Outsystems applications can be accessed from various browsers and devices, so it's important to ensure compatibility. Identify the target browsers and devices for your application and thoroughly test its appearance and functionality in those environments.

Consider using browser testing tools, such as BrowserStack or CrossBrowserTesting, to automate cross-browser testing. These tools allow you to test your application on real browsers and devices, ensuring a consistent user experience across different platforms.

Cutting Corners: Simplifying the Front-end Development Process

Front-end development in Outsystems can be Simplified and accelerated by leveraging tools and techniques commonly used in the industry. For example, using CSS injections and live reload allows developers to see their changes immediately during development, reducing the need for frequent publishes. Additionally, integrating with popular tools like Sublime Text, Chrome DevTools, and Node.js can further streamline the development process.

By adopting these tools and techniques, front-end developers can enhance their productivity and deliver high-quality applications more efficiently.

Fighting the Dragon: Examples of Great UI in Outsystems Applications

In the Outsystems ecosystem, there are numerous examples of applications with great UIs that demonstrate the platform's capabilities. One such example is the Silk UI framework, which is Based on industry standards like Bootstrap and Zurb Foundation. Silk UI provides a collection of reusable UI Patterns and components that can be easily customized to create visually appealing applications.

Other applications built with Outsystems demonstrate the platform's flexibility and power to create engaging user interfaces. These applications exemplify how Outsystems can be used to deliver enterprise-grade style guides, responsive designs, and innovative UI experiences.

Conclusion

In conclusion, front-end development in Outsystems shares many similarities with other web technologies. By following best practices for CSS and JavaScript, leveraging platform capabilities, and using industry-standard tools, developers can create outstanding applications with great UIs. The Outsystems platform provides a robust development environment, allowing developers to build responsive, scalable, and visually appealing applications. So why not embrace these front-end techniques and start building amazing applications with Outsystems today?

Pros:

• Outsystems platform enables integration with other web technologies
• Best practices for CSS and JavaScript can ensure maintainable code
• Personal area allows for private testing of changes
• Changing the head enables customization of scripts and stylesheets
• Browser support and testing tools simplify cross-browser compatibility
• Tools like CSS injection and live reload enhance development productivity
• Outsystems has examples of applications with great UIs

Cons:

• Best practices and techniques may require additional learning
• Adhering to browser support and testing may add complexity to development process
• Leveraging tools and techniques may require integration efforts in the environment
• Changing the head and injecting scripts/stylesheets requires manual configuration