electron 开发经验之谈系列-技术栈简介及选择
技术栈 electron: 跨平台桌面开发 react: 视图层框架 typescript: 强类型的 js lerna: 前端 monorepo 管理工具 yarn: 包管理器，workspace 与 lerna 搭配非常好 create-react-app: react 官方出品的 react 脚手架生成器，社区和活跃度都不是其它工具可比的 其他依赖库 参考: 前端资源管理 rollup
JavaScript 中的批处理和缓存
场景最近在生产环境遇到了下面这样一个场景：后台在字典表中存储了一些之前需要前后端共同维护的枚举值，并提供根据 type/id 获取字典的 API。所以在渲染列表的时候，有很多列表的字段直接就是字典的 id，而没有经过后台的数据拼装。 也是吾辈之前写的文章 react 通用列表组件封装 中的那个通用列表在实际使用时遇到的问题之一。 起初，吾辈解决问题的流程如下 确定字典字段，添加转换后的对象类
React 根据状态动态化功能的一些思考
场景 之前吾辈也在 SF 上询问过 类似的问题。 目前在实际业务中遇到了两种情况 程序的功能在分发给不同组织使用的时候有所差异，即不同的组织都会存在一些定制化的功能。最常见的差异例如 表单的字段存在差异 列表展示的字段与相关操作有所不同 组件内的代码在某个权限下才会执行，但是又依赖于组件内的一些状态，如何将这些代码分割到不同的地方（例如不同的文件）便于之后的维护。 一些按钮在指定权限下存在
在传统项目中使用 babel 编译 ES6
场景 曾经吾辈以为 ES6 早已推广开来，然而事实上远比想象中更加复杂。传统后台的项目就是要兼容性，兼容 2 年前的浏览器，没有 babel，全程 jQuery 一把梭做到底。 之前的项目基本上都是前后端分离的模式，最近新公司的项目却是使用的传统的模板视图的模式。所以，一些东西发生了变化 thymeleaf 模板里面直接有 Java 的代码，在服务端直接编译 html 代码而非是纯粹的 API
blog 评论系统推荐
场景长期以来，吾辈通过 RSS 阅读各种 blog，想要评论时却发现很麻烦，所以来推荐一下 blog 的评论系统。 评论系统大概有如下几种形式 基于第三方评论服务 输入名字邮箱即可发表评论 注入博客用户才可以发布评论（没怎么用过，不予置评） 优缺点对比基于第三方评论服务这里选择的是吾辈目前正在使用的 disqus，而评论选择是某位博主的评论系统。 两者截图如下 对比项 基于第三方评论服
electron 开发经验之谈系列-使用 electron-builder 打包
前言在 基本项目搭建 中，我们已经能够启动一个 electron 应用程序了（开发环境），现在来看如何将之打包为二进制程序便于分发给最终用户。 依赖 electron-builder: 打包的主要工具库，负责这个 electron 的跨平台打包工作 事实上，还有一些其它的打包工具，但目前还没有比它更好的，参考: https://npmcompare.com/compare/electron-bui
electron 开发经验之谈系列-基本项目搭建
环境 Windows 10 NodeJS 12 WebStorm VSCode（编写 markdown 文档） 创建 lerna 项目创建目录 electron_example，然后使用 yarn 初始化 12mkdir electron_example && cd electron_exampleyarn init -y 修改 package.json 123456789{
electron 开发经验之谈系列-开发环境优化
使用 react devtool 插件调试 前言 虽然绝大多数时候，我们都可以也应该在浏览器调试渲染层的功能，但确实也会有需要在 electron 程序中调试的需求，这里就说明一下 electron 如何安装 chrome 插件 react devtool 调试项目。 核心依赖: electron-devtools-installer 步骤 1、安装依赖 cd 到 apps/main 目录
electron 开发经验之谈系列-自定义窗口顶栏
场景在很多生产项目中，我们希望自定义 electron 窗口顶栏，因为它确实非常简陋。 步骤在渲染层实现自定义顶栏实际上，核心的代码就是添加一个为顶栏的元素添加 css 样式。在 electron 环境，有 -webkit-app-region: drag; 属性的元素可以拖动整个窗口。 123456.toolbar { -webkit-app-region: drag;}.toolbar &g
electron 开发经验之谈系列-自动更新
场景由于生产应用希望在有新版本时，自动为用户推送更新，所以此处便写一下如何让 electron 程序自动更新。 安装 npm 包1cd apps/main/ && yarn add electron-updater 配置 electron-builder 参考: https://www.electron.build/auto-update 其实本质上就是配置一个网络可以访问到的