重塑前端工作流-Lugia正式版发布

3,290 阅读10分钟

前言

从 2018 年 5月建立第一个 Lugia 相关的仓库起,时隔一年多,22万+的代码量,3500+次的提交,Lugia 终于迎来了它的第一个正式版本 1.1.0。在今年年初,我们已经在内部发布了技术预览版 1.0.0,以验证我们的整套大前端解决方案,又经过半年多的时间打磨,我们决定在社区分享我们的成果。话不多说,让我们先看一段视频感受下 Lugia 的魅力,体会它是如何重塑前端工作流的。

前往知乎观看

Lugia 是什么?

Lugia 是一整套面向云原生化大前端生态解决方案。我们希望把交互设计与前端应用代码开发有机的融为一体,形成一种跨时代的大前端生态技术规范。

1

在现在的版本中,我们重点发布了四款产品:

  • Lugia Design:大道至简的设计规范。对于设计来说,知性可以同时定义为 “ 形式上的优美和极致 ” 和 “ 科学上的精确和简洁 ”,我们相信知性的设计,实现了二者的完美契合。
  • LugiaX:一个基于 Redux 的前端状态管理工具。提供简单高效的全局状态管理方案、 基于 async/await 的异步操作、快捷的双向绑定。LugiaX 内置路由库,对 react-router 做了轻量封装,使用起来更加简单明了。
  • Lugia Web:一套基于 Lugia Design 的高品质 React 组件库,满足B端行业高性能组件的需求,适用于 Web 端。
  • Lugia Mega:标准、高效、开箱即用的前端可视化设计开发工具。Lugia Mega 是一个无需环境搭建、快速上手的跨平台桌面应用(Mac 和 Windows)。研发制定了元信息中间语言描述规范LugiaD,为开发人员提供可视化交互设计、屏蔽底层开发工具链和底层前端开发框架(React OR VUE)、以及元信息注册式的开发方式。帮助设计师、产品经理快速设计产品,成果可以直接让开发人员使用。Lugia Mega 贯穿了整个项目的生命周期,让您极速构建前端应用、轻松管理所有项目。

Lugia Mega 是整套大前端技术生态解决方案对外输出的主要承载体。Lugia Design、Lugia Web、 LugiaX等产品会与 Lugia Mega 整体打包向用户输出使用。

重塑前端工作流

在传统的前端开发中,产品经理把需求和原型给到设计和交互,然后设计和交互同学出设计和交互稿,前端同学拿到稿子后做代码实现。整个流程是串行的,而且相互之间的成果不能共享复用,生产力大大降低。我们知道在目前的前端开发中,有很多实现是重复的、反复修改是十分普遍的。我想在这个工作流当中的每个人都想要改变这个低效的现状。

经过一年多的研发,我们重新梳理了整个前端开发工作流,把成果复用和打通工具链路作为突破口:

  • 成果复用:我们把开发中的组件抽象成最小单元,页面是由组件组合而成,行为和状态由模型管理。在这里,不管是组件、页面,还是模型等,都是结构化的、可迭代复用的。
  • 打通工具链:每个职位都有相应的工具,这些工具确实可以提高生产力,但是这个工具是割裂的、分散的,我们都知道沟通和切换工具是非常耗时费力的,无形中生产力便会大大降低。我们重新设计了整个工作链路,用 GUI 客户端的形式,内置工作链路中需要的所有工具,UE、UI、前端等都在一个工具中工作。只需要下载安装,开箱即用。还有比这更简单高效的吗?

2

所有人的生产力都在一个并行矩阵中,劲往一处使,再也不是“香飘飘连起来绕地球一整圈”了。

基于此,我们设计研发了 Lugia Mega 这个前端可视化设计开发工具,重塑前端开发流程,不同职位的产出成果可以直接迭代复用,从而满足云原生大前端的快速迭代开发需求。

我们做那么多事情,最本质的目的就是要提高生产力,达到降低开发成本,提高前端开发质量,提升用户体验的效果。

Lugia Mega的设计理念和实现方案

特性

  • 标准:约定、配置、初始化、原型设计、效果设计、模型绑定、开发调试、构 建、依赖管理、项目管理、Mock 服务、代理配置...... Lugia Mega 贯穿了整个前端项目的生命周期并采用业内最优秀的解决方案。
  • 高效:高品质的物料体系,丰富易用的主题样式,高效快捷的模型管理,让您极速构建前端应用、轻松管理所有项目。
  • 开箱即用:Lugia Mega 是一个无需环境搭建、快速上手的跨平台桌面应用(Mac 和 Windows)。通过简单的拖动操作帮助产品经理、设计师快速设计原型、交互稿,成果可以直接让开发人员使用。

功能组成

Lugia-mega 主要由项目管理、页面设计器、物料体系、开发工具链、模型规范等部分组成。

3

1.项目管理

