征服世界是可能的嗎？ javascript征服世界的4個秘密 1996, 2008, 2010, 2013 從0到1
TRANSCRIPT
Javascript，征服世界是可能的嗎？
gasolin@Modern Web Conf 2015
http://bit.ly/1KbVBmm
征服世界的4個秘密1996, 2008, 2010, 2013
從0到1
被豪門包養
第一個秘密：JS從1996年開始
Netscape/Opera 1994↓
Internet Explorer 1995(War ↓ One)Safari 2003
↓Firefox 1.0 2004
(War ↓ Two)Chrome 2008
↓
豪門包養史
瀏覽器
順道介紹 - 瀏覽器排版引擎
JS引擎
http://en.wikipedia.org/wiki/List_of_ECMAScript_engines
搞定豪門
搞定瀏覽器
搞定豪門
搞定瀏覽器
快100+倍第二個秘密：現在的JS比2008年
http://www.youtube.com/watch?v=D2ibM4oufdM
變快的JS能做什麼呢？
自己試 http://beta.unity3d.com/jonas/WebGLBenchmark/
讓發明人可以安心
玩3D遊戲
Emscripten
可編譯 c++ 程式到 Web，搭配 asm.js 技術僅慢原生1.5x倍
還是慢1.5倍怎麼辦？
摩爾出來面對
http://big5.cri.cn/gate/big5/gb.cri.cn/32464/2010/07/21/1325s2928129_3.htm
摩爾出來面對
換快一點的CPU就解決了
http://krsna.lamost.org/popular/POPU/moor.htm
可編譯成JS的程式語言http://bit.ly/1F94Dx5
RubyPythonErlangPerlLisp/schemeHaskellSQLphp
Java/JVM.Net relatedc++BasicPascalgo
可編譯成JS的程式語言http://bit.ly/1F94Dx5
RubyPythonErlangPerlLisp/schemeHaskellSQLphp
Java/JVM.Net relatedc++BasicPascalgo
JS才成為獨立的程式語言
第三個秘密：從 2010 年開始
從前從前
JS
event callback, non-blocking I/O, single thread
然後
與網頁百寶箱分開跑馬燈按右鍵無效落葉效果
JS終於可以
與DOM分開
JS終於可以
DOM 相關 API:
window.addEventListenerthis.getElementById(‘name’);moz-, webkit-, ms-...
搞定命令行
搞定命令行
全端JS
全端JS
Enterprise Ready
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
網站前/後端同構Isomorphic
搞定伺服器端與建置工具
搞定伺服器端與建置工具
9成軟體可以搬上web
第四個秘密：從 2013 年開始
Cordova (Mobile Evolvement)
WebKit 2005↓
PhoneGap 2009↓
Cordova 2011
http://phonegap.com/app/
桌面開發：前/後端融合
WebKit 2005↓
Chromium 2008↓
Node 2009↓
NodeWebkit 2013↓
Electron 2014Github Atom ↓ MS VS Code
React Native (no HTML)
Node 2009↓
React 2013↓
React Native 2015
https://www.youtube.com/watch?v=KVZ-P-ZI6W4
Web App化
● 開網址即用 https + manifest
● 離線時可用 service worker
● 連線時更新● 模組化開發 web component
From html5rocks
搞定桌面端與跨多平台
搞定桌面端與跨多平台
JS的未來
搞定系統與嵌入式裝置?
Web即平台
Firefox 2004↓
Firefox for Android 2009↓
Firefox OS 2013
Phone, TV, Embeded
http://www.cnet.com/pictures/kddis-high-end-firefox-os-phone-the-fx0-pictures/3/
duktape
● ES5.1 compatible● Small footprint (can install in Arduino due)● Can embedded in C
Exprino pico
http://kck.st/1JNq4DK
板子上直接跑JS (8kb)
＠Idea 把物聯網裝置當成DOM節點
Query
$.byName('門口感測器').trigger('motion', function() {
$.byLocation('客廳').setOn();
});
Web Component
<iot-device name='門口感測器'>
<iot-motion-sensor data-pin=7></iot-motion-sensor>
</iot-device>
http://devicejs.org/
結語
多種平台
WindowsMacLinuxAndroidiOSBB10FirefoxOSWebOSArduino
使用者同時擁有
多樣設備
DesktopTVTabletPhoneWatchEmbedded
使用者交互使用
偉大的企業都有秘密，秘密不會消失不見只有相信秘密，才能看到隱藏的機會
- Peter Thiel
Reference
Javascript world domination https://medium.com/@slsoftworks/javascript-world-domination-af9ca2ee5070
Happy 18th Birthday Javascripthttps://resin.io/blog/happy-18th-birthday-javascript/
Evolution Webhttp://www.evolutionoftheweb.com/
Extensible webhttps://extensiblewebreportcard.org/
One More ThingWeb 技術簡史
Web古代
Netscape 1994↓
Internet Explorer 1995(Browser ↓ War One)
JavaScript 1995↓
CSS 1996↓
Web中世紀
HTML4/DOM 1998↓
HTTPXMLRequest IE5 1999↓
IE6 2001(90% browser ↓ market share)
JSON 2002
Web大航海
Firefox 1.0 2004(Browser ↓War Two)
Gmail 2004↓
Ruby on Rails 2004↓
WebKit 2005↓
JQuery 2006
Web工業革命
Mobile Safari 2007↓
RESTful 2007 ↓
Chrome 2008 (Browser ↓ war intensify)
NodeJS 2009↓
MongoDB 2009↓
PhoneGap 2009