Javascript 20歲了。 從瀏覽器出生，Javascript 語言走過從略顯青澀，不被大眾視為是程式語言的童年期，成長到能用作開發大型線上應用程式，效能急速提升的少年期，近五年更藉由 node.js 的幫助，發展出可在伺服器後端、命令行、編譯工具等領域表現的新專長。並透過 Cordova、NW.js、React Native 等夥伴的幫助，進軍桌面、行動裝置開發的領域。 它的出鏡率太高，甚至吸引了一票願意化妝(transpile)成 Javascript 的同人。 本議程試著和大家一起回顧 Javascript 的過去與未來，與在各領域的發展狀況。

1. Javascript，
征服世界是可能的嗎？
gasolin@Modern Web Conf 2015

2. 征服世界的4個秘密
1996, 2008, 2010, 2013
從0到1

3. 被豪門包養
第一個秘密：JS從1996年開始

4. Netscape/Opera 1994
↓
Internet Explorer 1995
(War ↓ One)
Safari 2003
↓
Firefox 1.0 2004
(War ↓ Two)
Chrome 2008
↓
豪門包養史

5. 瀏覽器

6. 順道介紹 - 瀏覽器排版引擎

7. JS引擎
http://en.wikipedia.org/wiki/List_of_ECMAScript_engines

8. 搞定豪門
搞定瀏覽器

9. 搞定豪門
搞定瀏覽器

10. 快100+倍
第二個秘密：現在的JS比2008年

11. http://www.youtube.com/watch?v=D2ibM4oufdM

12. 變快的JS能做什麼呢？

13. 自己試 http://beta.unity3d.com/jonas/WebGLBenchmark/
讓發明人可以安心
玩3D遊戲

14. Emscripten
可編譯 c++ 程式到 Web，搭配 asm.js 技術
僅慢原生1.5x倍

15. 還是慢1.5倍怎麼辦？

16. 摩爾出來面對
http://big5.cri.cn/gate/big5/gb.cri.cn/32464/2010/07/21/1325s2928129_3.htm

17. 摩爾出來面對
換快一點的CPU
就解決了
http://krsna.lamost.org/popular/POPU/moor.htm

18. 可編譯成JS
的程式語言
http://bit.ly/1F94Dx5
Ruby
Python
Erlang
Perl
Lisp/scheme
Haskell
SQL
php
Java/JVM
.Net related
c++
Basic
Pascal
go

19. 可編譯成JS
的程式語言
http://bit.ly/1F94Dx5
Ruby
Python
Erlang
Perl
Lisp/scheme
Haskell
SQL
php
Java/JVM
.Net related
c++
Basic
Pascal
go

20. JS才成為獨立的程式語言
第三個秘密：從 2010 年開始

21. 從前從前

22. JS
event callback, non-blocking I/O, single thread

23. 然後

24. 與網頁百寶箱分開
跑馬燈
按右鍵無效
落葉效果
JS終於可以

25. 與DOM分開
JS終於可以
DOM 相關 API:
window.addEventListener
this.getElementById(‘name’);
moz-, webkit-, ms-...

26. 搞定命令行

27. 搞定命令行

28. 搞定命令行

29. 全端JS

30. 全端JS

31. Enterprise Ready

32. http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/
網站前/後端同構
Isomorphic

33. 搞定伺服器端與建置工具

34. 搞定伺服器端與建置工具

35. 9成軟體
可以搬上web
第四個秘密：從 2013 年開始

36. Cordova (Mobile Evolvement)
WebKit 2005
↓
PhoneGap 2009
↓
Cordova 2011
http://phonegap.com/app/

37. 桌面開發：前/後端融合
WebKit 2005
↓
Chromium 2008
↓
Node 2009
↓
NodeWebkit 2013
↓
Electron 2014
Github Atom ↓ MS VS Code

38. React Native (no HTML)
Node 2009
↓
React 2013
↓
React Native 2015
https://www.youtube.com/watch?v=KVZ-P-ZI6W4

39. Web App化
● 開網址即用 https + manifest
● 離線時可用 service worker
● 連線時更新
● 模組化開發 web component
From html5rocks

40. 搞定桌面端與跨多平台

41. 搞定桌面端與跨多平台

42. 搞定桌面端與跨多平台

43. JS的未來

44. 搞定系統與嵌入式裝置?

45. Web即平台
Firefox 2004
↓
Firefox for Android 2009
↓
Firefox OS 2013
Phone, TV, Embeded

46. duktape
● ES5.1 compatible
● Small footprint (can install in Arduino due)
● Can embedded in C

47. Exprino pico
http://kck.st/1JNq4DK
板子上直接跑JS (8kb)

48. ＠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/

49. 結語

50. 多種平台
Windows
Mac
Linux
Android
iOS
BB10
FirefoxOS
WebOS
Arduino
使用者同時擁有

51. 多樣設備
Desktop
TV
Tablet
Phone
Watch
Embedded
使用者交互使用

53. 偉大的企業都有秘密，秘密不會消失不見
只有相信秘密，才能看到隱藏的機會
- Peter Thiel

54. Reference
Javascript world domination https://medium.
com/@slsoftworks/javascript-world-domination-af9ca2ee5070
Happy 18th Birthday Javascript
https://resin.io/blog/happy-18th-birthday-javascript/
Evolution Web
http://www.evolutionoftheweb.com/
Extensible web
https://extensiblewebreportcard.org/

55. One More Thing
Web 技術簡史

56. Web古代
Netscape 1994
↓
Internet Explorer 1995
(Browser ↓ War One)
JavaScript 1995
↓
CSS 1996
↓

57. Web中世紀
HTML4/DOM 1998
↓
HTTPXMLRequest IE5 1999
↓
IE6 2001
(90% browser ↓ market share)
JSON 2002

58. Web大航海
Firefox 1.0 2004
(Browser ↓War Two)
Gmail 2004
↓
Ruby on Rails 2004
↓
WebKit 2005
↓
JQuery 2006

59. Web工業革命
Mobile Safari 2007
↓
RESTful 2007
↓
Chrome 2008
(Browser ↓ war intensify)
NodeJS 2009
↓
MongoDB 2009
↓
PhoneGap 2009