简介:heX,一个允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案。是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁琐的UI和交互开发工作,使其变的简单而高效。特别适合重UI,重交互的桌面应用软件。
欢迎关注http://hex.youdao.com 或微博 @youdao_hex。
一、项目背景
近几年,移动应用和web2.0大行其道,相比之下,传统桌面应用程序开发显得相对冷清(包括该领域技术人才的后继力量),但在一些场景下,它依然有其不可替代的优势。探索中我们尝试了一种新的办法,并给它取名heX,将HTML5和Node.JS的技术优势,应用于桌面应用程序开发,使得工作变得简单而高效。
2012年前后,一位研发工程师(外号6哥,精通web前端和桌面应用开发),先后参与了两个传统桌面应用程序UI改版工作(有道云笔记和有道词典),任务是把软件界面中部分区域的浏览器渲染引擎,由IE内核替换为webkit,在这个过程中,有一种强烈的欲望:把整个软件界面的渲染都交由浏览器引擎来完成,这样一来,UI和交互部分都可以用前端技术来实现,那么,开发过程将变的简单许多,而客户端开发人员的主要精力也可放在业务逻辑上,何乐而不为!
为此,我们做了大量的调研,经反复尝试,最终确定通过整合Chromium和Node.JS,来解决桌面应用开发中遇到的大量繁琐的UI和交互开发工作。期间,发现一款类似的开源项目node-webkit,调研的结论是它暂时还无法用于正式的项目,所以,于2012年6月,我们正式成立一人开发小组(确实够小),经3个月的努力,终有小成,现已经应用于有道词典最新版。
简要介绍下选择Chromium和Node.JS的原因,同时,也在这里对他们表示感谢。
选择Chromium,是因为它对HTML5的支持非常优秀,其内嵌的V8引擎,更是业内效率最好的JavaScript脚本引擎之一,且其项目开源,又有专门的社区和团队维护,作为UI渲染引擎,它是不二之选,体验上,你可以试用下google chrome浏览器,基本一致。
选择Node.JS,是因为开发桌面应用,本地资源操作是必备的能力,这方面JavaScript无能为力,而Node.JS则很好的解决了这个问题,它使得JavaScript操作本地资源变的毫无障碍。另一方面,Node.JS核心也是采用V8引擎,使得其与Chromium的整合变得更顺理成章。
二、用heX开发桌面应用的优势
HTML5这几年很火,在成熟产品中的应用却极少,受各浏览器和平台的软/硬件性能问题的限制,整体感觉总是难以舒展(用的不踏实),具体原因网上可以找到一大堆,这里列举一个移动web app相关的,中英对照版,推荐抽空看一看:
英文版:http://sealedabstract.com/rants/why-mobile-web-apps-are-slow/
中文版:http://www.cnblogs.com/codemood/p/3213459.html
尽管如此,HTML5的优势依然很明显,普及程度也正逐年提高,我们对它的未来信心十足。好东西,都值得我们主动去尝试,heX做的一个事情,就是提前把它应用于桌面应用开发,而不用顾忌它的兼容性和平台性能问题(PC性能过剩)。
用HTML5开发桌面应用,到底有什么样的优势呢?这里列举几项:
-
精准还原UI设计。现在客户端软件UI设计用native方式来实现的成本越来越高,对HTML5来说却很容易,对后续的维护也非常的友好;
-
用户体验。如果你不清楚HTML5所能做到的体验效果,可以看看Chrome Experiments(http://www.chromeexperiments.com/);
-
开发调试便利。heX保留了开发者工具(Chrome Developer Tools),让你在开发调试过程中,就如同web开发一样便利;
-
学习成本。相比传统桌面应用开发,web技术的入门成本明显偏低,你不用担心团队成员的离开,而苦于寻找后续开发力量。
桌面应用开发,本地资源操作能力必不可少,Node.JS提供了丰富的自带API,让你免于逐个封装C++实现,就能在heX环境下的html页面中直接使用,如:本地文件系统操作,二进制数据处理,方便的创建子进程等等,详见Node.JS API DOCS。
在桌面应用开发中用Node.JS的好处(一部分来自于heX的努力):
-
直接用JavaScript对本地资源进行操作,相比C/C++,你无需编译,即写即用;
-
页面交互逻辑,窗体行为操作,与C++通信,用JavaScript都能搞定,开发一个桌面应用,你无需在语言之间来回切换;
-
Node.JS丰富的第三扩展,你都可以直接使用,无需从零开始;
-
继承于Node.JS优秀的扩展能力,以及它所遵循的commonjs规范,代码管理也将变的方便和易于控制。
从技术角度来讲,选择一个新生事物,我们持谨慎态度,需要经过充分的调研,考虑的因素众多,比如:性能,用户体验,开发效率,是否有团队在维护,文档是否完备,是否开源(如果是商业用处,还需考虑它的开源协议)等等。
而heX作为桌面应用开发的一种新的选择,它在这些方面的表现如何呢?前面已经讲到一些,这里再补充几点:
-
性能和体验,heX的基础由Chromium和Node.JS整合而成,整合后这两者的性能表现不受影响,体验方面,你可以参考google chrome浏览器,基本保持一致;
-
开发效率,如果你有过web前端开发经历,现在仅要求你支持最新版的chrome浏览器,你觉得如何?睡着了都能笑醒的事,heX做到了;
-
heX即将开源,请大家关注 http://hex.youdao.com 和 @yoduao_hex
一种东西,只能解决一方面的需求,heX亦非万能,亦有它适合的使用场景,最适合重UI、重交互的桌面应用,比如即将推出的新版有道词典(亿级桌面应用软件)beta版,就是采用heX作为其界面的解决方案。
三、如何用heX开始一个桌面应用程序
采用heX开发桌面应用程序,有两种方式:
-
直接基于heX做开发,针对web前端开发者,不要求桌面应用开发经验;
-
以模块形式引入到现在桌面工程中,针对传统桌面应用开发者,适合有一定历史的项目,或仅在界面中局部区域支持即可的项目。
不管采用哪种方式,开发过程都很简单,这里就第一种方式,从零开始,一起来制作一个 hello word,如下:
1、下载heX二进制包(http://codown.youdao.com/hex/hex_1453_web_develop_windows.zip),解压到本地,打开后目录结构如下图所示,其中“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实现,欢迎下载体验:http://download.ydstatic.com/cidian/static/6.0/20130812/YoudaoDict.exe
了解更多heX信息欢迎微博 @youdao_hex 或访问http://hex.youdao.com
基于js的应用开发越来越强大了,真是前端开发者的福音啊
如何将项目打包成exe
只有windows版本吗,苹果的有嘛
同问
nw webtop … 也许会更好一些
网易,你们确定没见过node-webkit这个项目?
你们的思路和人家一模一样,是不约而同吗??
地址发给你,请你们发文比较一下你们的hex和这个有何不同
node-webkit
说这话时你确定认真看完这篇博文了吗,没有请先ctrl+f node-webkit.
我确认看完了全文,请你具体分析告诉我,这个和node-webkit有啥不同,你看完了全文了吗!
你确定是Hello word 而不是 Hello World?!
请问多一个字母和少一个字母,对输出的内容有影响么?你怎么就知道人家想输出WORLD呢。
有道做词典的,用Word是有意义的。
hex本身开源吗?
既然你们有道词典是采用的hex框架开发的,而且hex也是跨平台的。 请问有道词典什么是时候支持Linux呢?
强烈支持,也是因为node-webkit感觉离生产差距还很大,期望这个可以支撑生产应用。同时建议文档最好能兼顾下中英文的用户,并且更加丰富一些。
Pingback引用通告: cnblogs: heX:用HTML5和Node.JS开发桌面应用 – 孤剑 易站工作室 | 易站工作室
很好,我以后就不用C#写了,移动端还有thinkphpmobile,桌面端有这个,只是下次能否尝试打包成EXE?
说真的个人感觉和node-webkit没什么太大区别……如果能在跨平台上做的更好,比如说ARM Linux的支持这样,或许才真的有亮点。
和node-webkit的比较 的优点何在呢? 配置和使用方式都差不多嘛。 为啥说node-webkit 不能应用于正式产品理由呢?
不是用的cef么。。。
就是CEF3啊。。。。。 所有文件都有, 就是自己包了个EXE, 其实完全可以自己写EXE。
没有跨平台?那还是算了
大概多久能支持linux
我只能说太强大了。 希望有更多更详细的说明
希望尽快提供CHM格式的示例和API文档
Hi, this blog is very usefull and i like this blog so much.ill share this blog on my facebook page.
如果无法做到打包,和跨平台的话实在是没有实际意义
但是有道本身支持这两个,
估计在整理案例和API….
大家都是中国人,文档能够提供一份中文的吗?
我们 2011 年就用上了 CEF 做桌面应用, 网易你 out 啦.
直接下载解压,都用不了
那些评论吐槽骂人的家伙,你们都什么心态?什么心态?什么心态?
网易的这产品应该不错了!
开发者工具如何使用?
赞赞赞赞,希望尽快开源
双击hex运行报错,提示:read manifest.json error!什么情况 ??
貌似不支持中文目录
搞了半天还是用cef。cef做客户端,最大的两个缺点就是:
1、客户端太大太大了。为了写个小界面,要带上几十M的运行环境。
2、版本更不上chromium,所以还是会些解析网页的bug。而且cef分cef1和cef3,cef1早就不维护了,cef3想跟随最新的chromium,太困难了。而且编译cef也不是一般的麻烦,为了采用这套架构,开发环境要求很高的机器配置。
哦对了,还有个大问题,就是cef这种东西太大了,一旦有什么bug,很难找出什么地方导致的。初期你们可能觉得没啥,以后维护版本的时候就知道痛苦了
以后会不会有linux版本?
我看完全文了,ls确实有必要回答几个问题:
1、node-webkit为什么无法用于正式的项目
2、hex和node-webkit 有什么区别
3、hex可以支持Linux平台吗
我想问下 heX 可以安装nodejs扩展吗….很急….如果可以的话 求方法 … 因为我要安装GBK转码的扩展包
css中出现
-webkit-transform: scale(1.2);
渲染就会卡住
如何解决
期待更新
另外,中文路径下不行
个人感觉没node-webkit好用。而且其实这个项目开发偏重的是C++环境,对Chromium Renderer进程这些了解程度足够吗???如果一个人开发有点勉强。奇怪的是,已经有同样的开源项目,为什么要重复造轮子。
而且node-webkit能跨平台。
建议作者应该以开放的心态来建设社区。
起码邮件组要向大家开放嘛。
或者,没有准备好做开源 ?
我其实想询问一个问题,支不支持WebRTC ?或者要支持WebRTC,需要我怎么编译,谢谢。
PS:因为,没法通过邮件组,只能在这里询问了,但愿可以得到解答。
祝,越来越好。
webRTC是浏览器支持的吧。html5和chrom支持什么,你就可以用什么吧。
怎么不开放下载呢,至少让大家用用,好给些反馈嘛
用Vs studio自己做个安装包就行了。
最简单的winRAR压缩–‘绿色免安装版’
npm的扩展包 怎么放进去?
你们方便了, 但是用户用一个小工具就得付出200M内存的代价了.
平心而论, 有道词典是越来越用不起了, 如果这是你们想要的结果
hex,太惊奇了,请问下定制型窗口怎么开发,没有看到开发文档~
web这是要逆天啊!!加油!!
x15818
S13010
T8932
zlinks!@#
在xp sp3中不能运行?提示 Read manifest.json error!
有没有解决的方法啊。
不知为什么打开developer tools 很卡
环境配置起来太麻烦了,看的头都大了。不能打包安装环境么?
好长时间没有维护了,不会夭折吧
请问可以调用java代码吗
hex_1.1.6_1621_windows32 版本 windowXP 运行报错,win7 没问题
hex不能支持video标签播放视频吗?怎么放进去就是一个黑块,没反映,急求解决方法
难道你们就不觉得这样做出来的程序很卡吗?有道现在用起来卡爆了!作为c++程序员这个底线都守不住。
有没有论坛呀, 赶快建个论坛, 还有个问题, 调试 那么麻烦, 不能直接 像 APPjs 那样 直接按f12 就可以弹出 dev tools 吗 ? 非要 搞个 hexium 吗, 没必要, 真的 , 像appjs那样 可以弹出调试框即可,,,,,
为什么 调用 在html 里面的 script 里面调用 node.js 会出现 “require is not defined “呢,,,,,