模式实验室与Angular“不能很好地混合”吗？

Question

作为一个寻找更好的方式与开发人员合作的交互设计师，我试图将Pattern Lab引入到我现在的客户端。但是，前端框架的主要开发人员推回。他主要论点：

我们的工具包有复杂的组件，除了HTML/CSS之外，还需要JavaScript或JS库。这不会与Pattern实验室中的Mustache或Handlebars模板混合。因此我们使用Angular JS，这是我们组件编写的框架。

我试图寻找讨论此主题的文章。据我所知，这里有nothing。除此之外，我只发现了几篇文章（example），但除了两年前解析问题为solved之外，没有特别针对模式实验室（与Angular缺乏）兼容性的主题。

作为一名非程序员，我没有必要的影响力来影响我的开发人员。如果有经验的人能够详细阐述，那将会很棒。

Answer 1

此处的模式实验室节点的维护人员。

我刚刚在Pattern Lab中创建了一个说明Angular的还原样本库。

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

• 现场演示http://www.brianmuenzenmeyer.com/patternlab-node-angular-example/public/index.html

正如你所看到的，图案实验室可以运行arbitary前端代码，包括JavaScript，内一个模式的局限性，所以一个有动机的人可以展示使用它的组件。这就是说，我不认为PL的构建原子组件的方法与Angular完美配合（比如，不要在这里构建你的整个应用程序），而是展示出JS的背后，比如说工具提示或模态组件可以单独使用。

这个策略类似于我想起的https://rizzo.lonelyplanet.com/styleguide/design-elements/--其中他们有UI组件和JS组件。

希望这有助于消除任何混淆。

Answer 2

使用Pattern Lab创建的可重复使用的模式是不依赖于Mustache，因此您的开发人员可以放心，模式Lab不会引入任何依赖关系，这些依赖关系将传递给他们的代码。

事实上，使用Pattern Lab构建或不构建的样式指南的全部要点是构建独立于语言的样式模式库（HTML标记和CSS），开发人员可以在其应用程序中重复使用它们选择在AngularJS，ReactJS，Plain旧服务器端代码或其他内容中构建它们。

模式实验室只是维护风格指南的前端开发人员或设计师的便利工具。它生成一个静态样式指南网站，展示不同的模式。该网站将成为项目开发人员使用模式的工具。就像AngularJS可以在任何静态站点中使用一样，它当然也可以用在使用Pattern Lab生成的静态站点中。

胡须是工具堆栈的一部分模式实验室用于生成静态网站，但没有胡须或依赖关系遗留在生成的网站上。我为几个设计模式托管的AngularJS团队提供模式实验室服务，他们都不曾碰过，甚至不知道胡须。

如果您的开发人员熟悉像Bootstrap或Foundation这样的前端框架，它为不同的前端块提供了文档模式，这也是一样的。不同项目上的开发人员可以复制HTML标记和CSS代码，而无需任何其他依赖项。

风格指南应该是任何现代Web开发环境中的先决条件，因为它是开发人员和设计师之间智能高效协作的先决条件，并使快速原型开发更加快速。所以我认为你应该讨论的是你是否应该使用风格指南来进行协作和帮助更有效的协作。如果您就此达成协议，Pattern Lab只是开发一款产品的明智选择。

这里有一个很好的介绍，使用风格指南，以及不同的工具集，你可以用它来建立一个。模式实验室列在风格指南平台部分下： https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

希望这可以引发与开发人员更好的讨论，他们错过了，如果他们阻止你建立一个风格指南。

Answer 3

我们已经成功将Pattern Lab建成了我们的开发工作流程。我们简单地调整了patternlab构建，将生成的CSS文件复制到应用程序的assets文件夹中。开发人员在Pattern Lab中编写所有CSS和模板，并且生成的文件会自动用于应用程序中。