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

Question

作为一名交互设计人员，​正在寻找与开发人员协作的更好方法，我尝试将模式实验室介绍给我当前的客户端。但是，前端框架的主要开发人员会向后推。他的论点的主要要点：

我们的工具包有复杂的组件，除了HTML/CSS之外，还需要JavaScript或JS库。这不会与模式实验室中的胡子或车把模板很好地混在一起。因此，我们使用角度JS，这是我们的组件被写入的框架。

我试着寻找讨论这个话题的文章。据我所知，这里有没什么。所以我只找到了几篇文章(示例)，但是除了两年前的一个解析问题已解决之外，没有任何关于模式实验室(缺乏)与角度兼容的主题。

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

Answer 1

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

我刚刚创建了这个简化的示例存储库，演示了模式实验室中的角。

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

​

​

正如您所看到的，模式实验室可以在单个模式的范围内运行任意的前端代码，包括Javascript，这样一个有动力的个体就可以展示使用它的组件。

尽管如此，我并不认为PL构建原子组件的“用谷物”的方法能够完美地以角度工作(比如，不要在这里构建整个应用程序)，但是在例如工具提示或模态组件后面展示JS是可能的。

这种策略类似于让我想起了https://rizzo.lonelyplanet.com/styleguide/design-elements/ --在它中，除了JS组件之外，还有UI组件。

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

Answer 2

使用模式实验室创建的可重用模式绝不依赖于胡子，因此您的开发人员可以放心，模式实验室不会引入任何将传递到代码中的依赖项。

事实上，使用模式实验室构建的样式指南的全部目的是构建一个独立于语言的风格模式库-- HTML标记和CSS --开发人员可以在他们的应用程序中重用它们，无论他们选择在AngularJS、ReactJS、普通服务器端代码或其他什么地方构建它们。

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

胡子是工具堆栈模式实验室用来生成静态网站的一部分，但是没有任何胡子的痕迹或者依赖于它的痕迹传递到最终的网站。我为几个AngularJS团队服务，这些团队的设计模式都托管在模式实验室上，他们中没有人需要接触甚至了解胡子。

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

风格指南应该是任何现代web开发设置的先决条件，因为它是开发人员和设计人员之间进行智能和高效协作的先决条件，并且可以使快速原型化变得更快。因此，我认为您应该进行的讨论是，您是否应该使用样式指南进行协作，并帮助提高协作的效率。如果您在这方面达成一致，模式实验室只是开发模式实验室的一个明智选择。

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

希望这能引发与您的开发人员更好的讨论，如果他们阻止您构建样式指南，他们就会错过。

Answer 3

我们已经成功地在我们的开发工作流程中建立了模式实验室。我们只需调整patternlab构建，将生成的CSS文件复制到应用程序的资产文件夹中。开发人员在模式实验室中编写所有CSS和模板，并在应用程序中自动使用生成的文件。