檢視模式請點這裡《http://goo.gl/zNnxt

協同編輯請點這裡《http://goo.gl/0qq0x

官方懶人包《ttp://goo.ghl/QeWrK

Day 01 非官方IRC Log《http://goo.gl/M1PTm

Day 02 非官方IRC Log《http://goo.gl/wJR8n

Day 01&02 非官方IRC Log《http://goo.gl/F1GP3

        活動問卷 http://goo.gl/cXNge

相關連結

================== Day 01 ==================

R0 (國際會議廳)

KeyNote : The Evolution of JavasCript  & public cloud

Speaker: Joe Ziegler(Twitter)

keynote 講者不常寫JS

first Javascript written in 10 days by Brendan Eich, 1995

Mocha->LiveScript->JavaScript

ie7 tax

如果你用過 IE7 我要把你的東西沒收, 我電腦裝IE6耶XD

is any one …??? 還沒睡醒zzz

AWS SDK for Node,js

http://aws.amazon.com/sdkfornodejs/

http://aws.amazon.com/elasticbeanstalk/


从前端到终端 — 跨越平台的前端技术

奇虎360 王文明 wangwenming1985 微博 http://www.weibo.com/koalainb

 

native app與web app之爭

PhoneGap 兩者的權衡 將網頁端程式打包為app

PhoneGap:https://github.com/wangwenming/phonegap

問題

  1. webview在android上有問題
  2. 加載的時候沒畫面
  3. 效率低,很卡 (android +10fps)

神器 cocos2d-X  

http://www.cocos2d-x.org/

優點

  1. 優秀的開發社群
  2. 強大的周邊工具
  3. 跨平台 高效能
  4. 國內外眾多的成功案例

缺點

  1. 不支持dom
  2. 是遊戲的框架,不支持web應用元件库
  3. 少量接口不一致
  4. 編碼風格偏c++ 與前端開發者不一致


JavaScript 開發實戰:效能調校與常見陷阱

Will 保哥 / 多奇數位創意

效能調教三部曲

測量

理解

object vs array

調教

GC

DOM 快取

JS常見陷阱

型別轉換

