[前端工坊]开发一款IDE就像做道菜一样简单

阅读 812
收藏 46
2017-09-13
原文链接:mp.weixin.qq.com

作者:  京东金融-移动研发部-前端开发工程师  刘麒麟

前 言

记得以前有人和笔者说过这么一个观点,“前端工程化的下一站是一个团队级的IDE”。当时不明觉厉,现在细思极恐。比如,我们能把开发用的脚手架,模版工程打包进去做到团队技术栈统一。我们能把上线系统,测试bug反馈系统集成进去实现全方位服务。等等。后来会发现,一个团队级的IDE是能真正把大家的工作全部打包进去。这是一个好大好大的话题。

但是今天笔者不准备扯画饼的东西,还是来点实在的。说说如何开发一款自己团队的IDE,为此笔者还起了一个响亮的名字 - “开发一款IDE就像做道菜一样简单”。

正 文

我把做菜分成“菜系”、“主材”、“烹饪”和“摆盘”四大环节,关于IDE的开发,也打算从这四个流程节点切入,来讲讲每个环节的故事。

菜系 - 功能点收集

"定菜系"是做菜的第一步,我们首先要规划好我们这个IDE需要具备哪些能力,也就是说,我们想做的是哪一道“菜”。那我们团队为例,最初就是为了搞一个方便开发RN三端应用并能集成模拟和打包功能的一款IDE。因此笔者在开发的时候大致列举了如下功能点:

  • 代码编辑系统 (包括加载目录树、一个编辑器来承载代码的增删改查)

  • 模拟器 (在osx下需要调用苹果设备的模拟器打开app,渲染开发的页面)

  • 编译(编译RN代码成开发或者发布版本)

  • 控制台 (观察代码编译日志和模拟器运行日志等)

关于功能点收集这块因团队而异,每个团队开发IDE的出发点不一样,所以前期需求一定也不同。

选材 - 框架和仓库选型

选材”这是一个至关重要的环节,我们需要找到实现一款IDE所需要的所有技术承载。

首先便是框架

我们是前端工程师,js是我们的主武器。要开发类似于IDE这样的PC原生应用,那么第一个技术点就是要找到一款跨平台的壳工程。最终我们确定选用基 Eletron https://electron.atom.io/  的壳工程来开发。关于electron的详细内容,读者可以看看其官网。歪果仁写的官网你懂的,还是相当通俗好懂易上手的。

下图就简单的列举一下此框架的优势:

分工

工程项目涉及到用户的可视化操作界面、文件读写操作、系统应用调用、网络调用等。electron提供了主进程和render进程的通用的规划建议,但是对于底层操作的所有逻辑不要全部往主进程里面扔。因为electron框架是有nodejs运行环境的,所以,我们可以起新的node子进程去执行一些独立的大功能。

对于我们的项目来说,我是这么分工的:

工程

开发分render进程的web应用,app主进程以及其它子进程的功能应用。

因此:

  • render进程,即web应用,使用 react+redux+middleware 的框架,以及webpack脚手架构建工程。

  • app主进程用electron 命令起启动工程

  • node子进程用nodemon启服务

这里推荐一些无论哪种“菜系”的IDE都会用到的一些render进程里面的基础组件:

  • codemirror  https://github.com/codemirror/CodeMirror   web IDE编辑器组件,支持个类型代码高亮

  • react-ui-tree https://github.com/pqx/react-ui-tree   web文件树组件

  • UI框架material-u http://www.material-ui.com/#/ web ui框架

    烹饪” - 逻辑研发过程中遇到的一些技术点

“烹饪”环节到了,有了前期好的选材设计,到了研发环节也就是水到渠成的事儿了,在这个环节,主要就是集中解决一些实现上的难点以及注意一些细节上的技巧。下面就列举一下笔者那款IDE在开发过程中的一些经验。其中共性的东西应该就是所谓的通信问题了。

通信问题

上述架构设计各种不同的通信机制

  • 主进程app和render进程之间的通信:Electron自有通信机制分别封装在ipcRender和ipcMain中,相关细节可以查看官网文档。

  • render进程中,ipcRender监听回调和redux的reducer绑定:即在createStore之后增加绑定流程。具体关键代码如下:

  • 主进程和其他子进程之间的通信:和普通nodejs进程间通信是一样的。

文件树过大

在运行是常常会遇到文件树过大的问题,比如在load文件夹的时候往往会带有node_module子文件夹。这样如果直接load就会使得IDE崩溃,因此需要额外处理。

  • 分级加载,用户的每次操作只新增一级文件夹的load和渲染操作。

  • 每级文件夹设置最大渲染文件数。

“摆盘” - 打包和发布

摆盘”是最终环节,也是得到最终“菜品”的时刻了。这个环节可讲的不太多,也就是涉及两块,一个是打包,一个是加密。

  • 打包 : electron 自带打包的方法。官方推荐了好几种,还有一种是带安装程序的。这里推荐自行调用npm库electron-packager https://www.npmjs.com/package/electron-packager  来进行打包。api里面有各种配置,基本满足你所有的需求。

  • 加密,当然是asar啰,这个没什么技巧,看看官网就行了,一个命令的事儿啦。

结束语

如果说全文是个论述题的话,笔者在这里还得加一句:“综上所述,开发一款IDE就像做道菜一样简单”。以上只是开发出来一款IDE的一个入门而已,意在激发一些好奇和探索的种子,读者有心都可以去尝试尝试。写出一款自己的IDE打上自己的tag也是一件蛮有趣的事情。而当好奇尝试的成果,经过反复打磨,逐渐变成一件工程化的产品的时候,那它更会变成一件很有意义的事情。

..........

苹果耍[流氓]啦~要对赞赏收30%过路费

以下是IOS用户专用赞赏通道~

感谢您的支持,我们会继续努力!

..........

评论
说说你的看法