缘起:轻应用开发

“轻应用” 这个概念相信很多开发者都有接触过,本文中的轻应用是指使用 JavaScript 为主要语言开发的应用。在长期的应用开发实践中,我们基于 Cordova、Weex 等总结出了一系列开发框架、开发套路,能够帮助开发人员快速构建移动端轻应用,例如,基于 Cordova 框架是使用 H5+CSS3+JS 开发 Hybrid App;基于 Weex 框架则是使用 Vue 开发类原生 App(JS 映射原生 API)。

另一方面,我们根据企业的应用特色,研发了 UI 框架(BUI 和 BUI-Weex)。此前,开发标准的 Restfull API、生成 Swagger 文档、部署发布等是后端开发人员的工作,现在前端工程师也可以轻松完成——JMMS 的诞生给前端开发人员送来了新的研发炮弹。JMMS 是一款使用 JavaScript、Java 或者 SQL 来开发 API 的轻量级微服务框架,基于 JMMS 框架,前端开发人员通过 JavaScript 就可以实现后端接口的开发,是不是特别酷?SO,后端工程师们,颤抖吧!

然而内功再好,没有武器也只能发挥其三成功力!前端工程师既然要完成这么多的工作,不配一个衬手的 IDE 怎能把活干的漂亮?LinkIDE 便是专门为企业应用开发者而生,面向前端开发人员,是一把全栈轻应用开发利器!

LinkIDE 的七大 “招式”

当前业界大多数框架都基于 CLI(命令行工具)方式来创建项目、运行、调试,看似成为了框架的标配,但毕竟每个框架都有自己的命令行,不难想象系统桌面得同时打开多少个命令行窗口,实在是复杂有余而便利不足(极客请绕道)。

因此,通过可视化的工具和流程才能够让开发更加便捷和高效。结合企业应用开发的实际情况,我们认为应该在基础代码编辑能力之上赋予 IDE 更多的企业级业务特性,减少代码量,让开发应用更加敏捷。因此,LinkIDE 配备了七大招式:

招式一:支持移动端轻应用开发

LinkIDE 支持移动轻应用开发,采用 Cordova、Weex 框架作为核心运行环境,配合使用 UI 框架(BUI 和 BUI-Weex)。LinkIDE 中梳理了移动轻应用的开发、调试、预览、发布等流程,操作流程完全可视化,帮助开发人员的开发工作更加高效和便捷。

招式二:支持后端 API 开发

生成标准的 Swagger 文档:

招式三:丰富的模版应用

LinkIDE 支持创建工程时的模版选择,这些模版是我们长期总结出来的,具有企业级应用的通用特色。未来,这里将会是一个模版工厂,开发者可以自行定义模版、分享模版;我们也将不断为行业应用总结通用模版,期望只需要开发者定制少许,便可成为崭新的应用。

招式四:开发调试一体化

LinkIDE 整合了各框架 CLI 的功能,将编码-> 运行-> 调试过程有序地串联起来。清爽的代码编辑器(还可以定制主题^_^)配合代码片段,赏心悦目、指尖飞扬!

 

招式五:支持打包跨平台 APP

为方便开发者将前端代码打包成移动应用 APK/IPA,我们在 LinkIDE 中整合了自动化编译能力,通过界面操作驱动底层编译脚本,实现一键编译;同时还包含了应用基本信息管理、证书管理等功能。

招式六:可对接企业移动办公平台(BingoLink)

BingoLink 移动办公平台采用了【平台+轻应用】组合的模式,平台作为企业统一办公、交流的入口,开发商可基于 Cordova 和 Weex 框架的标准开发流程,开发轻应用并上架到 Link 应用市场。轻应用模式能保证各条业务线或部门拥有独立性,开发出具有自身特色的业务;再配合平台的管控能力,能够让不同的业务部门、不同的角色使用不同的应用。

如下图为某企业的移动办公平台,可在基础平台之上抽取业务模块,以轻应用的方式提供业务功能。

招式七:可对接持续交付平台(DevOps)

DevOps 是品高云应用支撑平台(BingoPaaS)中至关重要的一环,应用的持续集成和持续交付能力在 LinkIDE 中体现得淋漓尽致。前端人员开发完成的移动端轻应用可以在无需打包的情况下,通过 DevOps 平台交付到 Link 应用市场;开发出来的后端 API 接口,也能通过 DevOps 平台部署到 ECS 容器,同时发布到 API Gateway。

LinkIDE 实现的 “心法”

除了七大 “招式”,LinkIDE 能力的实现还少不了夯实的 “心法” 积累和修炼:

心法一:基于 Electron+Node.JS

LinkIDE 需要支持 Win 和 Mac 系统,因此我们选择了 Electron 框架作为运行时,著名的 IDE Atom、VSCode 等工具均使用该框架作为基础。在 Electron 中,使用 JS 可以方便地调用系统接口,实现文件操作、系统参数、注册表操作、本地存储等功能。因此,在 LinkIDE 中大量使用的文件操作,例如目录树构建、文件变化监控等,这些都可以通过 JS 来进行操作。

心法二:基于 AceEditor 代码编辑器

IDE 最基础的功能便是代码编辑能力,AceEditor 是一个基于 Web 实现了语法着色功能的代码编辑器,具有良好的代码提示、内容搜索、快捷键、代码片段、主题选择等功能。借助 Ace 的 Snippet Manager(代码片段),结合框架的 API 可以归纳出框架的 Snippet,帮助开发者快速编写代码。

当然,这是一个开放的能力, LinkIDE 允许开发者根据自己的使用习惯来自定义 Snippet,这些 Snippet 可基于  YAML 格式的文件进行编写(LinkIDE 自创的)。

心法三:可实现文件搜索&全文检索

IDE 的另一个核心功能就是 “搜索”,LinkIDE 中支持内容搜索、文件搜索和全文搜索等维度,其中,实现全文搜索基于 scandal、minimatch、git-utils 等 npm 模块的底层是通过 C/C++ 实现的。

为了让搜索更加快速,我们针对搜索结果做了缓存,让开发者能够实现 “秒搜索”。同时,在搜索中将会忽略产生的大量中间文件,例如忽略  node_modules 下的文件。

心法四:可实现 APK&IPA 自动化编译

APK&IPA 的生产,通常需要经过:配置替换、代码合并编译、签名、导出应用等过程。 为了方便开发者编译出 APK 和 IPA,减少对原生环境的依赖,LinkIDE 将原生 Android 和 iOS 工程进行抽象化,抽取了通用配置,以界面配置的形式呈现给开发者。整个过程中最关键的就是通过命令行驱动编译和签名,其中,Android 使用 gradle,iOS 使用 xcodebuild 等平台命令。

在每个程序包下面,我们内置了原生的编译工程(创建程序包的时候生成):

抽象出来的配置:

证书自助管理:

写在最后

面向前端开发人员,LinkIDE 致力于为企业应用开发者提供便捷的应用开发能力。未来,它将是一个开放式的、Low-Code(低代码)的、具有企业特色的全栈式开发者工具。