首页  »   HTML/CSS

基于HTML5技术的电力3D监控应用(2)

网友分享于:2013-12-18  浏览:41次
基于HTML5技术的电力3D监控应用(二)

我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑,项目做到现在终于快收尾了我们才敢松口气,压力基本顶住了,我个人总结的经验是:HTML5性能肯定不是最高,但对企业应用足够高效,HTML5标准不可能所有浏览器都一致实现,但对于企业应用已经足够工作。选择正确的引擎框架,进行合理的设计才是关键,HTML5真的已经Ready!

 

选择HTML5除了看中JavaScript动态语言的灵活性,能够很好的和其他异构系统融合到页面外,HTML5的跨平台性也是我们看中的重要原因,以前PC桌面应用上采用Flex和Silverlight到是可以跨平台,但如今的系统还不能上移动终端实在就说不过去了,而Flex和SL在跨移动终端方面就卡壳了,虽然有AIR可以导成native app应用,但还是远不如HTML5纯页面来的高效,每次修改任何东西PC上都可以模拟测试,看看Chrome DevTools for Mobile越来越屌爆的Screencast and Emulation功能: 

我现在测试移动终端大部分情况都不需要用真机,当PC上模拟测试得差不多后再进行真机测试基本都能一次性通过,回想以前用Flex的AIR进行转换Native App真是浪费生命,每次测试我都要刷几条微博消磨难熬的等待时间,上一次项目我们团队也分为Android和iOS两个完全采用独立Native开发方式,但也存在版本发布不一致,应用体验不一样,包括很多业务逻辑代码本可以复用的但由于Java和ObjectiveC的差异,搞得我们非得写两套一样逻辑的代码,其中加密的部分还得费劲的用C++实现了一个统一的实现,然后再有Java和OC分别去调用C++的代码,总之系统越搞越复杂,团队需要的人越来越多,当然我们经验不足也是一个原因,但我们毕竟是做企业应用搞项目的,不过可能有资源像BAT那些移动互联网巨头去慢慢融合摸索经验,我们除了这些基础技术外,还有学习很多电力业务,还得和硬件打交道,学习各种电力规约协议,扯淡了这么多你应该明白我们现在成功的使用了HTML5一个js语言就能跨所有平台之爽。

 

项目初期我们团队在选型初期对3D建模进行了一定的研究,传统的3D引擎一般只提供后期三维模型的渲染呈现,并不提供3D建模的解决方案,本以为还需要招聘专业的3DMax或Maya三维建模设计师,因为我们目前的美工设计师只会ps,但HT提供了一套完全基于HTML5的3D设计编辑工具,别说只会ps的美工设计师,其实后续项目的大部分3D场景我们程序员都参与了设计。

 

完全基于HTML5的设计器这点还是挺让我佩服的,虽然大家都在转型到HTML5但还很少有做得彻底的,如Google Web Designer和Adobe Edge Tools这些巨头的产物,包括Sencha Architect折腾了很长时间又走回Qt的路线,我实在不看好这些还不采用HTML5做设计器的路线,这时代HTML5已经足够强大,JS虚拟机的性能如V8也足够高效,数据直接云存储就可以,如果需要本地功能采用Node-Webkit也是很不错的方案。以前我们团队常用Qt或Java Swing来写些小工具,我发现这个项目历练之后Node-Webkit的技术方案成了大家些写工具应用的首选。

以下为几张运行系统抓图,以及这些系统图在编辑器内编辑的过程抓图

1 楼 zha_zi 16 小时前  
我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架,后来发现有些方面canvas 不能满足后来换成了SVG技术 。
2 楼 xhload3d 15 小时前  
zha_zi 写道
我们做的组态监控软件第一版也是基于html5 canvas 使用的是kineticjs框架,后来发现有些方面canvas 不能满足后来换成了SVG技术 。

所以文中提到“选择正确的引擎框架,进行合理的设计才是关键”,也许是kineticjs的不足而非canvas

相关解决方案

最新解决方案