2013

May

2013 JSDC.tw 參加心得與記錄

Tags:

簡中版

我還蠻少參加 conference 的，所以也不常撰寫類似的心得，這次就破例，將腦中還依稀記得的事情，記錄下來，順便將自已不懂的技術寫下，期許自已能學會 JSDC 各位大師所分享的技能。

JSDC 議程 http://jsdc.tw/schedule/
Video: http://www.youtube.com/user/JSDCTW?feature=watch

Amazon

這次 Amazon 是來推廣他們的 web service 服務，總共有兩堂演講，有簡單的說明系統架構以及 Demo AWS 服務，現在申請 AWS 立刻就可以使用 Node.js 寫 Code ， AWS 服務內建就幫你裝好 Node.js ，另外如果你使用 GitHub 來管理程式， AWS 還可以自動幫你將程式 Deploy 到機器上，還附帶 Rollback 機制。

最特別的功能是當你的系統流量爆炸的時候， AWS 可以自動建立多個 Instance 幫你處理大流量。

http://aws.amazon.com/ec2/ ：這裡可以查 Auto Scaling 相關的說明。
AWS： Amazon Web Service

記得兩年前我曾經試用 EC2，那時還去翻過他們的付款機制說明，而因為英文實在是太多，當時我也很懶得看，於是就 Email 去跟 Amazon 靠邀一下，為什麼沒有中文文件，Amazon 到是很有心，隔天馬上回覆，而且還找了個大陸的業務跟我連絡，今天看一下他們的 Pricing 說明，已經有簡體中文版本了。

Amazon 真的是蠻有心的，這次又來參加 JSDC .tw，還給每一位與會者 $50 美金，讓我們可以試玩 AWS 服務。

Amazon web service 文件

Web Game

使用 Cocos2D 來製做遊戲， Cocos2D 有提供 cocos2d-html5 , cocos2d-iphone , cocos2d-x 等等 library ，可以支援 Mobile , html(WebGL)。

cocos2D 還要搭配 spider monkey 一起服用， spider monkey 為 JIT編譯器。

除了 window phone 必須配合 phoneGap 之外，其他的主流 device ： iphone , android 都能正常使用。

講師： wangwenming (China)

講師 github https://github.com/wangwenming

Frontend security

Click Jacking：透過 div, iframe 等等的堆疊，欺騙 User 去點擊頁面的隱藏按鈕，因為 User 透過 Browser 去點擊不正確的按鈕，所以系統會正確的執行。
Browsr Password autoComplete，這個功能是指 Browser 會自動記錄 User submit form 的資料，等下次 User 再回到該頁面時，就不用再重填一次，若是網站有 XSS 漏洞，則駭客透過 XSS 即可輕易的取出 User 的密碼 (看到密碼都是星號，這只是個假像)。
Twitter url pound sign vulnerability ，駭客可以透過 inject 這段程式「javascript: xss code」去執行 XSS 攻擊。
過瀘 User input ，輸出資料到頁面時，必須先經過 Escape 過瀘。
One Time Token：任何的認証碼，最好限制只能使用一次，並且加上時間限制，避免被駭客拿去利用，例如註冊 Email 驗証，發文 Captcha。
Apache trace ，這個功能可以將 Request 當成 Response ，而誤將 Cookie 漏出。

Header TRACE 測試

telnet puritys.me 80
Trying xx.xx.xxx.xxx...
Connected to puritys.me.
Escape character is '^]'.
TRACE / HTTP/1.0
Cookie: xxx
 
HTTP/1.1 200 OK
Date: Sun, 19 May 2013 17:09:39 GMT
Server: Apache/2.4.1
Connection: close
Content-Type: message/http
 
TRACE / HTTP/1.0
Cookie: xxx

講師：Ant

http://www.slideshare.net/yftzeng/2013-0413-jstwsecurityforfrontendengineeringprequel

樸實與浮華 (Plain and Vanity) / (Usability & Performance)

介紹 Yahoo! ServicePlus 使用的技術，包含 Pjax , mighty blue bar , accessibility , web storage, web worker, improve page render, on and off Line 。

Yahoo! 服務+ 連結

一般坐捷運的時候，手機網路常常會不明原因斷線，造成 User 不好的使用經驗，『Y! 服務+』會去偵測網路狀況，即時提醒 User 當前的網路狀況，並暫時 disable 不能用的按鈕，避免 User 因為沒有網路，造成頁面卡住、進度條載不停。
大多數的網站會因為使用過多的 AJAX 技術，而造成 Browser 上下頁按鈕失效，『Y! 服務+』使用 PJAX 技術，keep 住上下頁功能，給予 User 最習慣的操作模式，
『Y! 服務+』使用 Web Storage 儲存 AJAX 的 Result ，減少 User 重覆發送相同的 Request ，以加速 User 操作網頁。
等 User 切換頁面時，系統自動暫停 Video 播放，但不停止 Video 下載，等待下一次 User 回到該頁面時，接續播放 Video。

講師：Paul，及講師的 Slide

Performance

jsPerf.com 是一個效能測試的網站，可以在這裡填上你要測試的程式碼，然後這個網站會幫你大量的執行，並計算結果與比較。

效能優化

Array 不要漏空。
宣告 Array 時，就定義 Array 的數值，會比一個個 push 快。
Type check 很浪費時候，盡量使用相同型態的變數來操作。

講師：Will 保哥，及他的 Slide

Node.js to binary code

這位講師說他把 Node.js 包給 C++ 的一個 Module ，主要方式是將程式打散，加密，放進 binary code 裡面，程式有分三種 encoding 方式，從最簡單的移除空白、空行，到複雜的 binary code。

據說未來會透過 LLVM ，直接把 Node.js 真正變成 binary code。

c 語言的編譯出來的 Module ，無法呼叫 global.require 與 global.module，所以必須在 Node.js 中先設定這兩個 Global 參數。

global.require = require;
global.module = module;

Source Code

https://github.com/cfsghost/npk

stem Javascript OS ....

Web worker

一般 Browser 為單執行緒(Thread)， Web Worker 可以打破傳統的模式，建立一套多執行緒的 Web 系統。

使用 Web worker 前，必須先用 PostMessage 的方式，將參數傳給 Worker ，這時 Worker 的工作原理，第一步是先將參數 Clone 下來，而 Clone 的過程會花一點時間，而造成 UI Blocking ，可以使用 Split data or Transferable object ( ArrayBuffer) 的方式來解決。

其他Problem

使用 Chrome 時，沒辦法在 worker 中再建立一個 worker。
建立太多的 worker 程式會當掉。
JS 如果有相互 dependency ，維護上會很困難。
Hard to debug：沒辦法使用 console 來除錯。

講師： Bingo ，及講師的 Blog

Titanium Tishadow

Tishadow 是一個加速開發的工具，當工程師修改 Titanium 程式碼後，手機可以即時看到頁面變更，不須要經過 Compile 與 reload 的動作。

講師：阿修

WebGL

three.js 實做 web 3D 功能。

工具分享

liveReload : 當程式被修改後，Browser 自動重新載入頁面。
skitch： Mac 快速修圖工具。
Webclip
kuler ：配色建議
droplr : 快速上傳檔案與自動建立一個分享的連結
clearly : 清除廣告
esprima：literate program

特別感謝 Caesar 給我的 JSDC 邀請碼，不然我連進場的機會都沒有 QQ

網頁好讀版

This post was last modified by puritys 2013/06/13