论坛5 | We. Developers. 王洁 「WeX5:高性能 HTML5 App 的开发工具」



  • 时间: 2016年7月28日
    发言人: 王洁|WeX5 首席技术运营官
    主题: WeX5:高性能 HTML5 App 的开发工具


    首先我们是北京起步科技,实际上我们是一家专注于做可视化开发工具的公司,我们除了WeX5,我们还有专门面对企业的开发工具。我们现在主要说WeX5,WeX5定位的就是专注于做前端跨端可视化的设计工具。

    接下来我们简单看一下工具的简介,WeX5就是基于HTML5的开源跨端可视化快速开发工具,我们提供跨端快速可视化开发,我们保证可视化开发应用对用户提供极致的交互体验。然后这种可视化设计的应用,会通过我们的工具帮它同时发布到多端,发布到安卓和的APP,基本上是不需要改代码的可以实现跨端。

    现在我们WeX5这种工具本身完全是开源免费的,所有的工具全部是开源的。我们可以简单的通过一些图先了解一下。

    (PPT)

    这边是我们看到左边是可视化设计的界面,完全是拖拽式的设计,我们提供150个组件,可以通过组件的拖拽可以定义各种复杂的界面。右边是简单易学。

    我们提供快速的可视化设计之外,我们还提供了很多常见的应用模板,开发者也可以通过这种模板快速的生成一些应用的技术原型,再提供定制。

    我们除了提供可视化设计之外,其实我们本身并不简简单单的设计工具,我们是编程工具或者大家认为我们把前端开发,原来利用代码开发,我们把它可视化掉。实际上在可视化设计的同时,我们可以很方便的进行代码编程。大家认为我们做的工具就是基于HTML5的,所以整个可视化设计带来事件驱动的编程,其实从设计理念上来说是一样的,只是技术体系换掉了。

    整个调试是没有死角的,所有都是可以直接调试的。包括打包,我们有非常方便的打包工具,设计应用可以通过我们的打包项进行快捷的选择,然后可以打出一个APP的包来,包括安卓和苹果的包。

    另外,现在我们除了提供WeX5可视化设计工具来降低开发人员开发难度,而且我们的开发者都是在做移动端的应用,多数是做移动APP的。所以他们做APP以后,往往是有官网的测试和调试的需求。所以现在我们还提供CloudX5的云平台,我们可以实现一键发布到这个云平台上,然后直接进行基于官网的测试和调试以及运行。

    所以这两个工具真的结合起来以后,就可以实现所谓的WeX5,从快速开发到自动部署,再到自动运维,整个一条线的产品。

    这是我们简单的案例,这是一些上线的很多开发者做的应用,可以简单看一下还是有一些比较炫的功能。

    从技术上来说,前面我们看到了可视化设计,其实现在我们已经做的非常棒了。但是从底层技术框架来讲,我们做了非常多的技术尝试来在WeX5这样一个框架技术上,通过我们的底层框架的技术来提升运行的性能。主要的一些技术,我们先看一下其实整个应用框架分两块,一块是我们有一个外壳的框架和网页的框架,然后有一些插件,里面是基于H5的页面。

    我们外壳的框架是基于Cordova,在页面框架性能优化我们主要是采用SPA,在整个页面框架里面,所有的页面加起来其实都是采用SPA技术,大大提升在移动端和浏览器加载的性能。同时更容易实现一些移动端的页面切换的动画等等交汇的特性。

    另外,我们还有一个比较重要的优化技术,我们所有的页面用户在可视化设计完了以后,我们都知道很多复杂的交互组件,它在运行时会有很多的创建一个节点,这个时候需要不断的处理产生一些性能损失。而我们在处理模式上有比较特殊的处理,我们在可视化设计完了以后,页面在编译的时候,我们把页面上所有的Web组件一次的全部静态编译出来。这个时候其实在运行时页面加载的时候,基本上页面所有的静态组件就是一个静态页面的加载,相对于现在我们看到很多Web组件框架动态的框架,运行的性能要高的多。

    所以说基于我们的SPA的技术和静态编译的技术,基于WeX5可视化设计的应用,它的性能可以达到非常好的效果。而且我们前面说的这两个技术,其实我们框架底层,对于开发者来说是不用知道的。

    后面有一个小的案例,大概有一个视频文件。这个视频整个做下来大概是七八分钟,整个我们在做一个应用,这个应用就是问卷调查。
    现在来到数据源构建了后端的服务,一会儿会做一个表单。我们看一下WeX5整个设计过程,这是很小的问卷调查的案例,创建一个页面,改标题可视化设计,放一个数据组件关联到后面的数据服务。一共是两个表,一个是问题,另外一个是问题的选项,现在设置两个数据之间的组成关联,接下来布局显示的组件。

    上面放问题,接下来还要放另外一行,然后会放一个Button作为选项。变成纵向的,然后下面我会摆两个按钮。然后每一个按钮会关联数据操作,来执行数据的上一条和下一条,这个做完了。

    我们在浏览器里面看一下模拟的运行效果,这个是在浏览器里面的运行效果,接下来要构建它的发布工程。然后我们再创建一个CloudX5,我们创建一个云端项目,我们定义它发布的一些信息,因为它最终是要发布出一个APP来。所以说这个地方我们设置一些东西,这是编译的过程。

    这里可以选择是否把页面资源打包案例里面去,接下来是发布到云端去,这个很快,这里已经发布完了。我把时间调成两倍了,正常播放要比这个慢一倍,大家看上面是在CloudX5上的应用,我拿手机扫生成的二维码,这个速度我降下来了,后面这一段因为是单独的视频,这个是正常的时间,我们可以看一下它运行的效果,从云端把APP装到手机上,最后就运行起来了。我就讲到这里,谢谢大家。


登录后回复
 

与 青云QingCloud 社区 的连接断开,我们正在尝试重连,请耐心等待