我们是如何使用 Electron 构建 Linux 桌面应用程序的

JavaScript07

我们是如何使用 Electron 构建 Linux 桌面应用程序的,第1张

Tutanota 是一种安全的开源电子邮件服务,它可通过浏览器使用,也有 iOS 和 Android 应用。其客户端代码在 GPLv3 下发布,Android 应用程序可在 F-Droid 上找到,以便每个人都可以使用完全与 Google 无关的版本。

由于 Tutanota 关注开源和 Linux 客户端开发,因此我们希望为 Linux 和其他平台发布一个桌面应用程序。作为一个小团队,我们很快就排除了为 Linux、Windows 和 MacOS 构建原生应用程序的可能性,并决定使用 Electron 来构建我们的应用程序。

对于任何想要快速交付视觉一致的跨平台应用程序的人来说,Electron 是最适合的选择,尤其是如果你已经有一个 Web 应用程序,想要从浏览器 API 的束缚中摆脱出来时。Tutanota 就是这样一个案例。

Tutanota 基于 SystemJS 和 Mithril ,旨在为每个人提供简单、安全的电子邮件通信。 因此,它必须提供很多用户期望从电子邮件客户端获得的标准功能。

由于采用了现代 API 和标准,其中一些功能(如基本的推送通知、搜索文本和联系人以及支持双因素身份验证)很容易在浏览器中提供。其它功能(例如自动备份或无需我们的服务器中转的 IMAP 支持)需要对系统资源的限制性访问,而这正是 Electron 框架提供的功能。

虽然有人批评 Electron “只是一个基本的包装”,但它有明显的好处:

Tutanota 不依靠于大笔的投资资金,而是依靠社区驱动的项目。基于越来越多的用户升级到我们的免费服务的付费计划,我们有机地发展我们的团队。倾听用户的需求不仅对我们很重要,而且对我们的成功至关重要。

提供桌面客户端是 Tutanota 用户 最想要的功能 ,我们感到自豪的是,我们现在可以为所有用户提供免费的桌面客户端测试版。(我们还实现了另一个高度要求的功能 —— 搜索加密数据 —— 但这是另一个主题了。)

我们喜欢为用户提供签名版本的 Tutanota 并支持浏览器中无法实现的功能,例如通过后台进程推送通知。 现在,我们计划添加更多特定于桌面的功能,例如 IMAP 支持(而不依赖于我们的服务器充当代理),自动备份和离线可用性。

我们选择 Electron 是因为它的 Chromium 和 Node.js 的组合最适合我们的小型开发团队,因为它只需要对我们的 Web 应用程序进行最小的更改。在我们开始使用时,可以将浏览器 API 用于所有功能特别有用,随着我们的进展,慢慢地用更多原生版本替换这些组件。这种方法对附件下载和通知特别方便。

我们知道有些人关注 Electron 的安全问题,但我们发现 Electron 在 Web 应用程序中微调访问的选项非常令人满意。你可以使用 Electron 的 安全文档 和 Luca Carettoni 的 Electron 安全清单 等资源,来帮助防止 Web 应用程序中不受信任的内容发生灾难性事故。

Tutanota Web 客户端从一开始就构建了一个用于进程间通信的可靠协议。我们利用 Web 线程在加密和请求数据时保持用户界面(UI)响应性。当我们开始实现我们的移动应用时,这就派上用场,这些应用程序使用相同的协议在原生部分和 Web 视图之间进行通信。

这就是为什么当我们开始构建桌面客户端时,很多用于本机推送通知、打开邮箱和使用文件系统的部分等已经存在,因此只需要实现原生端(Node.js)。

另一个便利是我们的构建过程使用 Babel 转译器 ,它允许我们以现代 ES6 JavaScript 编写整个代码库,并在不同环境之间混合和匹配功能模块。这使我们能够快速调整基于 Electron 的桌面应用程序的代码。但是,我们也遇到了一些挑战。

