After 17 years of web development experience, the last 8 of those years were dedicated to reducing the gap between designers and OutSystems Developers, I will share some of the best tips for improving OutSystems front-end development.
You can see all these tips on our Masterclass #12.
1. The atomic concept should be used
We need to think atomically (learn about it) when we are designing screens, according to the elements, components, and screens concept;
Each screen should be composed of elements (HTML) and components, then business logic should be applied on top.
Creating interfaces with isolated pieces allows us to develop fast, and promote “Build-for-the-Future”, reusing the pieces!
2. Develop new UI components without business logic
This can be complex, but is the main key!
It follows the same OutSystems UI rule. You can use UI components in all business content types and multiple use cases.
If you need to answer a complex behavior for a specific use case, try to isolate the component from the business login, to ensure that can be used in different use cases.
Some technical suggestions:
- Create a Block for each component;
- Use placeholders and input parameters to receive business data;
- Avoid business names such as “Title” instead of “Product Name”.
3. Use the main wrapper to easily control all children.
Create the main container to have all component elements wrapped. This way will be easy to find your component in the HTML tree and control all children.
A common example is when we need to change the state of your component between enabling and disabling. It only needs to add a CSS class in the main wrapper and apply the styles for each specific wrapping CSS class.
4. Add extended class parameter to all UI components
This parameter is very helpful when we need to apply some styles to a specific case.
The most common is to apply spacings but can be colors, borders, or other types of classes that are available as a utility.
5. Promote a CSS naming convention
It’s important to ensure that other developers and teams will understand our solutions in the future, promoting code and name conventions is a key point.
We use BEM at Hi Interactive, it is easy to learn and is the most used;
6. Prevent reflow and repainting with CSS best practices
When someone says that it is a CSS expert, my first reaction is “probably you don’t know the power of CSS”!
The truth is that CSS is growing its potential in the latest years with many new features and today it is a complex tool, not only to make pretty things but to develop well-performed apps.
Do you know that CSS can use the device GPU for high-performance interactions and transitions? This way you can implement a web app as a native experience.
Reflow and repainting are two of the main concerns of performance, and we can prevent them with some CSS best practices.
An example of how to avoid repainting: Setting all border bottom styles to a list item excepting the last one.
Apply border to list items except for the last one
7. Use only CSS and Javascript Vanilla to develop for the future
One of the big lessons learned from the insanity number of web technologies and their versions was… to not depend on them for our core components.
We can use them to accelerate development, but the core cannot rely on them.
In recent years, we have been developing everything in vanilla code. This means delivering our code without any dependencies, even from the OutSystems Platform! Don’t use any action, event, or another OutSystems feature to resolve UI component behavior.
By doing so, you ensure that your component works for the current platform version 11 and future versions.
8. Fewer containers, easy to maintain
It’s common to find containers to answer to UI needs, but the experience says, “fewer containers promote easy maintenance”.
Try to avoid containers, use wrappers only if you have more than one child, and don’t use them to give spaces or other types of structures.
One of the most common mistakes has a container wrapping a single placeholder. I can ensure that is not needed for all use cases.
The power of CSS can do everything if the HTML has only the required elements.
9. Use and enjoy the native browser components
In low code development, it’s common to see complex code that could be answered with a simple native component!
Be updated with what browsers have available to use, not only the OutSystems UI components and Platform Widgets.
We deploy a component in forge called input color, that can be useful, but also easier to implement! In this case, it's only an input controller with an attribute type color, it’s a native component without any custom implementation!
10. Service studio preview
As for front-end developers, we don't implement applications, we deliver UI components and other assets to help low-code developers implement the software. For this rule is important to deliver the code with the best experience possible, and service studio preview is one of the key points.
It is important to promote a design-time experience as similar as possible to the run time!
To do this, you can use IF conditions, blocks, and other tips and tricks, but the most useful is the custom CSS property -servicestudio-propertyname.
This property only is applied in design-time and is not rendered in run-time.
11. CSS on Theme!
It is possible to add CSS on blocks, pages, and themes, but this does not promote a good development process, we recommend only using themes for CSS!
OutSystems have been improving the client-side performance in the latest versions, but to promote easier maintenance and multiple developments at the same time, you need to use all CSS in a single theme.
If you have the skills, you can also use other tools to develop your CSS, such as SCSS, GIT, and task runners.
12. Avoid using the Styles Editor and promote the use of CSS Utility classes
Yes, you are reading correctly! In my opinion, you should not use a feature from the platform to edit styles, more specifically Styles Editor!
This is a great tool to use on specific screens, but if you want to use a consistent experience across screens and applications, you should try to avoid using it and replace your needs with utility classes available through OutSystems UI.
This way, you promote well-structured interfaces that can be adjusted in one place, as opposed to the Styles Editor, which must apply and change UI rules in each place they are used!
When we need to change color, margin, or font size, we only need to make one change in CSS! If you applied styles with the Styles Editor, it will be hard to apply the changes, as you probably have already experienced.
13. Create usable screen templates
By using screen templates, you can promote consistency between applications and speed up development. 80% of all use cases can be answered previously by using the most common and complex screens.
When creating the screen templates, pay attention to dependencies, custom components, entities, sample data, and best coding practices.
14. Create usable app templates
A screen template is a module detected by the platform and is shown when we are creating new apps.
The system will clone the template module and create a new app with this module, this means that everything present in your custom app template will be available in the new app.
As screen templates, App Templates are a well to tool to accelerate development and promote consistency between apps.
Some tips to implement a great app Template:
- Isolate layouts, don’t leave blocks inside the template;
- Ensure that scaffolding works;
- Promote the best experience to the menu, when it’s needed add items;
- Pay attention to the service studio preview.
15. Document well all UI components
The trend of Design Systems is not only about the hype of a subject, but it is also a way to ensure promote consistency between app products and teams.
Documenting all UI components and assets in your Design Systems is crucial to promoting the usage, reducing development time, and promoting reuse, and development for the future.
This does not need to be full and great documentation, starts from the essential to explain the component, left some use cases, and explain the different behaviors.
16. Promote regular workshops
To finish a list of tips, the latest one but also important!
Try to listen to developers and share with regularity the new components, do some exercises using them and explain the advantages of the behavior.
Sometimes developers spend much time implementing something that can be solved by a UI component from Design Systems. Try to ensure that everyone knows what exists and can be used.
.png){kind=small}
.png){kind=small}