QR code(http://kaywa.me/dGt7R): http://www.youtube.com/user/doggy8088/videos

Youtube: http://www.youtube.com/watch?v=5FFQASbd7-c

Slides: http://www.slideshare.net/WillHuangTW/java-script-jsdc2013

FB: https://www.facebook.com/will.fans


愛料理網站前端開發經驗談

Lawrence Lin / Polydice

愛料理:http://icook.tw/

投影片:https://speakerdeck.com/linyiru/ai-liao-li-wang-zhan-qian-duan-kai-fa-jing-yan-tan
只有一位前端工程師
require.js造成佈署時間太慢,最後不採用


前端工程師的資安挑

Ant

《前傳投影片》

haha point:CAPTCHA 人類視覺官能委靡錯亂驗證碼


做更快一點 工程師討生活工具介紹

UP Chen / Nvesto

Sublime Text 2 plugins (package-control install)

Droplr 更快速連結分享檔案、連結。

Skitch 共同編輯圖片 用於PM溝通 (Evernote)

Clearly 精簡化網頁內容 以最簡易清晰的方式閱讀文章 (Evernote)

WebClipper 更快的記憶網頁內容 會附帶截圖與連結 (Evernote... 這傢伙根本就是Evernote派來打廣告的吧!?)

Kuler 快速取用調配好的色票 (adobe)


Defensive backend programming with node.js

Ruben Tan / OnApp CDN Sdn Bhd

使用相依資源(ex: db, file)的時候,要確保該資源是可以用的


R1 (第一會議室)

The seven year itch with ExtJS

Calvin Yeh / Pastico

ExtJS is so weird

        component based, HTML is generated by writing JS code

ExtJS is so fat

ExtJS theme is out of date

        Theme is customizable

I want to use jQuery plugins

        http://loianegroner.com/2011/08/how-to-use-extjs-4-jquery-together/

RWD, One suite for any device

        different product, ExtJS and Sench Touch

Learning curve is so steep

        official has traning program, $3300

        or buy books

        ExtJS doc is fantastic

Single Page Application’s Challenge

        Memory Leak

                Garbage collectino (destroy, mon)

                Use DOM object effiectively


Node.js 佈署常見問題

背景執行

node app.js

node app.js &

forever app.js //node-forever

避免memory leak

node --v8-options

node --gc_global

node --gc_interval

可參考:http://code.osnap.us/wp/?p=21

提升效能 (設定環境變數)

NODE_ENV=”production”

Nginx(proxy_pass) + expressjs (最新版有trusted proxy設定,不會在抓取ip的時候抓到 127.0.0.1)

多核心資源分配解決方案

https://github.com/ql-io/cluster2

開發輔助

node-supervisor

當進行開發變更檔案時會自動reboot app

(but 正在執行的request也會強制中止)

動態圖片大小 Solution

Solution 1

http://aheckmann.github.io/gm/

上傳圖片時generate出多種尺寸

優: 速度快

缺: 上傳慢, 吃記憶體, 根據不同規格寫批次檔

Solution 2

CloudFront 串 EC2 + S3 + nodejs

保留原始擋存到S3

request -> CloudFront ->沒圖 -> EC2 (抓S3) -> 產生縮圖 -> ….很慢

Solution 3

CloudFront + Nginx + S3

http://wiki.nginx.org/HttpImageFilterModule

Nginx image_filter 模組 (可以串s3)

cloudfront -> ngnix proxy pass打 s3 (順便縮圖)


我編譯故我在:誰說 Node.js 程式不能編成 Binary

Fred Chien / Mandice

重點:把source code藏起來(利用加密、壓縮讓爸媽都不認得 XD)

* 修改package.json

“npk_target”: {

        “app.js”: {

                “sources”: {

                        “a.js”, “b.js”, ...

                }

        }

}

* npk [project path] >> out/app.js/app.js


如何教設計師前端技術

EvenWu / evendesign

投影片:https://speakerdeck.com/evenwu/ru-he-jiao-she-ji-shi-qian-duan-ji-shu


支援遊戲及互動應用的雲

胡舜元 / 中央研究院資訊所多媒體網路與系統實驗室

Node.js

MongoDB

JSON

VAST


R2 (第二會議室)

Easier async -flow control 的原理、應用、實作及展望

馮旭平(Fillano)

Javascript Callback = Continuation-passing Style

Javascript async flow control library

https://github.com/caolan/async

Promise (一直下 then.... 就好)

https://github.com/kriskowal/q

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

Promise的優點

Vexed大大寫的WinJS.Promise 物件與 jQuery Deferred 物件比較

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

複雜的Q的用法

http://jsfiddle.net/Rzrc4/

使用 promise 的時候, 一定要讓所有的promise  走到 fufuill or fail 否則程式就會停住(卡住)不動了

可以在then 裡面使用 promise 來控制, 但是其實這樣的邏輯可以拉出 then (我想應該是再接一個 then2 把要本來要寫在 then 裡面的程式碼串在後面 )

harmony:generators

應用:

無窮迴圈->iterator,中斷執行並回傳

做waterfall

限制:
不能在非同步函式中使用yield


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

xdite / RocoDev

投影片:http://xdite.github.io/jsdc-2013-slide/


OMG!Mobile Web can do that?

Sean / youmeb


關於 Mobile Web 開發二三事

Eric Chuang / Yahoo

================== Day 02 ==================

KeyNote : F2E – The Keystone of the Industry

Josephj (蔣定宇) / MiiiCasa

投影片:https://speakerdeck.com/josephj/f2e-the-keystone


R0 (國際會議廳)

C++ on the web ? you're crazy!

Vladimir Vukicevic (Inventor of WebGL) /Mozilla Taiwan 美商謀智

(有強者能翻譯一下嗎?)


透視 JavaScript 的 MVC / MVP / MVVM

大澤木小鐵 / 台灣新浪

問題

把資料邏輯都寫在function中

與元件的互動也都寫在function中(VB)

分離關注點

Model:對資料做操作

View:視覺元件操作

mvc概念由xerox parc提出

MVC執行流程

Controller初始化Model跟View

Model將資料request給View

View給使用者看到

使用者對Controller提出請求

Controller將請求提至Model實行

資料request給View

View顯示給使用者

MVP執行流程

對View發出請求 委派Presenter處理User Request

Presenter改變Model狀態

Presenter再知會View Model已經做出改變

MVP與MVC之差異

MVP較適合維持狀態

View跟Model不需要互相知道

MVVM (參考資料)

knockout.js

ViewModel 將資料轉換成視覺可用 (一變更即刻更新View)

View 有輸入值立刻更新ViewModel

Data-Binding

Event 概念

Event+MVx


Mobile Web Game 經驗開發談

陳世欽

HTML5遊戲開發

WebGL

效果優

手機支援不全

Canvas

類似傳統開發模式 (有相關經驗入手快)

速度比起Android太差

DOM+CSS3

上手快

陷阱多 (與傳統開發模式差異大)

繪圖(Render)太慢

解決:

記憶體問題

PhoneGap (包裝上架)

總結


設計師!你 RWD 了沒?

Nowill / Nowill Design

RWD三大關鍵:Media Queries, 流動佈局, 資訊流

不支援CSS3的解法

https://github.com/scottjehl/Respond

哪裡找RWD的網站

http://mediaqueri.es/


R1 (第一會議室)

Real-time web application with Socket.IO, Node.js and Redis.

        直撥講稿實作程式碼 https://github.com/yorktsai/jsdc2013

        可用SSL

        可以 CrossDomain (用 WebSocket/JSONP)

        基礎

        io.socket

        io.connect

        

        使用者資料傳送

        全域傳送

                socket.brocast

        

頻道概念

        socket.join(‘room’) //加入頻道

        socket.leave(‘room’) // 離開頻道

        io.socket.in(‘room’)

        

        Single target

        socket handler 和 client 串接起來 就可以傳送給該使用者

[[中間出現臥底]]

http://blog.hinablue.me/entry/nodejs-first-look-socket-io

                Redis 串接後端

                        SUBSCRIBE channel

                        UNSUBSCRIBE channel

                        PUBLLISH channel

                        有 redis channel 就可以讓 nodejs scalable 喔!

                        Two clients required: one for pub, one for sub

                        subscript 不能中斷 , pub/sub 各需要一個連線

        Authentcation

                Cookie & session

                Cookie 不支援 cross domain, use SSL + access token instead

Load balance

ELB : Use  TCP/SSL, instead of HTTP/HTTPS

No X-foward-header

閃光洽

        IE6 hack: 為什麼討厭IE?


R2 (第二會議室)

Rock with Knockout.js

流浪小風 / 91mai 就要買

http://knockoutjs.com/

為什麼要用mvc框架

需求常在改變

Knockout.js 是一個js框架

省掉很多重複的工

MVVM PATTERN

VIEW >>>VIEW MODEL>>>JSON OR webservice

實現html與js分離

改需求的時候 綁定html上的id 或name要一個一個改,相當麻煩

加一個artub>> data-bind=” color : color ”

同步顯示變更

組成字串與邏輯

批次輸入

結論

  1. 關注點分離的精神
  2. 發揮你的想像力 例如連動式選單
  3. 沒有最好的framework只有最適合你的framework


好的開發工具帶你上天堂

Brooky Yen / EZTable

Coding

        Preview

        Debug

        Testing

Timeline Tab (Chrome)

3rd Party Library

        


如何打造雲端開發平台

Marty (許益祥) / 中冠資訊

優:瀏覽器only、協作

缺:效能、Debug

動手玩

JQGrid: http://jsbin.com/ujeyip/18/edit

GoogleMap: http://jsbin.com/ekujig/23/edit

ToDoList: http://jsbin.com/obivup/19/edit

包裝元件

        BackEnd

DEMO:GKMobile

Github:https://github.com/ezoengine/GKMobile

試玩雲端開發平台: http://tryit.ezoui.com/