1 概況1.1 背景

Web本身就是跨平臺的，這意味著這中間存在著無限的可能性。

我是一名Web Developer，對於我來能用Web開發的事情就用Web來完成就好了——不需要編譯，不需要等它編譯完。我想到哪我就可以寫到哪，我改到哪，那兒就可以發生變化。

最近我在寫Growth——一個幫助開發人員成長的應用，在近一個月的業餘時間裡，完成了以下內容。

·移動應用版：Android、Windows Phone、iOS（等賬號和上線）

·Web版。

·桌面版：Mac OS、Windows、GNU/Linux。

1.2 ShowCase（見圖1）

截圖合併如下：

圖1 growth-full-platforms.png

1.3 Ionic & Electron & Cordova

而更重要的是它們使用了同一份程式碼——除了對特定裝置進行一些處理就沒有其他修改。相信全棧的你已經看出來了：

Web = Chrome + Angular.js + Ionic

Desktop = Electron + Angular.js + Ionic

Mobile = Cordova + Angular.js + Ionic

除了前面的WebView不一樣，後面都是Angular.js + Ionic。 2 步驟 Step 1： 從Web到混合應用，再到桌面應用

在最開啟的時候它只是一個單純的混合應用，我想總結一下我的學習經驗，分享一下學習的心得，如：

· 完整的Web開發、運維、部署、維護介紹。

·如何寫好程式碼——重構、測試、模式。

· 遺留程式碼、遺留系統的形成。

·不同階段所需的技能。

·書籍推薦。

·技術棧推薦。

·Web應用解決方案。

接著我用Ionic建立了這個應用，這是一個再普通不過的過程。在這個過程裡，我一直使用Chrome在排程我的程式碼。因為我是Android使用者，我有Google Play的賬號，便釋出了Android版本。這時候遇到了一個問題，我並沒有Apple Developer賬號(現在在申請ing。。)，而主要的使用者物件程式設計師，這是一群不土的土豪。

圖2 iPhone

偶然間我才想到，我只要上傳Web版本的程式碼就可以暫時性實現這個需求了。接著找了個AWS S3的外掛，直接上傳到了AWS S3上託管成靜態檔案服務。

幾天前在Github上收到一個issue——關於創造桌面版， 我便想著這也是可能的，我只需要寫一個啟動指令碼和編譯指令碼即可。

所以，最後我們的流程圖就如下所示：

圖3 Growth Arch

除了顯示到VR裝置上，好像什麼也不缺了。並且在我之前的文章《Oculus + Node.js + Three.js 打造VR世界 》，也展示了Web在VR世界的可能性。

在這實現期間有幾點可以分享一下：

（1）響應式設計。

（2）平臺/裝置特定程式碼。 Step 2： 響應式設計

響應式設計可以主要依賴於Media Query，而響應式設計主要要追隨的一點是不同的裝置有不同的顯示，如：

圖4 full-platforms.jpg

這也意味著，我們需要對不同的裝置進行一些處理，如在大的螢幕下，我們需要展示選單，如圖5所示。

圖5 gnu-linux.png

而這可以依賴於Ionic的expose-aside-when=“large”，而並非所有的情形都是這麼簡單的。如我最近遇到的問題就是圖片縮放的問題，之前的圖片針對的都是手機版——經過了一定的縮放。

這時在桌面應用上就會出現問題，就需要限定大小等。

而這個問題相比於平臺特定問題則更容易解決。 Step 3： 平臺特定程式碼

對於特定平臺才有的問題就不是一件容易解決的事，分享一下。 儲存

我遇到的第一個問題是資料儲存的問題。最開始的時候，我只需要開始混合應用。因此我可以用Preferences、或者SQLite來儲存資料。

後來，我擴充套件到了Web版，我只好用LocalStoarge。於是，我就開始抽象出一個$storageServices來做相應的事。接著遇到一系列的問題，我捨棄了原有的方案，直接使用LocalStoarge。 資料分析

為了開發方便，我使用Google Analytics來分析使用者的行為——畢竟資料對我來說也不是特別重要，只要可以看到有人使用就可以了。

這時候遇到的一個問題是，我不需要記錄Web使用者的行為，但是我希望可以看到有這樣的請求發出。於是對於Web使用者來說，只需要：

        trackView: function (view) {          console.log(view);        }

而對於手機使用者則是：

      trackView: function (view) {        $window.analytics.startTrackerWithId('UA-71907748-1');        $window.analytics.trackView(view)      }

這樣在我除錯的時候我只需要打個Log，在產品環境時就會Track。 自動更新

同樣的，對於Android使用者來說，他們可以選擇自行下載更新，所以我需要針對Android使用者有一個自動更新：

var isAndroid = ionic.Platform.isAndroid();if(isAndroid) {  $updateServices.check('main');}

桌面應用

<script>//remove module for electronif(typeof module !== 'undefined' && module && module.exports){  delete module;}</script>

類似的問題還有許多，不過由於應用內容的限制，這些問題就沒有那麼嚴重了。

如果有一天，我有錢開放這個應用的應用號，那麼我就會再次獻上這個圖（見圖6）。

圖6 六邊形架構 未來

我就開始思索這個問題，未來的趨勢是合併到一起，而這一個趨勢在現在就已經是完成時了。

那麼未來呢？你覺得會是怎樣的？

本文節選自《一個全棧增長工程師的練手專案集 》

本文作者畢業於西安文理學院電子資訊工程專業，現就職於ThoughtWorks，InfoQ社群編輯，CSDN 前端專家。長期活躍於開源軟體社群GitHub，專注於物聯網和前端領域。 著有《自己動手設計物聯網》、曾作為技術專家審閱英國Packt出版社的物聯網書籍《Angular Service》《Getting started with Angular》等書。在GitHub開源有《Growth：全棧增長工程師指南》等6本電子書，並譯有《物聯網實戰指南》。