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

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

Transcript

1. 愛料理
   網站前端開發經驗談
   ྛٓठ
   Lawrence@polydice.com
   

   View Slide

2. 關於我
   ·•林宜儒 Lawrence facebook.com/yiru.lin
   ·•寶利拾股份有限公司，共同創辦人
   ·•愛料理 iCook.tw
   ·•Mr. Plurk
   ·•硬塞的股份有限公司，創辦人
   ·•Inside 網路趨勢觀察
   www.inside.com.tw
   ·•求才看板、Inside 網摘
   ·•目前負責愛料理網站開發與營運
   

   View Slide

3. View Slide

4. 產品概況
   ·•網站 http://icook.tw/，其中行動版網頁流量約 40%
   ·•100% 使用 Amazon AWS 東京機房
   ·•Mobile apps（流量是網站的兩倍以上）
   ·•Windows Phone App
   ·•Android App
   ·•iPhone App
   ·•iPad App
   ·•Mobile 很重要
   ·•尤其是 Windows Phone，微軟是 JSDC 贊助商，我就第一
   個列出來了
   

   View Slide

5. 數據概況
   ·•上線時間：2011年 11月
   ·•會員人數： 230,000 人
   ·•食譜數量： 20,000 道食譜
   ·•粉絲人數： 46.6 萬人
   

   View Slide

6. ·•Co-founder of Polydice, Inc.
   ·•Co-founder of Polydice, Inc.
   

   View Slide

7. View Slide

8. 分享跌跌撞撞學到的經驗
   

   View Slide

9. 從錯誤中累積經驗
   ·•沒有絕對的對錯
   找出當下最適合的方案是唯一正解
   ·•沒有真正的完美
   Done is better than perfect.
   ·•永遠不能滿足，持續改進
   Never stop improving, keep improving.
   ·•產品、技術、營運、行銷等各方面皆然
   

   View Slide

10. 百廢待舉
    ·•速度不夠快
    ·•複雜度越來越高
    ·•產品變複雜
    ·•程式碼也變複雜
    ·•架構也變複雜
    ·•維護性不夠好
    

    View Slide

11. 與我們打造更好的服務、持續改善服務
    

    View Slide

12. 1. 前端開發工具組合
    

    View Slide

13. View Slide

14. 使用 Bootstrap 的優點
    ·•立即可用的各種元件
    ·•完整的文件，設計師、工程師溝通良伴
    ·•豐沛的第三方資源
    ·•現成模版、配色產生器、UI 元件
    ·•堪用的 Responsive Design
    

    View Slide

15. View Slide

16. Font Awesome
    ·•向量字型 Icon
    ·•直接搭配 Bootstrap 使用
    ·•透過 CSS 指定樣式
    ·•尺寸、顏色、效果
    

    View Slide

17. JavaScript
    • CoffeeScript
    • jQuery
    • Backbone.js
    • Handlebars
    • Jasmine & Capybara
    • િ୹࢑࢖༻ Require.js
    

    View Slide

18. 瀏覽器支援
    • ࢧԉ֤छओྲྀᖣ᧸ث
    • Microsoft Internet Explorer 8/9/10
    • Google Chrome
    • Firefox
    • Mobile Safari
    • Virtual Box
    • ਖ਼൛త Microsoft Windows 7ʢࢧ࣋ਖ਼൛ʣ
    • ૑ۀᅶୂՄߟྀ੒ҝ Microsoft BizSpark ။һ
    

    View Slide

19. 2. 前端與產品發展
    

    View Slide

20. 前端技術 & 產品發展
    ·•與用戶互動的第一線
    ·•用戶可立即察覺改變
    ·•UI 直接影響用戶體驗
    ·•可以追蹤 Server log 上無法掌握的資訊
    ·•滑鼠的移動、停留、點擊
    ·•網頁捲軸的捲動
    ·•前端工程師還真是重要啊...
    

    View Slide

21. 前端工程師很辛苦...
    ·•跨瀏覽器相容性，各種瀏覽器都要測試
    ·•要懂 HTML、CSS、JavaScript
    ·•還要懂 SASS/SCSS、CoffeeScript
    ·•還要略懂 SEO、略懂 UI
    ·•還要會寫測試
    ·•總會有一段時間，美好的生命就耗費在
    與 IE 家族奮鬥...
    

    View Slide

22. 在 JSDC 分享
    當然要說前端工程師辛苦啊XD
    政治正確
    

    View Slide

23. 案例： Crazyegg
    

    View Slide

24. 滑鼠點擊分布
    

    View Slide

25. 善用 Google Analytics
    ·•Real-time Event tracking/Conversion tracking
    ·•使用率、曝光率即時監測
    ·•特定用戶行為分析
    ·•應用：
    ·•即時監測商品被放進購物車的行為
    ·•即時追蹤新功能、新介面的點擊分布
    ·•即時問卷調查
    

    View Slide

26. View Slide

27. 新的 UI 元件開發
    

    View Slide

28. 推出新功能
    ·•References
    ·•http://usablica.github.io/intro.js/
    ·•http://clu3.github.io/bootstro.js/
    

    View Slide

