Pattern Lab与Angular“混合不好”吗？

Question

作为寻求更好的方式与开发人员协作的交互设计师，我尝试将Pattern Lab引入我当前的客户端。然而，前端框架的首席开发人员推迟了。他的论点的主要依据是：

  

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

我试图寻找讨论这个话题的文章。据我所知，这里有nothing。在SO之外我发现了一些帖子（example），但除了两年前solved的解析问题外，没有任何关于Pattern Lab（缺乏）与Angular兼容的主题的内容。

作为一名非程序员，我没有必要的影响力来影响我的开发者同行。如果有经验丰富的人可以详细说明，那就太好了。

Answer 1

使用Pattern Lab创建的可重用模式是 IN NO WAY 依赖于Mustache，因此您的开发人员可以放心，模式实验室不会引入任何将继承其代码的依赖项。

事实上，使用Pattern Lab构建的样式指南的重点是构建一个独立于语言的样式模式库 - HTML标记和CSS - 开发人员可以在他们的应用程序中重用它们，无论他们选择在AngularJS，ReactJS，普通的旧服务器端代码或其他东西中构建它们。

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

Mustache是​​Pattern Lab用于生成静态网站的工具堆栈的一部分，但没有任何痕迹的Mustache或依赖关系转移到生成的网站。我为几个AngularJS团队服务，他们在Pattern Lab上托管了设计模式，他们都没有接触过甚至不了解Mustache。

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

样式指南应该是任何现代Web开发设置的先决条件，因为它是开发人员和设计人员之间智能高效协作的先决条件，可以更快地进行快速原型设计。所以我认为您应该讨论的是您是否应该使用样式指南来协作并帮助提高协作效率。如果你就此达成协议，那么Pattern Lab只是开发它的明智选择。

以下是使用样式指南的简介，以及可用于构建样式指南的不同工具集。 Pattern Lab列在样式指南平台的下面： https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

希望这可以激发与开发人员更好的讨论，如果他们阻止你制作风格指南，他们就错过了。

Answer 2

模式实验室节点的维护者。

我刚创建了这个还原样本存储库，用于说明Pattern Lab中的Angular。

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

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

正如您所看到的，Pattern Lab可以在单个模式的范围内运行包含Javascript的仲裁前端代码，因此有动力的个人可以使用它来展示组件。

那就是说，我不认为PL的“用谷物”构建原子组件的方法与Angular完美配合（比如，不要在这里构建你的整个应用程序），而是展示JS背后，比方说，工具提示或模态组件，可以单独使用。

这个策略类似于让我想起https://rizzo.lonelyplanet.com/styleguide/design-elements/ - 它们在JS组件旁边有UI组件。

希望这有助于消除任何困惑。

Answer 3

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