從 JSConf.Asia 來看 JavaScript 的發展與應⽤用 Jace Ju 網站前端開發部 資深⼯工程師

背景介紹 • 主辦
 JSConf (http://jsconf.com) • ⽇日期
 2013/11/28 ~ 29 • 地　　點
 Manila Ocean Park, Philips • 參加⼈人數
 195 ⼈人 / ⼆二⼗十多國

modern.IE Welcome Party / JSOut AfterParty / RelaxJS with Pocketmath

The Rise Of Things! Tim Park • 錄影： http://goo.gl/o9NeER • 簡報： http://goo.gl/ZFjhNe • 重點整理： • 硬體效能不斷進步中，嵌⼊入式系統也已經不再是昂貴的玩意。 • 透過 JavaScript 來控制硬體，例如 Raspberry Pi 的相機模組。 • ⼼心得： ⺫⽬目前已經有⾮非常多套件可以讓 JavaScript 控制嵌⼊入式系統，降低了硬體控制的⾨門檻， 讓⼀一般有興趣的使⽤用者也夠發揮⾃自⼰己的創意。

Making the Mobile Web Site Faster! Eiji Kitamura • 錄影： http://goo.gl/fgVFLA • 簡報： http://goo.gl/mIyVtg • 重點整理： • ⾏行動裝置要⾯面對網路不穩的問題。 • 如何優化才能讓⾏行動裝置讀取網⾴頁的速度變快？ • 針對圖⽚片、瀏覽器⾏行為、⾴頁⾯面設計、網站伺服器進⾏行各種優化⼿手段。 • ⼼心得： 在台灣現⾏行的網路環境，更能體會到⾏行動裝置在瀏覽速度上的遲緩，本場議程所提出 的各項建議，都⾮非常值得每位 Mobile Web 開發⼈人員參考。

CSS in the 4th Dimension:! Not Your Daddy's CSS Animations! Lea Verou • 錄影： http://goo.gl/1eURd4 • 簡報： http://goo.gl/j6f9zH • 重點整理： • 以⺫⽬目前瀏覽器發展的趨勢，可以⽤用 CSS 來做的，就儘量別⽤用 JavaScript 。 • 其他不⽀支援的瀏覽器以能運作為前提即可。 • 各種⾮非常實⽤用的 CSS 特效展⽰示，例如 CSS Transition / @keyframes 。 • ⼼心得： 任何對前端開發有興趣的⼯工作者，都應該瞭解這些新的 CSS 技術。另外 AngularJS 的 ngAnimate 模組也是以這些 CSS 技術為基礎⽽而實作的。 IE 9 7 8 哭哭...

A JavaScript Web App Deconstructed! Alex MacCaw • 錄影： http://goo.gl/aT2NS9 • 簡報： http://goo.gl/BY64CL • 重點整理： • 分析 http://monocle.io/ 來瞭解如何建構基於 JavaScript 的網站。 • 前端程式以 CoffeeScript 開發，後端程式則是透過 Rails 模組來處理前端要求。 • ⼤大量使⽤用模組化設計，讓⾴頁⾯面區塊容易更新與管理。 • ⼼心得： 模組化的開發⽅方式值得學習，後端雖然是使⽤用 Rails ，但依然適⽤用在其他語⾔言的 Web Framework 上。另外雖然 CoffeeScript 語法簡潔，但要引⼊入已經習慣 JavaScript 團隊 時，還是要考慮它所帶來的衝擊。

Server-side Node.js Programming with… Photoshop?! Andy Hall • 錄影： http://goo.gl/S7VXdP • 簡報： http://goo.gl/s43d39 • 重點整理： • 利⽤用 Node.js 的聲控模組，以制定指令來操作 Photoshop 。 • 另外需要聲⾳音分析器 Julius (http://goo.gl/a07gZS) 來分析指令。 • 不讓 Node.js 和 Photoshop 直接溝通，⽽而是將 JavaScript 當做字串傳遞到另⼀一⽅方 執⾏行。 • 也可以將 Leap motion 整合進來，利⽤用⼿手勢在 Photoshop 上作畫。 • ⼼心得： • 將重覆的動作轉換成聲⾳音或⼿手勢來做到批次操作是很有趣的嘗試，這也讓我看到 JavaScript 所擁有的巨⼤大彈性。

Ops for Everyone! John Britton • 錄影： http://goo.gl/b7OiiU • 簡報： http://goo.gl/fia3aC • 重點整理： • 重複或繁瑣的事情要有標準的⾃自動化 SOP 來避免⼈人⼒力的損耗。 • 確保每件事都能被團隊裡的其他⼈人⽤用有效率的⽅方式看⾒見。 • BOXEN ：快速建⽴立 Mac 開發環境。 • HUBOT ：開發中的各類型⾏行為都可以被轉換成指令，然後在 HUBOT 的 client 上 呈現出來讓⼤大家看到。 • ⼼心得： 團隊中要確保⼤大家的環境⼀一致，及⾃自動做掉任何耗費⼈人⼒力卻重複的 routine 。

Automated CSS Testing! Jakob Mattsson • 錄影： http://goo.gl/XOUD94 • 簡報： http://goo.gl/Q0JpMJ • 重點整理： • 我們常聽到⾃自動測試只適⽤用在程式碼上，⽽而測試 UI 或 CSS 的效果就⾮非常不容易； ⺫⽬目前已經有⼀一些測試⽅方法，但不夠成熟。 • CSS 原則上是語法檢查與畫⾯面⽐比對。 • ⼼心得： 這場 TonyQ 較有研究，因為他在 ZK 都實作過。多數前端開發者對於畫⾯面就是⽤用眼睛 確認，然⽽而多數狀況確實也不需要過於精準 (除⾮非需求⽅方⾮非常⾮非常要求) 。

Bridging the Gap Between Mobile Platforms! Anand Agrawal • 錄影： http://goo.gl/kTbZIC • 簡報： http://goo.gl/B5K1Vz • 重點整理： • 在⼿手機開發上要兼顧執⾏行效率與開發速度，解決⽅方案是 Hybrid App 。 • Calatrava (http://calatrava.github.io) 採⽤用 JavaScript 開發相同核⼼心邏輯，不同平台 再以 native 實作。

Straw - Dataflow Processing for Node.js! Simon Swain • 錄影： http://goo.gl/nUIu2i • 簡報： 無 • 重點整理： • 利⽤用 Straw 這個⼯工具，讓資料可以透過 pipe ⽅方式被處理。 • 各項資料處理的 task 是獨⽴立的，然後再⽤用 pipe 來調整 flow 。 • ⼼心得： 把資料流的處理拆分⼀一個⼀一個的 task 單元，⾮非常類似 Chain of Responsibility 模式。所 以之後只需要調整 task 單元的順序，就可以改變資料處理流程。

React: Rethinking Best Practices! Pete Hunt • 錄影： http://goo.gl/7G9MbP • 簡報： http://goo.gl/O8R4PG • 重點整理： • 對於 template 式的 MVC 開發⽅方式，需要重新被思考； React 要解決這類 frameworks 所帶來的問題。 • React 採⽤用 component 的開發⽅方式，並引⼊入 Virtual DOM ，來加速⾴頁⾯面的呈現。 • 引⼊入了 JSX 語法，可以在 JavaScript 中直接寫 HTML ，⽽而⾮非當做字串處理。 • ⼼心得： 個⼈人較不喜歡 JSX 這種混合 HTML 的語法，雖然它有另⼀一種純 JavaScript 寫法。但是 Virtual DOM 的觀念則值得研究，或許是 Angular 效能上的救星。

Getting Serious with Web-Video! Brian Chirls • 錄影： http://goo.gl/ZuZzPn • 簡報： 無 • 重點整理： • ⽤用 WebGL 載⼊入影⽚片後，再透過 Serious.js (http://seriouslyjs.org/) 來幫影⽚片加⼊入特 效。 • 搭配⼿手機來展⽰示⾮非常多有趣的應⽤用，例如電視故障畫⾯面，拍拍⼿手機會讓它回復。 • ⼼心得： 瀏覽器能⽀支援的技術越來越強⼤大，且⼿手機的效能也逐漸提升，讓很多 JavaScript 應⽤用 已經能達到應付使⽤用者需求的等級，剩下的就是開發者的創意能不能跟上了。

Web Movements in China! Shi Chuan • 錄影： http://goo.gl/rHjnAL • 簡報： http://goo.gl/Vmc9lg • 重點整理： • 中國市場⼤大到你不能忽視任何⽤用⼾戶，包括 IE 7/8 ⽤用⼾戶。 • 中國市場⼤大到值得研發更具效率的產品來撐住這些⽤用⼾戶。 • ⼼心得： 中國的⽤用⼾戶量是技術⼈人員的夢想也是夢魘。

Once Upon A Time Somewhere ! Between Your Console And Browser! Michal Budzynski • 錄影： http://goo.gl/B14LsJ • 簡報： 無 • 重點整理： • 把投影⽚片做成洛克⼈人遊戲，要到 checkpoint 才會出現下⼀一張投影⽚片。 • 利⽤用瀏覽器的 API (例如 getUserMedia ) 來串接各種不同的輸⼊入⽅方式 (⼿手機、 GamePad 、⿆麥克⾵風等) 。

Declarative Web Scraping! Vikram Verma • 錄影： http://goo.gl/YYcQP5 (官⽅方把它設為私⼈人影⽚片) • 簡報： 無 • 重點整理： • 主要是介紹如何分析 Web 上的語意與⽂文字，以做到索引與搜尋。 (by TonyQ) • ⼼心得 這場效果很糟，講者太過於專注講解細節，所以沒辦法瞭解講者所要表達的觀念；最 後是主辦⼈人 Thomas 來解救⼤大家。

Meteor: A Full-Stack Framework for Building Pure JavaScript Apps! Emily Stark • 錄影： http://goo.gl/Xh1saa • 簡報： 無 • 重點整理： • Meteor 將 Server 端程式與 Client 程式寫在⼀一起，共享邏輯與資源。 • ⼼心得： 在 Live Demo 中的展⽰示可以看到 Meteor 在前後端整合上⼀一次到位的威⼒力，這點吸引很 多開發者的⺫⽬目光。不過會後的討論中，安全問題被⼤大家關切，似乎會在之後的版本⽤用 特別的⽅方法解決。 • 參考資源： • 5 Meteor Misconceptions (http://goo.gl/1FsPo8)

Fun With WebSockets! JP de Guzman • 錄影： http://goo.gl/39ibc3 • 簡報： http://goo.gl/5SJM8m • 重點整理： • 主要介紹 Web Sockets 在⼀一對⼀一或⼀一對多的裝置之間通訊的觀念與通訊⽅方式。 • 利⽤用到 Redis 做 Pub-Sub 的事件傳送。 • 簡報也⽤用上 Web Sockets ，讓台上跟台下的投影⽚片可以同步播放。

Pointing Forward! Tim Park • 錄影： http://goo.gl/j8ce8v • 簡報： http://goo.gl/kesUzK • 重點整理： • 在⼿手機上⼿手指觸控事件應該要注意的⼀一些事情。 • 介紹的技術規格將會提交給 W3C 。

Building Fast Scalable Game-Server in Node.JS! Charlie Crane • 錄影： http://goo.gl/eHwlK8 • 簡報： http://goo.gl/euZwVN • 重點整理： • 線上遊戲在系統層⾯面的擴展不容易，改⽤用 Node.js 加上分區設計來解決。 • 使⽤用 Pomelo Game Server Framework (http://pomelo.netease.com/) 來處理⾼高⽤用⼾戶 數量的問題。 • ⼼心得： 再次證明：中國的⽤用⼾戶量是技術⼈人員的夢想也是夢魘。

Emulating with JavaScript! Alex Dickson • 錄影： http://goo.gl/8vNvzW • 簡報： 無 • 重點整理： • ⽤用 JavaScript 模擬 Chip-8 這個 CPU 。 • 介紹 JavaScript 在實作 CPU 時脈、記憶體、控制器等虛擬硬體時所需要⾯面臨的問 題及解決⽅方案。 • ⼼心得： JavaScript 沒有極限。

Frame.js MrDoob! Ricardo Cabello • 錄影： http://goo.gl/H6aSMv • 展⽰示： http://goo.gl/TVDFRR • 重點整理： • 就是這個 Framework 的效果展⽰示。

⼼心得總結 • 這年頭，不學些 JavaScript 很難稱⾃自⼰己是 Web 開發者。 • JavaScript 不論在前端或後端，都已經有⾮非常成熟的環境與應⽤用。 • 瀏覽器與 JavaScript 都在挑戰彼此的極限。 • Node.js 與 Web Sockets 是撐住⽤用⼾戶數量的關鍵要素之⼀一。 • ⾏行動裝置也可以透過 JavaScript 來發揮其特⻑⾧長。 • 只要 JavaScript 能運作的地⽅方，那個地⽅方就有光明。

參考資訊 • JSConf.Asia (http://jsconf.asia) • JSConf.Asia 2013 Chanel on YouTube (http://goo.gl/S690Sz) • JSConf.Asia Facebook Group (https://www.facebook.com/JSConfAsia) • JSConf.Asia on Scrollback (http://scrollback.io/JSConfAsia/) • JSConf.Asia 簡易⼼心得 by TonyQ (http://goo.gl/Fb8Ncj)