前言
新一代大前端利器 iofod 凋谢公测！利用开发畛域的 Photoshop，专门为攻城师们打造的低代码开发平台，利用开发毫不费力。本文将从多个方面切入疾速介绍 iofod 独特的中央，同时分享设计上的思考，心愿能抛砖引玉。注释开始前先通过一段小视频感触下 iofod。
视频
布局零碎
人类以本身为量尺，为万物规定了尺度，相似地，一个利用被咱们分解成一个个场景（屏幕，窗口，页面），下文咱们对立称之为页面。
咱们把范畴锁定在以后的支流媒介：屏幕。一个页面承载了以后屏幕肉眼可见的所有对象，为了更好地治理这些对象，咱们创造了视图，树，层，容器等概念，按空间地位，属性给对象分类，划分领域，在日常中咱们不会间接去操作屏幕的像素，甚至应用相似操作画布的绘图原语的状况也少之又少，更多是应用更高的形象（组件，控件等）来形容页面的内容，这更贴合人脑认知。
iofod 对大量的场景和用户界面进行剖析，设计了跨平台兼容的布局零碎，为布局容器提供了相对，绝对和弹性布局三板斧，联合对页面的分层治理，实践上所有的界面视图，均能够转化为这一布局零碎的表白，同时具备良好的维护性，一图胜千言：
原子组件
还记得 jQuery 年代，市面上 DIV+CSS 一把梭到底的产品亘古未有，现在 2022，iofod 用可视化这时尚的形式将其从新包装并推到舞台上（手动狗头）。依据前文所述的分层理念，层级内的容器能够再次嵌套容器，形成子布局，布局实现后，往容器内填充原子组件或者封装的组件，实现真正的界面内容，这种以层级构造来组织治理界面的形式与传统并无不同。思路虽统一，然而实现门路堪称千差万别，iofod 联合通用布局零碎的三板斧，在不限度界面体现的前提下对实现形式进行剪枝，将用户的可能实现门路数压缩到可数的范畴。
能够说原子组件和容器可嵌套保障了封装简单组件以及实现任意视觉界面的可能性，抹平了界面维度与传统编程的能力差，配合无限的申明式状态表达式，实现门路甚至成为了无关因素。
JS in CSS
前端 Web 畛域的 CSS 比照其余畛域的 CSS，其表达形式无疑是最为自在的，自在带来弱小的同时，也带来了稳定性和性能问题。浏览器用大部分代码来撑持其自由度，技术团队制订标准来限度成员编写维护性或性能差的代码，许多跨平台框架通过阉割实现 CSS 子集以获取更快的渲染速度，业内呈现预处理器、后处理器来补救稳定性，模块化 CSS，CSS in JS… 这所有无疑在宣告 CSS 存在极大的改良空间。iofod 对此的解决方案是：摒弃命令式批改，用更纯正的函数式与申明式来兼顾自在与稳固。
用户与界面交互，会产生指针或触控点的输出流，输出流作用于可交互的组件上如按钮，按钮接管输出流，切换本身状态为被点按的状态来响应用户反馈，此时可能还须要依据理论业务去申请后盾数据，获取新的输出流，更改页面几个组件的模型数据，按钮可能要变更本身的外部状态，切换为不可点击状态 … 一个再平时不过的场景，命令式能够很容易翻译出有滋味的代码，读者请自行尝试。在 iofod 里，按钮用一个文本组件表白，配置 $isActive 和 $disabled 别离示意按钮点按和禁用状态，配置交互点击批改变量值，依据须要新增交互步骤，这案例很间接体现申明式 UI 以及 JS in CSS 的长处。
基于该设计，咱们取得低劣稳定性的同时，也取得动静 CSS 的能力，表白甚至更加灵便。咱们通过一个轮播成果演示下进阶的用法：
案例具体细节可参考这里
跨平台
跨平台开发的需要始终存在，不思考性能与原生能力，Web 是目前最为弱小的跨端跨平台的解决方案，并且比照原生其开发的繁难水平和速度也是最高的，但开发体验终归是要退让于更好的用户体验，业界早已进行过大量摸索和实际，从 Cordova，React Native 再到现在的 Flutter，咱们跨平台的计划更加成熟且用户体验更上一层。
在 iofod 搭建的我的项目，咱们的指标是实现导出各个平台的代码，目前 Web & H5 反对导出 Vue2，Vue3 代码，小程序方面反对导出 Taro 代码，借助 Taro 生成国内各小程序平台利用代码，原生利用方面反对导出 Flutter 代码，借助 Flutter 生成安卓，iOS 和桌面端利用代码。
极致的复用
每个技术团队对 DRY 准则的了解与实现存在差别，有相似于行政单位的划分，将代码的复用分级成片段，函数，模块，类库，框架，进行分层治理，也有察看代码在时域的变动，拆散代码变动的局部与固定的局部，对固定的局部进行封装复用。咱们对已有的计划综合本身状况进行考量，权衡利弊之下得出最合适的价码，两种计划中，前者对变动的断定规范很低，随工夫累加会产生大量低保值的复用，甚至因为变动太快，封装实现之日就是入土为安之时，而后者，重依赖于制订代码变动规范的这个人，存在不稳固因素。
咱们无妨从第一性原理登程，解决提出问题的人？（手动狗头）假如采纳前者封装的复用是高保值的资产或者低保值的同时低成本，则前者的产出是蕴含后者的，前者在 AI 时代甚至是能用机器来代替，咱们把使假如条件成立的因素定义为复用老本（心智老本，保护老本，应用老本，从新生产成本等），那么复用的老本越低，则越趋近现实状态，最终达到复用之极致。
那么 iofod 采纳哪些策略来升高复用老本呢？第一，抹平了平台与端的差别，原子组件在不同的宿主环境下视觉与交互对立，一次开发，到处运行，终生复用；第二，体系下封装老本，应用老本简直没有，任意组件交互组合、业务模块，一键保留为可复用单元，所有我的项目可一键导入应用，无需简约的使用手册；第三，定制老本极低，原子化组件的独立性与可组合性保障复用组件的依赖最小化，各司其职，比照同类产品，在定制化层面几乎一骑绝尘；最初，复制粘贴光彩，行走的 Dockerfile，像设计师找素材一样所见即所得，社区我的项目零老本借鉴。
拓展体系
iofod 带来了通用界面设计开发的能力，为了最大化利用该能力发明更多价值，为开发者凋谢拓展能力的性能必不可少，因而拓展能力是 iofod 面世前就具备的能力。通过调研大量市面插件拓展的计划后，发现 VSCode 的拓展设计理念最靠近咱们的现实状态：独立过程，逻辑与视图隔离和无限拓展组件。
在咱们的设定中，拓展通过 Web Worker 运行于独立的线程，隔离拓展逻辑，通过 SDK 与 iofod 编辑器主界面通信，可拓展编辑时能力与导出能力，借助 SDK 提供的组件拼装拓展界面：
为了带来更好的拓展开发体验，咱们提供了 TS 版本的 iofod-sdk，外部蕴含大量文档正文与代码示例，借助编辑器的智能提醒，可做到无需对照文档开发。另外，可通过 CLI 脚手架工具疾速创立拓展开发工程模板，感兴趣的小伙伴还能够学习下已公布的开源案例，疾速上手。
实时协同
劳动分工进步了生产效率，这是工业社会的共识，而有分工的中央就有协同。20 年新冠黑天鹅极大催生近程协同办公需要，成为很多企业的必需品，协同的重要性不言自明。iofod 基于 WebRTC 实现多人实时协同编辑，借助 CRDT 保证数据同步的强最终一致性，再利用 OT 算法保证数据合并能最大水平合乎用户预期。
工作流的交融与重塑
瀑布流模型是古老的软件开发流程之一，相比混沌状态，它最大改良是要求开发者先思考，而后才是编码，需要和设计先于编码，置信这也是大多数技术公司采纳的流程，一环扣一环严格分工，但这只在特定类型的软件开发上是无效的，波及用户界面的利用或软件上并不适合。
首先，咱们不晓得产品在推出前是否最终取得成功，也就是说产品的最终状态不会是一开始就确定下来，需要是会变的；其次，在瀑布流模型中，用户只呈现在需要剖析和验收测试两个阶段，这意味着中间环节出问题，会等到瀑布流走残缺个链条才被发现；最初，需要变动会影响链条上的所有人，过程资产可能无奈复用。这是传统的瀑布流模型与疾速变动的事实世界的抵触，难道咱们不想扭转这低效的现状吗？
实时协同的现实状态是多角色协同，如果产品经理，设计师，开发者都能参加进来，那么我的项目开发的整个生命周期，是从串行改并行的，两头过程资产能够复用，比方开发者无需对着高精度原型或者 UI 稿从新用代码实现一遍；升高上下游沟通老本，比方用户界面的变动，若只波及视觉局部，那么设计师间接调整即可，无需从新出稿以及代码调整；后期需要还不是很明确的时候，开发者无需提前形象封装业务组件，仅实现当下固定的局部，以及撑持以后需要的局部，缩小有效编码。
iofod 提出了利用开发的新范式，无论是间接改线上文件的作坊式暴力美学，还是谋求高效精简工作流的中小团队，或者是重视稳定性的大教堂流水线，都能无缝连接交融。
结语
随着迷信倒退，第一类和第二类永动机相继被判死刑，人类收敛本人生物链顶端的高傲，紧接着又从各个角度突破空想：数学的哥德尔不齐备定理，量子力学的测不准原理，机器学习的没有收费的午餐定理，区块链的 FLP 不可能原理 … 人类破费大量的致力去破除因果科学，意识客观规律，为后退的方向定界，但即使当下咱们的思维仍然囿于大情节的迷恋，对不可能的事物两厢情愿。软件开发同其余社会生产流动一样，实质上属于耗散构造，唯有一直重构优化能力放弃不糜烂，从写下第一行代码开始，它的复杂度就人造存在了，无 Bug 只是长期的，所以咱们致力的方向不该是要求人不会犯错。
iofod 编辑器开发实现后，公司所有网站和利用都是通过它来构建，咱们再也回不到从前，如果说“本人会用”是对 iofod 最根本的要求，那么“少部分人离不开它”则是咱们接下来的指标。iofod 作为一个低代码平台的意义之一，就是将类似的生产成本转移到工具外部，工具外部去解决这部分老本，再联合全新的开发范式，让利用开发生产力达到一个新的水准。
都看到这了，不来试试？
感兴趣的小伙伴能够公众号搜寻【iofod】或【数字围猎】关注咱们，获取最新资讯。在公众号点击【加群】可退出交换群，也能够增加小助手在线答疑~
相干链接：
iofod 官网
Github 开源
轮播案例
weui 案例
申明式 UI
User Centered Design
iofod 跨平台生成
SpringOne Platform 2017
Rxjs