使用Yeoman和Polymer创建Web应用
程序员文章站
2022-05-19 22:09:47
...
大多数人都很清楚高效的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就是那个头戴礼帽装备三大武器帮你解决开发效率的人:
你可以通过npm(Node.js打包模块)安装超过570种生成器,有很多都是开源的,其中最有名的生成器包括generator-angular、generator-backbone和generator-ember。
如果安装过新版Node.js,在命令行输入并执行以下命令来安装yo
如果你还没有安装grunt和bower,也需要一起安装
就这么简单,现在你可以直接在命令行执行Yo、Grunt和Bower,下面是执行yo的输出:
选择”Install a genarator”之后,会询问你需要安装什么生成器,假如你希望创建一个常规的Web应用,可以输入”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生成器:
OK,现在你的项目已经支持Web Components了!
我们刚刚安装的生成器有一些特性你可能会用到:
我们要使用一些自定义Polymer元素和我们的新生成器创建一个简易的博客。
>> Blog Demo 预览 <<(使用了Google服务,如无法预览,则需自行VPN)
首先,在命令行创建一个新目录并进入这个目录:
现在可以通过下面命令启动Polymer:
它会询问你是否希望包含Twitter Bootstrap,如果你希望,按回车键即可.
这是通过Bower依赖的最新版本Polymer为我们项目工作流架设的index.html、目录结构和Grunt任务。现在你可以悠闲地喝杯咖啡等待应用初始化完毕^_^
OK,初始化完毕之后,命令行执行”grunt server”,然后就可以在浏览器看到如下样子:
注意:如果执行”grunt server”时有报错,请先检查是否已安装compass和sass,已安装compass和sass却报错”897 permission denied”类似问题,可能是因为compass和sass版本问题导致,可以命令行卸载并安装较早版本即可解决:
服务支持实时更新,意思就是你可以在编辑器中编码,然后浏览器会在你保存的同时自动刷新页面。这会让你实时的看到网页的变化,而不用苦逼的不停手动刷新页面。
下面,我们来创建一个展示博客文章的新Polymer元素。
Yeoman会询问你一些诸如是否希望包含constructor或使用HTML import将post元素导入index.html的问题,现在只需要统统回答No即可(即不勾选复选框),而在第三个问题空格跳过。
注意:如果你在第二个问题回答”Yes”,生成器便会导入post.html并将其包含在index.html中。它还会声明 以便在页面load时渲染这个元素。
这个新创建的Polymer元素已经命名为post.html,在/elements目录中。
它包含:
我们的博客需要一个存取新文章的地方。为了演示处理真正的数据服务,我们打算使用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。
下面,我们来通过下面的命令创建一个blog元素,它会包含post集合和你博客的布局信息:
这时我们使用HTML imports来将blog导入到index.html以便让它在页面中展示。在第三个选项,我们指定其为post.html。
我们先是创建了一个新的元素文件(blog.html)并把它添加到/elements目录,现在将post.html导入并放到template标签中:
像我们要求blog元素通过HTML imports导入到我们的index.html一样(这是一种在HTML文档中复用某HTML文档的方式),我们还要核查一下它是否正确的添加到文章标签中:
来自:彬Go
幸运的是,有一些先进的前端工具能帮我们自动化完成这些事情,让我们远离乏味的流水线工作,将更多的精力放在核心功能编码上面。本文会向你展示如何使用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的项目脚本依赖管理,这样你就不必再手动下载和管理你项目的脚本文件了。
你可以通过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元素和我们的新生成器创建一个简易的博客。
>> 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>
它包含:
- 你自定义元素的模板代码,允许你在你的项目页面中使用自定义DOM元素。
- template标签便于浏览器端模板渲染,并为你的自定义元素封装样式。
- 元素注册模板和生命周期事件。
我们的博客需要一个存取新文章的地方。为了演示处理真正的数据服务,我们打算使用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
上一篇: 第一天MarkDown学习
下一篇: MySQL storage engine
推荐阅读
-
使用Visual Studio2019创建C#项目(窗体应用程序、控制台应用程序、Web应用程序)
-
nodejs使用express创建一个简单web应用
-
带你使用Visual Studio 2019创建一个MVC Web应用
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)
-
【Web API系列教材】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(下)
-
使用ASP.NET Web API和Web API Client Gen使Angular 2应用程序的开发更加高效
-
【Web API系列教程】1.3 — 实战:用ASP.NET Web API和Angular.js创建单页面应用程序(上)...
-
使用Web Worker创建多线程应用
-
创建使用BPEL业务流程的WEB站点 WebStrutsWebsphereJSP应用服务器
-
使用Ant和Tomcat创建Web应用 WebTomcatAntASP