跳转到主内容

11 篇博文 含有标签「案例展示」

查看所有标签

回顾 2023 年生态系统

· 阅读时间:约 8 分钟

回顾 2023 年 Electron 开发者生态系统的改进和变化。


过去几个月里,我们在整个 Electron 生态系统中进行一些优化,以提升 Electron 应用程序的开发者体验! 这是 Electron HQ 最新增加的项目的快速概述。

Electron Forge 7 及其以后

Electron Forge 7 — 用于打包和分发 Electron 应用程序的一体化工具的最新主要版本 — 现已发布。

虽然 Forge 6 与 v5 是完全重写的,但 v7 的范围较小,但仍包含一些重大变更。 未来,我们将继续发布 Forge 的主要版本,以便进行必要的重大变更。

欲了解更多详情,请参阅 GitHub 上的完整描述 Forge v7.0.0 更新日志

重大变更

  • 切换 macOS notarization 工具到 notarytool 截至2023-11-01。 苹果废弃了 macOS notarization 的传统工具 altool,此次发布将其从 Electron Forge 中完全删除。
  • 最小 Node.js 支持增加到 v16.4.0: 在这个版本中,我们已将所需版本的 Node.js 设置为 16.4.0。
  • 废弃了对 electron-prebuildelectron-prebuild-compile 的支持: electron-prebuild 是 electron npm 模块的原始名称的支持,但在 v1.3.1 中 被 electron 代替了。 electron-prebuild-compile 是一个带有增强开发体验功能的二进制文件的替代方案,但最终作为一个项目被放弃了。

重点内容

  • Google Cloud Storage 发布器: 作为我们推动更好地支持静态自动更新的一部分,Electron Forge 现在支持直接发布到 Google Cloud Storage!
  • ESM forge.config.js 支持: Electron Forge 现在支持 ESM forge.config.js 文件。 (附言: 期待在 Electron 28 中支持 ESM entrypoint。)
  • Makers 现在可以并行运行 在 Electron Forge 6 中 Makers 由于 ✨ 遗产 ✨ 原因而顺序运行。 从那时起,我们已经测试了使用并行 Make 步骤的效果,并且没有出现任何负面影响。 当在同一平台上构建多个目标时,你应该会看到加速效果!
非常感谢!

🙇 对于 mahnunchik 为 GCS Publisher 和 Forge 配置中支持 ESM 的贡献,表示衷心感谢!

静态存储自动更新的改进

Squirel.Windows 和 Squirrel.Mac 是支持 Electron 的内置 autoUpdater 模块的特定平台更新技术。 两个项目都支持通过两种方法自动更新:

  • 一个与 Squirrel 兼容的更新服务器
  • 在静态存储提供商上托管的清单 URL (例如 AWS、谷歌云平台、微软 Azure 等)

传统上,更新服务器方法一直被认为是 Electron 应用的推荐方法(并提供了额外的更新逻辑自定义),但它也有一个主要的缺点 — 如果应用是闭源的,它需要维护自己的服务器实例。

另一方面,虽然静态存储方法一直是可行的,但在 Electron 内部没有文档记录,并且在 Electron 工具包中支持不足。

通过 @MarshallOfSound 的杰出工作,无服务器自动应用程序更新已经得到了显著简化:

  • Electron Forge 的 Zip 和 Squirrel.Windows 制作工具现在可以配置为输出与 autoUpdater 兼容的更新清单。
  • 现在,update-electron-app 的一个新的主要版本(v2.0.0)可以读取这些生成的清单,作为 update.electronjs.org 服务器的替代方案。

一旦你的 Makers 和 Publishers 配置好了并上传更新清单到云文件存储,你只需要几行配置代码就可以启用自动更新。

const { updateElectronApp, UpdateSourceType } = require('update-electron-app');

updateElectronApp({
updateSource: {
type: UpdateSourceType.StaticStorage,
baseUrl: `https://my-manifest.url/${process.platform}/${process.arch}`,
},
});
延伸阅读

📦 想要了解更多? 详细指南见 Forge 的自动更新文档

@electron/ 扩展宇宙

Electron 刚开始时,社区发布了许多软件包,以增强开发、包装和分发 Electron 应用的体验。 随着时间的推移,其中许多软件包都被纳入 Electron 的 GitHub 组织,核心团队承担了维护负担。

在2022年,我们开始将所有这些 first-party 工具整合到 npm 的 @electron/ 命名空间下。 此变更意味着以前被称为 electron-foo 的软件包现在在 npm上被称为 @electron/foo,而以前命名为 electron/electron-foo 的仓库现在在 GitHub 上被称为 electron/foo。 这些变化有助于明确划分 first-party 项目和 userland 项目。 这包括许多常用的软件包,例如:

  • @electron/asar
  • @electron/fuses
  • @electron/get
  • @electron/notarize
  • @electron/osx-sign
  • @electron/packager
  • @electron/rebuild
  • @electron/remote
  • @electron/symbolicate-mac
  • @electron/universal

从现在开始,我们发布的所有 first-party 软件包都将在 @electron/ 命名空间中。 这条规则有两个例外情况:

  • Electron 核心将继续在 electron 软件包下发布。
  • Electron Forge 将继续在 @electron-forge/ namespace 下发布其所有的 monorepo 软件包。
寻找 Star

⭐ 在这个过程中,我们意外地将 electron/packager 仓库设为私有,这不幸地导致我们的 GitHub 星星计数被删除(擦除之前超过9000颗)。 如果你是 Packager 的活跃用户,我们将非常感谢你的 ⭐ Star ⭐ !

介绍 @electron/windows-sign

从 2023 年 6 月 1日开始,行业标准要求 Windows 代码签名证书的密钥必须存储在符合 FIPS 标准的硬件上。

在实践中,这意味着对于在 CI 环境中构建和签名的应用来说,代码签名变得更加困难,因为许多 Electron 工具使用证书文件和密码作为配置参数,并尝试使用硬编码逻辑从中进行签名。

这种情况对于 Electron 开发人员来说是一个常见的痛点,这就是为什么我们一直在努力寻找一个更好的解决方案,将 Windows 代码签名独立到一个单独的步骤中,类似于 @electron/osx-sign 在 macOS 上的做法。

