Open fahad19 opened 6 years ago
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.
It's mentioned under the heading "Components structure".
Server will set process.env.TARGET_DEVICE
, and package will then export the module accordingly.
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.
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?
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:
What screen sizes are we targeting?
At least for these devices:
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:The content of
index.js
can be this:And the
button.mobile.js
andbutton.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: