7

作为一名交互设计师,我正在寻找更好的方式与开发人员协作,我尝试将 Pattern Lab 介绍给我当前的客户。然而,前端框架的首席开发人员却退缩了。他的论点的主要要点:

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

我试图寻找讨论这个话题的文章。据我所知,这里没有任何内容。在 SO 之外,我只找到了几篇文章(示例),但除了两年前解决的解析问题外,没有任何关于 Pattern Lab 与 Angular(缺乏)兼容性的主题。

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

4

3 回答 3

8

使用 Pattern Lab 创建的可重用模式绝不依赖于Mustache,因此您的开发人员可以放心, Pattern Lab 不会引入任何会延续到他们的代码中的依赖项。

事实上,无论是否使用 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/

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

于 2016-09-21T13:52:16.877 回答
7

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

我刚刚创建了这个简化的示例存储库,说明了 Pattern Lab 中的 Angular。

如您所见,Pattern Lab 可以在单个模式的范围内运行任意前端代码,包括 Javascript,因此有动力的个人可以展示使用它的组件。

也就是说,我不认为 PL 构建原子组件的“粗略”方法与 Angular 完美配合(比如,不要在这里构建整个应用程序),而是展示 JS 背后的工具提示或模式组件, 孤立地是可能的。

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

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

于 2016-09-17T05:06:00.367 回答
1

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

于 2017-06-29T09:45:51.907 回答