29. 前端工程師的能耐
    ·•拼湊、組合各種現成的 API
    ·•產出新介面、新功能
    ·•實現較複雜的前端互動
    ·•掌握用戶在前端的行為
    

    View Slide

30. 我發現照這樣講下去
    時間可能會不太夠...所以我要開始加速了！
    

    View Slide

31. 3. 廣告業務很煩怎麼辦？
    

    View Slide

32. View Slide

33. View Slide

34. View Slide

35. 關於 GTM
    • ద߹࢖༻ GTM తጯ༻
    • Google Analytics
    • Google AdWords Conversion Tracking
    • Google AdWords Remarketing
    • DoubleClick Floodlight
    • ಛ৭
    • ൛ຊ߇੍ɺᒟݶ߇੍ɺࣗఆڊू
    • ࢧԉ Custom HTML/image/javascript tag
    

    View Slide

36. 4. JavaScript MVC
    

    View Slide

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/
    

    View Slide

38. View Slide

39. 各種實作細節
    ·•透過 Ajax 取得 JSON API 回傳的資料
    ·•頁面渲染、內容更新、邏輯判斷
    ·•網址改變(pushState)、UI 狀態改變
    ·•用戶行為追蹤
    ·•跨瀏覽器相容性
    

    View Slide

40. 5. 關於 Responsive Design
    

    View Slide

41. 目前心得
    ·•同時照顧多種解析度，真的不簡單
    ·•推出新頁面的速度變慢
    ·•視覺細節（要同時兼顧多個版本）
    ·•資訊呈現（內容多寡的取捨）
    ·•實作細節（不同解析度）
    ·•只依賴 CSS media query 顯然是不夠的
    

    View Slide

42. 如何兼顧速度與品質
    拋開羞恥心
    

    View Slide

43. 如何兼顧速度與品質
    ·•對於解析度的取捨
    ·•例如：只照顧「蘋果三件套」
    ·•儘早建立相關的設計準則
    ·•明確區分各解析度要呈現的內容多寡
    ·•視覺風格的對應設計
    ·•UI 元件的對應設計
    

    View Slide

44. 6. Mobile Web
    

    View Slide

45. 咦？剛剛不是還在談
    Responsive Design 嗎？
    

    View Slide

46. 對，後來決定不要了...
    

    View Slide

47. 關於 Mobile Web
    ·•HTTP Requests 數量、檔案大小
    減少 Ajax 使用、只輸出必要的 HTML
    ·•輸出適合手機版的圖片尺寸
    即使是 Responsive design 也應該做到如此
    ·•不載入用不到的 CSS、JavaScript.
    特別是沒有顯示在頁面上的元素跟效果
    ·•後端也可以省掉許多功夫
    

    View Slide

48. Mobile Web 的優點
    ·•視為獨立的產品
    ·•企劃（功能、動線、使用族群）
    ·•營運（監控、分析、優化）
    ·•營收（廣告版位提供與優化）
    ·•越來越多的行動版網頁用戶，值得照顧
    

    View Slide

49. 7. 新瓶裝舊酒如何？
    

    View Slide

50. View Slide

51. 各種老把戲...
    ·•很陽春的 JavaScript 運用，it just works.
    ·•善用 Cookie & localStorage
    ·•記錄訪客拜訪次數、上次造訪時間
    ·•記錄訪客是否已看過新功能的介紹
    ·•偵測瀏覽器高度、寬度決定廣告位置
    ·•HandmadeCookie
    https://github.com/polydice/handmade-cookie
    

    View Slide

52. 8. JSON API 之必要
    

    View Slide

53. JSON API 之必要
    ·•後端工程師專注於 API 的：
    ·•完整性
    ·•可用性
    ·•品質
    ·•效能
    ·•讓前端工程師幾乎可以獨立作業
    

    View Slide

54. 9. 如果只能講一件事
    

    View Slide

55. KISS
    keep it simple and stupid.
    

    View Slide

56. 10. 工程師的浪漫
    

    View Slide

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
    

    View Slide

58. િៃ༗ਓ໰զɼҝॄኄ၏Ұݸ৯ේ໢᜾ɼ
    ཁ༻౸Ṝኄෳᯑతٕज़䏆ʁ
    

    View Slide

59. զ໰ଞɿ㟬૝ᡒඪ४౴Ҋɼؐੋਅመ౴Ҋʁ
    

    View Slide

60. ࡏٕज़্༗୎ӽදݱɼੋ޻ఔࢣత࿘ອ
    

    View Slide

61. ࡏઃܭ্༗୎ӽදݱɼੋઃܭࢣత࿘ອ
    

    View Slide

62. ࡏ㗞඼্༗୎ӽදݱɼੋا֢ᢛ PM త࿘ອ
    

    View Slide

63. ࡏ㚎༰্༗୎ӽදݱɼੋฤा၇త࿘ອ
    

    View Slide

64. ࡉઅ੒ब୎ӽ
    ᢛ֤Ґڞษ೭
    

    View Slide

65. 分享幸福時刻
    Lawrence@polydice.com
    

    View Slide