本文将会报告一个完整的跨端桌面运用 代码画板 的构建，会触及到全部软件开辟流程，从最先的设想、编码、到最后产物成型、包装等。

本文不仅仅是一篇手艺方面的专业文章，更会有许多产物方面的设想头脑和将手艺转换成临盆力的思索，我将连系我本身的运用场景完整的解说全部开辟流程，固然触及到设想方面的不一定具有广泛实用性，多半状况下都是我本身的一些喜好，我只体贴本身的需求。

同时本文只从团体上讲思绪，也会有平常的手艺细节和通例套路，有兴致的也能够直接去 github 上看 源码，文章会比较长，假如你只想晓得一些拿来即用的「干货」，也许这篇文章并非一个好的挑选

一、定位需求

事变的原由是如许的，因为我们内部会有一些培训集会。会常常现场演示一些代码片断。比方说我们讲到 React 的时刻会现场写一些组件，让大家能直观的感受到 React 的一些功用。

然则平常因为前提所所限，集会总会碰到一些不测。比方断网、投影分辨率低看不清笔墨等

早先我们用的是在线版的 codepen，然则认为并非那末好用。比方不能轻易的修正字体大小，必须要在连网的状况下才运用。别的它的 UI 设想不是很紧凑，平常我们展现代码的时刻都投影是寸土寸金的，应当有一个简约又不失功用的 UI 界面，能全屏展现…

因而我处理本身完成一个如许的轮子，那末也许的需求目标是有了：

1. 离线可用
2. 能够转变界面字体大小
3. 越发简约的 UI
4. …

二、团体设想

运用作风

代码画板处理的是 暂时性 的一些 演示代码 的需求，所以它的本质属性是一个拿来即用的东西，它不应当有更庞杂的功用，比方用户登录、代码片断的治理等。这些需求不是它要处理的。代码画板会供应一个简朴的导出成 HTML 文件的功用，能够轻易用户存储全部 HTML 文件。

既然是用来演示代码的，那末它的界面上应当只要两个东西，一个是 代码，一个就是 预览。像代码/掌握台切换的功用都做成 tab 的情势，平常状况不须要让他们展现出来。像 codepen 那样把一切的代码编辑器功用都展现出来我认为是不对的。

codepen 的界面给人认为异常庞杂，有许多功用点。固然我并非在指摘它，codepen 做为一个须要商业化运营的软件，势必会做的异常庞杂，如许才满足更多用户的需求。但是顺序员写软件则能够完整依据本身的主意来，哪怕这个运用只给本身一个人用呢。

桌面运用的设想

桌面运用的设想和 web 界面的设想照样有些纤细辨别的，一样的基于 electron 的运用，有的运用会让人认为很「原生」，有的则一眼就可以看出来是用 CSS 画的。我在设想代码画板的时刻也只管向原生接近，防止发生落差感。比方禁用鼠标手型图标、在按钮或许非可选元素上制止用户挑选：

cursor: default;
user-select: none

因为现实上用户在运用一款运用的时刻感性的要素影响占很大一部份，比方说有人不喜好 electron 能够就是因为看到过 electron 内里嵌一个完整的 web 页面的操纵，这就让人很恶感。然则这不是 electron 的题目，而是运用设想者的题目。

运用标识的设想

说实话运用 logo 设想我也是业余水平，然则聊胜于无。既然水平不可，那就只管设想的不丢脸就好了。能够参考一些好的设想。我用 sketch 画出 logo 的外形，sketch 有许多 macOS 的模块能够从网上下载下来，直接基于模板修正就可以够了。

代码画板主要的界面是支解开的两个面板，左侧是代码，右侧是预览。所以我就也许画了一个外形

这个 logo 有个题目就是线条过量，小尺寸的时刻看不清晰。这个题目我暂时先疏忽了，毕竟我还不是专业的，后续有好的创意能够再改

默许设置

代码画板也 不会有 设置界面，因为经常使用的设置都预定义好了，你不须要设置。顶多转变下代码字体的大小。运用编辑器的通用快速键 command++/- 就处理了，或许插进去三方库，直接运用编辑器的通用敕令快速键 command+p 调出。我们的思绪就是把庞杂的东西帮用户隐蔽在背景，观众只须要关注演员台上的一分钟，而没必要相辨认的细节。

快速键/可用性

