Javascript征服世界是可能的嗎？

Javascript，征服世界是可能的嗎？

gasolin@Modern Web Conf 2015

征服世界的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