cssangularjspatternlab.io

Does Pattern Lab "not mix well" with Angular?


​As an interaction designer looking for better ways to collaborate with developers, I have tried to introduce Pattern Lab to my current client. The lead developer for the front end framework pushes back, however. Main gist of his argument:

Our toolkit has complex components that require JavaScript or a JS library in addition to HTML/CSS. This would not mix well with the Mustache or Handlebars templating in the Pattern Lab. Thus we use Angular JS, which is the framework that our components are written in.

I have tried to look for articles that discuss this topic. There's nothing here on SO as far as I can tell. Outside SO I have found just a few posts (example), but nothing that's specifically on the topic of Pattern Lab's (lack of) compatibility with Angular, except for a parsing issue that was solved two years ago.

As a non programmer I don't have the necessary influence to sway my developer peers. Would be great if someone with hands on experience could elaborate.


Solution

  • Maintainer of Pattern Lab Node here.

    I just created this reductive sample repository illustrating Angular within Pattern Lab.

    As you can see, Pattern Lab can run arbitary frontend code, including Javascript, within the confines of a single pattern, so a motivated individual could showcase components using it.

    That said, I don't think that PL's "with the grain" approach of building atomic components works perfectly with Angular (like, don't build your whole app in here) but showcasing the JS behind, say, a tooltip or modal component, is possible in isolation.

    This strategy would be similar to reminds me of https://rizzo.lonelyplanet.com/styleguide/design-elements/ - in which they have UI components alongside JS components.

    Hope this helps clear up any confusion.