1.基於HTML+CSS+Javascript開發窗口應用node
最近接了一個私人外包項目，用到了HTML技術開發傳統的桌面應用程序，一開始也不太會，由於沒有相關的開發經驗，但通過一番學習後，很有感慨，原來還能夠利用HTML+CSS+JavaScript等技術來方便快速的開發界面漂亮的Windows桌面應用程序。經過這個項目，感受本身也學到了很多新知識，遂寫點東西記錄一下本身在開發過程當中的一些心得感悟。linux
之前開發桌面應用程序我通常都喜歡選擇MFC+Visual C++或者C#等語言來編寫應用，可是感受極爲不方便。一是，寫出來的窗口界面都不太好看；二是，代碼量比較大；三是，軟件跨平臺特性也很差。近些年HTML技術快速發展，利用HTML5+CSS3能夠快速的開發漂亮的各類網頁，同時也出現了一些利用此類技術來快速開發桌面應用的技術和工具。程序員
這裏，介紹一種很是好用的工具 ——nw.js（http://nwjs.io）,nw.js實際上 是node.js和webkit的結合體，webkit提供DOM操做，node.js提供本地化操做，且將兩者的context徹底整合，可在HTML代碼中直接使用node.js的API，功能十分強大。web
有了這個工具，利用HTML等技術來開發桌面應用變得易如反掌（固然，須要開發者熟悉HTML、CSS三、JavaScript等網頁開發技術）。chrome
2.easy-window | HTML5桌面應用程序開發
一 背景
一般咱們開發桌面程序選擇java swing，這無疑是一個好選擇；
以前我寫過一篇《swing和java裏嵌入瀏覽器使用JavaFX的方式》也是來探索將swing 與html相結合來開發桌面程序；
今天發現一個更簡單的工具，實現桌面程序的開發 --easy-window。
二 優點
不須要掌握java 、C++等語言，只須要html、css、js;
甚至不須要懂程序，就能夠作一個桌面程序。
三 分享
1.工具
easy-window.exe
3.跨越平臺桌面應用開發框架electron使用的心路歷程
前言
首先聲明一下這篇文章不談代碼，只談心。
從接觸Electron到真正去作出一個桌面應用，再到今天寫下這邊文章，大概花了三個月時間吧，到不是由於有多難，主要是這純碎是我的興趣，本身是在業餘時間乾的，公司裏面目前尚未推行,這段時間開發任務又比較重，因此斷斷續續用了三月吧。今天寫下這篇文章只是記錄一下這個過程，也是和初學者分享一下。相信大多數人都是知道Electron最初是起源於Atom,而後從Atom剝離開來最終造成了如今的Electron，目前使用Electron來開發的桌面用很是多，咱們最熟悉的好比Atom,VScode…,這類IDE，除此以外還有一些開發的輔助工具也藉助於electron，好比iview的官方腳手架用來建立vue項目，騰訊的weFlow工具，等等。這些輔助工具將平時的一些命令行操做集成到了圖像化界面操做中來,使用起來更加方便簡潔。總的來講，electron對於咱們前端來講用到的知識沒什麼特別的，可是作出來的東西感受挺新鮮的，畢竟一下從作web頁面，昇華到作桌面應用了，心裏仍是有點小激動的。
目錄：
我是何時開始接觸electron的
爲何做爲一個前端要花時間在Electron這種桌面應用開發框架上去
爲何愈來愈對她愈來愈有感受了
爲何必定要作成桌面應用，web網頁不是也能幹他的活嗎
使用eletron須要儲備哪些知識
學習electron的過程當中須要注意什麼
electron的弊端
我是何時開始接觸electron的
最早接觸的是Weex這一類的垮終端移動APP開發框架，後來開始使用VScode編輯器，才據說Electron有多麼的強大，而後跑去Electron的官網一看，首頁那句醒目的標題「使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用」瞬間吸引到了我，而後就開始幹，從最開始的官方demo到electron-vue再到本身開始作了一個前端開發的輔助工具應用，一步步趟過來，有點喜悅，也有點頭疼，雖然已經有相似Atom,VScode這樣的產品了，可是發如今開發過程當中遇到的問題，度娘上仍是找不到幾篇真正能解決問題的帖子，最後仍是本身去踩，可是比起weex來仍是好多了，不是黑weex，主要是他的生態建設太差了，新入門的須要花費大量的時間去學習，而且須要在實際應用中不斷去發現問題，而後解決問題，關鍵是解決問題的過程當中不多能得到社區的幫助。言歸正傳，咱們仍是回到electron的話題上來。
爲何做爲一個前端要花時間在Electron這種桌面應用開發框架上去
做爲一個web前端開發人員，去弄桌面應用是否是有點不誤正業。這個其實否則，首先electron的精華就是」使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用」，這就是赤裸裸的在勾引咱們前端開發人員，臣妾就是爲你服務的。其次在node出來以後，前端的定位其實開始變得模糊起來了，前端開發人員再也不僅僅侷限於UI和頁面,UE和業務邏輯的實現了，開始愈來愈多的接觸後端的知識，‘大前端’這個名詞也開始常常在各類公開場合見到，就連ES也開始和java這對兄弟也開始相認了（愈來愈像了），因此多接觸一點也算是與時俱進吧。
像Electron這種結合了Node，Chromium,html,css,js的框架，對於有志成爲‘大前端’的同窗來講，是比較有吸引力的，它是基於node的，對於熟悉node生態圈的人來講，開發起來就更加如魚得水了。這裏可能惟一比較陌生的可能就是Chromium了，咱們能夠拿面向對象的思想來看待它，electron已經幫咱們封裝了對於Chromium的操做，so.咱們只須要了解electron的API就好了，剛開始接觸沒有必要去糾結本身對於它有多瞭解，當到了用electorn開發桌面應用如魚得水的時候，咱們有時間能夠去了解一下他。因此這些所謂的陌生並不會成爲咱們學習和使用electorn 阻礙做爲一個程序員，就是要敢於去接觸新的東西，這樣平時枯燥的編碼生活纔會多一點點色彩。
因此，做爲前端徹底能夠大膽去嘗試使用electron來開發桌面應用，技多不壓身，在未來的某些時候或許能夠爲你提供一種全新的解決方案。
爲何愈來愈對她愈來愈有感受了
他讓我擺脫了不一樣瀏覽器之間的差別和版本的限制，因爲electron是基於Chromium的（Chromium是chrome的開發者版本），他徹底遵循W3C的標準，對ES,CSS,BOM，DOM的最新規範都有很好的支持，因此咱們在寫代碼的時候，什麼ES6,7,8,DOM0,2,3都大膽的用起來，爽歪歪。
基於Node,生態成熟，有足夠豐富的第三方包來支持咱們的開發。不必本身再絞盡腦汁的去想某個功能的實現，別人寫的npm包早已幫咱們實現，這就是」拿來主義」的好處。
能夠開發跨平臺的桌面應用，就像weex宣傳的那樣「write once,run everyWhere」,只須要寫一份代碼，打包出來的應用能夠在windows,linux，mac OS上面運行。固然這是最理想的狀況，不管是RN，weex仍是electron,要作到多端共用，仍是須要在代碼中作必定的適配的，大概有百分之八十是共用的吧，剩下的百分之二十仍是須要兼容一下。
爲何必定要作成桌面應用，web網頁不是也能幹他的活嗎
在最開始的時候我也有這樣的疑問,用web網頁來實現不是更好嗎，只要有瀏覽器就能夠訪問，並且只要終端上面有瀏覽器就能訪問，這樣還省去了應用的安裝步驟多好啊。在接觸久了以後發現，網頁能幹的他能幹，並且乾的更好，web不能幹的，他也能幹。好比：
1.他能夠擺脫瀏覽器的沙盒機制，能夠訪問操做系統層面的東西。咱們在網頁上面只能藉助於後臺服務去幹這種事，而後經過http告訴前端頁面，若是要處理本地文件，還得將文件傳到服務器上去，讓服務器處理。
2.更好的用戶體驗，無論咱們是作成B/S的web仍是作成客戶端的形式，最終的目的實際上是在實現功能需求的同時仍是最求更好的用戶體驗，在用戶體驗上桌面應用無疑更上一層。就像你webApp和原生APP比較，原生無疑仍是體驗更好。
既然electron就能夠作桌面應用，那是否是就沒有C#和C++什麼事了
在electron以前，桌面應用基本上是靠C#和QT來作。那爲何不用他們來作，非得整個electron呢。
效率，就我我的的使用經驗來看，用electron來開發相同需求的桌面應用，使用electron來開發效率明顯比其餘的要提升不少，並且作出來的桌面效果更佳。
C#的開發者如今基本上在各個公司都是稀有物種了，如今都跑去開發移動端應用去了，PC端的桌面應用感受沒什麼油水了，能用web開發的就用web了，這樣天然開發的人就少了，開發人員少了若是還用他去開發，這樣後期維護起來會比較困難。
除了C#不是還有QT嗎，這個我沒有寫過，可是咱們組老大就是用QT框架來桌面應用的，可是當他看見electron的時候，感慨仍是這個寫起來方便。
固然java也有相似Swing之類的桌面UI組件，可是效果比較通常，也能作比較酷的效果可是比較耗時。
固然這並非說electron 就能夠替代C#和QT，每總技術都有適合他的應用場景，在作以前咱們在技術選型的時候，須要充分的考慮他們的利與弊，後面我會說說我在使用electron使用中碰見的弊端。
使用eletron須要儲備哪些知識
首先須要熟練掌握前端的基礎知識html,css，js，爲何要強調熟練，由於做爲前端，你連這都沒掌握，那我仍是建議好好學習一下前端基礎知識吧，等基礎打牢了再出來浪。
有必定的node基礎，也就是對nodejs有必定了解，知道他是什麼，用來幹什麼的，怎麼環境搭建，npm包的使用，我是建議系統的學一下nodejs,看看官方文檔，而後Express或者Koa這種web服務框架看看，本身搭建一個web服務玩玩，如今流行大前端，走出去不知道nodejs，所實話有點很差意思。
在具有了上面兩門絕技以後，就能夠跟着官方demo,把electron的demo拉下來根據步驟，將代碼跑起來，看看electron作的桌面應用到底長什麼樣子，感覺一下。
在demo跑起來後而後再根據demo的結構看看裏面使到的API，這裏我不建議一開始就去擼官方的API文檔，這樣你可能很快就放棄了，一看，呀這麼多API那記得住啊，而後就在內心開始打退堂鼓了。一步一步來，用到什麼，而後去看什麼，這裏我後面會將我從搭建環境到最後製做打包出APP的心路歷程分享出來，有興趣的能夠留意一下，下個月吧。
學習electron的過程當中須要注意什麼
首先不要急功冒進，一來就要乾點什麼大事，先按照文檔，將demo跑起來，看看怎麼搭建開發環境，怎麼打包成一個可執行程序，這裏打包出來的執行程序可能有點難看，可是不要在乎，先將就用着，我會在後面的筆記整理中提到如何打包成咱們平時看到那樣的安裝程序。
建議如今網上找一些鼻尖簡單的demo看看，然要一上來就擼官方API文檔，這樣太枯燥了，並且好多API你一開始也用不上，看看簡單的demo，將基本的API掌握，再去完善其餘。
須要分清楚主進程和渲染進程，分清楚他們的職能，這樣咱們在寫代碼的時候纔不會混淆，代碼的層次結構才能分的領清。
有node經驗的小夥伴不要先入爲主將主進程當着nodejs中的服務端了，我開始就這麼幹的，一看到node就激動了，這樣你會碰見不少坑的，並且可能還爬不出來。
electron的弊端
前面都是說electron是多麼多麼方便快捷，如今提一下，我在使用中遇到的弊端
窗口建立背景的問題，在html沒有被加載完成前，窗口只用用背景色去填充，不能使用個性化的背景圖案，這會形成首次加載的體驗很差。
打包出來的APP太大，就是最簡單的應用打包出來都有40多MB。
總結
就一句話，前端如今真是牛逼大了，老本行web就不說了，用nodejs能夠搭建後臺服務，用RN,weex能夠作移動端APP，如今electron連PC桌面端應用也不放過了，如今誰還敢說咱們前端就是寫寫頁面，寫寫樣式的。吼！吼！
4.Electron + Vue + Vscode構建跨平臺應用（五）Electron-Vue項目源碼分析