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

那些年，我們開發「愛料理」食譜網站前端學到的 10 件事情。

Transcript

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