The Product Owner’s Guide to 6M

As a product owner, you want to create business value together with your development team. Using TUI technology, you can create value much faster.

How can this website help you as a PO?

Although 6M is a rather technical topic, you as a product owner will benefit from knowing the details of the concept. How so?

• If an existing solution solves a business problem for you, you can use that solution and invest your resources into creating value in a different area.
• If you understand the technical paradigms, you can better understand how your team can implement compliant solutions (e.g. a valid 6M component).
• If you’re in charge of bugdet and time planning for a 6M component, you will know how to manage a project implementing such a component.

The following sections describe common questions/problems of Product Owners, and answers/solutions to them. Therefore, we decided to design this page as a Q&A.

Basic concepts and definitions

What is a Web Component?

A web component is a self-contained building block of a website which ships everything it needs to run: HTML for structure, CSS for layout/design, JavaScript for logic and interaction. With web components, a website can be build as a system of “loosely coupled” modules, as opposed to delivering all JavaScript, CSS and HTML in large, monolithic files. Both UI Elements as well as 6M Components are web components by this definition. There are different implementations of this concept, though recently, the W3 Consortium has introduced a Web Components standard with several new native web features such as custom elements.

What is a 6M Component?

6M is a TUI-specific concept, based on the Micro Frontend paradigm. A 6M Component is a special type of web component which solves a concrete, isolated business problem – therefore, we also call them “business components”.

To learn more about 6M components, have a look at the 6M Reference. The Component Catalog shows the currently available components and allows configuring them for your own application.

What are UI Elements?

In the context of 6M, the UI Elements are a set of reusable generic web components. They may be small (so-called “atoms”, such as buttons or form fields), mid-sized (“molecules”, such as panels or list views), or large (“organisms”, such as calendars or image sliders). These UI Elements can be loaded into any website and be used as basis for 6M components and other user interfaces – that’s right, they are not limited to 6M.

To learn more about UI Elements, have a look at the Elements introduction.

If UI Elements and 6M Components both are web components, how are they different?

Regarding the differences between the two, consider the following table:

What are custom elements, and how are they related to web components?

As mentioned before, web components are the concept of bundling HTML, CSS and JavaScript in self-contained building blocks. A standardized way of doing this is exposing the web component through a custom HTML element, such as <my-web-component>. The owner of a website doesn’t need to know about the internals of the web component, all functionally is encapsulated in the component.

Managing 6M Projects

How can I decide if a product needs to be implement as a 6M component?

The decision whether or not to build a piece of software as a 6M component is a technical and/or strategic one. As such, it will not be your duty to decide, but you may need to weigh in. Consider the following rules of thumb when thinking about 6M components:

• A 6M component is always a logical first-level element of a website. 6M components must not be nested.
• A 6M component usually has some kind of interaction with backend systems.
• The 6M component does not control the state of a web page itself. (This is what a “single-page application” would do.)

If you are in doubt, please refer to the 6M Community to support you in the decision making.

What should I do when commissioning a 6M component?

1. Inform the development team or the contractor of this website, especially the 6M Reference.
2. Before commissioning, make it clear that compliance with the 6M Guide is a mandatory requirement.
3. Tell them that they should ask if they encounter any questions or problems during the implementation.
4. As a part of your acceptance process, go through the validation checklist at the end of this page.

Repeat this cycle for every non-trivial update of the component.

What do I need to keep in mind regarding the business aspects?

6M components will be used by other entities without much knowlegde of the internals of your component. Keep in mind that you (or your development team) should document any behaviour of your component affecting the host context.

This is especially important when it comes to compliance or legal issues, such as privacy regulations. For example, if your components collects personal information (as defined by the EU-GDPR), this must be clearly stated. Otherwise, host site operators using your component may get into trouble.

The right place for this information is the component’s documentation referenced in the 6m.json file, not the README.md file.

How do I make sure that the 6M component is reusable?

The point of 6M is to have reusable components. This means that they can be used (almost) seamlessly in other TUI-related products. When specifying the business requirements for the component, please talk proactively to other teams if they have similar requirements, or maybe even already thought about building such a component.

• Communicate your idea to your BA/PO/… peers in other teams/units.
• Ask if they already have something similar.
  • If not, ask if they would find such a component useful, and which requirements they would have.
  • If so, try to find out to which extent the component will match your requirements. Ask if missing requirements could be added to satisfy your needs.
• Draw your conclusions from the discussion with your collegues, always aiming at avoiding redundant development.

How do I make sure that a 6M component is sustainable?

Sustainability can be understood in the sense that a software product is stable and maintainable over a certain lifecycle. Stability means that the exposed functionality does not change at random. Maintainability means that the code is prepared to be extended or even taken over by other developers. A focus on sustainability is particularly neccessary with a 6M component, because it will be used beyond the scope and lifecycle of your own business case.

If you are a non-technical person, it will be difficult for you to specify requirements which ensure these qualities. It is recommended that you consult a senior developer from your team to help you in writing up technical requirements for sustainability of the component.

How do I proceed if questions arise during implementation?

We assume the 6M Guide to be sufficient and consistent for an experienced developer. However, if something is not clear or if you spot a mistake, you are very welcome to join the 6M Community and ask for feedback. We will help when implementation questions arise and will improve the documentation if neccessary.

How do I validate a component for 6M compatibility?

Use the following checklist to ensure the component is 6M compliant. If you are unsure about how to do this, ask a 6M-savvy collegue to assist you.

• Can the component be built and run using the 6m-env toolkit?
• Does the 6m.json file properly describe all attributes and events?
• Does the user documentation file (referenced in 6m.json) explain the usage of the component sufficiently?
• Can the frontend of the component be integrated through a single JavaScript file?
• Is the component fully functional in all relevant browsers (including IE 11, Mobile, …)?
• Is the component configurable in at least two languages via the locale attribute?
• Are all HTML attributes on the component business-related? (This means, they should not be used for technical configuration, such as API endpoints or target environments. If this is the case, this configuration would belong into the middle layer.)
• If the component has a middle layer …
  • … does it provide the /health and /monitor endpoints?
  • … does the documentation explain which environment variables (if any) the middle layer needs at runtime?

If you have any more questions on 6M or other technology featured on this website, please let us know.