Proposal: Adaptive UI-Kit

[fahad19]

Goal

We intend to go for adaptive design in near future for all of our front-end projects.

Currently

In UI Kit, all our components are responsive by default and producing the same markup/styles for all targeted devices.

What does adaptive mean?

This is the summary as I understand it:

• Responsive: One set of markup/styles that adapts to various screen sizes
• Adaptive: Multiple sets of markup/styles that adapts to various screen sizes

What screen sizes are we targeting?

At least for these devices:

• Desktop
• Tablets
• Mobile

Why should it impact UI-Kit?

The goal of this project from the start was to establish a single design language across all applications that we build.

If we want to fit UI Kit in this new direction of adaptive design, this is a very important time for this project to lead the way.

Proposal

Assuming we can keep the API for our components the same, no matter where they are being used, we can still produce different markup/styles for them against targeted devices.

Dists

Right now, UI Kit produces two bundles:

• ui-kit.js
• ui-kit.css

We can consider producing additional bundles to accommodate adaptive design:

• ui-kit.mobile.js
• ui-kit.mobile.css
• ui-kit.desktop.js
• ui-kit.desktop.css

Components structure

Let's use the classic Button component as an example here. Imagine a directory structure like this:

├── button/
│   ├── index.js
│   ├── button.mobile.js
│   ├── button.desktop.js
└── package.json

The content of index.js can be this:

// index.js
if (process.env.TARGET_DEVICE === 'mobile') {
  modules.exports = require('./button.mobile');
}

if (process.env.TARGET_DEVICE === 'desktop') {
  module.exports = require('./button.desktop');
}

And the button.mobile.js and button.desktop.js can continue to implement themselves following their own markup/styles as long as the behaviour using "props" remains the same for both.

The process.env.TARGET_DEVICE can be made available both in dynamic server, as well as during our bundling process when generating the dists (using Webpack's DefinePlugin).

Usage

Doesn't matter where you are using the UI-Kit in, you import the component the same way everywhere:

import Button from 'travix-ui-kit/Button';

[leandrooriente]

Where will be the logic to define which version import?

If you use import Button from 'travix-ui-kit/Button';, travix-ui-kit will serve the correct version? How will it know if the actual context is mobile or desktop?

To serve only the correct version it should be defined on the server right? Using the user-agent.

[fahad19]

It's mentioned under the heading "Components structure".

Server will set process.env.TARGET_DEVICE, and package will then export the module accordingly.

[yurist38]

Is there any chance to keep a choice what approach to use with a specific component? I think some components should still go with responsive approach. If it looks very similar on desktop and mobile I don't see any sense to maintain 2 versions of markup/styles.

[rbardini]

As I understand it, a responsive component doesn't need separate mobile and desktop implementations, so it would just end up in both bundles—it all depends on the component's index.js file.

However, I do wonder how we would decide whether a given component should follow the responsive or the adaptive approach. Do we have any guidelines for that, or do we plan to go all-in into adaptive components?