Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yi-Ru Lin

May 17, 2013
Tweet

More Decks by Yi-Ru Lin

Other Decks in Programming

Transcript

  1. 愛料理
    網站前端開發經驗談
    ྛٓठ
    [email protected]

    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. 分享幸福時刻
    [email protected]

    View Slide