虽然 Electron 允许我们很容易地与不同平台的桌面环境集成,但你不能低估投入的时间!最后,正是这些小事情占用了比我们预期更多的时间,但对完成桌面客户端项目也至关重要。

特定于平台的代码导致了大部分阻碍:

由于用户对不同平台上的应用程序的某些(有时不直接兼容)行为的期望,此过程有点复杂。使三个版本感觉像原生的需要一些迭代,甚至需要对 Web 应用程序进行一些适度的补充,以提供类似于浏览器中的文本搜索的功能。

我们在 Electron 方面的经验基本上是积极的,我们在不到四个月的时间内完成了该项目。尽管有一些相当耗时的功能,但我们感到惊讶的是,我们可以轻松地为 Linux 提供一个测试版的 Tutanota 桌面客户端 。如果你有兴趣,可以深入了解 GitHub 上的源代码。

via: https://opensource.com/article/19/4/linux-desktop-electron

作者: Nils Ganther 选题: lujun9972 译者: wxy 校对: wxy

这将帮助你了解前端社区中海量的工具。

当然,这些只是一些可选的列表,当你需要做出选择的时候帮助你抉择。

我自己使用它吗?

是的,当我需要开始项目的时候,我用它来作为提醒。

同时,每当有人问“我该使用什么框架呢?”的时候,我就会把这篇文章给他看。

因为,正如你明白的,事情没有绝对的对与错,但是有一些优质的框架能够帮助做出我们更好的选择。

另外,我也会不时的更新本文,因为有时候当我学习更多后也会改变当初的想法。

我应该怎样开始?

如果你的项目不是很小,你应该需要下面几件事:

项目模块化 我个人比较喜欢 Component-based architecture,因为他适用于 various-frameworks

同时,考虑一些其他的例子,比如 BOT 、 Elm Architecture 或者 re-frame 或者 CycleJS

模块加载器(RequireJS,Browserify, Webpack, ComponentJS, SystemJS)

这些东西能够帮助我们保持Javascript(或者components)彼此独立和可维护。

包管理器(npm, jspm, bower)

我个人一直比较喜欢 npm ,似乎他是javascript和nodejs真正的标准。另外我会考虑bower来做补足,因为他是一个很好的下载静态资源的工具,但它在管理组件和依赖又不如npm强大。

自动部署/编译/构建流水线(grunt/gulp/brunch/broccoli)

因为,如果一直做重复的事情的话生命是很短暂的。

CSS预处理(jss/stylus/sass/css-modules)和 postprocessors(css0, autoprefixer, postcss)

这些工具使css更美好,去除了一些浏览器兼容的问题。是的,我是从2015知道这些的,但是不论如何,它在过去确实是痛点。

构建框架(Bootstrap, Zurb Foundation, Elemental UI, Material Lite)

这些框架让很多web开发者合作,它们会帮助你处理基本的布局和样式。

尽管,你可以考虑构建你自己的解决方案,如果你感觉构建很厉害或者希望成为前端专家,或者你需要为你的公司构建基本的视觉元素。

如果是这样的话,建议你尽快使用方法论(BEM, OOCSS),它们可以帮助你节约时间。

我个人比较喜欢 BEM 命名方式和基本工作流,你能够从 styleguide for Brainly.com找到一些可以帮助你的灵感。

如果你不构建基本的组成,建议看一看 HTML5 Boilerplate

    测试工具(jasmine, karma, mocha, tape, itern)

    任何人都需要测试,没有例外的。

    代码质量监控工具(eslint, husky, editorconfig)

    可以获取帮助的社区(chats, IRC, meetups, twitter)

好了,下一步呢?

在选择你的工具前有一些值得思考的问题需要解决。

准备好了吗?

    我需要和其他人合作吗?他们是谁?他们想要什么?

这个问题会帮助你选择语言和工作流,这对你和你的伙伴都有帮助。

    我最关注什么?质量,开发速度,还是可维护性?

这样你可以决定是否试验一些新工具,以及是否能承担失败的风险。

    是否需要开放给第三方?

