入坑 Electron 开发跨平台桌面应用
?
作為一個(gè)跨平臺(tái)的桌面應(yīng)用開發(fā)框架，Electron 的迷人之處在于，它是建立在 Chromium 和 Node.js 之上的 —— 二位分工明確，一個(gè)負(fù)責(zé)界面，一個(gè)負(fù)責(zé)背后的邏輯，典型的「你負(fù)責(zé)貌美如花，我負(fù)責(zé)賺錢養(yǎng)家」。
上面這張圖很好的說明了 Electron 的強(qiáng)大之處。
?
也不難理解，為什么?Electron 能開發(fā)跨平臺(tái)的桌面應(yīng)用了。
?
但是，不同系統(tǒng)間還是會(huì)有很大的差異，需要相應(yīng)地做一些額外處理，使得打包出的應(yīng)用在不同系統(tǒng)下都能正常運(yùn)轉(zhuǎn)。但相比于 80% 都能完全復(fù)用的代碼，這些成本幾乎可以忽略不計(jì)。
?
所以，對(duì) Web 前端開發(fā)者來說，用 Electron?開發(fā)多平臺(tái)客戶端的成本非常低。
?
而且，Electron 是基于 Node.js 的，這就意味著，Node 這個(gè)大生態(tài)下的模塊，Electron 都可以用。
?
同時(shí)，跨平臺(tái)也讓?Electron 可同時(shí)開發(fā) Web 應(yīng)用和桌面應(yīng)用，無論是 UI，還是代碼，很多資源都可以共享，大幅減少了開發(fā)者的工作量。
?
作為目前非常熱門的技術(shù)，很多應(yīng)用都是用 Electron 開發(fā)的，比如字節(jié)跳動(dòng)的飛書、Slack、VS Code、Atom、Skype、WhatsApp、支付寶小程序 IDE（螞蟻開發(fā)者工具）等。
?? ? ? ?
? ? ? ?
與此同時(shí)，包括螞蟻金服、小米、華為、GitHub、微軟在內(nèi)的很多大廠都在使用?Electron。因此，學(xué)好 Electron 是你日后跳槽加薪的加分項(xiàng)，畢竟，大廠都在用。
??
?
如何深入理解，并高效使用 Electron？
?
用 Electron 寫一個(gè)簡(jiǎn)單的桌面端應(yīng)用并不難，有一定 JavaScript 基礎(chǔ)的話，可能只要半小時(shí)。但要做一個(gè)項(xiàng)目，就沒那么容易了：
?
第一，涉及技能棧眾多。我們不僅要了解 Electron、客戶端知識(shí)，還要在客戶端中使用 Node.js，甚至是集成 C++、Rust 等三方庫，涉及多進(jìn)程等概念，對(duì)基礎(chǔ)薄弱的前端工程師來說有些難度。
?
第二，基建缺乏，工程化建設(shè)難以落地。Electron 基建在大部分公司都比較缺乏，依賴 Web、手機(jī)客戶端的基建無法滿足 Electron 業(yè)務(wù)，比如在 Mac 端打包可以依賴 iOS 持續(xù)集成，但 Windows 端則不行，類似場(chǎng)景非常之多。
?
第三，欠缺充分利用好 Electron 的能力。在開發(fā) Electron 應(yīng)用時(shí)，很多 Web 前端工程師會(huì)習(xí)慣性地局限于瀏覽器開發(fā)思維中，做出的交互和體驗(yàn)與 Web 應(yīng)用一樣，不知如何釋放自己的想象力，并發(fā)揮客戶端的作用。
?
其實(shí)，想要掌握 Electron，不僅要理解其基本原理，還要能落地，了解其在工程化建設(shè)方面具體應(yīng)該如何推進(jìn)。
?
分享給你一張?Electron?核心知識(shí)圖譜，只有對(duì)每一個(gè)知識(shí)點(diǎn)仔細(xì)梳理并深入理解，才能解決工作中的實(shí)際問題。
?
這張圖譜出自鄧耀龍，我之前聽過他在 Qcon 大會(huì)的分享，講得非常不錯(cuò)。
?
我之前使用 Electron 的時(shí)候也遇到了很多問題。在解決問題的過程中，我經(jīng)常思考：如何讓 Web 前端同學(xué)在工程中快速開發(fā)、最大程度地發(fā)揮 Electron 的作用，為業(yè)務(wù)帶來更好的體驗(yàn)，創(chuàng)造更大的價(jià)值。
?
去年，訂閱了鄧耀龍的視頻課 《Electron 開發(fā)實(shí)戰(zhàn)》跟著學(xué)下來，收獲超出預(yù)期。在課程中，不僅會(huì)帶你完整開發(fā)一個(gè)桌面遠(yuǎn)程控制項(xiàng)目，還會(huì)針對(duì) Electron 的工程化建設(shè)進(jìn)行具體講解，指出有哪些技術(shù)關(guān)鍵點(diǎn)，和需要避開的坑，實(shí)戰(zhàn)性很強(qiáng)，從而幫你徹底拿下 Electron。
?
說句實(shí)在的，預(yù)見問題的能力是需要日積月累的，最終能及時(shí)規(guī)避和快速處理問題，才是硬道理。
?
新人首單?￥59.9 ?，僅限「前?50?人」
即將漲價(jià)至 ￥129，相當(dāng)于 5 折
?
關(guān)于鄧耀龍
?
鄧耀龍，美團(tuán)高級(jí)前端工程師。
?
他所負(fù)責(zé)的美團(tuán)大象，是美團(tuán)最早使用 Electron 做大型項(xiàng)目的團(tuán)隊(duì)，早在 2016 年就開始用 Electron 構(gòu)建桌面端了，從 0 開始搭建了 Electorn 更新、崩潰治理、異常監(jiān)控等多個(gè)基礎(chǔ)服務(wù)。
?
除業(yè)務(wù)支撐外，他還負(fù)責(zé)公司內(nèi)的 Electron 桌面應(yīng)用基礎(chǔ)建設(shè)，致力于提升桌面端開發(fā)的交付效率和交付質(zhì)量。憑借累計(jì)的實(shí)戰(zhàn)經(jīng)驗(yàn)，他幫很多兄弟團(tuán)隊(duì)實(shí)現(xiàn)了 Electron 技術(shù)從無到有的落地過程。
?
他是如何講解 Electron 的？
?
他是以 Web 前端工程師的視角設(shè)計(jì)這門課的。相比市面上的其他 Electron 資料，這門課主要有?2 個(gè)特點(diǎn)：
?
1.?偏實(shí)戰(zhàn)，讓你在項(xiàng)目中熟悉 Electron 的技術(shù)特點(diǎn)并感受其樂趣。
2.?重工程化，為你梳理在工作中推行 Electron 工程化的建設(shè)思路，講述真實(shí)項(xiàng)目中遇到的坑和具體的解決方案。
?
所以，課程并不僅僅局限于 Electron 本身，更多講解與其相關(guān)的工程化建設(shè)流程，側(cè)重于提升你的整體開發(fā)能力。帶你掌握這些問題的最佳解決方式，觸類旁通。
?
課程分 3 個(gè)部分：
第一部分為基礎(chǔ)篇，介紹 Electron 并深挖其原理，與 Web 開發(fā)做對(duì)比，針對(duì)不同之處介紹 Electron 開發(fā)。讓你在實(shí)戰(zhàn)中鞏固基礎(chǔ)，并帶你寫出一個(gè) Demo。
?
第二部分為項(xiàng)目實(shí)戰(zhàn)篇，帶你從 0 開始，完成一個(gè)桌面控制軟件——這是一個(gè)結(jié)合 Electron、Node.js 和 WebRTC 技術(shù)的綜合項(xiàng)目。
?
第三部分為工程篇，這部分他逐步完善實(shí)戰(zhàn)篇的項(xiàng)目，講解在真實(shí)項(xiàng)目中做 Electron 應(yīng)用的流程、工程化建設(shè)的關(guān)鍵點(diǎn)和實(shí)踐技巧，幫你在業(yè)務(wù)中順利落地。
?
類似的干貨有很多，具體可以看看目錄：
?
?
有這么一段話，我特別認(rèn)同：
?
我們常說“不積跬步，無以至千里”，這句話中的“跬步”，我把它定義為：做成一件事。我們總會(huì)做很多事，但大多數(shù)時(shí)候，能真正得到提升的是“把事做成”。? ? ?
?
成事的目標(biāo)不分大小。它可以很小，比如學(xué)完兩節(jié)課；也可以很大，比如用 2 個(gè)月時(shí)間搞懂 Electron 工程化建設(shè)的核心方法。最重要的是，一旦定好目標(biāo)，就要竭盡全力把事做成。隨著做成的事越來越多，也就能真正體會(huì)到“會(huì)當(dāng)凌絕頂，一覽眾山小”。
?
申請(qǐng)了專屬優(yōu)惠：
?
新人首單 ￥59.9 ?，僅限「前 50 人」
即將漲價(jià)至 ￥129，相當(dāng)于 5 折
?
如果你也想 Electron 真正為你所用，成為手中的利器，那么自己的應(yīng)用可以動(dòng)手了，千萬不要錯(cuò)過它。
點(diǎn)擊「閱讀原文」
享受特惠，新人首單 ￥59.9
5 折入手，僅限「前 50 人」！
新人可以先加我微信 ruochuan12，再購買更優(yōu)惠，老用戶加我微信購買再返現(xiàn) 20。超值。
總結(jié)
以上是生活随笔為你收集整理的入坑 Electron 开发跨平台桌面应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 前端学习（3110）：react-hel
- 下一篇： React 入门手册