《2019年Electron在企业IM前端工程实践.pdf》由会员分享,可在线阅读,更多相关《2019年Electron在企业IM前端工程实践.pdf(51页珍藏版)》请在三个皮匠报告上搜索。
1、Electron 在企业 IM 前端工程实践高级前端工程师 美团目录Electron 的介绍Electron 应用工程化美团大象Electron应用的实践Electron是什么?使用 Web 技术构建桌面应用+=ElectronChromiumNode.jsNative API最简单的Electron应用组成electron-apppackage.jsonindex.htmlmain.jshello world!index.html(渲染进程)const app,BrowserWindow =require(electron)let winapp.on(ready,()=win=new Bro
2、wserWindow()win.loadFile(index.html)main.js(主进程)原生GUIApp生命周期系统事件处理 name:electron-app,version:1.0.0,main:main.jspackage.json(包体描述)与Web开发的不同IPC主进程渲染进程渲染进程渲染进程IPCmain.jsindex.htmlIPC-Message注:IPC=Inter-Process Communication与Web开发的不同原生能力截图工具NotificationDock文件读写加解密bindingAPIElectronNative APIchild_proces
3、sAppleScriptWinRTShell与Web开发的不同原生能力Node原生 API文件读写、操作系统、加解密node 扩展集成三方 C+库ElectronNative API客户端GUI右键菜单、窗口定制、系统托盘、Dock.桌面环境集成系统通知、剪切板、系统快捷键、文件拖放 设备 API电源监视、内存、CPU、屏幕OSApplescript(macOS)系统原生应用调用Windows RTUSB、蓝牙、预览文件与Web开发的不同只对Chrome负责无浏览器兼容问题最新浏览器featureNo polyfillES6/7 语法学习Electron的好处?造工具技术广度什么时候应考虑El
4、ectron?快速交付、试错什么时候应考虑Electron?数据来源:2019 年中国程序员薪资生存调查报告前端工程师储备充足程序员擅长语言JavaScriptJavaAndroidC#PHPC+PythonCiOSGoR语言3.6%5.5%10.3%12.1%13.3%13.3%13.9%14.5%15.2%44.8%48.5%什么时候应考虑Electron?特定领域:开发者工具、效率应用数据来源:https:/electronjs.org/appsElectron 应用分布 效率应用开发者工具实用工具播放器社交应用照片&视频工具游戏理财应用商业类应用教育类应用设计应用12182427314
5、14448118154218Electron与其他桌面应用技术对比ElectronNativeQTNW性能安装包大小原生体验跨平台开发效率人才储备社区适用场景 跨平台应用 quick delivery 前端技术栈 专业应用 best performance 跨平台应用 better performance 跨平台(包括XP)quick delivery 前端技术栈注:Carlo、flutter构建桌面端技术目前仍在快速发展,暂不在讨论范围但值得长期关注Electron优势总结大象slackVS CodeAtomWhatsappWordPress大型应用案例70k+star800+contrib
6、utors1.6k+electron*npm活跃社区跨平台成熟Web技术强大的NPM生态内置更新/崩溃/安装程序开发效率高Electron-Bootstraphttps:/ 的介绍Electron 应用工程化美团大象Electron应用的实践Electron应用工程化关键点打包更新提升原生体验Electron应用工程化打包关键步骤Info.plistFrameworksResourcesapppackage.jsonindex.htmlmain.jsElectron.app=大象.appInfo.plist修改信息设置图标dmg-buildernsisResources1.下载二进制文件2.添