-1

We are setting up a pattern library.
It's use is on the one hand to document and display our UI elements in a web view. On the other hand, it should also be the place where components are built. The actual web application should then consume the components (markup, CSS and JavaScript) from the pattern library and only display them.

We are mainly using PHP, mustache and javascript in our frontend at the moment, this is why we decided to build out components in the pattern library using those technologies.

At the same time, we are rethinking the technologies used in our frontend completely and are looking out to build certain parts using React or webcomponents (stencil).

The tool we use for the pattern library (fractal) makes you choose the template engine in a config. This means: choose mustache, no react and vice versa.

Has anyone here already set up a pattern library combining multiple technologies successfully - and is able to consume components in the fronend application, as well as display components, built in different technologies, in the pattern library?

If yes, I would very much appreciate your shared experience. Especially in terms of how you set up the pattern library, if you used a certain tool that helped a lot and how the frontend of the web application consumes the components.

Best wishes!

Improve this question
2
  • Hi Astrid, have a look at the don't ask page of the help center: "To prevent your question from being flagged and possibly removed, avoid asking subjective questions where ... your answer is provided along with the question, and you expect more answers: “I use ______ for ______, what do you use?” - are you sure this question is not of this type? Commented Feb 20, 2020 at 17:10
  • Hey @DocBrown thanks for pointing out that my question might not be asked in the right way. I'll definitely have to have a look at the link you provided. I tried to clarify the question a bit and thinking about it, it kind of is a question of the sort you described, but then it also isn't - as I am looking for a solution - and not necessarily only for the tools used. Commented Feb 21, 2020 at 9:24

1 Answer 1

Reset to default
0

I think what you trying to achieve is a Design System.

What the heck is a design system?

You can definitely have a common set of css/less/sass files that can be applied to any front end component that dictate the look and feel of your application. These can shared across any technology stack.

If you are building specific components on a specific stack, those would only be available for that stack. Your core CSS should still be able to be applied to the new stack.

If you looking for re-useable components not tied to a specific technology, you can look into Web Components. Usually these require polyfills for full browser support. But that is a possibility as well.

An introduction to web components.

Improve this answer
1
  • Thanks for your answer! Yes, we are looking to build the incorporation of our design system, indeed. Yes, if do not succeed to share templates and JS across the tech stack we are definitely goin for a Sass-only solution. This would be plan B, so to say. What I am looking for is still a solution that makes sharing of all three layers possible (markup, scss, JS). Maybe Webcomponents are the way to go. Commented Feb 22, 2020 at 20:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.