css - Pattern Lab "not mix well"是否带有 Angular?

标签 css angularjs patternlab.io

作为一名寻找更好的方式与开发人员合作的交互设计师,我尝试向我当前的客户介绍 Pattern Lab。然而,前端框架的首席开发人员反对。他论点的要点:

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.

我试图寻找讨论该主题的文章。有 nothing据我所知,就在这里。在 SO 之外,我只找到了一些帖子(example),但除了一个解析问题 solved 之外,没有任何内容专门针对模式实验室(缺乏)与 Angular 的兼容性。两年前。

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

最佳答案

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

事实上,无论是否使用 Pattern Lab 构建的样式指南的全部意义在于构建一个独立于语言的样式模式库——HTML 标记和 CSS——开发人员可以在他们的应用程序中重用它们,无论他们选择以 AngularJS、ReactJS、简单的旧服务器端代码或其他方式构建它们。

Pattern lab 只是维护样式指南的前端开发人员或设计师的一个方便工具。它生成一个展示不同模式的静态风格指南网站。该网站将成为元素开发人员使用这些模式的工具。正如 AngularJS 可以在任何静态站点中使用一样,它当然也可以在使用 Pattern Lab 生成的静态站点中使用。

Mustache 是 Pattern Lab 用于生成静态网站的工具堆栈的一部分,但没有 Mustache 的痕迹或对它的依赖性会转移到生成的网站上。我在 Pattern Lab 上为几个具有设计模式的 AngularJS 团队服务,他们中没有人接触过甚至不知道 Mustache。

如果您的开发人员熟悉 Bootstrap 或 Foundation 等前端框架,它们为不同的前端 block 提供了文档化的模式,这也是一样的。不同元素的开发人员可以在没有任何其他依赖项的情况下复制 HTML 标记和 CSS 代码。

风格指南应该是任何现代 Web 开发设置的先决条件,因为它是开发人员和设计人员之间智能高效协作的先决条件,并且可以更快地制作快速原型(prototype)。所以我认为你应该讨论的是你是否应该使用风格指南来协作并帮助更有效的协作。如果您就此达成一致,Pattern Lab 就是开发它的明智选择。

这是关于使用风格指南的一个很好的介绍,也介绍了您可以用来构建风格指南的不同工具集。模式实验室列在样式指南平台部分下: https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

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

关于css - Pattern Lab "not mix well"是否带有 Angular?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39515130/

相关文章:

angularjs - 在 Angular 中,$document.find ('body' ).eq(0) 与 $document[0].body

twig - Patternlab Twig 包含参数

javascript - 以模式传递 JSON 数据 |模式实验室

html - 响应形式,如何在响应时保持一个 div 紧挨着另一个

以 W 开头的 Javascript、CSS、HTML5 IDE

jquery - IE8 和 9 中的 CSS3 视差错误

angularjs - Protractor 抛出 "angular never provided resumeBootstrap"

javascript - Jquery/JS - 如何切换 :after, :befor of an element?

javascript - 使用 AngularJS 从数组中添加值