因为代码画板的界面异常简朴，在一些微小的必要功用就得增加一些快速键。比方：切换 HTML/CSS/JS/Console 代码编辑器，我在每一个 tab 上加了数字标号，暗示它是有递次有快速键的，而且这个切换体式格局和 Chrome tab 切换的逻辑一致，运用 command+数字 就可以够完成，万一照样有人不会用的话，能够去看协助文档。内里有一切的快速键。

界面中心的支解条能够自定义拖动，双击重置中分界面

刚最先的时刻我把每一个 tab 页签都支解成零丁的面板，因为我认为这个能拖动自定义面板大小的交互实在是太爽了，不由得想去拖动它。然则厥后想一想，实在并没有必要，我们写代码时应当更专注于代码本身，假如只要两个面板，那末这个界面无论是认知照样运用起来就没有任何难题。

因为我们并不须要把一堆的功用的界面摔给用户，让他们本身去挑选。

三、手艺调研

完成掌握台

经由历程运用盛行的几款在线代码运转东西，我发明他们有一个配合的题目：掌握台很难用。没法像 Chrome Console 那样展现恣意范例的 JS 值。比方我想 log 一段嵌套的 JS 对象：

console.log({ a: { b: 1, c: { d: [1, 2, 3] } }})

大多半都展现成如许的：

[object Object] {
  a: [object Object] {
    b: 1
  }
}

Chrome 是如许的：

明显 Chrome 掌握台中更直观。所以我们须要在前面的基础上加一个需求，即：完成一个基于 DOM 的日记展现界面（无穷级联挑选）

日记界面应当有下面这些功用：

1. 展现恣意 JS 范例的数据
2. Primitive 范例的数据显现差别的色彩（number – 蓝色，string – 绿色）
3. Object 范例默许摺叠起来，点击按钮展现子级，属性过量须要展现缩略信息
4. 数组前应当有长度标记
5. 能展现 JS 运转时的报错 Error 信息

集成现代化的前端框事情流

现代化的前端写页面一定不是 HTML/CSS/JS 一把梭了，最少应当有 Sass/Babel 的支撑吧。

Sass 嵌套能让你少写许多挑选器，固然 Less 也能够，然则在我们的这个运用内里辨别不大，平常来讲暂时性的写一些代码很少会用到它们的细节功用。有 变量 和 挑选器 嵌套就够了

Babel 重如果处理了写 React 的题目，不必再装置一大堆的构建东西了，直接运用 UMD 的 React/ReactDOM 就可以够了，而且 electron 内嵌的 chromium 也支撑了 es6 的 class 写法，现实上 Babel 主要的目标照样用来转译 JSX

注重这里是有一个我认为是 刚性 的需求，比方暂时遽然有个主意，或许想考证一段代码的话，平常状况是运用你的编辑器，新建 demo.html/demo.css/demo.js 等这些操纵。然则这些行动太浪费时候了。有了代码画板今后，直接打运用就可以够最先 coding 了，真正能做到开箱即用。

进步顺序的扩大性

我们在写 demo 页面时平常是要援用许多第三方类库的，比方：Bootstrp/jQuery 等。我愿望有一种要领能够轻易的援用到这些库，直接把库文件的 link/script 标签插进去到代码画板的 HTML 中，然则前端框架真的是太多了，又不能一个个去扣来写死到页面，就算是写死了跟着框架版本的晋级，能够就没法满足我们的需求。

之前写页面时常常会用到 bootcdn，无意中发明它供应了相干 API，能够直接拿来运用。接下来就得想方法让用户经由历程界面挑选即可。

这个 API 有三层数据结构：库 - 版本 - 资本链接。这个功用要用界面来完成一定会异常痴肥，界面上能够会放许多按钮。这就违犯了「更简约」的需求目标。

这时候就得参考下我们常常运用的一些软件是怎样处理 简约性 和 功用性 需求之间的抵牾题目标，我比较喜好 Sublime Text 的一些界面设想，Command Palette 是我常常运用的，所以我决议再模仿一个 Command Palette 来完成插进去第三方库的需求。而且主要的是这个 Command Palette 并不一定只用来完成这一个功用，或许后期会有一些别的功用须要增加，那这个 Command Palette 也是个很好的进口。

运用 electron 完成桌面运用

