想寫桌面程式卻無從下手?Electron 讓你橫跨Windows MacOS ...

文章推薦指數: 80 %
投票人數:10人

首先,桌面應用程式跨平台問題一直都是開發者的痛點,Windows 上有微軟的幾種解決方案,基本上使用C# 語言開發,但是他無法跨平台在其他作業系統上執行, ... 進度條 登入 線上教學 優惠組合 顧問服務 架站服務 所有文章 系列教學 筆記 想寫桌面程式卻無從下手?Electron讓你橫跨WindowsMacOS與Linux無煩惱! 從前端到DesktopApplication?淺談跨平台整合方案Electron.js 作者:進度條編輯群 更新日期: 2020/12/19 在先前的文章中,我們討論過從Web前端轉職到後端的一大利器-Node.js,但你可能還不知道,一旦你在前端領域中得心應手,其實就可以往桌面軟體,或是我們稱GUI應用程式的領域發展(Graphicaluserinterface圖形使用者介面)。

  相關文章: Node.js是什麼?NPM又是什麼?為什麼前端與後端都需要用它們呢?   雖然線上應用程式也很多人使用,但是我們生活中還是充斥著很多桌面程式,例如,微軟著名的VisualStudioCode,開發WebAPI的好用測試工具Postman,Git/Github新手神器GithubDesktop ,與工作溝通神器Slack ,老牌聊天視訊軟體Skype。

製作這些桌面程式的關鍵人物可就是鼎鼎大名的跨平台解決方案-Electron,今天就讓小編來為各位簡單介紹一下這傢伙的奧妙之處。

    首先,桌面應用程式跨平台問題一直都是開發者的痛點,Windows上有微軟的幾種解決方案,基本上使用C#語言開發,但是他無法跨平台在其他作業系統上執行,例如MacOS或是Linux。

而MacOS也同樣的,必須要使用XCode建立MacOS應用程式,使用的是Swift或是Objective-C語法,函式庫與UI邏輯等 iOS有不小的差異。

  這層面上,大多數的公司因為市佔率的關係選擇拋棄MacOS的確是不難想像的決定。

真的選擇建立兩版程式的公司並不多見(大多為通訊軟體)。

        不過WindowsOnly有一個問題,早期2000前後因為網頁應用還沒有那麼複雜,使用者體驗沒有那麼好,所以Windows桌面應用程式很流行。

但是現在網頁程式當道,並不是那麼多程式需要那麼的「及時」反應,所以就連Word,Excel,PowerPoint,Outlook都已經網路化了,GoogleDocs,Sheets,Sliders,Gmail等網路應用程式也已經是很多年輕人棄微軟Office系列後的首選。

這也表示,如今桌面應用在很多領域是沒有必要的選擇,直接做Web版就可以了,那桌面應用在什麼情況是有用的呢?   首先要先認知的是,雖然桌面應用不代表不連網路,但是不連網路只有桌面應用程式可以運行,所以有一些情況是不方便做網路設計的話,那可能桌面應用是首選。

  另外一個就是畫面即時反應能力,這層面要分成兩個部分。

第一個是,網站在切換頁面的時候,需要額外送出網路連線取得新頁面的資料,才有辦法繪製畫面。

但是桌面應用不用,大多數的頁面資源都已經放在APP裡面,在安裝的時候就下載好了。

另外一個就是跟作業系統核心的距離,如果中間隔太多層,那反應自然感覺就會慢。

    在大部分的桌機上,網頁應用的速度其實已經非常好了,但是如果是效能比較差的裝置型的電腦,那就不太一定。

再來,裝置型的電腦有很大部分是Linux作為作業系統,因為微軟授權費的問題。

這時候微軟的解決方案就不能使用了。

所以如果一樣的開發環境可以在多個作業系統上運行是再好不過了。

    跨平台解決方案通常不像人們所想的那麼神奇,並不是匯出APP後就可以直接在各個作業系統上安裝,而是要為針對作業系統用同一套程式碼匯出各個對應的版本。

並且很多時候,需要為特定的作業系統做部分客製化。

所以你可以想成本來分開寫是兩組程式碼,現在變成1組程式碼+兩部分額外優化的程式碼。

至於哪邊比較花時間其實不一定。

但是跨平台方案的絕對好處是不需要學習多種程式語言,比方說原本你要學C#和Swift才能分別開發,但是用NodeJS只需要會JavaScript 即可,如果是小組開發上,人力規劃也比較單純,可以互相支援。

