LuLu UI Edge版中文文档 » 命名与设计

教程

命名与设计

本文档的对应的主题是LuLu UI的Edge主题,Edge是边缘的意思,之所以命名为“Edge”是源自下面这句名言:

所有创新都发生在事物边缘,所有的颠覆都来自边缘

Edge主题使用原生JavaScript编写,使用了JavaScript和CSS前沿的新语法和新特性,React和Vue项目均适用。

包括:

  • ES6 import/export
  • Web Components
  • Customized build-in elements
  • MutationObserver
  • Proxy、Object.defineProperty

LuLu UI Edge主题适用于不需要考虑兼容IE浏览器的网站开发。

LuLu UI Edge主题的优势?

使用成本更低了

所有组件都已经告别初始化和HTML结构限制,直接引入CSS和JS文件资源就可以了,无需安装配置,学习和使用成本极低。

没有任何需要外链的图片资源,资源占用进一步减小。

过去的体验细节继续保留,比如无障碍访问的支持,同时,由于Edge主题不需要考虑兼容性,因此,在视觉表现上也有明显的提升。

设计理念

面向设计开发

关于面向设计开发可参见这里:“面向设计的半封装web组件开发”。

面向设计最大的特点在于能够对设计进行最完美的还原,可以很好地展现设计品质。有别于先有组件,然后再制约设计的设计策略。

所以,LuLu UI是没有版本的概念的,只有一条核心线自己往前走。当新项目过来需要使用的时候,完全拷贝LuLu UI到项目开发目录中,然后根据当前项目的设计风格,对HTML和JS进行结构上的调整,是放心大胆的调整。

因此,LuLu UI组件不是传统的大而全,而是走极简轻便灵活方向,表现为模块低耦合,层级扁平;API非常少,尤其一些基本组件,直接就没有API。

LuLu UI没有版本概念,只有主题,目前有morden、peak, pure和edge四个主题,寓意为“现代”、“巅峰”、“纯粹”和“边缘”。

本文档对应的是edge版本,不兼容IE浏览器,Safari浏览器需要引入safari-polyfill

基于HTML开发

相对于其他UI框架,LuLu UI技术栈更偏向HTML和CSS,以便更友好地还原设计和增强体验。

具体而言,LuLu UI基于HTML开发,实现前端开发分离,具体可参考“顺势而为,HTML发展与UI组件设计进化”。

换句话说,开发的时候,只需要关心原生的HTML控件就可以,组件什么的不用在意。例如,时间选择,当我们选择或修改日期,就直接当组件不存在,处理原生input就好了:

input.addEventListener('change', function() {});

想要修改日期范围,很简单,直接改变原生的属性值就好了:

input.setAttribute('min', '2019-09-05');
input.setAttribute('max', '2029-09-05');

组件自动就会同步,就跟原生的时间选择组件使用体验一致,因此可以兼容主流的第三方框架,例如:

<input type="date" :min="min" :max="max" @change="someMethod" is="ui-datetime">

所谓UI组件,本来就应该只负责UI,跟业务没有瓜葛才对。

Edge主题中的UI组件都是采用这样的设计思想。

本页贡献者:

zhangxinxu