在未来,我们计划将此软件包完全整合到 Electron Forge 工具链中,但目前它独立存在。 该软件包目前可通过 npm install --save-dev @electron/windows-sign 进行安装,并可通过编程或命令行界面(CLI)进行使用。

请尝试在项目的 issue 跟踪器中给我们反馈!

下一步

我们将在下个月进入我们每年 12 月安静的时期。 在这样做的同时,我们将考虑如何在 2024 年使 Electron 开发体验更好。

你是否希望看到我们接下来的工作? 请告诉我们!

Project of the Week: Jasper

· 阅读时间:约 5 分钟

本周我们会见了 Jasper的创建者,这是一个基于 Electron 的 管理GitHub 通知的工具。


Hello! Who are you?

I'm Ryo Maruyama, a software developer in Japan. I am developing Jasper and ESDoc.

What is Jasper?

Jasper 是 GitHub 灵活而强大的问题阅读器。 It supports issues and pull requests on github.com and GitHub Enterprise.

Jasper App Screenshot

Why did you make it?

When people use GitHub in their job or OSS activities, they tend to receive many notifications on a daily basis. As a way to subscribe to the notifications, GitHub provides email and web notifications. I used these for a couple of years, but I faced the following problems:

  • It's easy to overlook issues where I was mentioned, I commented, or I am watching.
  • I put some issues in a corner of my head to check later, but I sometimes forget about them.
  • To not forget issues, I keep many tabs open in my browser.
  • It's hard to check all issues that are related to me.
  • It's hard to grasp all of my team's activity.

I was spending a lot of time and energy trying to prevent those problems, so I decided to make an issue reader for GitHub to solve these problems efficiently, and started developing Jasper.

Who's using Jasper?

Jasper is used by developers, designers, and managers in several companies that are using GitHub. Of course, some OSS developers also are using it. And it is also used by some people at GitHub!

How does Jasper work?

Once Jasper is configured, the following screen appears. From left to right, you can see "streams list", "issues list" and "issue body".

Jasper Start Screen

This "stream" is the core feature of Jasper. For example, if you want to see "issues that are assigned to @zeke in the electron/electron repository", you create the following stream:

repo:electron/electron assignee:zeke is:issue

Jasper Start Screen 2

After creating the stream and waiting for a few seconds, you can see the issues that meet the conditions.

Jasper Start Screen 3

What can we do with streams?

I will introduce what kind of conditions can be used for stream.

Users and Teams

Stream问题
mentions:cat mentions:dogIssues that mention user cat or dog
author:cat author:dogIssues created by user cat or dog
assignee:cat assignee:dogIssues assigned to cat or dog
commenter:cat commenter:dogIssues that cat or dog commented on
involves:cat involves:dogIssues that "involve" cat or bob
team:animal/white-cat team:animal/black-dogIssues that animal/white-cat or animal/black-dog are mentioned in

involves means mention, author, assignee or commenter

Repositories and Organizations

Stream问题
repo:cat/jump repo:dog/runIssues in cat/jump or dog/run
org:electron user:cat user:dogIssues in electron, cat or dog

org is same as user

属性

Stream问题
repo:cat/jump milestone:v1.0.0 milestone:v1.0.1Issues that are attached to v1.0.0 or v1.0.1 in cat/jump
repo:cat/jump label:bug label:blockerIssues that are attached bug and blocker in cat/jump
electron OR atomshellIssues that include electron or atomshell

Review Status

Stream问题
is:pr review:requiredIssues that are required review in cat/jump
is:pr review-requested:catIssues that are requested review by cat.
But these are not reviewed yet.
is:pr reviewed-by:catIssues that are reviewed by cat

As you may have noticed by looking at these, streams can use GitHub's search queries. For details on how to use streams and search queries, see the following URLs.

Jasper also has features for unread issue management, unread comment management, marking stars, notification updating, filtering issues, keyboard shortcuts, etc.

Is Jasper a paid product? How much does it cost?

Jasper is $12. However you can use the free trial edition for 30 days.

Why did you choose to build Jasper on Electron?

I like the following aspects of Electron:

  • Apps can be developed with JavaScript/CSS/HTML.
  • Apps can be built for Windows, Mac, and Linux platforms.
  • Electron is actively developed and has a large community.

These features enable rapid and simple desktop application development. It is awesome! If you have any product idea, you should consider using Electron by all means.

What are some challenges you've faced while developing Jasper?

I had a hard time figuring out the "stream" concept. 首先,我考虑使用 GitHub 的 通知 API。 However I noticed that it does not support certain use cases. 此后,除了通知API外,我考虑使用 问题 API合并请求 API。 But it never became what I wanted. 然后在思考各种方法时,我认识到轮询GitHub的 搜索 API 将提供最大的灵活性。 It took about a month of experimentation to get to this point, then I implemented a prototype of Jasper with the stream concept in two days.

Note: The polling is limited to once every 10 seconds at most. This is acceptable enough for the restriction of GitHub API.

What's coming next?

I have a plan to develop the following features:

  • A filtered stream: A stream has some filtered stream that filter issues in the stream. It is like as view of SQL.
  • Multiple accounts: you will be able to use both github.com and GHE
  • Improve performance: For now the loading a issue in WebView is low speed than normal browser.

Follow @jasperappio on Twitter for updates.

Project of the Week: WebTorrent

· 阅读时间:约 9 分钟

This week we caught up with @feross and @dcposch to talk about WebTorrent, the web-powered torrent client that connects users together to form a distributed, decentralized browser-to-browser network.


What is WebTorrent?

WebTorrent is the first torrent client that works in the browser. It's written completely in JavaScript and it can use WebRTC for peer-to-peer transport. No browser plugin, extension, or installation is required.

Using open web standards, WebTorrent connects website users together to form a distributed, decentralized browser-to-browser network for efficient file transfer.

You can see a demo of WebTorrent in action here: webtorrent.io.

webtorrent homepage

Why is this cool?

Imagine a video site like YouTube, but where visitors help to host the site's content. The more people that use a WebTorrent-powered website, the faster and more resilient it becomes.

Browser-to-browser communication cuts out the middle-man and lets people communicate on their own terms. No more client/server – just a network of peers, all equal. WebTorrent is the first step in the journey to re-decentralize the Web.

