前言
新一代大前端利器 iofod 开放公测!应用开发领域的 Photoshop,专门为攻城师们打造的低代码开发平台,应用开发毫不费力。本文将从多个方面切入快速介绍 iofod 独特的地方,同时分享设计上的思考,希望能抛砖引玉。正文开始前先通过一段小视频感受下 iofod。
布局系统
人类以自身为量尺,为万物规定了尺度,类似地,一个应用被我们分解成一个个场景(屏幕,窗口,页面),下文我们统一称之为页面。
我们把范围锁定在当前的主流媒介:屏幕。一个页面承载了当前屏幕肉眼可见的一切对象,为了更好地管理这些对象,我们发明了视图,树,层,容器等概念,按空间位置,属性给对象分类,划分范畴,在日常中我们不会直接去操作屏幕的像素,甚至使用类似操作画布的绘图原语的情况也少之又少,更多是使用更高的抽象(组件,控件等)来描述页面的内容,这更贴合人脑认知。
iofod 对大量的场景和用户界面进行分析,设计了跨平台兼容的布局系统,为布局容器提供了绝对,相对和弹性布局三板斧,结合对页面的分层管理,理论上所有的界面视图,均可以转化为这一布局系统的表达,同时具备良好的维护性,一图胜千言:
原子组件
还记得 jQuery 年代,市面上DIV+CSS一把梭到底的产品比比皆是,如今2022,iofod 用可视化这时髦的方式将其重新包装并推到舞台上(手动狗头)。根据前文所述的分层理念,层级内的容器可以再次嵌套容器,构成子布局,布局完成后,往容器内填充原子组件或者封装的组件,完成真正的界面内容,这种以层级结构来组织管理界面的方式与传统并无不同。思路虽一致,然而实现路径可谓千差万别,iofod 结合通用布局系统的三板斧,在不限制界面表现的前提下对实现方式进行剪枝,将用户的可能实现路径数压缩到可数的范围。
可以说原子组件和容器可嵌套保证了封装复杂组件以及实现任意视觉界面的可能性,抹平了界面维度与传统编程的能力差,配合有限的声明式状态表达式,实现路径甚至成为了无关要素。