对符合 lugia-mega 规范的前端项目进行管理

  • 创建项目:创建新项目时,提供推荐脚手架和布局等功能,并且有高级配置项可以自定义创建项目。
  • 导入项目:导入一个符合 lugia-mega 规范的项目,进行多人协同开发。
  • 多个项目间切换:可以在已经创建好的项目间快速进行切换,方便用户同时开发多 个项目。
  • 项目历史记录:会记录项目的操作历史,以方便用户在下次使用时快速进行开发。
  • 项目配置管理:对项目进行主题、布局、依赖、mock 数据等的配置管理,还有一些 默认配置项的设置。
  • 删除项目:删除一个项目。可选保留项目源文件,依旧可以打包部署,也可以再次导入到 lugia-mega 中继续开发。

2. 页面设计器

通过对所需物料的拖拽、组合等方式来完成整个页面设计稿

  • 物料选择面板:在设计页面时选项所需的物料(组件库、自定义组件、区块、布局等),通过拖拽等方式移至画布区域。
  • 画布区域:当前设计的页面,通过对所选的物料进行移动、删除、编辑、组合等操作完成设计稿。
  • 检查器面板:检查器可以显示编辑当前选择的组件属性,进行参数的调整。用户可以基于自己的需求在检查器面板进行属性样式的调试。
  • 响应式工具:提供设计响应式页面的能力。
  • 页面管理:对当前项目的所有页面进行新建、编辑、删除等管理操作。

3. 物料体系

物料体系是 lugia-mega 重要的生产力要素

  • 脚手架:创建一个新项目时所需的基础工程项目,一般包含菜单布局、基础页面、工具函数、自定义配置项等。脚手架要符合物料体系规范,并通过lugia-mega的对接机制对项目进行配置。
  • 官方组件库:基于 Lugia Design 的高品质React组件库 Lugia Web,满足B端行业高性能组件的需求。
  • 自定义组件:根据业务需求,通过编码的形式,对组件进行高度定制,并通过lugia-mega的对接机制接入使用。
  • 区块:为了更加快捷的构建一个页面,将部分组件拼合成一个功能区块,只需简单组合便可以形成一个页面。
  • 业务模型:通过 lugia-mega的对接机制把现有项目的业务模型复用到其他项目中。

4. 开发工具链

提供开发现代单页应用需要的所有环境,是 lugia-mega 组成部分的链接器

  • 项目开发调试:提供一个简单方便的开发调试环境,并具有 live reloading (实时重新加载) 功能。支持browser-sync,保持多个浏览器和设备同步。
  • 项目打包构建:把项目部署所需的资源构建在一起,并优化整个应用以提供最佳性能,自动按需加载,加快页面访问速度。
  • 项目mock服务:mock数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口,模拟请求数据甚至逻辑,能够让前端开发独立自主,不会被服务端的开发所阻塞。支持引入 json、excel、csv 格式的文件作为数据来源。
  • 项目单元测试:交互式的单元测试,内置支持覆盖率报告功能,包括 UI 测试。
  • 元信息转换器:把页面设计器生成的元信息转换为可执行代码。
  • 物料信息生成工具:生成可供 lugia-mega 使用的物料信息,以便把页面设计器需要的物料对接到 lugia-mega 中。

5. 模型规范

模型规范分离了用户视图和业务逻辑,lugia-mega 可以复用已有项目的业务模型

111

11

  • 模型管理: 对项目中的业务模型进行管理,包括创建、查看、删除等,并接入到 lugia-mega 中进行使用。
  • 业务开发:使用前端状态管理工具lugiax进行业务模型的逻辑编码。lugiax提供简单高效的全局状态管理方案、 基于async/await 的异步操作、快捷的双向绑定。
  • 单项绑定:在lugia-mega中以可视化的方式快捷的把业务模型中的状态绑定到选中的组件上。
  • 双向绑定:在 lugia-mega中以可视化的方式把组件中抛出的事件和业务模型的状态绑定到一起。

用户使用流程

Lugia Mega 的用户群体大概分为两类,一类是负责设计页面的设计师或者产品经 理,一类是负责业务逻辑开发的前端工程师。

22

实现技术

Lugia Mega 基于 Electron 框架开发,视图层使用了 React 技术栈。

这是 Lugia Mega 的整个技术架构图:

33

Lugia Mega 各个功能点的实现是分散到多个单独模块的。这些功能模块会通过组合的形式来支撑 Lugia Mega。比如新建项目、开发构建等功能都是调用子进程调用相应的模块进行操作的。

One More Thing

我们正在积极开发 Lugia 下一个大版本,总体目标是通过提供以物料体系、插件体系为内核的生态能力,加上官方维护的核心物料、插件,繁荣的社区物料、插件,实现一个开放、自由定制的大前端可视化设计开发工具。

我们将要做的:

  • 快捷的生态共建能力,物料体系、插件体系
  • 自定义主题功能,脚手架可以配置
  • 场景化 IDE,引入 Monaco、xterm.js、ChromeDevTools、文件操作、模拟器等 ……

当然了,我们计划在1.x 版本中还会新增 30+ 特性,随着版本的升级会陆续推出来。

最后

欢迎大家随时在 GitHub 反馈问题、提供建议、发起 PR!有了大家的参与,Lugia 会变的更好。

希望大家多多 Star 啊!

相关链接

GitHub:github.com/lugia-ysste…

官网:Lugia 大前端生态技术解决方案

知乎专栏:有介绍和教学视频嗷

赢时胜研究院

2019年8月8日