Patterns in Nitro

Translated from German using DeepL.

Date: August 2020
Reading time: 3 minutes

Over the last few weeks, I have been working with patterns. In this blog post I explain why and how to use them.

Nitro

https://github.com/merkle-open/generator-nitro (opens in a new tab)

Although the focus of this post is on patterns, it's a good idea to understand Nitro a little.
Nitro is an application for Node.js to simplify frontend development. Nitro makes it easier to structure your project.
The code is cleaner thanks to the scripts. As a developer, I can configure when which script is executed.
Example: I only want to commit my code when it is error-free. Now I can specify that a linter script runs over the desired files first.

Generate

Use the following code to create a project:

npx -p yo -p generator-nitro@latest -- yo nitro

Now you have various options:

After that you can run the page in a dev or prod mode:

Patterns

Patterns are used in front-end development to split up code. You can find them under src/patterns.

If I have a website, I need three buttons on my pages, for example. I can now create a pattern from such a button. I can then use these patterns on the entire website.

Handlebars

By default, the extensions of the files, which look similar to html files, are hbs. HTML can be written in HBS files. However, there are advantages:

• Logic: elements can be displayed if something applies ({{#if children}}...)
• Patterns: Namics has written a helper so that the patterns can be easily integrated into the files

You can find more detailed information on the Handlebars website:
https://handlebarsjs.com/guide/#what-is-handlebars (opens in a new tab)

Atomic Design

When creating patterns, you have to think about what you want:

• atom
• molecule
• organism

If you are not yet familiar with the above terms, you should definitely read the following description first: https://bradfrost.com/blog/post/atomic-web-design/ (opens in a new tab)

Create

To create a pattern you have to execute the following code:

npm run nitro:pattern

You will then get help with the creation.

The following things are queried:

1. name (case sensitive)
2. type (atom, molecule, organism)
3. css modifier
4. js decorator

Content

A pattern consists of the following things:

button/
	data/
	css/
	button.hbs
	index.js
	readme.md
	schema.json

• data: contains the json files, which contain data for the content
• css: contains scss files for the styles
• js (not included in this pattern): contains js files for the logic
• button.hbs: is the markup for the button
• index.js: imports js and scss
• readme.md: the pattern is documented here
• schema.json: defines which data is allowed in the pattern

Use on page

To display the pattern, you can include it in index.hbs, for example.

{{pattern name='button'}}

Deviations

Three buttons can also be placed on a website without Nitro. However, there is a decisive advantage when using the application: you can change individual buttons as you wish.
Below are the buttons that are shown on my website. I can customize the following things:

• Appearance -> Modifier (SCSS)
• Function -> Decorators (JS)
• Data -> Data Variations (JSON)
• Entire template -> second template (hbs)

I have now created another json in my _data folder.
(variant can be replaced by any name).

button/_data/button-variant.json

Exactly the same could be done for JS or SCSS files.

button/css/modifier/button-<modifier>.scss
button/js/decorator/button-<decorator>.js

Then I can edit the file. In this case, I set disabled to true. This change is clearly visible, as it also changes the style of the button.

{ "text": "do it", "disabled": true }

Now I still have the three buttons in my index.hbs. To include the button-variant file I have to specify it under data. The extension of the file does not have to be specified, because you write data.

{{pattern name='button'}}
{{pattern name='button'}}
{{pattern name='button' data='button-variant'}}

More interesting information can be found in this readme:
https://github.com/namics/generator-nitro/blob/develop/packages/project-nitro/project/docs/nitro.md (opens in a new tab)

Conclusion

I find patterns very exciting and extremely useful.