7

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

Community
  • 1
  • 1
bjornte
  • 749
  • 1
  • 9
  • 31
  • The way PL works guarantees that it doesn't fit Angular. The fact that there's no info how Pattern Lab plays along with Angular doesn't shouldn't give a hope that it plays good. One of them is absolutely useless in presence of another. Since Angular is already used, I guess that PL drew a short straw. – Estus Flask Sep 15 '16 at 16:59
  • I haven't use PL but it doesn't differ from other server-side web apps in this respect. The term 'successfully use' is quite vague. Productive usage is not possible because the approaches are orthogonal. Angular is primarily aimed at SPAs, while server-side part limits it to be used for widgets (where it loses to jQuery) . It may be fine if server-side app is slowly refactored to be SPA, but screwing up existing SPA with this approach makes no sense. – Estus Flask Sep 15 '16 at 18:31
  • @estus I think you're misunderstanding what Pattern Lab is. It's a repository for hosting Atomic Design patterns. It does not power web apps and is not at all intended for any sort of production use. In fact, the PHP version compiles a completely static site. – bjornte Sep 15 '16 at 20:08
  • Yes, I'm aware of that. It doesn't really matter if the app is pre-generated or generated dynamically on server side, the result is the same. There's no good way how parts of the app can be reused between server-side and client-side (Angular) part. This will either result in writing dynamic app parts twice or having half-baked SPA. The point is that Angular is self-sufficient and doing things that are supposed to be done by itself on server side will hurt client-side app development. – Estus Flask Sep 15 '16 at 20:59
  • You can explain in the question what exactly you want to use PL for and see if this fits Angular workflow, but the answer will be likely the same. When non-Angular devs try to fit the tools of their trade (PHP, jQuery, Mustache, whatever) into Angular development, this just makes the things complicated and never ends well. When a dev becomes proficient enough with Angular to know how to do this properly, (s)he just does this with Angular alone (and Node tools). – Estus Flask Sep 15 '16 at 21:01
  • @estus I'm still not sure if I understand you. Now that Brian M. has contributed his answer below, can you elaborate further? In my particular project, we're not building a single page application (SPA), but we're using Angular to populate form fields. – bjornte Sep 19 '16 at 07:55
  • As the answer shows, it is possible to *use* both of them but not possible to use Angular efficiently. The use of PL in the app may cut off the possibility to seamlessly upgrade the app to SPA in the future. The primary use case for Angular is SPA, that's where it shines, using it for widgets alone (form, etc) with no perspective to move to SPA is pretty much overkill. For widget-styled JS there may be better matches (bare jQuery, dedicated form builders, maybe React). – Estus Flask Sep 19 '16 at 08:29

3 Answers3

8

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.

Bjørn Wang
  • 81
  • 1
7

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.

Brian Muenzenmeyer
  • 1,026
  • 1
  • 7
  • 17
1

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.

Tim Berman
  • 21
  • 2