初探Electron，從入門到實踐-創(chuàng)新互聯(lián)
本文由葡萄城技術(shù)團隊于博客園原創(chuàng)并首發(fā)
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、網(wǎng)絡空間、營銷軟件、網(wǎng)站建設(shè)、漢臺網(wǎng)站維護、網(wǎng)站推廣。
轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。
在開始之前，我想您一定會有這樣的困惑：標題里的Electron 是什么？Electron能做什么？許多偉大的公司使用Electron框架的原因又是什么？
帶著這些問題和疑惑，通過本文的介紹，可助您全面地認識Electron這門新興的技術(shù)，迅速找到其入門途徑，并理解Electron為何被稱為當下開發(fā)桌面App的最佳選擇。
初探Electron
一、Electron是什么？（為何稱之為“跨平臺桌面瀏覽器”）
前端開發(fā)的魅力，在于開發(fā)者隨時要面臨全新技術(shù)的挑戰(zhàn)！
曾幾何時，作為前端開發(fā)者的你可曾想過：如何利用HTML、CSS和JavaScript構(gòu)建跨平臺的桌面應用程序？借助 Electron，這項工作將比你想象的更加簡單。
Electron作為一個使用新興技術(shù)（包括JavaScript，HTML和CSS）創(chuàng)建桌面應用程序的框架，其負責處理硬件，開發(fā)者可以更專注于應用程序的核心并從底層更改其設(shè)計。
Electron設(shè)計之初便充分結(jié)合了當今最好的Web技術(shù)，作為一個跨平臺的“集成框架”，它可以輕松地與Mac、Windows和Linux兼容。而所謂的“集成框架”也就是它將“Chromium”和“Node.js”很好的集成在了一起，并明確分工，Electron負責硬件部分，“Chromium”和“Node.js”負責界面與邏輯，大家井井有條，共同構(gòu)成了一個成本低廉卻十分高效的解決方案，在快速交付上甚至比Native還要快速。
Electron發(fā)展里程碑
·? ?? ?2013年4月11日，Electron以Atom Shell為名起步。
·? ?? ?2014年5月6日，Atom以及Atom Shell以MIT許可證開源。
·? ?? ?2015年4月17日，Atom Shell改名為Electron。
·? ?? ?2016年5月11日，1.0版本發(fā)布。
·? ?? ?2016年5月20日，允許向Mac應用商店提交軟件包。
·? ?? ?2016年8月2日，支持Windows商店。
簡而言之，Electron JS是一個運行時框架，它允許用戶使用HTML5、CSS和JavaScript創(chuàng)建桌面套件應用程序，而大部分應用程序都是由兩種非常受歡迎的技術(shù)混合而成：Node.js和Chromium。因此，您編寫的任何Web應用程序都可以在Electron JS 上正常運行。
Electron的內(nèi)置功能包括：
·? ?? ?自動更新 - 使應用程序能夠自動更新、升級
·? ?? ?本機菜單和通知 - 創(chuàng)建本機應用程序菜單和上下文菜單
·? ?? ?應用程序崩潰報告 - 您可以將崩潰報告提交給遠程服務器
·? ?? ?調(diào)試和分析 - Chromium的內(nèi)容模塊可以發(fā)現(xiàn)性能瓶頸和運行緩慢的原因。此外，您也可以在應用中使用自己喜歡的Chrome開發(fā)者工具
·? ?? ?Windows安裝程序 -您可以快速而簡單創(chuàng)建安裝包
二、Electron 可以用來做什么？（哪些場景需要使用Electron）
以Windows平臺應用開發(fā)為例，大部分人首先會想到使用成熟的開發(fā)方案，如QT(C++)、WPF(C#) 等。但面臨以下幾種使用場景，這些方案將顯得捉襟見肘：
·? ?? ?公司要設(shè)計一個全新的APP， 但技術(shù)人員大部分由前端開發(fā)構(gòu)成
·? ?? ?公司原本就有在線的Web應用，但是想讓該應用能夠在桌面端直接打開（離線狀態(tài)下也可使用），并增加一些與系統(tǒng)交互的功能
以我的親身經(jīng)歷為例：
在SpreadJS項目中，我們需要將基于web版的表格編輯器封裝成APP使用，同時增加文件操作的能力，如導入導出excel、導入PDF等，而SpreadJS是一個純前端的表格控件，開發(fā)人員全部由前端開發(fā)組成，對C++和C#并不熟悉，如果投入過大的時間精力用來學習其他開發(fā)語言，整個項目的技術(shù)管理和項目管理將變得無法控制。除此之外，鑒于項目本身對應用的業(yè)務邏輯要求并不高，只是套一個具有瀏覽器屬性的運行環(huán)境即可，因此，單獨為此配置C++、C# 開發(fā)人員將無形中提升更多項目成本。
為此，我們引入了Electron框架：現(xiàn)有的前端開發(fā)人員能在不學習其他語言的情況下，直接搞定上述需求，這就是Electron 為我們帶來的價值。
三、為什么選擇 Electron？（Electron的出現(xiàn)為前端開發(fā)者謀得了一份好差事）
可以這么說，Electron這個框架讓網(wǎng)路里流傳很廣的一句話不再是玩笑：“不要和老夫說什么C++、Java，老夫行走江湖就一把JS，遇到需求擼起袖子就是干”。Electron可以幫助前端開發(fā)者在不需要學習其他語言和技能的情況下，快速開發(fā)跨平臺桌面應用。
Electron的出現(xiàn)將蠶食很大一部分桌面客戶端領(lǐng)域的市場份額，鑒于它的跨平臺特性，在不同系統(tǒng)之間僅需少量的優(yōu)化工作?？上攵?，這個成本到底有多低。
在開發(fā)的體驗上，Electron是基于"Chromium"和"Node.js"的，所以幾乎所有的Node.js模塊都可以在Electron上運行，并很容易使用“npm”搭積木的方式快速交付一個產(chǎn)品。
四、大型應用使用Electron框架的成功案例
1. SpreadJS純前端表格控件
SpreadJS?是一款基于 HTML5 的純前端電子表格控件，以“高速低耗、高度類似Excel、可無限擴展”為產(chǎn)品特色，提供移動跨平臺和瀏覽器支持，同時滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發(fā)、數(shù)據(jù)填報、在線文檔、圖表公式聯(lián)動、類 Excel UI 設(shè)計等業(yè)務場景，在數(shù)據(jù)可視化、Excel 導入導出、公式引用、數(shù)據(jù)綁定、框架集成等場景下無需大量代碼開發(fā)和測試，極大降低了企業(yè)研發(fā)成本和項目交付風險。
2. WebTorrent
WebTorrent，作為第一個在瀏覽器中運行的torrent客戶端，是一個完全由JavaScript編寫并使用WebRTC進行點對點傳輸?shù)目蛻舳藨?。無需任何插件，擴展或安裝，WebTorrent將用戶鏈接到分散的瀏覽器到瀏覽器網(wǎng)絡，以確保有效的文件傳輸。
WebTorrent使用Electron框架開發(fā)，使其盡可能輕量、無廣告且開源。此外，使用Electron還有助于流式傳輸，并充當混合客戶端，將應用程序連接到所有流行BitTorrent和WebTorrent網(wǎng)絡。
3. WordPress
WordPress 桌面是一個使用了Electron和React作為框架的桌面應用程序，提供無縫的跨平臺體驗，允許用戶專注于他們的內(nèi)容和設(shè)計，而不會被任何瀏覽器標簽所分心。
4. Slack
Slack采用了Electron框架構(gòu)建，鑒于其高性能表現(xiàn)和無框架外觀，將帶來與瀏覽器完全不同的體驗方式。對于尋求更集中的工作空間的團隊來說，Slack Desktop絕對是最適合的應用程序之一。
雖然Slack Desktop融合了很多技術(shù)，但大多數(shù)資源文件和代碼都是遠程加載的，它們結(jié)合了Chromium的渲染引擎和Node.js運行時和模塊系統(tǒng)。
5. WhatsApp
WhatsApp作為下載量最高的Messenger應用程序，也是基于Electron框架構(gòu)建的。Electron幫助WhatsApp開發(fā)人員以低廉的成本完成了幾乎所有工作，并通過更加簡化和創(chuàng)新的技術(shù)，為用戶帶來全新的桌面體驗方式。
Electron 架構(gòu)實現(xiàn)
Electron基本文件結(jié)構(gòu)
Electron有一個基本的文件結(jié)構(gòu)，類似于我們在創(chuàng)建網(wǎng)頁時使用的文件結(jié)構(gòu)：
electron-quick-start
- index.html 這是一個HTML5網(wǎng)頁，目的用于提供畫布（canvas）
- main.js 創(chuàng)建窗口并處理系統(tǒng)事件
- package.json 是我們應用程序的啟動腳本。它將在主進程中運行，并包含有關(guān)應用程序的所有信息
- render.js 處理應用程序的渲染過程
Electron的架構(gòu)主要分為兩部分：主進程和渲染進程
回顧以往的web開發(fā)，我們的代碼，無論是HTML、CSS還是Javascript，都是運行在瀏覽器沙盒中的，我們無法越過瀏覽器的權(quán)限訪問系統(tǒng)本身的資源，代碼的能力被限制在了瀏覽器中。瀏覽器之所以這么做，是為了安全的考慮。設(shè)想一下，我們在使用瀏覽器的時候，會打開各式各樣不同來源的網(wǎng)站，如果JavaScript代碼有能力訪問并操作本地操作系統(tǒng)的資源，那將是多么可怕的事情。
假設(shè)：你在某天不小心打開了一個惡意的網(wǎng)站，可能你存儲在硬盤上的文件就被偷走了（都用不著去修電腦）。
但我們要開發(fā)的是桌面應用程序，如果無法訪問到本地的資源肯定是不行的。Electron將nodejs巧妙的融合了進來，讓nodejs作為整個程序的管家。管家擁有較高的權(quán)限，可以訪問和操作本地資源，使用原本在瀏覽器中不提供的高級API。同時管家也管理著渲染進程窗口的創(chuàng)建和銷毀。所以，我們將這個管家稱之為主進程。在使用Electron開發(fā)的程序中，會使用main.js作為程序的主入口，該文件內(nèi)代碼執(zhí)行的內(nèi)容，就是主進程中執(zhí)行的內(nèi)容。
主進程
主進程控制應用程序的生命周期。Electron 用來運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創(chuàng)建web頁面來展示用戶界面。它內(nèi)置了完整的Node.js API，主要用于打開對話框以及創(chuàng)建渲染進程。此外，主進程還負責處理與其他操作系統(tǒng)交互、啟動和退出應用程序。
主進程就像是應用程序的管家，負責管理整個應用程序的生命周期以及所有渲染進程的創(chuàng)建。
按照慣例，主進程位于名為main.js的文件中，你可以通過在package.json文件中修改配置屬性來更改主進程文件。
比如，我們可以打開package.json并更改配置屬性：
| 1 創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡助力業(yè)務部署。公司持有工信部辦法的idc、isp許可證， 機房獨有T級流量清洗系統(tǒng)配攻擊溯源，準確進行流量調(diào)度，確保服務器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務器買多久送多久。
分享標題：初探Electron，從入門到實踐-創(chuàng)新互聯(lián)
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、關(guān)鍵詞優(yōu)化、小程序開發(fā)、營銷型網(wǎng)站建設(shè)、做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè) 聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián) 猜你還喜歡下面的內(nèi)容 
|