Strengthen your OutSystems front-end skills using these tips

It is quite common to have this kind of discussion with coworkers about their difficulties with front-end. Usually, the main complaints that developers face during development are based on how to make front end/CSS scalable, reusable and overall how to organize their code.

So, we found that this kind of information would be useful for everyone in that position, given the fact that it comes from people that use it on a regular basis.

Having that in mind, we would like to share two best practices that our team of front-end and web design here at Noesis follows on a daily basis to streamline your next OutSystems Project.

Use a CSS nomenclature

CSS is not the prettiest ‘language,’ but it has been styling the web for over 20 years now. So, it is not doing too badly, huh?

However, as you write more CSS, you quickly see one big downside, it is difficult to maintain CSS, especially if poorly written, can quickly turn into a nightmare.

Why Use Naming Conventions?

“There are only two hard problems in Computer Science: cache invalidation and naming things” — Phil Karlton

Naming things is hard. We are trying to make things easier, and save ourselves time in the future with more maintainable code.

Naming things correctly in CSS will make your code easier to read and maintain.

If you choose to use the BEM naming convention, it will become easier to see the relationship between your design components/blocks just by looking at the markup.

Generally, there are 3 problems that CSS naming conventions try to solve:

• To know what a selector does, just by looking at its name
• To have an idea of where a selector can be used, just by looking at it
• To know the relationships between class names, just by looking at them

So how does BEM really work?

BEM attempts to divide the overall user interface into small reusable components. Consider a quite simple drawing of a stick man

• The B in BEM stands for ‘Block’.

In the real world, this ‘block’ could represent a site navigation, header, footer, or any other block of design.

Following the practice explained above, an ideal class name for this component would be stick-man.

The component should be styled like so:

• The E in ‘BEM’ stands for Elements.

Overall blocks of design rarely live in isolation.

For instance, the stick-man has a head, arms, and legs.

The head, legs, and arms are all elements within the component. They may be seen as child components, children of the overall parent component.

Using the BEM naming convention, element class names are derived by adding two underscores, followed by the element name.

For example:

• The M in ‘BEM’ stands for Modifiers.

What if the stick-man were modified and we could have a blue or a red stick-man?

Using BEM, modifier class names are derived by adding two hyphens after the element name.

For example:

The last example showed the parent component being modified. This is not always the case.

What if we had stick-men of different head sizes?

This time the element has been modified. Remember, the element is a child component within the overall containing block.

The “.stick-man” represents the Block, “.stick-man__head” the element.

As seen in the example above, double hyphens may also be used like so:

Note the use of the double hyphens in the example above. This is used to denote a modifier.

This is basically how the BEM naming convention works.

You can read more about BEM. http://getbem.com/introduction/

Create a pipeline for your theme.

When we build an application with OutSystems, we always strive to be as scalable and modular as possible so that our applications can grow quickly and easily and building your theme should be no different.

OutSystems offers you a great starting point with their OutSystem UI. But what if you want to create your own theme or extend OutSystem UI in more complex ways?

What is normally most debated by teams is how to organize the theme and scale it so that it does not turn into chaos across the sprints.

To avoid these issues, we recommend creating your own front-end pipeline whenever you need to work with complex themes.

This article is not about explaining how to create such a pipeline, because there are already numerous articles about that, but about explaining the benefits and technologies and giving you a new perspective.

NodeJS and NPM Packages

NodeJS may be well known to some of you as a platform for both front-end and back-end project development. NodeJS is based on Chrome’s JavaScript runtime engine (V8), is asynchronous, and follows an event-driven pattern.

NPM (Node Package Manager) is a software package manager that allows us to import small packages that help us solve a problem in our application, as well as individual tools that help us in our day-to-day work.

So how can NodeJS and NPM help us break our themes in smaller pieces and reduce complexity?

Gulp

The core functionality of gulp is to help developers with repetitive daily tasks and create a highly effective pipeline for example: bundling source files in a single file, creating Icon fonts or making images more suitable to the web.

Gulp by itself is just a task runner, but with the help of plugins created by the community you can accomplish anything. So, what packages you should look for and what are their main advantages?

1. gulp-concat-css — allows you to have separate files in and put them in a single file.

This will help you create smaller pieces of code and help you create an easier codebase to maintain.

2. gulp-postcss — allows you to parse the CSS file and apply a combination of transformations to your files. Using it with the autoprefixer will allow adding to your CSS the right vendor prefixes without any worry.

From this

To this

3. cssnano — is another plugin for the gulp-postcss that allows you to minify CSS files. If you have a pipeline, passing minified files to your code in OutSystems can save you some time in your application.

4. gulp-prettier — helps you maintain some order in your files by automatically formatting your CSS.

Those are only a few examples of packages that can help you create better style guides and easing up your development.

We hope that this inspired you to search a bit more on your own and find what best suits you. Do not be afraid to learn more about these tools: they are being used more every day and they truly help you. The list is long and the only way for you to really know them is to use them. Keep in mind that gulp will help you with some tasks other than CSS and there are other tools that can help you work better for example with JavaScript, Images, Icon-fonts etc.

To sum it all up

These are two tips that our team believes can really make a difference on a daily basis. They fit our team and could not suit yours or the project that you’re in, but we think that either way you should give them a go.

It is in our plans in a near future to release an article showing you our workflow and give examples and how-tos regarding this subject, as well as more tips like these, so stay tuned.

Ana Oliveira and FWD Team @ Noesis