蒲公英 · JELLY技术周刊 Vol.05: Rust & Electron 的高性能实践 -- Finda

登高远眺

天高地迥,觉宇宙之无穷

基础技术

使用 JavaScript 框架的代价

作者从 JavaScript 下载时间、解析时间、执行时间、内存占用四个角度评测了 jQuery、Angular、React、Vue 四个框架,最终得出结论:「框架不值得」,应该选择原生 JavaScript 或选择超轻量级框架或在服务端渲染。此文可配合蒲公英技术周刊第三期的 Svelte 安利文一同复用。

Node.js 14 正式版发布

作为下一个 LTS 版本的 Node.js 14 终于发布了。Node.js 把 V8 升级到了 V8(8.1) 版本,原生支持了热门语法 Optional Chaining 和 Nullish Coalescing,并且移除了使用 ESM Modules 时的警告。同时开启了实验性的 AsyncStorage 支持和 WebAssembly System Interface(WASI) 支持。

前端框架

ali-react-table: 高性能 React 表格组件

在前端的开发中,表格一直都是最复杂的组件之一,由于要提供丰富的功能支持,许多的表格组件一开始并没有考虑到性能优化的问题,导致在表格数据量过大的情况下,表格会遇到严重的性能瓶颈问题。而文章中介绍的ali-react-table表格组件,作者在一开始开发时就考虑到了性能的问题,并通过虚拟滚动的方法解决了表格数据量较大时的性能问题,同时该表格组件没有绑定特定的React组件库,仅依赖了一些工具类库,配合 webpack/rollup 的 tree shaking 特性,引入 ali-react-table 所产生的额外 JS 体积非常有限,是一款高性能、高可定制性的 React 表格,方便上层进行封装和定制并接入到不同的系统和业务中。

桌面开发

用 Rust 构建一个快速的 Electron 应用

Electron 是当前相当流行的跨平台桌面应用构建框架。在褒奖之余,Electron 也有饱受诟病的地方,性能可能是被提及次数最多的一点。不同于常规的优化手段,Kevin J.Lynagh 使用 Rust 构建了核心功能的 node 模块,使 Finda 在性能上有着不俗的表现。这篇文章介绍了 Finda 软件是如何做到在 16ms 内完成每个用户交互的。

图形编程

实现动效太难了?试试 Material Design

使用过谷歌产品的很难不注意到其 UI 交互上的流畅、舒适与统一,这源于谷歌有着一套完整的 UI 动效设计理论体系以及规范。设计团队基于迪士尼动画 12 原则的理论规范经过多年的探索与实践,演化出了一套灵感来源为“量子纸”(Quantum Paper)的动效体系——Material Design。基于这套动效体系,谷歌推出了对应的 Android、Flutter 版 Material 动效系统,方便开发进行 UI 动效的开发。文中还推荐了一款可视化调整动效的工具,由谷歌设计师操刀,本文包含了多篇扩展阅读文章,适合设计与开发更为全面地了解谷歌 UI 动效体系的概念。

人工智能

一图梳理吊打一切的 YOLOv4

这几天最大的新闻就是YOLO v4的发布,YOLO是一个快速而高效的目标检测器,而 v4 的发布象征着他在该领域的地位是其他算法无法企及的。作者根据 YOLOv4 的论文,帮助我们梳理了v4 的整体结构和创新点,帮助我们更快地认识 YOLOv4 。

YOLOv4 Keras实现版

YOLOv4 原版本是基于 Darknet 实现的,该仓库作者仅在 YOLOv4 发布的第二天就实现了其 keras 版本,造福万千 TF 党。

沧海拾遗

沧海拾遗,积跬步以至千里

本期小助手还为大家带来了两篇关于 electron 的项目经验之作,如果你也对跨平台桌面开发感兴趣,会从中收获不少~

feWorkflow - 桌面应用工程化

使用react, redux, immutable框架做ui开发,仍然基于运行gulpfile的方案,这样可以使每个使用自己团队的gulp工作流快速接入和自由调整。

性能优化: Electron 与 Vue 结合的 Excel 数据清洗工具

XCel 是一款基于用研组需求的 Excel 数据过滤工具,本文将分享 Electron、Vue 等相关涉及技术的基本知识和性能优化经验。这也许是Jc的2016年最后一篇文章,且看且不珍惜。

欢迎关注凹凸实验室博客:aotu.io

或者关注凹凸实验室公众号(AOTULabs),不定时推送文章:

欢迎关注凹凸实验室公众号

原文地址:https://www.cnblogs.com/o2team/p/12835685.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


