聊聊H5與JS近幾年的黑科技

聊聊H5與JS近幾年的黑科技

自ajax技術的誕生，編程界興起了一股WEB開發熱，facebook，Twitter等衆多大佬級企業都在網頁應用上大放異彩，這十年咱們見證了前端技術的崛起。這期間產生了衆多脫離了瀏覽器的JS和H5開發的黑科技。移動端的react native，cordova，native.js；PC端的Node.js，NW.js；固然還有前端自己的衆多框架，vue.js，jquery.js，bootstrap等等。

因此JS再也不是一門單純的瀏覽器腳本，做爲一個前端開發者若是跟不上前端技術創新的進度，是很容易被時代所淘汰的，而做爲一個後端開發者若是不知道JS現在的跨平臺性，是很容易被前端搶飯碗的哈哈。

聊聊前端那些往事

關於HTML（超文本標記語言）

1993年，我，尚未出生，而第一代超文本標記語言已經在實驗室誕生，那時候的網絡世界或許尚未網頁、網站這樣的概念。
HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
XHTML——流產了
HTML 5——2014年10月28日，W3C推薦標準

關於JavaScript和ECMAScript

傳統的JavaScript是指咱們熟悉的瀏覽器環境下運行的萬維網通用腳本語言，JS於1995年由網景公司在瀏覽器上首次實現並推出。後來JS成爲瀏覽器通用的腳本語言，被廣大瀏覽器商所實現，因爲他們實現後的JS大同小異，致使開發者不得不爲不一樣瀏覽器開發不一樣兼容版本的JS文件，故廠商們，社區開發者但願得到一套通行的瀏覽器標準腳本語言，這就是後來的ECMAScript， 能夠說ES不是一門語言而是瀏覽器所使用腳本語言的標準，通常被實現爲JavaScript，JScript等語言的語法和標準對象庫，因此事實上能夠將ECMAScript理解爲JavaScript的標準。

至今爲止有六個ECMA版本
ECMAScript 1——1997年06月 首版
ECMAScript 2——1998年06月 格式修正，以使得其形式與ISO/IEC16262國際標準一致
ECMAScript 3——1999年12月 強大的正則表達式，更好的文字鏈處理，新的控制指令，異常處理，錯誤定義更加明確，數輸出的格式化及其它改變
ECMAScript 4——流產了
ECMAScript 5——2009年12月發佈
ECMAScript 2015——2015年6月17日發佈，被稱做ES6

寫在黑科技前

若是至今——2018年，做爲一名開發者依然不瞭解ES6/7和H5的強大，怕是有點孤陋寡聞了，雖然早期版本的js和html被業界普遍的嘲諷，由於他們確實在不少方面糟糕透頂，尤爲是曾經亂七八糟的js語法，使人窒息的閉包，工廠函數，不知因此的prototype屬性。（我至今不明白ES5以前的JS到底算不算有類的概念呢）

曾經有這麼一個笑話：
項目經理：「JavaScript是什麼？」
開發者：「哦？那是Java的升級版，是Java的腳本版語言！」（真好騙）

而現在，經歷ES6標準的洗禮，我敢大膽的說JS真的愈來愈像Java！有時候做爲一名曾經作過JavaEE開發者的我，不知不覺的會去按照Java的編程習慣去作Node.js開發，文件名首字母大寫，文件裏寫上同名的class名，而後爲他寫上constructor！JavaScript真的慢慢在變成Java的腳本版語言。

值得研究和使用黑科技

1. Node.js——Google

Node.js是一個Javascript運行環境，發佈於2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝。Node.js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。

Node.js是第一次真正意義上的脫離了瀏覽器的JS實現，讓廣大開發者感嘆，原來JS還能夠離開瀏覽器跑！Node.js使得JavaScript像python，php，ruby同樣的腳本語言能夠直接在操做系統級別的環境下運行，並提供了各種IO和系統類庫的調用API。

