资讯频道 → Web前端
阅读更多

0顶
0踩

Web前端

翻译新闻 使用Yeoman和Polymer创建Web应用

2014-04-03 17:24 by 见习记者 skar9363 评论(0) 有6365人浏览
框架 grunt yeoman polymer
大多数人都很清楚高效的Web应用开发有多重要。在你进行某些乏味的项目开发时，你会因为各种令你头痛的事情而感到焦虑、烦躁，比如寻找项目模板、配置项目基础架构、开发环境、测试环境以及后续的项目优化和压缩。这种枯燥乏味如流水线般的事情，偶尔一次还好，但如果周而复始的进行类似的项目，你的脑袋不会炸掉才怪！

幸运的是，有一些先进的前端工具能帮我们自动化完成这些事情，让我们远离乏味的流水线工作，将更多的精力放在核心功能编码上面。本文会向你展示如何使用Yeoman和Polymer高效完成这些任务，Yeoman用来自动化创建Web应用工作流，而Polymer则是由加盟Google的原Palm webOS开发团队打造的一个前端库，其基于Shadow DOM、Custom Elements、MDV等最新浏览器特性，使用Web Components来填充和装饰Web应用。

本文翻译自英文原文《Building Web Apps With Yeoman And Polymer》，由于英文原文内容很多API和方法已更新，所以彬GO在这里翻译的同时做了较大幅度改动和更新，如有错误欢迎指正。

声明：本文涉及的一部分API到目前仍未完全标准化且未来可能会略有变动。在使用这些实验性API前请谨慎评估你的开发项目。

注意：如果你之前从未了解过Web Components，建议你先去读一读他们提供的关于Web平台特性的文档。其会指导你如何使用基于Custom Elements,Shadow DOM、HTML Imports等特性的的Polymer。如果你英文不太好，也可以看看这篇文章《自定义元素–为你的HTML代码定义新元素》。

下文中会多次提到”元素(element)”这个词，大家看到时可能会与自己概念里的元素(html标签)有些冲突，因为这里提到的有些元素是可以独立成文件来引用的，实际这就是Polymer的理念——一切皆组件，希望通过各种自定义元素(组件)来组成一个完整的Web应用，所以在下文中，如果你看到”元素”但无法理解，可以尝试将其理解为”组件”。



Yeoman的三大成员：Yo、Grunt和Bower



Yeoman就是那个头戴礼帽装备三大武器帮你解决开发效率的人：

  • yo ： 为你完成项目系统框架和基础结构搭建工作的”脚手架”工具，它就是用来解决我之前提到的那些枯燥乏味流水线工作的工具，也可以算是项目架构生成器。
  • grunt：用来创建、预览和测试你的项目，这里要感谢Yeoman团队和grunt-contrib的合作策划。
  • bower：类似于Node.js的项目脚本依赖管理，这样你就不必再手动下载和管理你项目的脚本文件了。
你仅仅需要输入一两行命令，Yeoman就能帮你搞定项目的整体框架模板的搭建任务(或个别需要配置的模块)，编译你的Sass代码，压缩与合并你的CSS、JavaScript、HTML以及图片，然后在当前项目目录帮你架设一个简单的Web服务以便随时通过浏览器访问，他甚至还能执行单元测试或更多你想不到的任务。

你可以通过npm（Node.js打包模块）安装超过570种生成器，有很多都是开源的，其中最有名的生成器包括generator-angular、generator-backbone和generator-ember。



如果安装过新版Node.js，在命令行输入并执行以下命令来安装yo 

npm install -g yo


如果你还没有安装grunt和bower，也需要一起安装 

npm install -g grunt-cli bower


就这么简单，现在你可以直接在命令行执行Yo、Grunt和Bower，下面是执行yo的输出：



选择”Install a genarator”之后，会询问你需要安装什么生成器，假如你希望创建一个常规的Web应用，可以输入”generator-webapp”并回车：



然后选择对应的生成器回车即可开始安装。

还有另一种方法安装生成器，就在在命令行直接输入： 

npm install -g generator-webapp


注意：如果你想了解如何使用Yeoman创建基于类似Backbone.js这类框架的Web应用，你可以看看《Building Apps With The Yeoman Workflow》

Polymer生成器

像我之前提到的，Polymer就是用来为支持Web Components的现代浏览器填充和装饰的前端库。



generator-polymer是可以帮助你使用Yeoman架起Polymer应用的新生成器。你可以通过命令行轻松创建以及自定义Polymer元素(自定义元素)，还可以使用HTML Imports导入这些自定义元素。这种生成Web应用模板的方式会为你节省很多时间。

我们可以通过上面讲过的两种方法的任意一种来安装Polymer，下面是命令行安装Polymer生成器： 

npm install generator-polymer -g


OK，现在你的项目已经支持Web Components了！