完成离线可用许多要领，比方运用 PWA 手艺。然则 PWA 并不能给我带来一种原生运用的那种牢靠感，相反 electron 恰好能够处理我的挂念。同时它能够把你的运用打包成各个平台（macOS/Window/Linux）的原生运用。唯一的瑕玷就是装置包确切很大，平常来讲一个 electron 运用 装置完 最少要 100 多兆，不过我认为还能接收，毕竟硬盘存储如今已很低价了。

有人能够对 electron 有抗拒，认为 electron 运用太巨大、占体系资本什么的，不过我们做的这个运用并不须要常驻体系，暂时性的运用一下，用完就封闭，平常写临盆环境的代码一定照样要换回 编辑器/IDE 的。同时因为 electron 降低了写桌面运用的门坎，确切有许多人把一个完整的在线的网页直接嵌进去，这也是有题目标。

electron 另有一个优点，因为它完整基于 HTML/CSS/JS 来完成 UI(能够运用 Chrome only 的一些新功用)，那我们理论上能够在做桌面运用时顺手把 web 运用也做了。这就可以够同时支撑各个体系下的原生运用，而且有 web 在线版本。假如你不愿意运用原生运用，直接登录 web.code-sketch.com 运用在线版也没是一种挑选。如许就使得我们的运用具有真正的 跨端 才能。

因为我们团队都运用了 macbook，所以我优先支撑 macOS 的开辟，别的 macOS Mojave 的体系级别的暗色主题我也比较喜好，恰好完成支撑 mojave 暗色主题这个需求也做上。

三、框架的挑选

大方向肯定了，像框架挑选这个就简朴了，基于 electron 的运用，须要你区离开 render/main process 来挑选。

Render process

衬着历程 就是 electron 中界面的完成部份 ，平常来讲就是一个 webview，选本身喜好的框架即可。我运用 React 来完成界面。款式方面就不再运用框架了，因为我们的界面原则上没有庞杂的元素，直接手写 CSS，300 行内基本上就可以够处理题目。能够有人会认为这不能够，现实状况是当你写款式只跑在 Chrome 内里的时刻那认为完整爽到飞起，CSS variable/flex/grid/calc/vh/rem 什么的都能够拿来用，完成一个功用的本钱就降低了许多。

我运用 Codemirror 来做为主界面的代码编辑器，Monaco 也是一个好挑选，然则它有点过于巨大了，而且假如想要自定义功用得本身写许多完成

主界面上的支解组件，运用了 React-split。

Main process

主历程 就是 electron 运用顺序的历程，主要的辨别在于主历程中能够挪用一些与原生操纵体系交互的 API，比方对话框、体系作风主题等。而且有 node 的运转时，能够援用 NPM 包。固然衬着历程也能够有 node 支撑，然则我发起衬着历程中就只放一些纯前端的逻辑，如许的话轻易后期把运用星散成 web 版

因为我们要集成 Sass 编译功用，假如你也经历过 node-sass 的种种题目，那就应当坚决挑选 dart-sass — 运用 dart 完成，编译成了原生的 JS，没有依靠题目。dart-sass 我放在了 main process 中，因为我试过放在 render process 中会有种种报错。假如 web 端要完成这个功用就须要别的的处理方法了，比方做成一个 http 效劳，让 web 调 http 效劳。

Babel 的话我是放在了 衬着历程 中以 script 标签的体式格局挪用，如许纵然在 web 端 Babel 编译也是可用的。

总之假如你运用 electron 构建运用而且引入的第三方 NPM 包能够 支撑 运转在客户端（浏览器）上，那就只管把包放在衬着历程内里。

构建东西

我运用 Parcel 来构建 React 而不是 Create React App。后者用来写个小运用还能够，轻微大一点的，须要定制化一些东西你就得 eject 出来一大堆 webpack 设置文件，即便是我已用 webpack 开辟过几个项目了，然则说实话我照样没用会 webpack。写 webpack 设置的时候充足我本身写 npm script 来满足本身的需求了。

原生运用打

运用 electron-builder 来打包到平台原生运用，而且假如你有 Apple 开辟者账号的话运用还能够提交到 AppStore 上去。

我现在的打包参数是这么设置的：

{
    "build": {
        "productName": "Code Sketch",
        "extends": null,
        "directories": { "output": "release" },
        "files": [
            "icon.icns",
            "main.js",
            "src/*.js",
            "一切须要的文件",
            "package.json",
            "node_modules/@babel",
            "node_modules/sass"
        ],
        "mac": {
            "icon": "icon.icns",
            "category": "public.app-category.productivity",
            "target": [ "dmg" ]
        }
    }
}