因爲JavaScript語言自己的非阻塞、異步事件驅動特性，使得JavaScript能被普遍的使用在分佈式設備上運行數據密集型的實時應用，用於方便地搭建響應速度快、易於擴展的網絡應用。雖然JS自己只是單線程運行在Node中，卻由於非阻塞的IO訪問，加上V8引擎超高速的腳本解析能力，其在IO密集請求的高併發WEB應用中顯得格外駕輕就熟。

2. react native——Facebook

若是說Node.js第一次讓JS脫離瀏覽器跑到了PC端和服務器端的話，那麼接下來介紹的react native就是讓JS第一次真正意義的跑在了手機操做系統上，而且讓JavaScript開發者也能夠從心所欲的開發手機APP。

React Native (簡稱RN)是Facebook於2015年4月開源的跨平臺移動應用開發框架，是Facebook早先開源的JS框架 React 在原生移動應用平臺的衍生產物，目前支持iOS和安卓兩大平臺。RN使用Javascript語言，相似於HTML的JSX，以及CSS來開發移動應用，所以熟悉Web前端開發的技術人員只需不多的學習就能夠進入移動應用開發領域。

Facebook在對傳統H5 APP開發模式——Hybrid模式進行深刻研究後，認爲hybrid存在天生的性能缺陷，立即放棄了hybrid開發模式，轉而自行研究了react native，其特點是：不一樣於H5,也不一樣於原生,更像是用JS寫出原生應用。react native開發APP性能至關接近於使用JAVA，OC開發的純原生應用。

3. cordova——Apache

Cordova的前身就是大名鼎鼎的phonegap！2011年，Adobe收購了phonegap項目，因爲Adobe如今擁有PhoneGap商標，Apache組織將其更名爲Apache Cordova。Adobe將會繼續以Cordova加上PhoneGap Build和Adobe Shadow的組合提供PhoneGap。

Cordova提供了一組設備相關的API，經過這組API，移動應用可以以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及爲這些類庫所用的設備相關的原生後臺代碼。

Cordova支持以下移動操做系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

不一樣於react native偏向原生，注重性能的理念，cordova開發是介於Web app和原生APP之間的hybrid開發模式，這就說明其更加註重代碼移植和複用，其開發風格更相似於瀏覽器網頁，對於前端開發者其開發難易程度相較於RN更加的簡單，因此入門更快。

雖然在性能上略遜於RN，可是不一樣於RN的「一次學習，多處開發」，cordova是「一次開發，多處使用」，其對代碼的複用率要遠高於RN，作到了JS只一次開發，就能夠打包後在Android，IOS，windows甚至是黑莓系統上，多處使用。

（注：react native在IOS和Android平臺上每每要準備兩套代碼，代碼大部分是重合的，但有少許API須要單獨開發，而且其支持的平臺也僅僅是IOS和Android）

4. html5+ and native.js——Dcloud

上述公司的大名對開發者來講相信都是如雷貫耳了，在使用H5開發APP的黑科技潮流中也不乏一些國內年輕公司優秀的框架，IDE，好比，接下來介紹的我的很是喜歡的html5+和native.js開發框架。

DCloud即數字天堂(北京)網絡技術有限公司，他也是W3C成員及HTML5中國產業聯盟發起單位，

筆者的商業、我的的APP項目都是採用Dcloud的產品開發的，他們的技術在我以前的博客中經過一些項目，都略有介紹。

與上述介紹那些黑科技不一樣的是，dcloud不只提供了開發環境，框架，接口，還提供了開發所使用的IDE——Hbuilder，經過官方提供的IDE能夠直接將開發好的APP進行打包和發佈，大量的APP開發所需模塊都集成在IDE中，無需本身手動下載和添加，使用這套開發工具最大的好處是：傻瓜式開發（不，是至關便捷啦），重新建項目到開發到API添加到打包，是一條龍服務。

其使用的H5 APP運行環境是5+ Runtime，使用的JavaScript映射技術爲native.js，能夠將js映射爲原生對象，前端UI框架爲mui。

dcloud這套黑科技主體使用的依然是webview技術，即webkit內核解析html，css，js，在部分性能消耗較高的API上，例如跳轉動畫，下拉刷新，彈窗等則直接調用原生對象，故而說白了依然屬因而hybrid開發模式。

