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

前言

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

前往知乎观看

Lugia 是什么？

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

在如今的版本中，咱们重点发布了四款产品：

• 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、前端等都在一个工具中工做。只须要下载安装，开箱即用。还有比这更简单高效的吗？

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

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

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

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

特性

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

功能组成

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

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 能够复用已有项目的业务模型

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

用户使用流程

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

实现技术

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

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

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日