面向的团队不同可能会限制我们语言的选择。

    我是否在处理核心的项目

如果你处理核心项目,请最好选择高稳定性的语言和框架,这更安全,让你睡得更好。

    是一个可交互的app还是基本的文档页面。

结果很可能是你仅仅需要基本的HTML +CSS + tools,或者静态网站生成器或者CMS。

    这是一个单一的项目还是其他项目的相关项目?

即使你有一系列项目,你也应该用一些组件和样式引导,这些有不错的文档。

直接减少代码重用,保持一致性。

另外,考虑SEO,和服务端渲染。

语言列表

当你回答完上面这些问题后,就可以和你的队友聊聊,然后选择一个语言了。

因为这里有很多的东西,而不是糟糕的Javascript,你可以选择

    是否有js开发团队

考虑ES6(babel兼容)

这会让你的生活简单一些。

    你是否偏爱typed语言?开发typed是否可以?

考虑 typescript

    函数式编程是否接受?

你可以从简单ES6库开始,比如 lo-dash 或者 ramda。

这里有一些教程和书来帮助你开始美好的旅行。

    你是否尝试过函数式编程,想要更好的东西?

试试 elm ,很酷的!

    你是否能够全栈?

试试 clojurescript,很酷很酷的

    你喜欢沙拉吗?

试试scalaJS

    你知道Haskell吗?

试试 purescript,真的很酷

    想要更多疯狂的?

这里有一个可以编译成javascript的语言列表,选一个然后享受吧。

框架列表

    你仅仅需要基本的可运行的app?

没有时间做更复杂的工作?

试试 angular. start looking for help imediately

    你是否经常需要快速的原型开发?

    是否能在未来修复一些问题?

    试试 angular. 一些问题

    你是尝试前端开发的后端?

试试 angular. 寻找一些前端开发者

    你是否需要很快的进行开发和构建,但是同时会丢失一些特点?

试试 ampersand/backbone

    同样的技术选型,怎样从中型到大型?

把 marionette/chaplin添加到你的backbone里面去,另外可以考虑 Reackjs

    你是否有一些时间来实验,同时得到很大的性能提升?

试试mithril/knockout/aurelia+

    你是否有不错的前端实验精神,对函数式编程熟悉?

试试 ReactJS+Redux+ImmutableJS+

    更多函数式编程技巧?或者偏好交互性强的应用?

使用 reactive streams(bacon, rxJS) 或者试试 Cycle.js(实验性)

注意1: add streams any会是很好的选择,可以推荐别人使用。

注意2: 请不要拒绝使用 FRP的reactive streams

    你想要使用严格的验证和通用处理方式?

你的应用会越来越大?

你计划扩充你的团队?

你有时间学习新东西?

建议花时间学习 EmberJS,他将会是很好的投资!

    你是否需要“类桌面应用”?

    你的应用有表格,图例,或者其他分析功能?你在构建企业应用?

    试试 ExtJS

    你们是一个为其他开发者提供服务的工作室?

    你最好有一个不错的工具集,另外,同事之间最好有一些公共用例。

    你是一个为他人提供工具的自由开发者?

    适应他们的选择。

    尝试angular,这将不会造成多大麻烦,让其他人得到他们想要的。

    注意:如果别人付费,请不要改变客户的需求

    你正在构建一个有吸引力的产品,它将会很多人使用?

    有了明确的需求后我们就从上面的列表中选择一个合适的框架。

    关于开发什么样的应用你有明确的需求(比如10屏的移动应用)

    花两周时间来试验特定的需求(ionic, famous, Sencha Touch)

怎样开始编码?

    花一些时间阅读你所选择框架或者工具的文档。

    在社区里面询问一些经验开发者怎样算是优秀项目的开端。

    准备所有的工具。

    极客精神。但是我建议更加工程化一点。

    ...

    成功。

不知道怎么用我介绍的一些不常见框架?

看看 TodoMVC Examples,找到你选择的框架。

但是记住,这些项目只是示例,大多数情况下他们不适合大中型项目。