Web本身就是跨平臺(tái)的，這意味著這中間存在著無限的可能性。
我是一名Web Developer，對于我來能用Web開發(fā)的事情就用Web來完成就好了——不需要編譯，不需要等它編譯完。我想到哪我就可以寫到哪，我改到哪我就可以發(fā)生哪發(fā)生了變化。
最近我在寫Growth——一個(gè)幫助開發(fā)人員成長的應(yīng)用，在近一個(gè)月的業(yè)余時(shí)間里，完成了這個(gè)應(yīng)用的：
- 移動(dòng)應(yīng)用版：Android、Windows Phone、iOS（等賬號(hào)和上線）
- Web版
- 桌面版：Mac OS、Windows、GNU/Linux
截圖合并如下：
而更重要的是它們使用了同一份代碼——除了對特定設(shè)備進(jìn)行一些處理就沒有其他修改。相信全棧的你已經(jīng)看出來了：
Web = Chrome + Angular.js + Ionic
Desktop = Electron + Angular.js + Ionic
Mobile = Cordova + Angular.js + Ionic
除了前面的WebView不一樣，后面都是Angular.js + Ionic。
從Web到混合應(yīng)用，再到桌面應(yīng)用
在最打開的時(shí)候它只是一個(gè)單純的混合應(yīng)用，我想總結(jié)一下我的學(xué)習(xí)經(jīng)驗(yàn)，分享一下學(xué)習(xí)的心得，如：
- 完整的Web開發(fā),運(yùn)維,部署,維護(hù)介紹
- 如何寫好代碼——重構(gòu)、測試、模式
- 遺留代碼、遺留系統(tǒng)的形成
- 不同階段所需的技能
- 書籍推薦
- 技術(shù)棧推薦
- Web應(yīng)用解決方案
接著我用Ionic創(chuàng)建了這個(gè)應(yīng)用，這是一個(gè)再普通不過的過程。在這個(gè)過程里，我一直使用Chrome在調(diào)度我的代碼。因?yàn)槲沂茿ndroid用戶，我有Google Play的賬號(hào)，便發(fā)布了Android版本。這時(shí)候遇到了一個(gè)問題，我并沒有Apple Developer賬號(hào)(現(xiàn)在在申請ing。。)，而主要的用戶對象程序員，這是一群不土的土豪。
偶然間我才想到，我只要上傳Web版本的代碼就可以暫時(shí)性實(shí)現(xiàn)這個(gè)需求了。接著找了個(gè)AWS S3的插件，直接上傳到了AWS S3上托管成靜態(tài)文件服務(wù)。
幾天前在Github上收到一個(gè)issue——關(guān)于創(chuàng)造桌面版， 我便想著這也是可能的，我只需要寫一個(gè)啟動(dòng)腳本和編譯腳本即可。
所以，最后我們的流程圖就如下所示：
除了顯示到VR設(shè)備上，好像什么也不缺了。并且在我之前的文章《Oculus + Node.js + Three.js 打造VR世界》，也展示了Web在VR世界的可能性。
在這實(shí)現(xiàn)期間有幾個(gè)點(diǎn)可以分享一下：
- 響應(yīng)式設(shè)計(jì)
- 平臺(tái)/設(shè)備特定代碼
響應(yīng)式設(shè)計(jì)
響應(yīng)式設(shè)計(jì)可以主要依賴于Media Query，而響應(yīng)式設(shè)計(jì)主要要追隨的一點(diǎn)是不同的設(shè)備不同的顯示，如：
這也意味著，我們需要對不同的設(shè)備進(jìn)行一些處理，如在大的屏幕下，我們需要展示菜單：
而這可以依賴于Ionic的expose-aside-when="large"，而并非所有的情形都是這么簡單的。如我最近遇到的問題就是圖片縮放的問題，之前的圖片針對的都是手機(jī)版——經(jīng)過了一定的縮放。
這時(shí)在桌面應(yīng)用上就會(huì)出現(xiàn)問題，就需要限定大小等等。
而這個(gè)問題相比于平臺(tái)特定問題則更容易解決。
平臺(tái)特定代碼
對于特定平臺(tái)才有的問題就不是一件容易解決的事，分享一下：
存儲(chǔ)
我遇到的第一個(gè)問題是數(shù)據(jù)存儲(chǔ)的問題。最開始的時(shí)候，我只需要開始混合應(yīng)用。因此我可以用Preferences、或者SQLite來存儲(chǔ)數(shù)據(jù)。
后來，我擴(kuò)展到了Web版，我只好用LocalStoarge。于是，我就開始抽象出一個(gè)$storageServices來做相應(yīng)的事。接著遇到一系列的問題，我舍棄了原有的方案，直接使用LocalStoarge。
數(shù)據(jù)分析
為了開發(fā)方便，我使用Google Analytics來分析用戶的行為——畢竟數(shù)據(jù)對我來說也不是特別重要，只要可以看到有人使用就可以了。
這時(shí)候遇到的一個(gè)問題是，我不需要記錄Web用戶的行為，但是我希望可以看到有這樣的請求發(fā)出。于是對于Web用戶來說，只需要：
trackView: function (view) {
console.log(view);
}
而對于手機(jī)用戶則是:
trackView: function (view) {
$window.analytics.startTrackerWithId('UA-71907748-1');
$window.analytics.trackView(view)
}
這樣在我調(diào)試的時(shí)候我只需要打個(gè)Log，在產(chǎn)品環(huán)境時(shí)就會(huì)Track。
更新
同樣的，對于Android用戶來說，他們可以選擇自行下載更新，所以我需要針對Android用戶有一個(gè)自動(dòng)更新：
var isAndroid = ionic.Platform.isAndroid();
if(isAndroid) {
$updateServices.check('main');
}
桌面應(yīng)用
對于桌面應(yīng)用來說也會(huì)有類似的問題，我遇到的第一個(gè)問題是Electron默認(rèn)開啟了AMD。于是，直接刪之：
<script>
//remove module for electron
if(typeof module !== 'undefined' && module && module.exports){
delete module;
}
</script>
類似的問題還有許多，不過由于應(yīng)用內(nèi)容的限制，這些問題就沒有那么嚴(yán)重了。
如果有一天，我有錢開放這個(gè)應(yīng)用的應(yīng)用號(hào)，那么我就會(huì)再次獻(xiàn)上這個(gè)圖：
未來
我就開始思索這個(gè)問題，未來的趨勢是合并到一起，而這一個(gè)趨勢在現(xiàn)在就已經(jīng)是完成時(shí)了。
那么未來呢？你覺得會(huì)是怎樣的？
項(xiàng)目源碼: https://github.com/phodal/growth