我们刚刚安装的生成器有一些特性你可能会用到：

  • polymer:element 用来创建新的特定的Polymer元素，如：yo polymer:element carousel
  • polymer:app 用来为你架设初始index.html。Gruntfile.js包含项目创建配置。它还为你项目样式使用Sass Bootstrap提供一些设置项。
开始创建一个Polymer应用：

我们要使用一些自定义Polymer元素和我们的新生成器创建一个简易的博客。



>> Blog Demo 预览 <<（使用了Google服务，如无法预览，则需自行VPN）

首先，在命令行创建一个新目录并进入这个目录：



现在可以通过下面命令启动Polymer： 

yo polymer


它会询问你是否希望包含Twitter Bootstrap，如果你希望，按回车键即可.

这是通过Bower依赖的最新版本Polymer为我们项目工作流架设的index.html、目录结构和Grunt任务。现在你可以悠闲地喝杯咖啡等待应用初始化完毕^_^

OK，初始化完毕之后，命令行执行”grunt server”,然后就可以在浏览器看到如下样子：



注意：如果执行”grunt server”时有报错，请先检查是否已安装compass和sass，已安装compass和sass却报错”897 permission denied”类似问题，可能是因为compass和sass版本问题导致，可以命令行卸载并安装较早版本即可解决： 

gem uninstall sass
gem uninstall compass
gem install compass --pre
gem install sass --pre


服务支持实时更新，意思就是你可以在编辑器中编码，然后浏览器会在你保存的同时自动刷新页面。这会让你实时的看到网页的变化，而不用苦逼的不停手动刷新页面。

下面，我们来创建一个展示博客文章的新Polymer元素。 

yo polymer:element post




Yeoman会询问你一些诸如是否希望包含constructor或使用HTML import将post元素导入index.html的问题，现在只需要统统回答No即可（即不勾选复选框），而在第三个问题空格跳过。

注意：如果你在第二个问题回答”Yes”，生成器便会导入post.html并将其包含在index.html中。它还会声明 以便在页面load时渲染这个元素。 

yo polymer:element post
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? No
[?] Import local elements into this one? (e.g 'a.html b.html' or leave blank)
 create app/elements/post.html


这个新创建的Polymer元素已经命名为post.html，在/elements目录中。 

<polymer-element name="post-element"  attributes="">
<template>
  <style>
    @host { :scope {display: block;} }
  </style>
  <span>I'm <b>post-element</b>. This is my Shadow DOM.</span>
</template>
<script>
  Polymer('post-element', {
    //applyAuthorStyles: true,
    //resetStyleInheritance: true,
    created: function() { },
    enteredView: function() { },
    leftView: function() { },
    attributeChanged: function(attrName, oldVal, newVal) { }
  });
</script>
</polymer-element>


它包含：

处理真正的数据源

我们的博客需要一个存取新文章的地方。为了演示处理真正的数据服务，我们打算使用Google Apps Spreadsheets API。它允许我们轻松读取来自Google Docs创建的任何数据表。

下面是安装步骤：

1. 用你的浏览器(建议使用Chrome)打开这个Google Docs数据表，它包含如下文章数据样本：ID、Title、Author、Content、Date、Keywords、E-mail、Slug、link

2. 点击菜单栏”文件“按钮，然后选择”制作副本”来创建你自己的数据表副本。你可以在你有空时免费编辑内容、添加或删除post。

3. 再次点击菜单栏”文件“按钮并选择”发布到网络”

4. 点击”开始发布”

5. 在”获取已发布数据的链接“下面，有一长串链接，你需要找到URL中参数Key的值对应的字符串像这样：https://docs.google.com/spreadsheet/pub?key=0Ao_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmc&output=html

找出的Key是：0Ao_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmc

6. 将你的Key值字符串粘贴到下面链接中替换”your-key-gose-here“：

https://spreadsheets.google.com/feeds/list/your-key-goes-here/od6/public/values?alt=json-in-script&callback=，

粘贴完的链接是这样：

https://spreadsheets.google.com/feeds/list/0Ao_bIaw69jI1dHhmVkU1dnpfMHdOMXJjTDFIbnFxbmc/od6/public/values?alt=json-in-script

7. 用浏览器打开这个链接看看你博客内容的JSON数据。把URL留作记录然后花点时间看一看这些数据，以后你需要反复的在屏幕上显示这些数据。

在浏览器上输出的这些JSON可能会让你看第一眼就怵头再看下去，不过别担心，咱只对post相关的数据感兴趣。

Google数据表API输出你博客数据表中每段数据域都有一个特殊前缀post.gsx$ 。例如： post.gsx$title.$t、post.gsx$author.$t、post.gsx$content.$t 以此类推。当我们反复查看输出的JSON的每一行，我们就可以通过锁定这些前缀字段来快速获取相应数据。

