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

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

话说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技术实现双向绑定

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

相关文章
|
2月前
|
计算机视觉 Python
基于Dlib的人脸识别客户端(UI界面)
基于Dlib的人脸识别客户端(UI界面)
63 2
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
98 8
|
2月前
|
机器学习/深度学习 数据可视化 计算机视觉
基于opencv的车牌识别系统(UI界面采用tkinter设计)
基于opencv的车牌识别系统(UI界面采用tkinter设计)
44 0
|
4月前
|
编解码 前端开发 vr&ar
从零开始的PICO教程(4)--- UI界面绘制与响应事件
这篇文章是PICO开发系列教程的第四部分,主要介绍了如何在PICO 4 VR环境中创建UI界面,包括Canvas和Panel的配置、UI元素的绘制、以及Button和Slider的事件响应绑定,并通过示例展示了数字增减和滑块功能的具体实现。
从零开始的PICO教程(4)--- UI界面绘制与响应事件
|
3月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
75 1
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
175 0
|
5月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
159 1
|
5月前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
Pycharm主题切换(禁用)导致UI界面显示异常解决
问题记录 UI显示异常 安装多个主题时,当禁用某些主题,切换回one dark theme时,发现代码编辑窗口背景变成白色,菜单栏其他地方背景为黑色 问题原因 查看Settings>Editor>Color Scheme>General,发现方案被改为-Classic Light
|
6月前
|
机器学习/深度学习 算法 数据可视化
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)
【深度学习实战】基于深度学习的图片风格快速迁移软件(Python源码+UI界面)