在你的 package.json 中增加 build 字段，productName, directories 这些按本身须要变动即可

四、星散开辟环境

区离开开辟环境

代码画板项目开过历程当中触及两个症结环境

1. Parcel 构建环境（衬着历程）：Parcel 能够为你供应一些如今 JS 的转译事情，因而你能够放心运用比方 ES6 的 JS 新特征
2. Node.JS 运转环境（主历程+衬着历程）：这个取决于你的 electron 版本中集成的是 node 版本，比方：Node 10 中就没有 ES Module，这意味着你假如要在 electron 主历程 是没法辨认 import 如许的语句的，然则衬着历程因为你运用了 Parcel 编译，则无需斟酌

这里温馨提醒下：想要做到 electron 中的 衬着历程与主历程之间同享 JS 代码是异常难题的。就算是有方法也会迥殊的别扭，我的发起是只管星散这两个历程中的代码，主历程主要做一些体系级别的 API 挪用、事宜分发等，营业逻辑只管放在衬着历程中去做

假如非要同享，那发起零丁做成一个 NPM 包离别做为主历程运转时依靠，和衬着历程的 Parcel 编译依靠，唯一的瑕玷就是现实上同享的代码会有两份。

衬着历程中挪用 node API 能够会和 Parcel 打包东西争执，平常在挪用比方文件模块时，能够加上 window.require(‘fs’) 如许就可以够兼容两个环境：

get ipc() {
    if (window.require) {
        return window.require('electron').ipcRenderer
    } else {
        return { on() {}, send() {}, sendToHost() {} }
    }
}
this.ipc.send('event', data)

如许的话你在浏览器端调试也不会发生报错。平常状况下，发起当你用衬着历程中的 JS 援用（require）包的时刻都加上 window. 前缀就可以够了。因为衬着历程中 window 是全局变量，挪用 require 和挪用 window.require 是等价的

开辟流程

平常在测试的时刻运用会挪用一些 electron 内置的体系级别 API，这部份挪用平常须要启动 electron，然则有时刻只要衬着历程中 UI 界面上的修改，就不必再启动 electron 了，直接在浏览器内里测试即可。运用 Parcel 运转一个当地的效劳，如许就可以够在浏览器内里调试页面。全部开辟历程须要两个敕令（NPM Script）：

启动 Parcel 编译效劳器

"scripts": {
    "start": "./node_modules/.bin/parcel index.html -p 2044"
}

调试 electron 原生功用，注重设置 ELECTRON_START_URL

"scripts": {
    "dev": "ELECTRON_START_URL=http://localhost:2044 yarn electron",
}

手艺难点

全部运用只要两个功用是须要我们本身写代码完成的：日记掌握台，Sublime 敕令行。我们离别来剖析下这两个模块的难点。

日记掌握台 的难点在于，我们须要打印恣意范例的 JS 值。假如你对 JS 相识比较多的话自然会想到在 JS 中一切的东西都是 对象，即 Object，那末现实受骗你想打印一个变量的时刻，实在你只要把全部 Object 递归的遍历出来，然后做成一个无穷级的下拉菜单就可以够了。看起来也许想下面如许：

Sublime 敕令行 现实上开辟起来照样比较简朴的，运用 React 很简朴就完成了功用，比较贫苦的是挪用 bootcdn 的接口，历程当中我发明接口返回数据量照样挺大的，有必要做上一层 localStorage 缓存，加速二次翻开速度。

但是在运用的历程当中你会发明当我想插进去一个前端库须要许多操纵，因为有 三级挑选：库-版本-CDN 链接。虽然这个流程处理了 一切用户 的运用题目，然则却损害了 大部份 用户的体验。这个时刻插进去一个经常使用库的本钱就很高了，所以我们就要加上一些快速进口，来完成一键插进去盛行框架。

我们写代码的思绪是满足一切用户的运用需求，然则一个好产物的思绪是先满足大多半用户（80%）的通例需求，再让其他的用户（20%）能够有挑选

另有一个题目比较典范就是 React 这类框架在衬着大列表而且举行过滤（症结字查询）时机能的题目。注重这个机能题目 并非 引入框架发生的，真正的原因是当你衬着的 HTML 节点数以千计的时刻，批量操纵 DOM 会使得 DOM Render 迥殊慢。