但是原生的開發方式基本上就是親兒子,開發上的坑總是最少的,所以最適合的開發方式還是要看個案評估才會比較準確。

    Electron是由GitHub當初為了開發Atom編輯器而衍生出的一個開源框架,第一個版本發佈為2013年,主要是可以透過Node.js作為後端的開發,並使用Chromium為前端來完成桌面應用程式的開發。

(Github被微軟收購後,Atom好像就沒什麼消息了,資源似乎都在VisualStudioCode上面)   許多人可能不熟悉Chromium,人如其名,他就是Google以Chrome為基礎發布的一個BSD開源專案,像是新版的MicrosoftEdge,Opera等著名瀏覽器,就是透過Chromium為基礎去開發的。

  都用同樣的核心有好處,代表JavaScript與CSS的一致性。

但是也會變成Google說什麼就是什麼,多少還是有壟斷市場的問題。

此外,如果Chromium本身效能不好的話,就會一起拖累整個市場。

Chrome幾乎已經成為大家一般電腦使用中最吃資源的程式了。

      一個標準的Electron應用程式,最少會包含三種檔案:package.json,index.html以及main.js。

index.html就是主要的進入點,主要就是處理呈現給使用者端的圖形化介面,而main.js則是程式應用核心的運算部分的進入點,而package.json就是node.js的設定文件。

  從上看就可以看得出來,Electron製作出來的應用程式就是一個 Node.js的應用程式,當然還要包含了其他 Electron 的函式庫才有辦法運行。

而Electron本身就是一個Node.js應用程式,當中與後端的呼叫與資料庫連結等,都可以使用Node.js的方式來做開發。

又因為基於Chromium的關係,所以Electron 是一個跨平台整合方案,畢竟在Windows,MacOS,Linux這些作業系統上面,Chromium都可以運行。

    此外,因為 Electron自備Chromium,所以不需要像網路應用程式一樣去考慮Client端用的是哪一個瀏覽器,甚至是哪一版的瀏覽器。

所以不用怕碰到CSSJavaScript不相容的問題。

    但好用歸好用,其實也是有一些小缺點,雖然他對前端出生的人來說相當友善又好上手,但麻煩的是他的封裝檔案Size跟其他相比卻是大上不少(畢竟自帶Chromium),另外由於他的開發方式還是以Web瀏覽器開發為基底,程式碼無需編譯明碼執行以及執行較耗資源這些壞毛病也是一脈相承。

  有些公司並不喜歡程式碼直接可以被看到,但是如果這個桌面應用最核心的部分還是要回寫遠端資料庫,或是做成後面提到的C++函式庫概念的話,那還是可以被隱藏起來。

      此外,在Desktop跨平台整合方案中還有一個明星QT。

單就效能來講的話,基於C++的QT在本質上會比Electron.js要來得優秀不少,畢竟中間沒有隔一層。

但是QT也是有相對應的缺點,一是超級貴的收費模式,不然就要強迫LGPL中獎。

Electron.js則是免費商用的(BSD授權)。

  延伸閱讀: 避免無謂的商業授權費,搞懂LGPL與GPL的不同   再來,會JavaScript的人,通常對CSS也是有一定程度的認識,Electron.js的畫面一樣是用CSS控制,當然使用前端框架例如React、Vue.js、Bootstrap絕對是沒問題的。

如果使用QT的話,那就要重新學習他的畫面控制邏輯。

也是要花不少時間學習。

  另外一個議題是,其實Node.js是可以跟C++共同使用的(官網:C++Addons)。

畢竟Node.js基於V8JavaScriptengine,而且V8JavaScriptengine也是由C++寫的,所以在設計的一開始就包含了與C++互動的路徑。

一般來說只要效能有問題,解決方案通常就是讓C/C++來解決(C++相容C語言),就跟Python/Ruby是一樣的。

所以Electron.js如果有效率的問題的話,一樣是可以利用C++來救援。

    總之,有興趣往桌面應用程式開發的你,如果已經有著豐富的前端開發經驗,不如試著使用看看Electron來打造人生的新一個高峰吧!   最後,如果你喜歡我們的文章,別忘了到我們的FB粉絲團按讚喔!! 進度條編輯群 進度條編輯團隊 關聯文章 多想一下,或許這個專案不需要用ReactJS。

大家瘋狂學習JavaScriptES6的原因,從劣勢來反向介紹ReactJS 響應式頁面只能用Bootstrap3製作嗎?不,但它最方便! 響應式頁面(Responsive)框架百花齊放,但依情況其實並不真的有那麼多的選擇。