现在你可以开始为你之前新架起的post元素绑定来自Google数据表的数据了。在这我要介绍一下属性post，它可以读取post的title、author、content和其它我们之前创建的数据字段。selected属性(以后会经常用到)用来显示用户导航到相应链接对应的post。 

<polymer-element name="polymer-post" attributes="post selected">
<template>
  <style>
    @host { :scope {display: block;} }
  </style>
    <div class="col-lg-4">
        <template if="{{post.gsx$slug.$t === selected}}">
          <h2>
            <a href="#{{post.gsx$slug.$t}}">
              {{post.gsx$title.$t  }}
            </a>
          </h2>
          <p>By {{post.gsx$author.$t}}</p>
          <p>{{post.gsx$content.$t}}</p>
          <p>Published on: {{post.gsx$date.$t}}</p>
          <small>Keywords: {{post.gsx$keywords.$t}}</small>
        </template>
      </div>
</template>
<script>
  Polymer('polymer-post', {
    created: function() { },
    enteredView: function() { },
    leftView: function() { },
    attributeChanged: function(attrName, oldVal, newVal) { }
  });
</script>
</polymer-element>


下面，我们来通过下面的命令创建一个blog元素，它会包含post集合和你博客的布局信息： 

yo polymer:element blog
[?] Would you like to include constructor=''? No
[?] Import to your index.html using HTML imports? Yes
[?] Import local elements into this one? (e.g "a.html b.html" or leave blank) post.html
[?] Import installed Bower elements? (e.g "polymer-ajax" or leave blank)


这时我们使用HTML imports来将blog导入到index.html以便让它在页面中展示。在第三个选项，我们指定其为post.html。

我们先是创建了一个新的元素文件(blog.html)并把它添加到/elements目录，现在将post.html导入并放到template标签中： 

<link rel="import" href="post.html">
<polymer-element name="polymer-blog"  attributes="">
<template>
  <style>
    @host { :scope {display: block;} }
  </style>
  <span>I'm <b>blog-element</b>. This is my Shadow DOM.</span>
      <post-element></post-element>
</template>
<script>
  Polymer('polymer-blog', {
    //applyAuthorStyles: true,
    //resetStyleInheritance: true,
    created: function() { },
    enteredView: function() { },
    leftView: function() { },
    attributeChanged: function(attrName, oldVal, newVal) { }
  });
</script>
</polymer-element>


像我们要求blog元素通过HTML imports导入到我们的index.html一样(这是一种在HTML文档中复用某HTML文档的方式)，我们还要核查一下它是否正确的添加到文章标签中： 

<!doctype html>
  <head>
      <meta charset="utf-8">
li


来自：彬Go
  • 大小: 17.9 KB
  • 大小: 14.3 KB
  • 大小: 187.5 KB
  • 大小: 21.7 KB
  • 大小: 23.4 KB
  • 大小: 91.3 KB
  • 大小: 340.9 KB
  • 大小: 1.8 KB
  • 大小: 150.7 KB
  • 大小: 3.9 KB