Where does Electron come into the picture?

About one year ago, we decided to build WebTorrent Desktop, a version of WebTorrent that runs as a desktop app.

WebTorrent Desktop player window

We created WebTorrent Desktop for three reasons:

  1. We wanted a clean, lightweight, ad-free, open source torrent app
  2. We wanted a torrent app with good streaming support
  3. We need a "hybrid client" that connects the BitTorrent and WebTorrent networks

If we can already download torrents in my web browser, why a desktop app?

First, a bit of background on the design of WebTorrent.

webtorrent desktop logo

In the early days, BitTorrent used TCP as its transport protocol. Later, uTP came along promising better performance and additional advantages over TCP. Every mainstream torrent client eventually adopted uTP, and today you can use BitTorrent over either protocol. The WebRTC protocol is the next logical step. It brings the promise of interoperability with web browsers – one giant P2P network made up of all desktop BitTorrent clients and millions of web browsers.

“Web peers” (torrent peers that run in a web browser) make the BitTorrent network stronger by adding millions of new peers, and spreading BitTorrent to dozens of new use cases. WebTorrent follows the BitTorrent spec as closely as possible, to make it easy for existing BitTorrent clients to add support for WebTorrent.

Some torrent apps like Vuze already support web peers, but we didn't want to wait around for the rest to add support. So basically, WebTorrent Desktop was our way to speed up the adoption of the WebTorrent protocol. By making an awesome torrent app that people really want to use, we increase the number of peers in the network that can share torrents with web peers (i.e. users on websites).

What are some interesting use cases for torrents beyond what people already know they can do?

One of the most exciting uses for WebTorrent is peer-assisted delivery. Non-profit projects like Wikipedia and the Internet Archive could reduce bandwidth and hosting costs by letting visitors chip in. Popular content can be served browser-to-browser, quickly and cheaply. Rarely-accessed content can be served reliably over HTTP from the origin server.

The Internet Archive actually already updated their torrent files so they work great with WebTorrent. So if you want to embed Internet Archive content on your site, you can do it in a way that reduces hosting costs for the Archive, allowing them to devote more money to actually archiving the web!

There are also exciting business use cases, from CDNs to app delivery over P2P.

What are some of your favorite projects that use WebTorrent?

gaia app screenshot

The coolest thing built with WebTorrent, hands down, is probably Gaia 3D Star Map. It's a slick 3D interactive simulation of the Milky Way. The data loads from a torrent, right in your browser. It's awe-inspiring to fly through our star system and realize just how little we humans are compared to the vastness of our universe.

You can read about how this was made in Torrenting The Galaxy, a blog post where the author, Charlie Hoey, explains how he built the star map with WebGL and WebTorrent.

brave logo

We're also huge fans of Brave. Brave is a browser that automatically blocks ads and trackers to make the web faster and safer. Brave recently added torrent support, so you can view traditional torrents without using a separate app. That feature is powered by WebTorrent.

So, just like how most browsers can render PDF files, Brave can render magnet links and torrent files. They're just another type of content that the browser natively supports.

One of the co-founders of Brave is actually Brendan Eich, the creator of JavaScript, the language we wrote WebTorrent in, so we think it's pretty cool that Brave chose to integrate WebTorrent.

Why did you choose to build WebTorrent Desktop on Electron?

WebTorrent Desktop main window

Electron应用程序“繁忙”因为在每个应用程序中包含整个Chrome内容模块。 在某些情况下,这部分是真的 (Electron 应用程序安装器通常是 ~40MB, 其中,指定的 OST 安装器通常是 ~20MB)。

However, in the case of WebTorrent Desktop, we use nearly every Electron feature, and many dozens of Chrome features in the course of normal operation. If we wanted to implement these features from scratch for each platform, it would have taken months or years longer to build our app, or we would have only been able to release for a single platform.

Just to get an idea, we use Electron's dock integration (to show download progress), menu bar integration (to run in the background), protocol handler registration (to open magnet links), power save blocker (to prevent sleep during video playback), and automatic updater. As for Chrome features, we use plenty: the <video> tag (to play many different video formats), the <track> tag (for closed captions support), drag-and-drop support, and WebRTC (which is non-trivial to use in a native app).

Not to mention: our torrent engine is written in JavaScript and assumes the existence of lots of Node APIs, but especially require('net') and require('dgram') for TCP and UDP socket support.

Basically, Electron is just what we needed and had the exact set of features we needed to ship a solid, polished app in record time.

What are your favorite things about Electron?

The WebTorrent library has been in development as an open source side project for two years. We made WebTorrent Desktop in four weeks. Electron is the primary reason that we were able to build and ship our app so quickly.

Just as Node.js made server programming accessible to a generation of jQuery-using front-end programmers, Electron makes native app development accessible to anyone familiar with Web or Node.js development. Electron is extremely empowering.

Do the website and the Desktop client share code?

Yes, the webtorrent npm package works in Node.js, in the browser, and in Electron. The exact same code can run in all environments – this is the beauty of JavaScript. It's today's universal runtime. Java Applets promised "Write Once, Run Anywhere" apps, but that vision never really materialized for a number of reasons. Electron, more than any other platform, actually gets pretty darn close to that ideal.

What are some challenges you've faced while building WebTorrent?

In early versions of the app, we struggled to make the UI performant. We put the torrent engine in the same renderer process that draws the main app window which, predictably, led to slowness anytime there was intense CPU activity from the torrent engine (like verifying the torrent pieces received from peers).

We fixed this by moving the torrent engine to a second, invisible renderer process that we communicate with over IPC. This way, if that process briefly uses a lot of CPU, the UI thread will be unaffected. Buttery-smooth scrolling and animations are so satisfying.

Note: we had to put the torrent engine in a renderer process, instead of a "main" process, because we need access to WebRTC (which is only available in the renderer.)

应在哪些领域改进Electron?

One thing we'd love to see is better documentation about how to build and ship production-ready apps, especially around tricky subjects like code signing and auto-updating. We had to learn about best practices by digging into source code and asking around on Twitter!

Is WebTorrent Desktop done? If not, what's coming next?

We think the current version of WebTorrent Desktop is excellent, but there's always room for improvement. We're currently working on improving polish, performance, subtitle support, and video codec support.

If you're interested in getting involved in the project, check out our GitHub page!

Any Electron development tips that might be useful to other developers?

Feross, one of the WebTorrent Desktop contributors, recently gave a talk "Real world Electron: Building Cross-platform desktop apps with JavaScript" at NodeConf Argentina that contains useful tips for releasing a polished Electron app. 如果你处于一个基本的工作应用程序的阶段,并且你正在试图将它带到一个更高水平的打造和专业水平上,这个话尤其有用。

Watch here:

Slides here:

DC, another WebTorrent contributor, wrote a checklist of things you can do to make your app feel polished and native. It comes with code examples and covers things like macOS dock integration, drag-and-drop, desktop notifications, and making sure your app loads quickly.

Project of the Week: Voltra

· 阅读时间:约 6 分钟

This week we met with Aprile Elcich and Paolo Fragomeni to talk about Voltra, an Electron-powered music player.


What is Voltra?

Voltra is a music player for people who want to own their music. It’s also a store where you can discover and buy new music based on what you already own. It’s ad-free, cross-platform for desktop and mobile. It also doesn’t spy on you.

voltra-artistview

Who is Voltra for?

Anyone who listens to music.

What motivated you to create Voltra?

Radio has has always had a big share of listeners. It’s moving off the airwaves and onto the Internet. Now you can rent music on demand — it’s a radio revival! A lot of new products and services have emerged because of this, but streaming radio still leaves someone else in control of your music and how you experience it.

We wanted a product that was entirely focused on music you own. Something that made it easy to discover and buy new music directly from artists or labels.

Is there a free version?

The desktop player is completely free. Selling your music is also free! We are not ad-supported.

Since the app is free, we may open source it later on. Right now we don’t have the bandwidth to manage that. We also have very specific ideas for features and the direction we want to take things. We have an active beta community and we take our feedback to heart.

How do you make money?

We have premium features!

Our Voltra Audio Archive is a cloud-backup service designed specifically for music. We don’t compress or share data blocks. Your music collection is physically backed up for you.

For artists and labels, our Pro Membership offers tools to help them reach more relevant audiences, such as analytics and professional artist webpages.

What makes Voltra different?

Design and usability are incredibly important to us. We want to give listeners a distraction-free listening experience! There are a some interesting music players and stores out there. But many of them are more advanced and harder to use than their creators realize. We want to make Voltra accessible to as many people as possible.

We also don't take a cut from the artist or the label. That’s a key differentiator for us. It’s really important because it lowers the barrier for artists to get their music to market.

What are some design & technical decisions you made?

While designing Voltra, we considered UI conventions from native apps and the web, we also thought a lot about what we could remove. We have an active private beta group who have given us critical feedback over the last few months.

We found that album art and photography are really important to people. Many players are just lists of files. One of the cool things about owning physical albums is the album art, and we wanted to put emphasis on this in the Voltra desktop app.

voltra-albumview

We also made sure not to mess with people's files. We use file watching so you can put your files wherever you want, and we don't rename them or move them for you. We have an embedded database to track the state of the watched directories so that we can track what's new, even when the process isn't running.

What are some challenges you've faced while building Voltra?

We spend a lot of time focused on performance. We started with frameworks but moved to vanilla Javascript. In our experience, the generalized abstractions they provide outweigh the performance penalties and ceremony that they introduce.

We handle very large collections pretty well at this point. Large collections means possibly tens of thousands of images! Having Node.js’ file system module directly available from the render process made it really easy to lazy load and unload lots of images super quickly based on DOM events.

一般来说, 设置立即requestIdleCallback 已经成为在保持界面响应的同时进行大量处理的超重要工具。 More specifically, distributing CPU-bound tasks into separate processes really helps to keep the user interface responsive. 例如,我们将实际音频环境移动到一个单独的过程中。 通过 IPC 与它通信,以避免忙碌用户界面可能出现的中断。

Why did you choose to build Voltra on Electron?

浏览器的沙盒对我们的应用过于限制。 但我们也正在开发一个 web 播放器。 So it’s a huge win that we can share almost 100% of the code between the two implementations.

We actually started by building a native app with Swift. The main problem we found was that we were reinventing a lot of things. The web has the world’s largest open source eco-system. So we pretty quickly switched to Electron.

Also, and most importantly, with Electron you develop once and it should Just Work™ on all the major platforms. It’s not guaranteed, but the cost of coding natively for each platform definitely outweighs any other costs that electron introduces.

What are your favorite things about Electron?

GTD!: Having Node.js’ networking stack and Chromium’s presentation layer packaged together is a recipe for getting things done.

Competency: It’s just the web stack, so literally our whole team is involved in actually building the product.

Community: There is a highly organized community that knows how to communicate really well! We feel pretty great about developing with support like that.

In what areas could Electron be improved?

We would like to see Electron endorse a single packager. The packager is as important to Electron what the package manager is to Node. There are multiple packagers in user-land, each with interesting features but each with bugs. Consensus by the community would help to direct the energy being spent by contributors.

What's coming next?

We‘re currently developing a mobile app, and working with artists and labels to add their music to the Voltra shop. Hey! If you’re an artist or label, sign up now! We plan on opening up the shop when we reach our goal of 10 million tracks.

本周项目:WordPress Desktop

· 阅读时间:约 6 分钟

本周我们在 Automattic 平台上聊到了 WordPress Desktop, 一个开源的桌面客户端, 负责管理 WordPress 的内容.


WordPress 应用程序

每个人都了解 WordPress,但 WordPress 桌面究竟是什么?

WordPress.com Desktop 应用 提供了一个平滑的跨平台体验, 它可以让你将精力集中在你的内容和设计上, 而不需要让浏览器标签打乱你的思绪 — 或者维持网站原始的样子而且还可以继续访问. 结合我们的浏览器支持和移动应用程序,您可以随时随地构建您的网站,以任何有助于您完成工作的方式。

为什么要构建一个桌面应用来管理 WordPress 站点? 就不能全部基于网页吗?

它实际上使用了你在浏览器中访问 WordPress.com 时获得的完全相同的技术。 然而,它都是本地托管的,因此它的加载时间最短。 得益于本地特性的支持, 比如托盘和通知等等都可以使用, 你就可以专注于 WordPress 的站点和博客.

你为什么选择在 Electron 上构建 WordPress Desktop?

2015 年末,我们通过 Calypso 重建了 WordPress.com 站点, Calypso 是一个开源的使用 React 开发的现代化 JavaScript 应用. 我们开始研究 Electron,并且对 Calypso 进行了一些更改,使其能够在本地运行。 It was a compelling experience and we thought there was a lot of value in developing it further.

我们有几个团队在 Calypso 上工作。 要使用传统的桌面技术制作一个完整的多平台GUI客户端,将需要更多的工作。 通过使用Electron,我们2-4人的小团队能够利用其他团队的努力,并在几个月内构建桌面应用程序。

构建 WordPress 桌面时遇到了哪些挑战?

我们很快就有了一个运行应用的起始版本, 但让它表现的和本地应用一样则花费了很多时间. 这其中有一个很大的挑战, 这个过程需要在你自己的机器上运行一个 Calypso 的备份, 它就是一个 API 驱动的 UI. 这方面涉及许多衔接工作,各种变化都反馈给了 Calypso 本身。

此外,我们花费了大量精力为不同的平台打包应用程序—— 我们提供了Windows, macOS 和 Linux 版本 - 并且他们之间有很大的不同。

当时 Electron 还比较新,我们不断遇到一些可以很快得到解决的问题(有时是同一天!)

应在哪些领域改进Electron?

Electron 已经提供了我们构建桌面应用所需要的的大部分内容,并且从我们开始使用它以来就已经进展很快了。 尽管如此,也一些领域在桌面应用中被认为是理所当然的功能,比如拼写检查和查找/替换,就很难在 Electron 中复现。

我们也希望看到一些较新的 Chrome 技术渗透到 Electron 中。 我们特别热衷于尝试 WebVR 技术。

What are your favorite things about Electron?

我们选择Electron的主要原因,也是它最大的优势,是非常活跃和开放的社区。 Automattic 一直相信开源。 这是我们的核心原则之一,Electron 项目和社区遵循许多非常开放和积极的核心信念。

WordPress 桌面下一步是什么?

我们的模型的伟大之处在于,Desktop 应用程序受益于任何新的 Calypso 功能 - 它将不断改进。 我们希望可以为应用程序添加额外特性,例如离线支持和更好的系统通知,这将真正将应用程序带入本机领域

Automattic是否有团队在开发其他 Electron 应用程序?

当前,经过我们在桌面应用上的努力, Simpenote 团队决定使用 Electron 为 Windows 和 Linux 构建桌面应用程序(原生的 Mac 客户端已经存在)。 Simpenote Electron 应用 也是开源的,可在 Github上访问到。

我们也有一个即将使用 Electron 开发树莓派集成的团队。

如果其中任何一个听起来很有趣,那么我们 将很乐意听到你的想法

Any Electron tips that might be useful to other developers?

交付签名桌面软件的过程对我们来说相对较新,特别是对于Windows。 我们为 Windows 应用代码签名 撰写了一篇文章,其中包括该过程以及我们为正确完成此操作而经历的一些困难。

每周项目:Dat

· 阅读时间:约 9 分钟

本周的精选项目是 Dat,一个用于分发数据集的开源分布式 拨款资助的 工具。 Dat 由一个分布在世界各地的的团队编写和运营,团队中的许多人帮助撰写了这篇文章。


A screenshot of the main view of dat-desktop, showing a few rows of shared
dats

首先,什么是 Dat?

我们希望将点对点和分布式系统的最佳部分引入数据共享。 我们从科学数据共享开始,然后开始向研究机构、政府、公共服务部门和开源团队扩展。

另一种想法是 Dropbox 或 BitTorrent Sync 等同步和上传软件,但 Dat 是 开源的。 我们的目标是成为一个强大的、开源的、非营利的数据共享软件,用于不同大小的数据。

要使用 dat CLI 工具,你需要输入:

dat share path/to/my/folder

然后 Dat 会创建一个可以用来将该文件夹发送给他人的链接 —— 没有中央服务器或第三方可以访问您的数据。 与 BitTorrent不同的是,他人也不可能嗅探到谁在分享什么(查看 Dat 白皮书了解更多详情)。

现在我们知道什么是Dat。 Dat 桌面如何适应?

Dat Desktop 是一种让无法或不想使用命令行的人可以访问 Dat 的方式。 您可以在您的机器上托管多个 Dat ,并通过您的网络提供数据。

你能分享一些很酷的使用案例吗?

DataRefuge 和 Svalbard 项目

我们正致力于一个代号为 Svalbard 的与 DataRefuge 有关的项目, 一个致力于备份有消失危险的政府气候数据的小组。 Svalbard 以北极的斯瓦尔巴全球种子库命名,该库有一个位于地下的植物DNA大型备份库。 我们的版本是一个大型的有版本控制的公共科学数据集。 一旦我们知道并可以信任元数据,我们就可以建立其他很酷的项目,例如 分布式志愿数据存储网络

加利福尼亚公民数据联盟

CACivicData 是一个开源的存档,每天从加利福尼亚的CAL-ACCESS数据库中下载,追踪政治活动中的资金。 他们进行 每日发布,这意味着在他们的 zip 文件中储存大量重复的数据。 我们正在将他们的数据托管为一个 Dat 存储库,减少检索特定版本或更新到更新的版本所需的带宽和复杂度。

Electron 更新

虽然还没有明确是否实现,但我们认为一个有趣的使用案例是把编译后的 Electron 应用程序放入一个 Dat 储存库,然后使用 Electron 内的 Dat 客户端下载已完成编译的应用程序的最新更新变化文件,以节省下载时间并同时减少服务器的带宽成本。

谁应该使用 Dat Desktop?

任何想要通过 P2P 网络分享和更新数据的人。 包括数据科学家、开放数据黑客、研究人员、开发人员。 如果任何人都有我们尚未想到的很酷的使用情况,我们完全愿意接受反馈。 你可以进入我们的Gitter 聊天并问我们任何事情!

Dat 和 Dat Desktop 的下一步是什么?

用户账户和元数据的发布。 我们正在开发一个 Dat 注册表网络应用,部署在 datproject.org,基本上将成为数据集中的 “npm”, 但应注意的是,我们只是一个元数据目录,而数据可以在任何线上服务存放(而不是像 npm 或像 GitHub 因为源代码太小而可以在一个系统中存放全部而选择在中央服务器上存放数据)。 由于许多数据集是巨大的,我们需要一个联合注册表(类似于BitTorrent 追踪器的工作原理)。 我们想让人们更容易从Dat Desktop找到或发布注册表中的数据集, 尽可能减少数据共享进程中的阻碍。

另一个功能是多作者/协作文件夹。 我们有开展协作工作流的大计划,或许包括围绕数据集协作设计的类 git 式的分支管理。 当然,我们目前仍在为提升总体稳定度和使我们的协议标准化而工作!

为何选择在 Electron 上构建 Dat 桌面?

Dat是使用Node.js建造的,所以它对我们的集成来说是十分自然和合适的。 除此之外,我们的用户使用各种机器,因为科学家, 研究人员和政府官员可能被迫为其机构使用某些设置——这意味着我们需要能够服务 Windows 和 Linux 以及 Mac。 Dat Desktop 让我们很容易做到这一点。

建造 Dat 和 Dat Desktop 时你面临什么挑战?

搞清楚人们想要什么。 We started with tabular datasets, but we realized that it was a bit of a complicated problem to solve and that most people don't use databases. So half way through the project, we redesigned everything from scratch to use a filesystem and haven't looked back.

We also ran into some general Electron infrastructure problems, including:

  • Telemetry - how to capture anonymous usage statistics
  • Updates - It's kind of piecemeal and magic to set up automatic updates
  • Releases - XCode signing, building releases on Travis, doing beta builds, all were challenges.