所以说当我们碰到机能题目标时刻应当去查找题目标泉源，而不是停留在框架运用上，现实上在 DOM 操纵这个层面来讲 jQuery 供应了更多的机能优化，比方本身的缓存体系，以致于当你在运用的时刻很难发明有机能题目。然则在类 React 框架中它们框架本身的重点并不在于处理你运用的机能题目。

相似我们上面讲到的，现实上 jQuery 协助你屏障了许多舞台背地的东西，以致于你能够不必费心手艺细节，你以至能够把 jQuery 当作一个 产物 来运用，而类 React 框架你却要亲力亲为的用他来设想你的代码。

话题再转回机能题目。这时候刻须要我们去完成一个相似于 react-window  的功用，让列表元素依据转动按需加载。这多是一种通用的处理大列表加载的计划，然则我的处理要领更粗犷，因为我们的下拉过滤功用运用时用户只关注 最好的婚配项 即可，背面婚配水平不高的项能够直接限定数目裁剪就好了嘛。很少有用户会一向转动到下面去查找某个选项，假如有，那就申明我们这个婚配做的有题目。

slice() {
    const idx = (this.props.itemsPerPage || 50) * (this.state.activeFrame + 1)
    return this.props.items.slice(0, idx)
}

全部婚配挑选的状况也许是如许的：

this.state = {
    // 当前第N步挑选
    step: 0,
    // 当前步骤数据
    items: [],
    // 是不是显现
    active: false,
    // 当前选中项
    current: {},
    // 过滤症结字
    keyword: ''
}

这个 items 是当前步骤的一切数据，现实上我们这个组件是支撑无穷级的扩大的，那末我们经由历程组件的 props 传入一切层级的数据，然后耐久存储在内存中。这个 一切层级的数据 是数据结构层面的，现实上它多是经由历程异步接口猎取的。

再来看看我们组件供应的一切 props：

static defaultProps = {
    step: 0,
    active: false,
    data: [[]],    // 无穷层级数据 [[], [], [], ...]
    // 数据的主键，用于钩子函数返回用户挑选的结果集
    pk: 'id',

    autoFocus: true,
    activeCls: 'active',
    delay: 300,
    defaultSelected: 0,
    placeholder: '',
    async: false,
    alias: [],
    done: () => {}
}

这些数据都能够经由历程组件的 props 传入，这就意味着我们的这个组件才是真正的组件，他人也能够运用如许的功用，而他们并不必在乎内里的细节，运用者只须要做好相似挪用本身接口的这类营业逻辑。

组件的挪用也许是如许的：

<CommandPalette step={0}
    key="CommandPalette"
    async={injectData}
    done={this.done.bind(this)}
    alias={alias}
    aliasClick={this.aliasClick.bind(this)}
    data={[ [], [], [] ]}

async 这个 props 现实上是一个异步挪用的钩子要领，它会回传给你组件受骗前操纵的相干数据状况，经由历程这些数据运用者就可以够按本身的需求在差别的步骤上挪用差别的要领

export const injectData = (step, item, results, cb) => {
    const API = 'https://api.bootcdn.cn/libraries'

    if (step === 0) {
        fetchData(`${API}.min.json`)
            .then(processLibraryData)
            .then(cb)
    } else if (step === 1) {
        // ...
    } else if (step === 2) {
        // ...
    }
}

别的关于 React 这里安利下本身翻译过的一个教程：React 形式，内里讲到 18 种短小精悍的 React 形式案例，异常简朴易懂。

另有一个小窍门，我们在适配暗色主题时，传统的要领是直接写两套主题 CSS 代码，现实上我们要运用 CSS Variable 的话完整没必要天生两套了，背景色，字体都做成 CSS 变量，切换的时刻只须要动态往页面插进去更新过的 CSS 变量值即可

体系的一些参数想直接传给衬着历程也是比较贫苦的，我的做法是直接从主历程中的 loadUrl 要领上以 queryString 的体式格局传到衬着页面的 URL 上

const query = {
    theme: osTheme,
    app_path: app.getAppPath(),
    home_dir: app.getPath('home')
}

mainWindow.loadURL(process.env.ELECTRON_START_URL ? url.format({
    slashes: true,
    protocol: 'http:',
    hostname: 'localhost',
    port: 2044,
    query
}) : url.format({
    slashes: true,
    protocol: 'file:',
    pathname: path.resolve(app.getAppPath(), './dist/index.html'),
    query
}))