来自: 彬Go
0
顶
0
踩
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • generator-z-cli:Yeoman生成器，用于使用CLI Javascript框架创建Web应用程序

    用于使用CLI Javascript框架创建Web应用程序入门安装Yeoman npm install -g yo约曼发电机要从npm安装generator-z-cli，请运行： npm install -g generator-z-cli最后，启动生成器： yo z-cli贡献和问题欢迎贡献者，...

  • generator-poly-jadestyl:Yeoman 模板生成器，用于使用 Polymer、Jade 模板引擎和 Stylus 创建 Web 组件

    发电机-聚玉石使用 Polymer、Jade 模板引擎和 Stylus 创建 Web 组件的模板生成器安装安装约曼： npm install -g yo安装generator-poly-jadestyl ： npm install -g generator-poly-jadestyl应用程序接口yo poly-...

  • generator-polynode:使用Node.js的Yeoman Generator for Polymer项目

    generator-polynode是对generator-polymer generator-polynode扩展，它使用Yeoman（用于Web的脚手架工具）提供Polymer脚手架，使您可以通过命令行轻松创建和自定义Polymer（自定义）元素，并使用HTML Imports导入...

  • ReactNative进阶（三十二）：前端构建工具--Yeoman

    我们可以沿着别人的已经搭建好的构架来编写业务即可，这对很多新手来说是非常好的一种提高方式，所以建议大家选star多的 —代码风格好，文件夹规划清晰，脚手架软件用于实现项目中多种不同的工具和接口的协同使用，...

  • 全Javascript的Web开发架构：MEAN和Yeoman

    全Javascript的Web开发架构：MEAN和Yeoman 引言 最近在Angular社区的原型开发者间，一种全Javascript的开发架构MEAN正突然流行起来。其首字母分别代表的是：(M)ongoDB——NoSQL的文档数据库，使用JSON风格来...

  • 【转】全Javascript的Web开发架构：MEAN和Yeoman【译】

    其首字母分别代表的是：(M)ongoDB——noSQL的文档数据库，使用JSON风格来存储数据，甚至也是使用JS来进行sql查询；(E)xpress——基于Node的Web开发框架；(A)agular——JS的前端开发框架，提供了声明式的双向数据绑定...

  • yeoman前端脚手架整合

    工作到月底，整整满一年了 ，公司项目全都是传统企业网站，每天重复性的切页面，根本跟应用挂不上钩，发现这么干下去对于职业前途不太好。本小白开自学前端，修正不足。大神欢迎指导，误拍。 1.面对复杂的前端...

  • 前端web 技术盘点

    多样化的调试和开发工具 　浏览器中的调试工具已经趋于成熟。Chrome、 Safari、 Firefox都有很完善并且功能类似的调试工具，就连IE 11提供的调试工具也很不错，功能一度超过其他浏览器。 　Phantomjs是一个基于 ...

  • yeoman的学习

    　在上一篇博客已粗劣地提到yeoman的安装和验证。说白了，其实yeoman是生成代码和搭建框架的前端自动化工具。为了做到这些，yeoman提供generator(称之为生成器)的生态系统，你可以通过yo的命令去得到你项目中有用的...

  • 全 Javascript 的 Web 开发架构：MEAN

    其首字母分别代表的是：(M)ongoDB——NoSQL的文档数据库，使用JSON风格来存储数据，甚至也是使用JS来进行sql查询；(E)xpress——基于Node的Web开发框架；(A)agular——JS的前端开发框架，提供了声明式的双向数据绑定...

  • [转]全 Javascript 的 Web 开发架构：MEAN

    使用JavaScript能够完整迅速做出Web应用程序，目前一套工具包括MongoDB、ExpressJS，AngularJS和Node.js越来越受到欢迎，其开发的灵活性和易用性加快开发效率，简化开发者的工作。 　在今天你有很多架构可以选择...

  • Vue和其他框架的区别

    使用 Virtual DOM 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 由于有着众多的相似处，我们会用更多的时间在这一...

  • generator-polymerElement:聚合物元素的简单自耕农发生器

    generator-polymer使用 （一种 Web 脚手架工具）提供 Polymer 脚手架，让您可以通过命令行轻松创建和自定义 Polymer（自定义）元素，并使用 HTML 导入导入它们。 这可以节省您编写样板代码的时间，因此您可以立即...

  • Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的，但也是非常重要的。或许你遇到了一些问题并且先前用其他的框架解决了。...但是，我们想尽可能地公平和准确地来讲述。其他的框架也有显著的优点，比如 Rect 的生态系统，

  • 东营市乡镇边界，矢量边界，shp格式

    矢量边界，行政区域边界，精确到乡镇街道，可直接导入arcgis使用

  • Java SSM 商户管理系统 客户管理 库存管理 销售报表 项目源码 本商品卖的是源码，合适的地方.zip

    毕业设计

  • 075.JSP+SQL宿舍管理系统.zip

    毕业设计

  • 经验贝叶斯EB的简单例子

    经验贝叶斯EB的简单例子

  • 69页-智慧园区综合管理平台解决方案.pdf

    智慧园区，作为现代城市发展的新形态，旨在通过高度集成的信息化系统，实现园区的智能化管理与服务。该方案提出，利用智能手环、定制APP、园区管理系统及物联网技术，将园区的各类设施与设备紧密相连，形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店，从智慧景区到智慧康养，再到智慧生态，五大应用板块覆盖了园区的每一个角落，为居民、游客及工作人员提供了全方位、个性化的服务体验。例如，智能手环不仅能实现定位、支付、求助等功能，还能监测用户健康状况，让科技真正服务于生活。而智慧景区的建设，更是通过大数据分析、智能票务、电子围栏等先进技术，提升了游客的游玩体验，确保了景区的安全有序。 尤为值得一提的是，方案中的智慧康养服务，展现了科技对人文关怀的深刻体现。通过智慧手环与传感器，自动感知老人身体状态，及时通知家属或医疗机构，有效解决了“空巢老人”的照护难题。同时，智慧生态管理系统的应用，实现了对大气、水、植被等环境要素的实时监测与智能调控，为园区的绿色发展提供了有力保障。此外，方案还提出了建立全域旅游营销平台，整合区域旅游资源，推动旅游业与其他产业的深度融合，为区域经济的转型升级注入了新的活力。 总而言之，这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计，为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量，更让科技真正融入了人们的生活，带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言，这份方案无疑提供了一份宝贵的参考与启示，激发了他们对于未来智慧生活的无限遐想与憧憬。

  • 数学建模相关主题资源2

    数学建模相关主题资源2

Global site tag (gtag.js) - Google Analytics