Slide 2
Slide 2 text
關於我
·•林宜儒 Lawrence facebook.com/yiru.lin
·•寶利拾股份有限公司，共同創辦人
·•愛料理 iCook.tw
·•Mr. Plurk
·•硬塞的股份有限公司，創辦人
·•Inside 網路趨勢觀察
www.inside.com.tw
·•求才看板、Inside 網摘
·•目前負責愛料理網站開發與營運
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
產品概況
·•網站 http://icook.tw/，其中行動版網頁流量約 40%
·•100% 使用 Amazon AWS 東京機房
·•Mobile apps（流量是網站的兩倍以上）
·•Windows Phone App
·•Android App
·•iPhone App
·•iPad App
·•Mobile 很重要
·•尤其是 Windows Phone，微軟是 JSDC 贊助商，我就第一
個列出來了
Slide 5
Slide 5 text
數據概況
·•上線時間：2011年 11月
·•會員人數： 230,000 人
·•食譜數量： 20,000 道食譜
·•粉絲人數： 46.6 萬人
Slide 6
Slide 6 text
·•Co-founder of Polydice, Inc.
·•Co-founder of Polydice, Inc.
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
分享跌跌撞撞學到的經驗
Slide 9
Slide 9 text
從錯誤中累積經驗
·•沒有絕對的對錯
找出當下最適合的方案是唯一正解
·•沒有真正的完美
Done is better than perfect.
·•永遠不能滿足，持續改進
Never stop improving, keep improving.
·•產品、技術、營運、行銷等各方面皆然
Slide 10
Slide 10 text
百廢待舉
·•速度不夠快
·•複雜度越來越高
·•產品變複雜
·•程式碼也變複雜
·•架構也變複雜
·•維護性不夠好
Slide 11
Slide 11 text
與我們打造更好的服務、持續改善服務
Slide 12
Slide 12 text
1. 前端開發工具組合
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
使用 Bootstrap 的優點
·•立即可用的各種元件
·•完整的文件，設計師、工程師溝通良伴
·•豐沛的第三方資源
·•現成模版、配色產生器、UI 元件
·•堪用的 Responsive Design
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
Font Awesome
·•向量字型 Icon
·•直接搭配 Bootstrap 使用
·•透過 CSS 指定樣式
·•尺寸、顏色、效果
Slide 17
Slide 17 text
JavaScript
• CoffeeScript
• jQuery
• Backbone.js
• Handlebars
• Jasmine & Capybara
• િ༻ Require.js
Slide 18
Slide 18 text
瀏覽器支援
• ࢧԉ֤छओྲྀᖣ᧸ث
• Microsoft Internet Explorer 8/9/10
• Google Chrome
• Firefox
• Mobile Safari
• Virtual Box
• ਖ਼൛త Microsoft Windows 7ʢࢧ࣋ਖ਼൛ʣ
• ۀᅶୂՄߟྀҝ Microsoft BizSpark ။һ
Slide 19
Slide 19 text
2. 前端與產品發展
Slide 20
Slide 20 text
前端技術 & 產品發展
·•與用戶互動的第一線
·•用戶可立即察覺改變
·•UI 直接影響用戶體驗
·•可以追蹤 Server log 上無法掌握的資訊
·•滑鼠的移動、停留、點擊
·•網頁捲軸的捲動
·•前端工程師還真是重要啊...
Slide 21
Slide 21 text
前端工程師很辛苦...
·•跨瀏覽器相容性，各種瀏覽器都要測試
·•要懂 HTML、CSS、JavaScript
·•還要懂 SASS/SCSS、CoffeeScript
·•還要略懂 SEO、略懂 UI
·•還要會寫測試
·•總會有一段時間，美好的生命就耗費在
與 IE 家族奮鬥...
Slide 22
Slide 22 text
在 JSDC 分享
當然要說前端工程師辛苦啊XD
政治正確
Slide 23
Slide 23 text
案例： Crazyegg
Slide 24
Slide 24 text
滑鼠點擊分布
Slide 25
Slide 25 text
善用 Google Analytics
·•Real-time Event tracking/Conversion tracking
·•使用率、曝光率即時監測
·•特定用戶行為分析
·•應用：
·•即時監測商品被放進購物車的行為
·•即時追蹤新功能、新介面的點擊分布
·•即時問卷調查
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
新的 UI 元件開發
Slide 28
Slide 28 text
推出新功能
·•References
·•http://usablica.github.io/intro.js/
·•http://clu3.github.io/bootstro.js/
Slide 29
Slide 29 text
前端工程師的能耐
·•拼湊、組合各種現成的 API
·•產出新介面、新功能
·•實現較複雜的前端互動
·•掌握用戶在前端的行為
Slide 30
Slide 30 text
我發現照這樣講下去
時間可能會不太夠...所以我要開始加速了！
Slide 31
Slide 31 text
3. 廣告業務很煩怎麼辦？
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
關於 GTM
• ద߹༻ GTM తጯ༻
• Google Analytics
• Google AdWords Conversion Tracking
• Google AdWords Remarketing
• DoubleClick Floodlight
• ಛ৭
• ൛ຊ߇੍ɺᒟݶ߇੍ɺࣗఆڊू
• ࢧԉ Custom HTML/image/javascript tag
Slide 36
Slide 36 text
4. JavaScript MVC
Slide 37
Slide 37 text
JavaScript MVC
·•採用 Backbone.js
·•使用於行為較複雜的使用者介面
·•Rails 的 Assets pipeline 壓縮、輸出
·• Reference: A Comparison of Angular, Backbone, CanJS and Ember
http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
各種實作細節
·•透過 Ajax 取得 JSON API 回傳的資料
·•頁面渲染、內容更新、邏輯判斷
·•網址改變(pushState)、UI 狀態改變
·•用戶行為追蹤
·•跨瀏覽器相容性
Slide 40
Slide 40 text
5. 關於 Responsive Design
Slide 41
Slide 41 text
目前心得
·•同時照顧多種解析度，真的不簡單
·•推出新頁面的速度變慢
·•視覺細節（要同時兼顧多個版本）
·•資訊呈現（內容多寡的取捨）
·•實作細節（不同解析度）
·•只依賴 CSS media query 顯然是不夠的
Slide 42
Slide 42 text
如何兼顧速度與品質
拋開羞恥心
Slide 43
Slide 43 text
如何兼顧速度與品質
·•對於解析度的取捨
·•例如：只照顧「蘋果三件套」
·•儘早建立相關的設計準則
·•明確區分各解析度要呈現的內容多寡
·•視覺風格的對應設計
·•UI 元件的對應設計
Slide 44
Slide 44 text
6. Mobile Web
Slide 45
Slide 45 text
咦？剛剛不是還在談
Responsive Design 嗎？
Slide 46
Slide 46 text
對，後來決定不要了...
Slide 47
Slide 47 text
關於 Mobile Web
·•HTTP Requests 數量、檔案大小
減少 Ajax 使用、只輸出必要的 HTML
·•輸出適合手機版的圖片尺寸
即使是 Responsive design 也應該做到如此
·•不載入用不到的 CSS、JavaScript.
特別是沒有顯示在頁面上的元素跟效果
·•後端也可以省掉許多功夫
Slide 48
Slide 48 text
Mobile Web 的優點
·•視為獨立的產品
·•企劃（功能、動線、使用族群）
·•營運（監控、分析、優化）
·•營收（廣告版位提供與優化）
·•越來越多的行動版網頁用戶，值得照顧
Slide 49
Slide 49 text
7. 新瓶裝舊酒如何？
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
各種老把戲...
·•很陽春的 JavaScript 運用，it just works.
·•善用 Cookie & localStorage
·•記錄訪客拜訪次數、上次造訪時間
·•記錄訪客是否已看過新功能的介紹
·•偵測瀏覽器高度、寬度決定廣告位置
·•HandmadeCookie
https://github.com/polydice/handmade-cookie
Slide 52
Slide 52 text
8. JSON API 之必要
Slide 53
Slide 53 text
JSON API 之必要
·•後端工程師專注於 API 的：
·•完整性
·•可用性
·•品質
·•效能
·•讓前端工程師幾乎可以獨立作業
Slide 54
Slide 54 text
9. 如果只能講一件事
Slide 55
Slide 55 text
KISS
keep it simple and stupid.
Slide 56
Slide 56 text
10. 工程師的浪漫
Slide 57
Slide 57 text
Architecture, iCook.tw
2~3 Web Servers
Database
Message Queue
Workers/Schduler
AWS EC2
AWS EC2/Sidekiq Pro
AWS RDS/MySQL
AWS EC2/Redis
Load Balancer
AWS ELB
CDN
AWS Cloudfront
AWS EC2/Redis
AWS S3
File Storage Database
Search Engine
AWS EC2/Elasticsearch
DNS management
AWS Route 53
AWS Elasticache
Cache
Deployment
AWS OpsWorks
Slide 58
Slide 58 text
િៃ༗ਓզɼҝॄኄ၏Ұݸ৯ේɼ
ཁ༻౸Ṝኄෳᯑతٕज़䏆ʁ
Slide 59
Slide 59 text
զଞɿ㟬ᡒඪ४ҊɼؐੋਅመҊʁ
Slide 60
Slide 60 text
ࡏٕज़্༗ӽදݱɼੋఔࢣత࿘ອ
Slide 61
Slide 61 text
ࡏઃܭ্༗ӽදݱɼੋઃܭࢣత࿘ອ
Slide 62
Slide 62 text
ࡏ㗞্༗ӽදݱɼੋا֢ᢛ PM త࿘ອ
Slide 63
Slide 63 text
ࡏ㚎༰্༗ӽදݱɼੋฤा၇త࿘ອ
Slide 64
Slide 64 text
ࡉઅबӽ
ᢛ֤Ґڞษ೭