像顺序运转时的一些参数（比方顺序的根目录）也能够这么动态传过去，而且另有一个优点就是你以至能够在衬着历程中测试与这些参数相干的功用。

五、宣扬

demo 视频录制

我会把终究一切功用的运用要领录制成一个视频，万一有人不不想下载你的软件，只是要相识一下，这就是个很好的要领。我同时上传到了 Youtube 和 bilibili 这两个平台，别的的都有广告就没必要了

运用 Quicktime Player 即可，录制完运用 iMovie 转码成两倍速度的 mp4。假如你有兴致还能够加上一段音乐什么的，让视频看起来更灵动

域名请求

域名是一个能让用户记着你产物的要领，假如你做的是一个成型的产物，那就一定要请求个域名。

我总是有如许的体验，有的时刻看到一个异常不错的产物但因为当时没需求就疏忽了，想起来或许倏忽有需求的时刻缺记不起来名字叫什么了。

事实上代码画板最最先我给他起的名字是 code playground，这个更直观，然则名字太长，而且想用到的一些域名呀、Github 名、NPM 包都被注册了。

想来想去就换成了 code sketch，这和相符我们的设想初志，即：一边是代码，一边是结果/草图

域名请求我平常会上 Godaddy，不必备案，.com 域名一年 ¥65.00，然后 DNS 效劳器转到了 cloudflare，后续域名也会直接转到 cloudflare。因为听说今后在 cloudflare 上续费域名最廉价

网站搭建

宣扬网站直接放在 github pages 上，做个自定义域即可，实在是太轻易了。而且另有 SSL 支撑，Github 真的是业界良知

web 版的代码画板，因为我们把衬着历程中的代码星散开辟，所以直接把 parcel 打包出来的静态文件也做成 github pages 就可以够了，爽歪歪，网站就即是一分钱不花了。后续做一些 web 版的加强功用时，能够做成前后端星散的 http 效劳，这就是后话了

到场 Google analytics 代码

GA 能够让你相识网站的用户散布状况，清晰的晓得网站接见的波动。比方说你把本身的链接放到某个网站上分享了，GA 内里就可以看出来一切的引荐泉源和波动，关于运营来讲是异常有必要的

广告语

这个我还真想了好长时候，基于我关于代码画板的定义，我认为它应当是一个我们有一个主意的时刻须要快速去完成一个 demo 的处所，想来想去就定了一段看起来文邹邹的话，虽然听名字基础不晓得它是干啥用的，然则没紧要，顺序员写东西就是要有特性，因为我的受众只要本身。

First place where the code was written…

一个你最初写代码的处所…

六、汇总运用到的库与东西

麻雀虽小，五脏俱全。我们来看下代码画板统共用到了若干东西：

• 框架/库

  • electronjs
  • react
  • babeljs

• NPM 模块

  • codemirror 及其插件
  • react-split
  • sublime-command-palette

• 打包/东西

  • parceljs
  • electron-builder
  • bootcdn

• 设想与素材

  • sketch
  • Free AppIcon Generator
  • Inconsolata 字体
  • Gallary CSS 纯 CSS 完成的核心图，用于宣扬页展现

七、结语总结

实事上我本身的开辟这个运用的时刻并没有严厉依据这篇文章的递次实行，而是想到一些完成一些，能够一个功用完成了厥后认为不好又干掉了，是不停的弃取、提炼的结果。

开辟中我也不停的问本身这个功用是不是有必要，假如无足轻重那是不是能够去掉，如许才使得用户越发关注于代码本身。

全部开辟历程当中本身完成的功用模块并不多，只要掌握台、敕令行窗口是本身完成的，别的的功用基本上都是靠社区现有的东西库来完成的，从这一点来讲前端手艺的生态照样挺好的。这使妥当我从团体上构想一个产物时我没必要在乎那些细节，虽然历程当中照样能认为到前端东西/库的分裂感，然则团体而言照样向好的，毕竟东西关于开辟者只是一种挑选的。

八、援用

1. https://github.com/keelii/code-sketch
2. http://www.tweaknow.com/appicongenerator.php
3. http://benschwarz.github.io/gallery-css/
4. https://addyosmani.com/blog/react-window/
5. https://github.com/keelii/reactpatterns.cn

原文：https://mp.weixin.qq.com/s/Lbnx0aYdRa5iDhOkCgEWjg