JSDC.tw 2013 Summary
GAIS LAB group Meeting
05/29
alan7
JSDC
+
• JavaScript.tw
• HTML5&CSS5
• Node.js
所有懶人包: http://goo.gl/bvvFb
Conference in 2013 http://goo.gl/UJmZ0
名稱
內容
日期
價格
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
未定
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)
Easier async -flow control
• Why Using flow control
– 需要CPS又需要循序執行
– Ex. 跟server要數字A去跟B計算再跟server要C去
算出結果
– 嵌套
• 不易閱讀、維護、編輯
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
• 提供一些非同步工具
– 沒有標準做法，所以市面上有幾十種類似的工具，
各有優缺點
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內建的物件
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
Easier async -flow control
• JQuery Deferred 範例
Easier async -flow control
• 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.
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.
RequireJs - Using AMD
• AMD IMPLEMENTATION
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.
RequireJs - Using AMD
• Can inheritance
RequireJs - Using AMD
• 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
關於 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
Building a Web OS based on Ext JS
• Better User experience
– Framework
– JavaScript Loading
– Object-Oriented Design
– Window Management
Building a Web OS based on Ext JS
Building a Web OS based on Ext JS
• Ext JS
– JavaScript framework for rich desktop apps
– Cross-browser compatibility
– Rich modern UI widgets
Building a Web OS based on Ext JS
Inline scripts(<script src=“synology.js”>)
blocks HTML rendering
blocks parallel downloading(images/iframes)
Building a Web OS based on Ext JS
• Async Loading
– Add defer attribute
<script src=“synology.js” defer ></script>
– Add async attribute
<script src=“synology.js” async ></script>
Building a Web OS based on Ext JS
• Object-Oriented Design
– Ext JS Class System
– For example
Building a Web OS based on Ext JS
• DOM cloneNode
var node = document.getElementById ("node");
var clonedNode = node.cloneNode (true);
// clear the id property of the cloned table
clonedNode.id = "";
var previewBox =
document.getElementById("previewBox");
previewBox.appendChild (clonedNode)
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);
Building a Web OS based on Ext JS
• Window Management
?
Building a Web OS based on Ext JS
• The manager manages communication
between modules
Building a Web OS based on Ext JS
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
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
F2E – The Keystone of the Industry
• F2E (Front End Engineer)
• 一般認知:
– JavaScript =玩具語言 、跟後端相比簡單多了
– 入門容易 、better to have
– 薪水比較便宜
• 為什麼不可缺少:
– 工程師不愛切版(重邏輯、資料 不管呈現)
– 設計師不愛切版(重呈現、不管作法)
F2E – The Keystone of the Industry
• 需打好基礎:
– 每個HTML TAG的意義
– 前端!= jQuery
– JavaScript 跟DOM API的關連與區別
– Event事件模型
– AJAX、JSONP是甚麼
F2E – The Keystone of the Industry
• 避免盲目追求新技術
– 好的前端!=知道很多技術
– 能夠深入研究並且整合
– 制定規範
– 提升整體品質
– 幫大家解決問題
– 才能稱得上好的前端工程師
F2E – The Keystone of the Industry
• 積極分享、多回饋
– GitHub
• 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
Your Phone is the Controller
Your Phone is the Controller
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
Your Phone is the Controller
• That’s strat with develop game
Your Phone is the Controller
Conclusion
• 多參與社群
• 多了解新知
• 分享與回饋
Any Question?