作者
周琪力
京东技术中台前端集成研发组攻城狮，主要负责前端系统的架构、FEM监控系统的设计与开发。
本文将会讲述一个完整的跨端桌面应用代码画板的构建，会涉及到整个软件开发流程，从开始的设计、编码、到最后产品成型、包装等。
本文不仅仅是一篇技术方面的专业文章，更会有很多产品方面的设计思想和将技术转换成生产力的思考，我将结合我自己的使用场景完全的讲解整个开发流程，当然涉及到设计方面的不一定具有普遍实用性，多数情况下都是我自己的一些喜好，我只关心自己的需求。
同时本文只从整体上讲思路，也会有个别的技术细节和常规套路，有兴趣的也可以直接去github上看源码，文章会比较长，如果你只想知道一些拿来即用的「干货」，或许这篇文章并不是一个好的选择。
一.定位需求
事情的起因是这样的，因为我们内部会有一些培训会议。会经常现场演示一些代码片段。比如说我们讲到React的时候会现场写一些组件，让大家能直观的感受到React的一些功能。
但是通常由于条件所所限，会议总会遇到一些意外。比如断网、投影分辨率低看不清文字等。
起初我们用的是在线版的codepen，但是感觉并不是那么好用。比如不能方便的修改字体大小，必须要在连网的情况下才能使用。另外它的UI设计不是很紧凑，通常我们展示代码的时候都投影是寸土寸金的，应该有一个简洁又不失功能的UI界面，能全屏展示…
于是我解决自己实现一个这样的轮子，那么大概的需求目标是有了：
离线可用
可以改变界面字体大小
更加简洁的UI
…
二.整体设计
应用风格
代码画板解决的是临时性的一些演示代码的需求，所以它的本质属性是一个拿来即用的工具，它不应该有更复杂的功能，比如用户登录、代码片段的管理等。这些需求不是它要解决的。代码画板会提供一个简单的导出成HTML文件的功能，可以方便用户存储整个HTML文件。
既然是用来演示代码的，那么它的界面上应该只有两个东西，一个是代码，一个就是预览。像代码/控制台切换的功能都做成tab的形式，正常情况不需要让他们展示出来。像codepen那样把所有的代码编辑器功能都展示出来我认为是不对的。
codepen的界面给人感觉非常复杂，有很多功能点。当然我并不是在批评它，codepen做为一个需要商业化运营的软件，势必会做的非常复杂，这样才能满足更多用户的需求。然而程序员写软件则可以完全按照自己的想法来，哪怕这个应用只给自己一个人用呢。
桌面应用的设计
桌面应用的设计和web界面的设计还是有些细微区别的，同样的基于electron的应用，有的应用会让人感觉很「原生」，有的则一眼就能看出来是用CSS画的。我在设计代码画板的时候也尽量向原生靠近，避免产生落差感。比如禁用鼠标手型图标、在按钮或者非可选元素上禁止用户选择：
cursor
efault;user-select:none
因为实际上用户在使用一款应用的时候感性的因素影响占很大一部分，比如说有人不喜欢electron可能就是因为看到过electron里面嵌一个完整的web页面的操作，这就让人很反感。但是这不是electron的问题，而是应用设计者的问题。
应用标识的设计
说实话应用logo设计我也是业余水平，但是聊胜于无。既然水平不行，那就尽量设计的不难看就行了。可以参考一些好的设计。我用sketch画出logo的外形，sketch有很多macOS的模块可以从网上下载下来，直接基于模板修改就可以了。
代码画板主要的界面是分割开的两个面板，左边是代码，右边是预览。所以我就大概画了一个形状
这个logo有个问题就是线条过多，小尺寸的时候看不清楚。这个问题我暂时先忽略了，毕竟我还不是专业的，后续有好的创意可以再改
默认设置
代码画板也不会有设置界面，因为常用的设置都预定义好了，你不需要配置。顶多改变下代码字体的大小。使用编辑器的通用快捷键
