Yo Polymer – 快速浏览网络组件工具

Web 组件将彻底改变您对 Web 开发的既有认知。网络将首次拥有低级 API,这让我们不仅可以创建自己的 HTML 标记,还可以封装逻辑和 CSS。再也无需全局样式表混乱或样板代码了!这是一个全新的世界,其中的一切都是元素。

DotJS 大会上的演讲中,我详细介绍了 Web 组件提供的功能以及如何使用现代工具构建 Web 组件。我将向您介绍 Yeoman,这是一个工具工作流,可简化使用 Polymer 创建 Web 应用的过程。Polymer 是一个 polyfill 和糖果库,可让您在现代浏览器中使用 Web 组件开发应用。

创建自定义元素并安装他人创建的元素

在本演讲中,您将了解以下内容

  • 了解构成 Web 组件的四种不同规范:自定义元素模板Shadow DOMHTML 导入
  • 如何使用 Bower 定义自己的自定义元素并安装他人创建的元素
  • 减少编写 JavaScript 所花的时间,并将更多时间用于构建网页
  • 使用现代前端工具 (Yeoman) 结合 generator-polymer 使用 Polymer 构建应用框架
  • Polymer Super 如何改变 Web 组件的创建方式。

例如,如需安装 Polymer 的 Web 组件 polyfill 和库本身,您可以运行以下一行代码:

bower install --save Polymer/platform Polymer/polymer

这会添加 bower_components 文件夹并添加上述软件包。--save 会将它们添加到应用的 bower.json 文件中。

稍后,如果您想安装 Polymer 的折叠式列表元素,可以运行以下命令:

bower install --save Polymer/polymer-ui-accordion

然后将其导入您的应用:

<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">

为了节省时间,您可以使用 Yeoman 通过以下另一个一行代码,为新的 Polymer 应用搭建框架,并添加所需的所有依赖项、样板代码和用于优化应用的工具:

yo polymer

奖励演示

我还录制了 30 分钟的 Polymer Jukebox 应用演示(我在演讲中展示了该应用)。

奖励视频中介绍的内容

  • “一切皆为元素”口号的含义
  • 如何使用 Bower 安装 Polymer 的平台 polyfill 和元素
  • 使用 Yeoman 生成器和子生成器为 Jukebox 应用搭建框架
  • 了解通过样板搭建的平台功能
  • 如何将 Angular 应用从功能上移植到 Polymer。

我们还使用 Yeoman 子生成器为新的 Polymer 元素创建框架。例如,如需为元素 foo 创建样板,我们可以运行以下命令:

yo polymer:element foo

系统会提示我们是否要自动导入该元素、是否需要构造函数,以及一些其他偏好设置。

这两场演讲中所展示应用的最新源代码现已发布在 GitHub 上。我对其进行了进一步的重构,使其更加有条理且更易于阅读。

应用预览:

Yo Polymer 应用预览

深入阅读

总而言之,Polymer 是一个 JavaScript 库,可在等待 Web 组件原生实现期间,让现代网络浏览器支持 Web 组件。现代工具有助于改进工作流,在开发自己的代码时,您不妨试用 Yeoman 和 Bower。

以下是一些关于此主题的其他值得一看的文章: