Categories
程式開發

Electron 開髮指南:前端人的最佳跨平台解決方案 | 極客時間


Electron 開髮指南:前端人的最佳跨平台解決方案 | 極客時間 1

作為一個跨平台的桌面應用開發框架,Electron 的迷人之處在於,它是建立在 Chromium 和 Node.js 之上的 —— 二位分工明確,一個負責界面,一個負責背後的邏輯。也不難理解,為什麼 Electron 能開發跨平台的桌面應用了。

但是,不同系統間還是會有很大的差異,需要相應地做一些額外處理,使得打包出的應用在不同系統下都能正常運轉。但相比於 80% 都能完全復用的代碼,這些成本幾乎可以忽略不計。

所以,對 Web 前端開發者來說,用 Electron 開發多平台客戶端的成本非常低

而且,Electron 是基於 Node.js 的,這就意味著,Node 這個大生態下的模塊,Electron 都可以用。同時,跨平台也讓 Electron 可同時開發 Web 應用和桌面應用,無論是 UI,還是代碼,很多資源都可以共享,大幅減少了開發者的工作量

作為目前非常熱門的技術,Electron 在 GitHub 上已經有 7w+ star 了,很多應用都是用 Electron 開發的,比如字節跳動的飛書、Slack、VS Code、Atom、Skype、WhatsApp、支付寶小程序 IDE(螞蟻開發者工具)等。
Electron 開髮指南:前端人的最佳跨平台解決方案 | 極客時間 2

與此同時,包括螞蟻金服、小米、華為、GitHub、微軟在內的很多大廠都在使用 Electron。因此,學好 Electron 是你日後跳槽加薪的加分項,畢竟,大廠都在用。

如何深入理解,並高效使用 Electron?

Electron 寫一個簡單的桌面端應用並不難,有一定 JavaScript 基礎的話,可能只要半小時。但要做一個項目,就沒那麼容易了:

第一,涉及技能棧眾多。我們不僅要了解 Electron、客戶端知識,還要在客戶端中使用 Node.js,甚至是集成 C++、Rust 等三方庫,涉及多進程等概念,對基礎薄弱的前端工程師來說有些難度。

第二,基建缺乏,工程化建設難以落地。 Electron 基建在大部分公司都比較缺乏,依賴 Web、手機客戶端的基建無法滿足 Electron 業務,比如在 Mac 端打包可以依賴 iOS 持續集成,但 Windows 端則不行,類似場景非常之多。

第三,欠缺充分利用好 Electron 的能力。在開發 Electron 應用時,很多 Web 前端工程師會習慣性地局限於瀏覽器開發思維中,做出的交互和體驗與 Web 應用一樣,不知如何釋放自己的想像力,並發揮客戶端的作用。

其實,以上這些問題,我都遇到過。我所負責的美團大象,早在 2016 年就開始用 Electron 技術構建桌面端了,是美團最早一批用 Electron 做大型項目的團隊。

那會兒,我們從 0 開始探索 Electron 的工程化建設,從組內小 Demo 到全公司的桌面客戶端,搭建了 Electron 更新、崩潰治理、異常監控等多項基礎服務。憑藉這些實戰經驗,我幫很多兄弟團隊實現了 Electron 技術從無到有的落地過程。

當然,在這期間,我們也遇到了很多問題。在解決問題的過程中,我經常思考:如何讓 Web 前端同學在工程中快速開發、最大程度地發揮 Electron 的作用,為業務帶來更好的體驗,創造更大的價值。

所以,我和極客時間合作了視頻課《Electron 開發實戰》。在課程中,我會帶你完整開發一個桌面遠程控制項目,還會針對 Electron 的工程化建設進行具體講解,指出有哪些技術關鍵點,和需要避開的坑,幫你徹底拿下 Electron。

我是誰

我是鄧耀龍,美團高級前端工程師,負責美團企業辦公平台大象桌面端的工作。除業務支撐外,還負責公司內的 Electron 桌面應用基礎建設,致力於提升桌面端開發的交付效率和交付質量。曾受邀參加 2019 年 QCon 大會,做了名為《Electron 在企業 IM 前端工程實踐》的主題演講。

我所負責的美團大象,是美團最早使用 Electron 做大型項目的團隊,早在 2016 年就開始用 Electron 構建桌面端,從 0 開始搭建了 Electorn 更新、崩潰治理、異常監控等多個基礎服務。

我是如何講解 Electron 的?

我是以 Web 前端工程師的視角設計這門課的,相比市面上的其他 Electron 資料,這門課主要有 2 個特點:

1.偏實戰,讓你在項目中熟悉 Electron 的技術特點並感受其樂趣。
2.重工程化,為你梳理在工作中推行 Electron 工程化的建設思路,講述真實項目中遇到的坑和具體的解決方案。

所以,課程並不僅僅局限於 Electron 本身,更多講解與其相關的工程化建設流程,側重於提升你的整體開發能力。

而且,Electron 是使用 Web 技術開發桌面應用的,可以考慮將 Web 應用與桌面應用作為同一個應用來開發,可以大大提升開發效率。
Electron 開髮指南:前端人的最佳跨平台解決方案 | 極客時間 3

課程分 3 個部分:

第一部分為基礎篇,介紹 Electron 並深挖其原理,與 Web 開發做對比,針對不同之處介紹 Electron 開發。讓你在實戰中鞏固基礎,並帶你寫出一個 Demo。

第二部分為項目實戰篇,帶你從 0 開始,完成一個桌面控制軟件——這是一個結合 Electron、Node.js 和 WebRTC 技術的綜合項目。

第三部分為工程篇,我會逐步完善實戰篇的項目,為你講解在真實項目中做 Electron 應用的流程、工程化建設的關鍵點和實踐技巧,幫你在業務中順利落地。
Electron 開髮指南:前端人的最佳跨平台解決方案 | 極客時間 4

現在訂閱有什麼福利?

1.早鳥優惠 ¥68,原價 ¥99。結算時,輸入優惠口令「electron6」再減 5 元,到手僅 63 元,口令僅限【前 200 個】名額有效。
訂閱後生成分享海報,每成功邀請 1 位好友訂閱,可得 ¥24 返現

優惠口令僅限【 前 200 個名額 】有效。 👉 戳此使用,以最低價 ¥63 訂閱。