首页 文章

如何用100个元素构建大型聚合物项目

提问于
浏览 次
12

Polymer Starter Kit是启动Polymer项目的一个很好的参考 . 您只需将所有元素放入 app/elements 文件夹即可 . 这适用于中小型项目 .

当你有超过30个元素时，它会变得混乱 . 然后，您想要将平面 elements 文件夹重构为更深层次的文件夹结构，如下所示：

- elements -- my-module-1 --- my-element-1-1 --- my-element-1-2 -- my-module-2 --- my-submodule-2-1 ---- my-element-2-1-1 ---- my-element-2-1-2 --- my-submodule-2-2 ---- ...

有几个问题：

  • 当您想要演示和测试子模块时，您需要导入每个元素定义之上的所有依赖项

  • 你打破了"all elements are siblings"的模式

  • 你的相对路径变得凌乱（很多 ../../../my-module-x/my-module-y ）

  • 你要么有很多路径，比如 ../../../../bower_components ，要么使用 /bower_components ，那么你需要在你的开发服务器中有一个重定向，绝对路径会搞乱gulp-vulcanize .

  • 通过每个元素的演示和测试文件夹，您的目录结构可以非常快速地增长

这是描述问题的nice article并指出了两个解决方案：

  • 单独的元素存储库

  • 构建可重用元素

像Topeka App中的单独元素存储库适用于~30个元素，但是一旦达到100个元素，就会遇到相同的问题 .

Build 可重用元素一开始似乎是一个好主意，因为你可以很好地封装所有内容 . 但是，处理数百个repos是很痛苦的，当你想要在repo中拥有多个单个元素时，标准模式会中断 .

所以我想知道，有关如何构建大型Polymer应用程序的良好实践？是否有任何项目的例子超过30个元素？

包含多个元素的可重用元素repos的优良做法是什么？

多个入口点的优秀结构是什么？

一般来说：您如何扩展聚合物项目？

polymer polymer-1.0 polymer-starter-kit

3 回答

  • 0

    我们有一个 生产环境 应用程序，提供100个元素 . 我们发现将文件夹内的多个元素分组以减少repos和文件夹的数量很有用 . 我们仍然使所有元素兄弟姐妹 .

    谷歌自己的元素中有一些先例 . 如果你看一下app-layout和polymerfire，它们都包含多个自定义元素 .

    思维转变是要记住，并非每个元素都应该存在于它自己的目录中 .

    回复于
  • 0

    考虑文件结构和url结构之间的区别对你的问题很有用 . 使Web服务器将文件映射到同一位置 . 这就是polyserve所做的，你可以配置wct来设置它的服务器 .

    因此，例如，当您创建要测试的单个元素时，它通常直接位于项目目录中，但Web服务器将此父级直接映射到/ components . 它与bower_components一样，所以它们在浏览器级别出现在同一个地方 . 这就是像../polymer/polymer.html这样的引用

    我在考虑你在上面提出的场景中，你在每个子模块级别反复做类似的事情，这样每个元素都可以在 ../polymer/polymer.html 引用聚合物或其他web组件

    最终结果将是整个项目“URL”结构，看起来像

    -components (elements mapped to this as well as bower_components) 

--mymodule1 
---(mapped so all directories under bower_components are mapped in here)

---myelement1.1
---myelement1.2

--mymodule2
---(mapped so all directories under bower_components are mapped in here)
---myelement2.1
---myslement2,2
    回复于
  • 1

    IMO组织Polymer元素的关键在于设计问题/页面的解决方案 . 考虑为特定型号设计乐高件 . 是的，您可以构建许多具有非常特定功能的部件，但最好将注意力集中在可重复使用性上，并设计更少的部件来覆盖大部分结构（基本元素），然后添加一些修饰部件（修饰）要完成模型 . 基本元素应该简单且非常通用 .

    虽然修饰元素不太可能被回收，但它们可以留在页面中 . 另一方面，基本元素应放在非常靠近根的文件夹中，并具有非常具有描述性的名称 . 随着开发的进展，新基本元素的比率将减少，开发新页面所需的时间也将减少 .

    如果设计是正确的，那么如何对元素进行分类并不重要，只需将它们放在bower_components文件夹中，除非您正在构建公共聚合物元素 . bower_components中的所有内容都应该由bower.json控制，因此您将删除整个文件夹并使用 bower install 重新填充它 .

    回复于

相关问题