Does Pattern Lab "not mix well" with Angular?

Question

​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.

Answer 1

Reusable patterns created with Pattern Lab are IN NO WAY dependant on Mustache, so your developers can rest assured that pattern Lab does not introduce any dependencies that will carry over to their code.

In fact, the whole point of a style guide, built using Pattern Lab or not, is to build a language independent library of style patterns -- HTML markup and CSS -- which developers can reuse in their apps, whether they choose to build them in AngularJS, ReactJS, Plain old server-side code behind or something else.

Pattern lab is just a convenient tool for the front end developer or designer who maintains the style guide. It generates a static style guide website showcasing the different patterns. That website will be the tool for project developers using the patterns. Just as AngularJS can be used in any static site, it can of course also be used in a static site generated using Pattern Lab.

Mustache is part of the tool stack Pattern Lab uses to generate the static website, but no traces of Mustache or dependencies upon it carry over to the resulting website. I serve several AngularJS teams with design patterns hosted on Pattern Lab, and none of them have ever had to touch or even know about Mustache.

If your developers are familiar with frontend frameworks like Bootstrap or Foundation, which offer documented patterns for different front end blocks, this is just the same. Developers on different projects can copy HTML markup and CSS code without any other dependencies.

A style guide should be a prerequisite in any modern web development setup, as it's a prerequisite for smart and efficient collaboration between developers and designers and makes quick prototyping much quicker. So I think the discussion you should be having is whether you should use a style guide to collaborate and aid more efficient collaboration. If you come to an agreement around that, Pattern Lab is just a smart choice for developing one.

Here's a good intro to using style guides, and also to different toolsets you can use to build one. Pattern Lab is listed under the section for Style guide platforms: https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

Hopefully this can spark a better discussion with your developers, they're missing out if they stop you building a style guide.

Answer 2

Maintainer of Pattern Lab Node here.

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

• Repository https://github.com/bmuenzenmeyer/patternlab-node-angular-example

• Live Demo http://www.brianmuenzenmeyer.com/patternlab-node-angular-example/public/index.html

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.

Answer 3

We have successfully built Pattern Lab into our development workflow. We simply adjusted the patternlab build to copy the resulting CSS files into the assets folder of our application. Developers write all CSS and templates in Pattern Lab and the generated files are automatically used in the app.