網站電商如同實體店面,盲目跟風設計真的好嗎?讓我們來介紹UI、UX的重要性 Ikea如迷宮版的賣場動線、全聯呈現多樣商品的壅擠成列都有他們的原因,你的網站設計概念為何? [HTML][新手]04.中文編碼表示metacharset [HTML][新手]04.中文編碼表示metacharset Node.js是什麼?NPM又是什麼?為什麼前端與後端都需要用它們呢? 後端用其他程式語言也要略懂Node.js?無所不在的JavaScript你最好要先暸解! 你知道SEO是指「搜尋引擎優化」嗎?提升搜尋關鍵字又有哪些方法呢? 架設網站就是要讓人看見,如果沒有人在瀏覽就跟沒架是一樣的! [JavaScript]上傳圖片同時預覽一張不夠,那你有試過兩張嗎? 上傳圖片同時預覽已經會了,但改成多張圖片好像就不會了。

想寫桌面程式卻無從下手?Electron讓你橫跨WindowsMacOS與Linux無煩惱! 從前端到DesktopApplication?淺談跨平台整合方案Electron.js [ReactJS]01.為什麼要用ReactJS 從頭開始,從使用面與程式碼來介紹ReactJS [HTML][新手]02.什麼是HTML與如何建立它 本文將示範如何建立第一個HTML檔 顯示全部 最新文章 5分鐘自架免費VPN設定步驟教學,在LinuxVPS上自架OpenVPN搞定跳板連線 自架VPN超快,照著做輕鬆簡單不失敗! 你的地區可能無法觀看此影片?快使用VPN跳板來解決地須限制跨區解鎖觀看! 被限制IP地區使用VPN已經是常識,但你知道基本VPN原理與自架和服務商的差別嗎? [LayerStack]完整LinuxVPS使用PM2與Nginx架設Node.js站台設定中文教學 使用LayerStackVPS透過CN2GIA最高級線路,讓網站在中國大陸也可順暢連線 桌面太小被電腦螢幕佔據嗎?Ultrarm螢幕支架應該就是你要的推薦方案喔!扎實用料一次到位。

台灣公司Ultrarm螢幕支架相當堅固可以一次架兩個螢幕,最高支援49"吋螢幕。

如何避免自製WordPress外掛被GPL授權?顧客購買「付費版」可以免費無限複製不用付授權費嗎? 開不開源是個人選擇,豐富社群當然是件好事。

但是被強迫開源就不是開發者所樂見的事了。

【微創業】電商為何要自架站台?被平台綁架的下場只有流量營業額減半等著你-自架站台的重要性(二) 我電商就賺飽了,為何要架設一個網站?架設網站一定要用WordPress嗎? 【IKoula】使用LinuxVPS上架設PHP站台全紀錄!從Ubuntu設定到網站上線一次搞定 經濟實惠的IKoulaVPS,適合初學者練習與進階商業架站的好選擇! 後端工程師(BackendDeveloper)是什麼?成為後端需要學習什麼技術?很難嗎? 前端與後端差別在哪?如何選擇?為何後端工程師也要學習基礎「前端」技術? 想快速保障網站安全?快嘗試SucuriCDNWAF雲端應用防火牆!遠振代理台灣專業服務協助設定。

架站不會程式?WordPress被入侵?使用SucuriCDNWAF以銅板價格讓你一天內就確保網站安全! WordPress推薦必裝外掛(一),精選常用Plugins超好用清單,免費實用外掛絕不能錯過! WordPress外掛這麼多種,先從免費實用外掛開始,這些是即使會寫程式也很方便的外掛 顯示全部 線上課程 Bootstrap5與Sass,製作RWD客製化響應式網站 Laravel後端PHP架站,APIServer與訂閱軟體全攻略 WordPress-從頭教起的網站架設 程式客製WooCommerce,WordPress購物系統全解析 iOS-Swift5手機程式開發,使用APP與網站互動 Electron跨平台桌面程式,建立點餐系統與裝置控制 C語言-近代程式語言的基礎 ES6,ReactJS與Webpack,前端JavaScript全攻略 從零開始的SQL語法與資料庫設計-以MySQL來攻略 Linux雲端伺服器,用AWS暸解Apache與Nginx HTML,CSS,JavaScript,jQuery網頁從零開始 Git程式版本管控-由簡單到難 快速開發,從頭教起的RubyonRails後端之旅 行動第一!使用Bootstrap建立響應式RWD網站!



請為這篇文章評分?