使用Angular與TypeScript構建Electron應用(一)

Electron是一個構建桌面應用的框架，它與傳統的桌面級應用開發方式有一些區別，它使用的是如今流行的Javascript。這個系列的文章可能須要你有一些ES6與Angular2基礎知識，不過即使是沒有嘗試過它們也沒有關係，你能夠打開編輯器跟隨教程一步一步搭建應用。有關Electron你能夠參考這裏的文檔

介紹

在此教程中，咱們會使用Electron與流行的Angular最新版本構建一個桌面應用。
咱們暫定應用叫作news-feed，它至少擁有如下幾種功能：

1. 抓取流行的一些新聞，而且儲存在本地

2. 列表顯示新聞，提供文章詳情查看

3. 能夠下載感興趣的文章到本地

基礎

Angular

Angular目前版本較多，腳手架也比較複雜，在寫這篇文章時，Angular最新版本是4.beta，咱們也採用它來構建。

1. 運行npm i angular-cli@1.0.0-beta.25.5 -g，安裝全局的angular命令行工具。

2. 在項目根目錄下運行ng new news-feed --style=scss開始建立一個angular應用。(這一步須要一些時間，取決於你的網絡。若是發生node-sass錯誤，請確保你擁有c++編譯環境，具體能夠參考github的node-sass項目來安裝)

3. 運行ng server，打開瀏覽器127.0.0.1:4200便可看到Angular已經正常運行了。

至此，Angular已經能夠正常運行，但值得一說的是ng server命令並不能輸出文件，咱們須要的是即時監視並編譯出文件來供做electron渲染才行，因此咱們須要爲package.json文件的script這一欄添加一行命令:"watch": "ng build -watch -o dist/"。這樣，每次咱們運行npm run watch時即可以自動監視文件並幫咱們編譯文件了。

還有一個小問題存在，咱們這樣編譯出來的文件路徑會沒法正確的在electron中渲染，這是由於咱們沒有指定資源的相對路徑，能夠在src/index.html中修改<base href="/">爲<base href="./">。直到這一步，咱們的Angular全部問題都已經解決。

Electron

有關electron的介紹有不少，具體你也能夠參考其餘教程來搭建，這裏僅僅提供一些基礎環境的提示。若是你須要參考更多的資料，能夠參考官方文檔或是在GITHUB上搜索相關項目。

這裏系統默認爲MAC，默認你已經擁有基礎的c++編譯環境與其餘基礎的開發設施。(它們在編譯一些庫時可能須要)

1. 安裝全局electron-prebuilt： npm i electron-prebuilt -g，它用來運行一些electron命令。若是須要權限，請嘗試sudo npm i electron-prebuilt -g安裝。完成後可經過electron -v來查看版本。

2. 進入news-feed目錄，咱們在package.json文件中新增"main": "index.js"，爲electron指定入口文件。

3. 運行npm i electron --save安裝electron依賴。(可能須要很長一些時間，若是一直卡在electron install中，說明你須要一些比較好的命令行代理，或者你能夠嘗試這個命令來從淘寶源安裝:ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm i -save electron)。

4. 在根目錄下添加index.js，並填充一些基礎代碼:

const {app, BrowserWindow} = require('electron')
let win;
const createWindow = () =>{
    win = new BrowserWindow({
        width: 700,
        height: 500,
        show: false,
    });
    win.loadURL(`file://${__dirname}/dist/index.html`);
    win.webContents.openDevTools();
    win.on('closed', () => win = null)
    win.on('ready-to-show', () =>{
        win.show()
        win.focus()
    })
}

app.on('ready', _ => createWindow())
app.on('window-all-closed', _ => process.platform !== 'darwin'&& app.quit())
app.on('activate', _ => win === null&& createWindow())

如今總體的項目結構應該像是這樣:

如今先運行npm run watch開始編譯angular，再打開一個新的命令行窗口運行electron ./便可看到運行後的效果。
怎麼樣，是否是很酷？

架構

先別急着開發，咱們再來梳理一下項目結構以及具體應該怎樣開發。
Electron雖然有不少API可使用，但其中大部分都不能夠在渲染進程中使用。所謂的渲染進程，你們能夠簡單的理解爲前端視圖層，每當咱們須要藉助系統API或NODE原生的模塊，就須要向主線程發送申請，而後得到一些數據來計算與填充模板。

固然，也有一部分人使用remoteAPI在渲染進程來使用主進程的對象，可是我並不推薦你們這樣作，由於在渲染進程也就是你的Angular中任何的代碼都有可能引發全局的內存泄露，特別在複雜業務中使用事件監聽時。這類問題很是難以定位，即使是刷新窗口也沒法解決，由於主線程不會隨着頁面刷新而重啓。

在Angular中，咱們能夠將每次請求的數據包裝成Rx對象，就像是使用http同樣使用它們。Electron則負責抓取相應的數據返回或存儲。這裏咱們能夠採用一些nodejs中通用的庫來解決這些瑣碎的事情。咱們但願每次抓取數據後處理成比較好的json格式返回給前端，因此還須要對字符串進行篩選和組裝。

這個應用沒有權限的控制，但爲了你們學習這一點，咱們能夠假使它是一個註冊收費軟件，每次須要登陸後才能使用，便於咱們學習一些路由的權限控制。

一個好的應用不只要有好的基礎邏輯，細節也是決定成敗的關鍵一點，這就像是《西部世界》裏面Ford說的，『他們會爲細微(subtleties)而來，爲細節(Details)而來，由於愛上(In love)而來』。好比咱們能夠記錄用戶的一些習慣，窗口被拖動到多大，窗口位置被拖動到了哪裏，文章基礎字體多大等等，在下次啓動時爲他們配置好。爲用戶準備足夠好的字體與閱讀感覺，更新的速度，方式，機會，閱讀與下載的方式等等，在此次開發時咱們不妨考慮一下這些細節，在學習新技術時，嘗試作一個讓人稱讚的產品！

注：原文首次載於維特博客。須要演示項目請看這裏