这篇文章主要讲解了“electron打包中的坑如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“electron...
这篇文章主要介绍“electron打包的坑如何解决”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“electron打包的坑如何...
这篇文章主要为大家分析了VSCode中如何调试Electron应用的主进程代码的相关知识点,内容详细易懂,操作细节合理,具有一定参考价值。如果感兴趣的话,不妨跟着跟...
这篇“如何在VSCode上调试Electron应用的主进程代码”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价
vue-cli+electron一种新的脚手架(vue-electron)vue-electron主要业务逻辑都放在src下的renderer文件夹内,和之前的vue-cli搭建项目流程没有任何区别 GIT地址:https://github.com/SimulatedGREG/electron-vue 搭建项目:1.全局安装脚手架:npminstall--globalvue-cli
1、首先成功安装Node.js。2、配置好环境变量path,参加上一篇博客《NodeJs安装》3、全局安装electron,并测试。如下图
相关代码:https://github.com/WozHuang/Barrage-helper/blob/master/src/main/index.dev.js在SPA逐渐成为构建优秀交互体验应用的主流方式后,使用Electron开发跨平台的软件是一个优秀的解决方案。下面简单介绍一下Electron-vue安装vue-devtool的方式。安装步骤下载vue-de
前言本人是做java开发的(菜鸟),做web项目的朋友们基本上都会遇到同样一个,永远不知道客户会怎么样使用,或者说永远不知道客户会用什么浏览器打开我们做出来的应用,就算你跟他说明了一定得用某某某浏览器打开,还是有人会用别的浏览器打开,这种情况通常我们会去做适配(前端),最近公司有需求
electron-builder是将electron做的桌面应用打包成安装包的插件。一、安装使用yarn安装,使用npm安装的有问题(没有尝试),先安装yarn工具。npminstall-gyarn安装electron-builderyarnaddelectron-builder--save-dev二、配置在package.json 中配置"build":{
来源:https:/ewsn.net/say/electron-asar.html 在electron中,asar是个特殊的代码格式。asar包里面包含了程序猿编写的代码逻辑。默认情况下,这些代码逻辑,是放置在resource/app目录下面的,明文可见,这样的话,也就有了代码加密(asar打包)的需求 asar如何解密加密?electron的asar的
 字体图标丢失问题解决方案 重新打包文件npmrunbuild再次运行electron 
<img:src="item.headUrl"alt=""class="contact-head":onerror="morenImage">data(){return{morenImage:'this.src="static/image/head.png"',//默认头像}}
在electron-vue中使用了字体图标,但是打包成.exe文件后图标不显示,路劲问题把字体图标放到static目录下就可以了,静态图片也一样我原来放在其它地方不行改到static目录就可以了
//设置登录cookiesetCookie(name,value){varDays=30;varexp=newDate();vardate=Math.round(exp.getTime()/1000)+Days*24*60*60;constcookie={url:this.webApi,name:name,value:value,e
vue部分cnpminstall-gvue-clivueinitsimulatedgreg/electron-vuemy-projectelectron下载失败解决办法:单独设置electron为淘宝镜像,npmconfigsetelectron_mirrorhttps:/pm.taobao.org/mirrors/electron/yarnconfigsetelectron_mirrorhttps:/pm.taobao.org
原始的方式打包下载对应的版本号的ReleaseElectron然后把对应的项目方便整理成这样的目录结构(Windows下)node_modules重新安装,不然可能启动失败把整文件夹给别人就可以了如果想改名子可以用改名工具rcedit应用程序打包成一个文件为了缓解windows路径名过长的问题(就
窗口间通信的问题electron窗口通信比nwjs要麻烦的多electron分主进程和渲染进程,渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息1234567891011subWin.webContents.on('dom-ready', () => {    subWin.webCo
按照上一个问题here,我有一个使用Electron平台和Javascript的桌面应用程序,我使用以下方法将HTML5画布转换为JPEG:<aid="download"download="Path.jpg">DownloadJPG</a>然后,functiondownload(){vardt=canvas.toDataURL('image/jpeg');this.href
一.什么是Electron?它和NW.js的区别是什么?Electron是GitHub开发的桌面应用开发框架,它支持使用HTML、CSS、JavaScript来构建跨平台的桌面应用。Electron和NW.js(NW.js是什么可以百度下)的区别是:1.整合Chromium和Node.js的方式不同。在NW.js中,Chromium是直接被打补丁打进去
1.打开父子模态创建,<button@click="showModalHandler">父子模态窗口</button>/enderer渲染器中主注册事件showModalHandler(){ipcRenderer.send("child-down-modal");}//主进程中触发事件/***父子模态窗口*/letchildDownModal;ipcMain.on(&#