怎么将网页打包成桌面应用(web前端页面

  heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案。heX&是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁琐的UI和交互开发工作,使其变的简单而高效,特别适合于开发重UI,重交互的桌面应用软件。
您可能感兴趣的相关文章
  近几年,移动应用和web2.0大行其道,相比之下,传统桌面应用程序开发显得相对冷清(包括该领域技术人才的后继力量),但在一些场景下,它依然有其不可替代的优势。探索中我们尝试了一种新的办法,并给它取名,将HTML5和Node.JS的技术优势,应用于桌面应用程序开发,使得工作变得简单而高效。
  2012年前后,一位研发工程师(外号6哥,精通web前端和桌面应用开发),先后参与了两个传统桌面应用程序UI改版工作(和),任务是把软件界面中部分区域的浏览器渲染引擎,由IE内核替换为webkit,在这个过程中,有一种强烈的欲望:把整个软件界面的渲染都交由浏览器引擎来完成,这样一来,UI和交互部分都可以用前端技术来实现,那么,开发过程将变的简单许多,而客户端开发人员的主要精力也可放在业务逻辑上,何乐而不为!
  为此,我们做了大量的调研,经反复尝试,最终确定通过整合Chromium和Node.JS,来解决桌面应用开发中遇到的大量繁琐的UI和交互开发工作。期间,发现一款类似的开源项目node-webkit,调研的结论是它暂时还无法用于正式的项目,所以,于2012年6月,我们正式成立一人开发小组(确实够小),经3个月的努力,终有小成,现已经应用于有道词典最新版。
  选择Chromium,是因为它对HTML5的支持非常优秀,其内嵌的V8引擎,更是业内效率最好的JavaScript脚本引擎之一,且其项目开源,又有专门的社区和团队维护,作为UI渲染引擎,它是不二之选,体验上,你可以试用下google chrome浏览器,基本一致。
  选择Node.JS,是因为开发桌面应用,本地资源操作是必备的能力,这方面JavaScript无能为力,而Node.JS则很好的解决了这个问题,它使得JavaScript操作本地资源变的毫无障碍。另一方面,Node.JS核心也是采用V8引擎,使得其与Chromium的整合变得更顺理成章。
用heX开发桌面应用的优势
  HTML5这几年很火,在成熟产品中的应用却极少,受各浏览器和平台的软/硬件性能问题的限制,整体感觉总是难以舒展(用的不踏实),具体原因网上可以找到一大堆,这里列举一个移动web app相关的,中英对照版,推荐抽空看一看:
  英文版:
  中文版:
  尽管如此,HTML5的优势依然很明显,普及程度也正逐年提高,我们对它的未来信心十足。好东西,都值得我们主动去尝试,heX做的一个事情,就是提前把它应用于桌面应用开发,而不用顾忌它的兼容性和平台性能问题()。
  用HTML5开发桌面应用,到底有什么样的优势呢?这里列举几项:
精准还原UI设计。现在客户端软件UI设计用native方式来实现的成本越来越高,对HTML5来说却很容易,对后续的维护也非常的友好;
用户体验。如果你不清楚HTML5所能做到的体验效果,可以看看Chrome Experiments();
开发调试便利。heX保留了开发者工具(Chrome Developer Tools),让你在开发调试过程中,就如同web开发一样便利;
学习成本。相比传统桌面应用开发,web技术的入门成本明显偏低,你不用担心团队成员的离开,而苦于寻找后续开发力量。
  桌面应用开发,本地资源操作能力必不可少,Node.JS提供了丰富的自带API,让你免于逐个封装C++实现,就能在heX环境下的html页面中直接使用,如:本地文件系统操作,二进制数据处理,方便的创建子进程等等,详见。
  在桌面应用开发中用Node.JS的好处(一部分来自于heX的努力):
直接用JavaScript对本地资源进行操作,相比C/C++,你无需编译,即写即用;
页面交互逻辑,窗体行为操作,与C++通信,用JavaScript都能搞定,开发一个桌面应用,你无需在语言之间来回切换;
Node.JS丰富的第三扩展,你都可以直接使用,无需从零开始;
继承于Node.JS优秀的扩展能力,以及它所遵循的规范,代码管理也将变的方便和易于控制。
  从技术角度来讲,选择一个新生事物,我们持谨慎态度,需要经过充分的调研,考虑的因素众多,比如:性能,用户体验,开发效率,是否有团队在维护,文档是否完备,是否开源(如果是商业用处,还需考虑它的开源协议)等等。
  而heX作为桌面应用开发的一种新的选择,它在这些方面的表现如何呢?前面已经讲到一些,这里再补充几点:
性能和体验,heX的基础由Chromium和Node.JS整合而成,整合后这两者的性能表现不受影响,体验方面,你可以参考google chrome浏览器,基本保持一致;
开发效率,如果你有过web前端开发经历,现在仅要求你支持最新版的chrome浏览器,你觉得如何?睡着了都能笑醒的事,heX做到了;
heX即将开源,请大家关注 &&和&
  一种东西,只能解决一方面的需求,heX亦非万能,亦有它适合的使用场景,最适合重UI、重交互的桌面应用,比如即将推出的新版有道词典(亿级桌面应用软件)beta版,就是采用heX作为其界面的解决方案。
如何用heX开始一个桌面应用程序
  采用heX开发桌面应用程序,有两种方式:
直接基于heX做开发,针对web前端开发者,不要求桌面应用开发经验;
以模块形式引入到现在桌面工程中,针对传统桌面应用开发者,适合有一定历史的项目,或仅在界面中局部区域支持即可的项目。
  不管采用哪种方式,开发过程都很简单,这里就第一种方式,从零开始,一起来制作一个 hello word,如下:
  1、下载heX二进制包(),解压到本地,打开后目录结构如下图所示,其中&hexclient.exe&是主程序文件,双击即可运行heX,&manifest.json&是heX的配置文件,可配置入口文件,窗口初始大小、位置等信息
  2、创建一个用于写hello word程序的测试目录&test&,同时在其中新建html、js文件,如下图所示
  3、修改manifest.json文件,入口改为test/index.html,如下图所示
  4、双击 hexclient.exe,运行,一秒后界面由&&&&变为&Hello Word!&,如下图所示,到此为止,一个简单的桌面应用就搞定了
  正式产品案例:目前已经应用于新版有道词典(亿级桌面客户端软件)beta版,下图的整个界面和交互都是基于heX实现,欢迎下载体验:
  了解更多heX信息欢迎微博&或访问
您可能感兴趣的相关文章
原文链接:
文章来源:
阅读(...) 评论()WEB前端页面规范和流程_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
WEB前端页面规范和流程
&&WEB前端页面规范和流程
HTML规范和流程
设计规范和流程
网页制作规范和流程
阅读已结束,下载文档到电脑
想免费下载更多文档?
定制HR最喜欢的简历
下载文档到电脑,方便使用
还剩2页未读,继续阅读
定制HR最喜欢的简历
你可能喜欢20款优秀的可以替代桌面软件的Web应用 - Web前端 - ITeye资讯
相关知识库:
在这篇文章中,我将介绍20款优秀的可以替代桌面软件的Web应用软件。 希望你会喜欢!
Google Docs是由Google提供的一款免费的在线Offcie套件,可以桌面word,Excel和Powerpoint的大部分功能。
Microsoft Office
Open Office
Meebo是一个用Ajax编写的网上即时通讯软件,并与主要的即时通讯软件,如:AOL、ICQ、Yahoo! Messenger、MSN Messenger、Jabber及Google Talk兼容的系统,使用户免除安装即时通讯软件之余,就能与其他人保持联系。
Facebook Chat
Yahoo Messenger
Windows Live Messenger
是一款专注于幻灯片演示文档的Web应用程序。跟 PreZentit, Preezo等Office2.0惯用的AJAX相比,Sliderocket最大的特色便在于它摒弃了众多竞争对手惯用的AJAX,采用 Adobe Flex+ASP.NET技术完全架构了这款优秀的App.,华丽的用户界面以及完善的功能设置都让人对此瞠目结舌。
Microsoft PowerPoint
OpenOffice Impress
是集成了一套非常方便的在线应用的网站。其应用主要包括了处理图片和音频的功能
Adobe Photoshop
Adobe Illustrator
Soundbooth
它是一个免费的个人财务在线管理工具。它将帮助你管理你的财务帐目,设置您的预算需求。
是一个类似于JumpCut 等的在线媒体混合及视频编辑工具,它提供了无限制的上传空间,用可自行上传图片、视频及音频内容。
Windows Movie Maker
Other Video Editing Software
是一款免费在线解压缩工具,WobZip创建的时间已经不短了,而且在国外的名气也很大。
Unzipping Softwares
可以帮助您转换各种音乐、视频、图像和文档格式,而且转换过程是在线完成的,转换结果将投递到用户设定的邮箱,无需本地运算。
File Conversion Software
Hulu通过网站的形式将一个无穷无尽的电视节目宝库呈现在了观众的面前,Hulu的在线播放的品质也还不错。它是一个容易上手的视频播放器,操作方式就像录像机一样。网站上功能强劲的搜索引擎可以帮助你找到特定的演员或特定的节目。
TV Tuner Software
Tokbox 是一款基于Web平台的视频聊天软件,它提供了一款可内置于Blog的视频聊天Widget工具,与其他的Widget服务一样,只需通过代码调用就可轻松完成整个安装过程。TokBox不仅提供实时聊天功能,而且还提供了视频留言功能。
Video Chat
Moof是一个在线网络流媒体。这就像把你所有喜爱的音乐集合到一个地方。最大的特点之一是能导出您的iTunes资料库,放入网页,所以你绝不会错过了你喜爱的曲子。
Music Streaming Software
是一款可疑文件分析服务, 通过各种知名反病毒引擎, 对您所上传的文件进行检测, 以判断文件是否被病毒, 蠕虫, 木马, 以及各类恶意软件感染。
Anti Virus Software
是一个基于web的在线BT下载工具,用户无需本地安装 BT 下载客户端即可直接使用浏览器进行BT 下载。
BitTorrent Client
是来自的瑞典的免费WebOS(网络操作系统),3G免费存储空间,采用云存储技术,有包括简体中文版在内的多种语言版本,很漂亮的界面,但是速度比较卡。icloud中有文档管理器、音乐播放器、邮件客户端、日历、相册、系统管理器、控制面板、命令控制台,还有几十种应用程序。
Operating System
它的功能相当强大,它是一个基于云端的在线图片处理工具,它也提供了很多在线的图片处理工具,为你在线处理图片提供了相当大的方便。
Image Editing Tool
是一款相当优秀的数据库制表工具,它允许用户轻松在线创建各式各样的数据表格。
Survey Creating Tool
Google Voice可以使你创造一个独立的电话号码,通过该号码来管理你所有的手机号码、电话号码、语音邮件、短信等等。
movavi是一个在线视频文件转换器。它支持多种格式。
Xilisoft Video Converter
Other Video Converter Tool
前身为BrightKit,一个最强强大的基于网页的twitter应用之一,它有一个非常强大的工具集,可让您处理多个帐户,延时发布用ow.ly来压缩URL的twitter信息,这可让您跟踪点击该链接,并把你的Twitter的信息自动分享出去。
Social Network Tool
Statistics Tracking Tool
是一款进行网页原型设计的工具,内置很多常用的网页元素,可以让用户很方便地设计页面结构、注释交互关系。与其他原型设计工具不同的是,Balsamiq能够嵌入到Confluence、JIRA或XWiki,方便共享与协同工作。
OmniGraffle
想在中国流行,还是有一定难度的,毕竟需要网络环境。
哈哈,吾等在大中华局域网,神马webos web应用都是浮云
天朝局域网,神马都是浮云。
damoqiongqiu 写道还在考虑“谁替代谁”这种问题本身就很傻 不是说在线的就一定会替代客户端的
腾讯的web qq和那个cloud类似吧
在线的?怎么能替代,,上不了网就不能用,,唉,,就一悲剧
就是一些Server集群提供点RIA,非整出一堆“云端”字眼,真飘逸——云呼,云里雾里呼。云多得已经要阴天了...
好东西,顶一个!
原文地址:http://www.dzone.com/links/r/20_great_web_applications_alternatives_to_usual_d.html
goodguyzl 写道vdgame 写道14. icloud可以替代:&&& * Operating System冷笑话?用操作系统上的browser登陆另一个取代操作系统的操作系统,不是笑话是什么将来浏览器就是一个独立运行的.不需要操作系统支持的, 那样这个是不是可以说是替代本地操作系统. 这也是为什么google说chrome也是操作系统的一说. 这位同仁. 这么不给力?
在天朝,一切皆浮云。
不敢用,有墙。
又是TOP20??????????????
等哪天被政府和谐了一切都成浮云了。
龟速 + 围墙 = 浮云;
墙太多了。。。。
大部分没有用过
& 上一页 1
相关资源推荐登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 十二月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于:
漫极客 CTO 李焱:大前端之路 - 如何用Web技术一统三端(Web、Desktop、Mobile)开发
漫极客 CTO 李焱:大前端之路 - 如何用Web技术一统三端(Web、Desktop、Mobile)开发
1&他的粉丝
日. 估计阅读时间:
:开启与Netflix、微软、ThoughtWorks等公司的技术创新之路!
亲爱的读者:我们最近添加了一些个人消息定制功能,您只需选择感兴趣的技术主题,即可获取重要资讯的。
Author Contacted
此内容所在的主题为
语言 & 开发
191 他的粉丝
0 他的粉丝
0 他的粉丝
144 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
订阅InfoQ每周精要,加入拥有25万多名资深开发者的庞大技术社区。
架构 & 设计
文化 & 方法
InfoQ.com及所有内容,版权所有 ©
C4Media Inc. InfoQ.com 服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意:如果要修改您的邮箱,我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为:
公司性质:
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为:
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷,但为了保证InfoQ能够继续以免费方式为您服务,我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单,感谢您的理解与支持。

我要回帖

更多关于 我要买壁纸 的文章

 

随机推荐