聊聊界面渲染引擎——UI Engine的前世今生

话说20世纪90年代出现了互联网,一开始只是用来看看静态文档。但是人们发现在浏览器网页上通过几个输入控件就可以做类似于发邮件之类的事情,慢慢就有了交互的概念。以cgi,pl,php,asp为代表的模板(template)语言盛行,它们可以生成动态网页,于是第一代界面渲染技术诞生了。

后来,随着页面功能慢慢复杂,服务端runtime逐渐被面向对象语言Java领导的servlet/jsp技术占据主流,并提出了MVC模型的概念。这后来也成为J2EE企业级开发web层的编程规范。

再到后来,人们对网页交互能力的要求越来越高,浏览器中脚本语言(javascript)的能力也越来越强,可以大大增强渲染效果并提高交互体验。还有css技术也分离出来,网页可以拥有更漂亮的布局和样式。于是前端开发的三架马车出现了。

这时候涌现了大量的前端框架,比较有名的有ext、prototype、jquey等。这也就是第二代渲染技术,即先采用template语言在服务端渲染出页面骨架,然后再到客户端Browser继续渲染细节的部分。这个技术的最高水平也是sun公司提出的,叫JSF(Java Server Faces),他还首次提出了组件树、组件生命周期管理、数据绑定等界面渲染的新指导思想。

正在这时候,我进入了阿里巴巴集团B2BCRM,跟随牛人一起开发了一个牛X的前端框架(shy3),采用了当时非常先进的XML语言来定义界面语义,然后通过template渲染,再加上js渲染,实现了当时软件开发的极致速度,增删改查功能半天就能搞定。

再到后来,随着互联网公司的群雄征战,以Google、Facebook公司为首的前端开发工程师又一次做了颠覆性创新,他们极致地提高浏览器、js引擎的性能,并在2011年提出了HTML5标准,并且css和http协议也相继跟进,近期javascript已经完成了ES6的标准制定,正在迈向ES7。。。。,还有移动互联网时代也到来了,又需要软件开发能够覆盖到三个端(PC、Pad、Mobile)。这时候涌现的技术标准有MVVM(提出了directive、双向绑定等概念)。于是最近期干脆有人提出界面渲染引擎——UI Engine的概念,即在JS Runtime之上搭建一层界面渲染层,写一次代码就可以实现三端合一,前端开发速度将进一步提升!

这也就是第三代渲染技术时代的到来!比较代表的技术有前两年的angular、近期的React、以及最近淘系前端团队刚刚开源的Weex技术等。

最后总结一下最新一代UI Render Engine的三大特征:
1、组件生命周期管理
2、基础组件定义
3、虚拟Dom技术实现双向绑定

各位开发工程师亲们,让我们拥抱前端开发的这些变化,这样才能在软件开发领域一直立于不败之地。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
模块名称:CompleteUI 作者:贱人 版本号:1.0.2016.127 说明:未经作者授权,禁止用于商业用途. @备注: 最全面的软件自绘界面 .版本 2 .子程序 A2W, 字节集, 公开 .参数 lpa, 文本型 .参数 bNoEndTag, 逻辑型, 可空 .子程序 MakeRCF, RectF, 公开 .参数 左, 整数型 .参数 顶, 整数型 .参数 宽, 整数型 .参数 高, 整数型 .参数 rcf, RectF, 参考 可空 .子程序 RGB2ARGB, 整数型, 公开 .参数 RGB颜色, 整数型 .参数 透明度, 整数型, 可空 .子程序 W2A, 文本型, 公开 .参数 lpw, 字节集 .子程序 超级延时_Cui, , 公开 .参数 微秒, 整数型 .子程序 窗口_取矩形, RectF, 公开, 根据窗口句柄返回窗口矩形GetWinRectF .参数 hWnd, 整数型 .子程序 窗口_消息循环, , 公开 .子程序 窗口_消息循环_对话框, , 公开, 注:父窗口句柄 为空时 以信息框的形式循环 不为空时 以对话框的形式循环 .参数 窗口句柄, 整数型 .参数 父窗口句柄, 整数型, 可空 .子程序 窗口_置鼠标指针, , 公开 .参数 鼠标指针, 整数型, 可空 .参数 从文件中加载, 字节集, 可空 .子程序 窗口_总在最前, , 公开 .参数 句柄, 整数型 .参数 总在最前, 逻辑型, 可空 .子程序 创建图片缩放, 整数型, 公开 .参数 图片, 字节集 .参数 缩放宽度, 整数型, 可空, 默认为原宽度 .参数 缩放高度, 整数型, 可空, 默认为原高度 .子程序 创建自字节集, 整数型, 公开 .参数 图片, 字节集 .子程序 发送消息_Cui, , 公开 .参数 组件句柄, 整数型 .参数 消息, 整数型 .参数 参数一, 整数型 .参数 参数二, 整数型 .子程序 画笔_创建自颜色, 整数型, 公开 .参数 ARGB颜色, 整数型, 可空 .参数 画笔宽度, 小数型, 可空, 默认为1 .参数 计算单位, 整数型, 可空 .子程序 画刷_创建自颜色, 整数型, 公开 .参数 ARGB颜色, 整数型, 可空 .子程序 扩展_绑定控件, 整数型, 公开, 绑定一个控件 拦截事件 .参数 句柄, 整数型, , 句柄 .参数 控件句柄, 整数型, 可空 .子程序 扩展_创建, 整数型, 公开 .参数 句柄, 整数型 .参数 左边, 整数型 .参数 顶边, 整数型 .参数 宽度, 整数型 .参数 高度, 整数型 .参数 标题, 文本型, 可空 .参数 可视, 逻辑型, 可空 .参数 禁止, 逻辑型, 可空 .子程序 扩展_内容, 文本型, 公开 .参数 句柄, 整数型 .参数 文本, 文本型, 可空 .子程序 扩展_取MDC, 整数型, 公开 .参数 句柄, 整数型, , 句柄 .子程序 扩展_是否穿透, 逻辑型, 公开 .参数 句柄, 整数型, , 句柄 .参数 穿透, 逻辑型, 可空 .子程序 扩展_鼠标指针, 整数型, 公开 .参数 句柄, 整数型, , 句柄 .参数 类型, 整数型, 可空, #鼠标指针_ .参数 是否动态载入, 逻辑型, 可空, 默认为假.如果为真时,参数一(类型)须为函数 LoadCursor/LoadCursorFromFile 调用所返回的值 .子程序 扩展_刷新显示, , 公开 .参数 句柄, 整数型, , 句柄 .参数 渐变幅度, 整数型, 可空, 默认为10 .参数 是否渐显, 逻辑型, 可空 .子程序 扩展_提示文本, 文本型, 公开, 扩展_置提示文本 .参数 句柄, 整数型, , 句柄 .参数 提示文本, 文本型, 可空, 提示文本 .参数 文本颜色, 整数型, 可空, 文本颜色 .参数 背景颜色, 整数型, 可空, 背景颜色 .子程序 扩展_置焦点, 逻辑型, 公开 .参数 句柄, 整数型, , 句柄 .子程序 扩展_组件回调, , 公开 .参数 句柄, 整数型 .参数 子程序指针, 子程序指针 .子程序 扩展_组件绘制, , 公开 .参数 句柄, 整数型 .参数 子程序指针, 子程序指针
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值