更多關於web，native，hybrid和react native技術開發APP的對比參考這篇不錯的博文：
https://www.cnblogs.com/dailc/archive/2016/10/04/5930238.html#hybrid_2_4

5.nw.js——Intel

以上2，3，4所述黑科技均是運用於移動端開發的JS技術，而傳統的windows，linux，mac桌面級應用開發也有使用JavaScript的黑科技，因爲桌面開發屬於操做系統級別的環境，故而須要使用到node.js的衍生產品——node webkit（簡稱nw.js）。

nw.js是在英特爾開源技術中心建立的，它是基於谷歌瀏覽器核心引擎和nodejs運行，你能夠經過nwjs技術使用html和js語言編寫本地應用程序，它也可讓你直接從DOM調用nodejs模塊，使用一種新的方式與全部的Web技術編寫本地應用。它主要有如下6個特色：

1. 以網絡最流行的技術編寫原生應用程序的新方法
2. 基於HTML5, CSS3, JS and WebGL而編寫
3. 徹底支持nodejs全部api及第三方模塊
4. 可使用DOM直接調用nodejs模塊
5. 容易打包和分發

nw.js官網說：node webkit技術容許使用Node.js全部的模塊，並直接對DOM進行操做，該項目開闢了一種使用WEB技術進行桌面應用開發的新河！

最後，說一個小祕密，咱們所使用的微信桌面版就是用nw.js開發的！

6.Electron

咱們已經介紹了nw.js作桌面級開發，但惋惜的是nw.js項目目前處於一個半死不活的狀態，最新版本仍然是0.x.x，其開發組貢獻者也只有可憐的50多個，這致使nw.js存在大量的bug不能被及時的修復。如下推薦另外一款用H5和JS作桌面開發的黑科技產品Electron。

Electron一樣是基於Chromium和Node.js的。和nw.js大同小異，不過其社區開發度更加活躍，版本更新較快。

Electron特點：

• 自動更新——應用支持自動更新
• 原生菜單和通知——能夠建立原生應用菜單和上下文菜單
• 應用崩潰報告——能夠將崩潰報告提交到遠程服務器
• 調試和分析——Chrominum 的內容模塊能夠發現性能瓶頸和緩慢的操做。你也能夠在應用中使用本身喜歡的 Chrome 開發者工具。
• Windows installer ——能夠快速便捷地建立安裝包。

Electron目前真的很火，使用Electron開發的應用有Atom編輯器，微軟的VScode，以及新版的微信，騰訊微雲。

結語

介紹了這麼多WEB前端技術跨平臺的黑科技，不由感嘆，JavaScript早已再也不是當年那個羞澀的躲在瀏覽器裏的「糟糕語言」，而這一切——讓JavaScript成長爲如此強大的這些技術都歸功於Google強大的V8引擎；而HTML五、CSS3的普遍運用，跨平臺解析也要感謝強大的webkit內核支持。

最後，現在的JavaScript真的太強大了( ⊙o⊙ )！我所能想到的目前JS沒有深刻的領域無非就是人工智能領域，尤爲是最近火熱的深度學習，人工神經網絡，筆者目前所作的深度學習開發仍然使用的是Python（我的很是討厭python的語法），但願有朝一日能看到基於JavaScript語言的深度學習框架或者語言接口，若是出現了，他會不會叫作TensorFlow.js呢，哈哈？

補充

2018-7-3補充，tensorflow.js真的出了！Google官推，今後告別噁心的python！tfjs目前尚處於起步階段，但已經基本支持瀏覽器端的訓練和預測，包括了CNN，RNN等神經網絡模型。提供了大量內部方法，直接構建tensor張量，直接構造神經網絡，直接訓練和直接預測都已經具有，甚至能夠將圖片等直接轉爲tensor，能夠說在某些方面比python版本的更強大，固然性能上的話還有待考量。總之，值得js開發者一試，能夠進入tensorflow.js官網查看相關信息。今後人人都能寫人工智能，感謝Google辛勤的貢獻者們！

nodejs支持尚不完善，詳情能夠參考本人博客《JS作深度學習系列》

https://js.tensorflow.org/