We also use Browserify and some cool Browserify Transforms on the 'front end' code in Dat Desktop (which is kind of weird because we still bundle even though we have native require -- but it's because we want the Transforms). To better help manage our CSS we switched from Sass to using sheetify. It's greatly helped us modularize our CSS and made it easier to move our UI to a component oriented architecture with shared dependencies. For example dat-colors contains all of our colors and is shared between all our projects.

We've always been a big fan of standards and minimal abstractions. Our whole interface is built using regular DOM nodes with just a few helper libraries. We've started to move some of these components into base-elements, a library of low-level reusable components. As with most of our technology we keep iterating on it until we get it right, but as a team we have a feeling we're heading in the right direction here.

应在哪些领域改进Electron?

We think the biggest pain point is native modules. Having to rebuild your modules for Electron with npm adds complexity to the workflow. Our team developed a module called prebuild which handles pre-built binaries, which worked well for Node, but Electron workflows still required a custom step after installing, usually npm run rebuild. It was annoying. To address this we recently switched to a strategy where we bundle all compiled binary versions of all platforms inside the npm tarball. This means tarballs get larger (though this can be optimized with .so files - shared libraries), this approach avoids having to run post-install scripts and also avoids the npm run rebuild pattern completely. It means npm install does the right thing for Electron the first time.

What are your favorite things about Electron?

它的API似乎相当深思熟虑,它相对稳定。而且它在做到实时跟进上游 Node 发布的最新版本这方面做得不错,我们也没别的要求了!

Any Electron tips that might be useful to other developers?

If you use native modules, give prebuild a shot!

关注 Dat 开发的最佳途径是什么?

在 Twitter 上关注 @dat_project 或者 订阅我们的 电子邮箱

Project of the Week: Ghost

· 阅读时间:约 5 分钟

This week we chatted with Felix Rieseberg, desktop engineer at Slack and maintainer of Ghost Desktop, an Electron client for the Ghost publishing platform.


Ghost Desktop Screenshot

What is Ghost?

Ghost is a fully open source, hackable platform for building and running a modern online publication. We power blogs, magazines and journalists from Zappos to Sky News.

What makes it different from other publishing platforms?

Ghost was founded in April 2013, after a very successful Kickstarter campaign to create a new platform focused solely on professional publishing. Our mission is to create the best open source tools for independent journalists and writers across the world, and have a real impact on the future of online media. It offers a simpler, more focussed experience: Our editor is designed solely around providing the best possible writing experience.

Compared to the all-time classic WordPress, it offers a simpler, more streamlined experience - it is easier to setup and maintain, comes with all important features out-of-the-box, and is dramatically faster. Compared to other online platforms, Ghost gives writers full ownership and control over their content, allows full customization, and enables authors to build a business around their publication.

Is Ghost a for-profit company?

This one is important to us: Ghost is an independent non-profit organisation. We build publishing tools for modern journalism & blogging because we believe freedom of speech is important. Our software is released under a free open source license, our business model is completely transparent, and our legal structure means that 100% of the money we make is reinvested into making Ghost better.

What is Ghost Desktop?

Ghost Desktop allows writers to manage multiple blogs at once - and to focus on their writing. 像常见的写作快捷方式这样的简单东西无法在浏览器中实现,但我们的桌面应用程序中可以使用。 它允许其他应用程序通过 deeplinks 与博客直接联系

What is Ghost for Journalism?

This year we're very excited to be dedicating our entire 10 person full-time Ghost team to helping grow three independent publications, along with $45,000 in resources toward their efforts. We're calling it Ghost for Journalism.

We've been building Ghost as the web's next great platform for independent publishers for about three and half years now, and we've now reached a really interesting inflection point. We started this journey to create a simple, well designed blogging platform which could be used by just about anyone. That was always going to be step one.

Long term, we want Ghost to be an incredible platform for the world's best journalism, and that means we need to build features to attract exactly those people. This year we're making a very conscious decision to focus on just that.

Why did you choose to build Ghost Desktop on Electron?

Ghost uses JavaScript and Node.js on both the backend and frontend, so being able to utilize the same technology and skillset enables our team to move faster, build more, and ultimately deliver a better experience. In addition, being able to share more than 95% of code between the macOS, Windows, and Linux version of the app allows us to focus on building a great core user experience, without having to maintain one code base for each platform.

What are some challenges you've faced while building Ghost Desktop?

Spellchecking is likely still one of the most difficult services offered - we could easily utilize one of the many online services, but correctly spellchecking text in multiple languages while guarding the privacy and autonomy of our users is not an easy task.

应在哪些领域改进Electron?

We would love to see Electron bring the operating system's native spellchecking capabilities to their apps. We're dreaming about a world in which an <input> field receives the same services as a NSTextView, but we are also intimately aware how difficult that is.

What are your favorite things about Electron?

JavaScript is famous for being a vast ecosystem, involving countless tools and frameworks - but the convenience it affords us is hard to overstate. Building an app with Electron is only slightly harder than building a web app, which is an amazing feat.

Is Ghost done? If not, what's coming next?

Ghost Desktop is also an ongoing project - we're pretty far from being done. We have been talking for a while about bringing a full offline mode to our users, and we're getting fairly close. Other notable work areas are the extension and integration with other text editing apps (like Word or Atom), ultimately allowing people to write posts using their favorite tools. In general, once we've shipped the offline mode feature, we're looking for deeper integration with the operating system. If that sounds interesting to you, join us!

What are some of your favorite Electron apps?

I'm a big fan of Kap, Felony, and Visual Studio Code.

👻

本周主题:Beaker浏览器

· 阅读时间:约 6 分钟

本周我们约见了Paul FrazeeBeaker浏览器的创始人 。 Beaker是一个实验性的,在客户端使用Dat协议托管网站的对等网络浏览器。


Beaker是什么以及创造它的理由?

Beaker是一个参与式浏览器。 它是为独立骇客们打造的浏览器。

互联网是一个封闭的信息源。 如果你想对社交媒体的运转方式施加影响的话,你必须要在Facebook或Twitter里工作。 对搜索引擎巨头Google来说, 控制权掌握在公司而不是用户自己手中。

通过Beaker,我们有了一个新的Web协议: Decentralized Archive Transport。 "Dat"协议 免费创建站点,然后从设备中共享它们, 无需服务器。 这就是我们的革新之处。

Beaker协议

当你用Beaker访问一个Dat站点时,你会下载该站点的文件。 这个站点会永远是你的。 你可以保存它,复刻它,修改它,并自由地分享你的新版本。 这些都是开源的。

所以这是我们的目的:我们正在打造一个支持开放式网站的浏览器。 我们希望它成为社交骇客的一个工具。

谁会使用Beaker?

骇客们。 改装者。 创意者们。 喜欢折腾的人。

如何创建一个使用Dat协议的新项目?

我们有个类似于git加npm的 命令行工具bkr 以下是如何创建一个站点:

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
echo "我的叉不考虑上一个索引。 tml!" > index.html
$ bkr 发布

以下是如何复刻一个站点:

$ bkr fork dat://0ff7d4c7644d0aa19914247dc5dbf502d6a02ea89a5145e7b178d57db00504cd/ ~/my-fork
$ cd ~/my-fork
$ echo "My fork has no regard for the previous index.html!" tml!" > index.html
$ bkr 发布

这些网站随后用你的浏览器进行托管。 这有点像BitTorren;你在一个P2P网格中分享网站。

如果你想要一个用户界面,我们在浏览器中内置了一些基础工具,但我们正在将这些工具推送到用户手中。 这些以后都将成为可更改的用户应用程序。

为何选择使用Electron来构建Beaker?

对这个项目来说是显而易见的。 如果我独自复刻了Chrome,我这会儿就应该在写C++了! 没人想要那么做。 我了解整个Web技术栈,并且我可以很快速地用它来工作。 这是个不用多想就能做出的选择。

事实是,我不太确定在没有Electron的情况下我能做这件事。 这是一个伟大的软件。

在构建Beaker的过程中遇到过哪些难题?

其中一半都是在捣鼓工具,我能解决的都尽量解决了。

构建一个浏览器是非常容易的。 Electron基本上就是个构建浏览器的工具包。 ...除了浏览器的页签;这花了我很长时间才改正过来。 我最终奔溃了,并且学会了如何创建SVG。 这看起来好多了,但花了我3,4次迭代才弄好。

应在哪些领域改进Electron?

如果我可以将devtools停靠在一个webview中,那真是太好了。

Beaker的后续进展?

用于Dat站点的安全DNS域名。 一个名为"app scheme."的公共配置化URL方案。更多Dat的API。

对于那些可能有兴趣为本项目作出贡献的人们来说,Beaker在哪些方面需要帮助?

我们有很多未解决的问题。 不要害怕联系我。 在freenode的#beakerbrowser频道上。 我们为贡献者保留了一个页面,同时我们将会把你添加进来。 并且如果你访问奥斯汀,我会为你买一杯啤酒。

Any Electron tips that might be useful to other developers?

  1. 使用现成的构建工具。 相信我,你不会想纠结于你自身的解决方案中。 使用electron-builder。 使用样板仓库。
  2. 如果你需要在Electron仓库中创建一个issue,请花些功夫使其易于复现。 你将会更快地得到响应,团队也会对此表示感谢。 如果你能试着自己去修复它,那是更好的。 事实上,看到问题的核心是非常有意思的一件事。
  3. 至少阅读一次所有的指南和进阶文档。
  4. 不要构造浏览器,这是一个已经饱和的市场。

Project of the Week: Kap

· 阅读时间:约 7 分钟

The Electron community is growing quickly, and people are creating powerful new apps and tools at an astounding rate. To celebrate this creative momentum and keep the community informed of some of these new projects, we've decided to start a weekly blog series featuring noteworthy Electron-related projects.


This post is the first in the series, and features Kap, an open-source screen recording app built by Wulkano, a geodistributed team of freelance designers and developers.

Kap Screencast

What is Kap?

Kap is an open-source screen recorder built primarily for designers and developers to easily capture their work. People use it to share animated prototypes, document bugs, create silly GIFs and everything in-between.

我们已经看到不同年龄和背景的人在教育设置、屏幕、教程中使用它... 这个清单还在继续。 Even to create production assets! We're completely blown away by how well received our little side project has been.

Why did you build it?

That's a very good question, it's not like there's a lack of screen recorders out there! We felt the alternatives were either too complex, too expensive or too limited. Nothing felt just right for our everyday needs. We also think it's great when the tools we use to do our work are open-source, that way everyone can help shape them. Building Kap ended up being just as much about what we didn't do. It's all in the details, an accumulation of small improvements that became the outline of a tool we wanted to use.

However, and maybe most importantly, Kap has become a place for us to leave our worries at the door and just have fun building something for ourselves and people like us. It's so important to create an environment where you get to just vent, try new thins and enjoy your craft. No requirements, no pressure, no expectations. Should designers and developers side project? Why, yes. Yes, they should.

Why did you choose to build Kap on Electron?

There were a number of reasons:

  • Web tech
  • Most of the team are web developers
  • We're invested in JavaScript
  • It opens the door for more people to contribute
  • Electron itself is open-source
  • The power and easily maintainable modularity of node_modules
  • Cross-platform possibilities

We think the future of apps are in the browser, but we're not quite there yet. Electron is an important step in the journey towards that future. It not only makes the apps themselves more accessible, but also the code they're built with. An interesting thought is imagining a future where the OS is a browser, and the tabs are essentially Electron apps.

Additionally, being primarily web developers, we're big fans of the isomorphic nature of JavaScript, in that you can run JS on the client, server, and now the desktop. With web tech (HTML, CSS and JS), many things are much simpler than native: Faster prototyping, less code, flexbox > auto-layout (macOS/iOS).

What are some challenges you've faced while building Kap?

Using the resources Electron has available to record the screen was the biggest challenge. They simply weren't performant enough to meet our requirements and would render the project a failure in our eyes. Though at no fault of Electron itself, there's still a gap between native development and building desktop apps with web tech.

We spent a lot of time trying to work around the poor performance of the getUserMedia API, an issue originating in Chromium. One of our main goals when we set out to make Kap was to build the entire app with web tech. After trying everything we could to get it working (the minimum requirement being 30 FPS on a Retina screen), we eventually had to find another solution.

I see some Swift code in the repo. What's that about?

Being forced to look for alternatives to getUserMedia, we started experimenting with ffmpeg. Besides being one of the best tools for audio and video conversion it has the functionality of recording the screen in almost any OS, and we were able to record crispy video meeting our minimum requirement of 30 FPS on a Retina screen. 问题? The performance was "😩", the CPU usage was going haywire. So we went back to the drawing board, discussed our options and realised that we had to make a compromise. That resulted in Aperture, our own screen recording library for macOS written in Swift.

应在哪些领域改进Electron?

We all know that Electron apps can have a thing for using RAM, but again, that's really a Chromium thing. It's part of how it works and it really depends on what you're running, for example Kap and Hyper typically use less than 100MB of memory.

One of the biggest areas of improvement that we see is payload, particularly how Electron distributes Chromium. One idea would be to have a shared Electron core and make app installers check if it's already present on the system.

Creating cross-platform Electron apps could be a better experience. Right now there are too many inconsistencies, platform-specific APIs, and missing features between platforms, making your codebase littered with if-else statements. For example, vibrancy is only supported on macOS, the auto-updater works differently on macOS and Windows, and is not even supported on Linux. Transparency is a hit or miss on Linux, usually miss.

It should also be easier to call native system APIs. Electron comes with a very good set of APIs, but sometimes you need functionality it doesn't provide. Creating a native Node.js addon is an option, but it's painful to work with. Ideally Electron would ship with a good FFI API, like fastcall. This would have enabled us to write the Swift part in JavaScript instead.

What are your favorite things about Electron?

Our favorite thing is easily the fact that anyone with knowledge of creating for the web can build and contribute to multi-platform native experiences. Not to mention the ease and joy of developing on it, the excellent documentation and the thriving ecosystem.

From a front-end perspective, building Kap felt no different than building a simple website using browser APIs. Electron does a really great job of making app development similar (basically identical) to web development. So simple in fact that there was no need for frameworks or similar to help us, just clean and modular JS and CSS.

We are also huge fans of the team building it, their dedication and support, and the active and friendly community they maintain. Hugs to all of you!

What's coming next in Kap?

The next step for us is to review the app in preparation for our 2.0.0 milestone, which includes a React re-write in addition to support for plugins, allowing developers to extend the functionality of Kap! We invite everyone to follow to project and contribute on our GitHub repository. We're listening and want to hear from as many of you as possible, let us know how we can make Kap the best possible tool it can be for you!

What is Wulkano?

Wulkano is a design studio and digital collective, a team of remote technologists who love working together on both client gigs and our own projects. We're a distributed but tight knit group of people from different places and backgrounds, sharing knowledge, ideas, experiences, but most importantly silly GIFs and memes, in our virtual office (which happens to be the Electron based Slack!).

Any Electron tips that might be useful to other developers?

Take advantage of and get involved in the fantastic community, check out Awesome Electron, look at examples and make use of the great docs!

August 2016: New Apps

· 阅读时间:约 3 分钟

这里是8月份添加到网站的新的 Electron 应用。


此网站通过社区的拉取请求更新了新的应用线下聚会 你可以查看库以获取新添加内容的通知,或如果你对_所有_更新不感兴趣,关注博客的RSS订阅

如果您已经制作了一个 Electron 应用程序或主办了一次会议,提交一个 拉取请求 添加到站点,它将被包括进下一次统计。

新应用

Code RPGifyRPG风格应用开发程序
PamFax用于发送和接收传真的跨平台应用
BlankUp又一清新的Markdown编辑器
Rambox将常见的即时通讯类和邮件类应用的网页版集成于一处的免费开源软件。
Gordie最棒的卡包应用
Ionic Creator更快构建应用程序
TwitchAlertsKeep your viewers happy with beautiful alerts and notifications
Museeks一个简单、干净和跨平台音乐播放器
SeaPigMarkdown转HTML器
GroupMe非官方GroupMe应用程式
MoeditorYour all-purpose markdown editor
SoundnodeSoundnode App is the Soundcloud for desktop
QMUI WebQMUI Web 桌面是一个基于QMUI Web 框架管理项目的应用程序
SvgsusOrganize, clean and transform your SVGs
Ramme非官方 Instagram 桌面应用程序
InsomniaREST API 客户端
Correo窗口、 macOS 和 Linux 的菜单栏/任务栏 Gmail 应用程序
KongDashKong Admin API 桌面客户端
翻译编辑器INTL ICU 信息的翻译文件编辑器(见formatjsio)
5EClient5EPlay CSGO 客户端
Theme Juice使本地 WordPress 开发变得更加容易。