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

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

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

E0c2a42f0fa81a1e2593843ebb89ea7d?s=128

Yi-Ru Lin

May 17, 2013
Tweet

Transcript

  1. 2.

    關於我 ·•林宜儒 Lawrence facebook.com/yiru.lin ·•寶利拾股份有限公司,共同創辦人 ·•愛料理 iCook.tw ·•Mr. Plurk ·•硬塞的股份有限公司,創辦人

    ·•Inside 網路趨勢觀察 www.inside.com.tw ·•求才看板、Inside 網摘 ·•目前負責愛料理網站開發與營運
  2. 3.
  3. 4.

    產品概況 ·•網站 http://icook.tw/,其中行動版網頁流量約 40% ·•100% 使用 Amazon AWS 東京機房 ·•Mobile

    apps(流量是網站的兩倍以上) ·•Windows Phone App ·•Android App ·•iPhone App ·•iPad App ·•Mobile 很重要 ·•尤其是 Windows Phone,微軟是 JSDC 贊助商,我就第一 個列出來了
  4. 7.
  5. 13.
  6. 15.
  7. 17.

    JavaScript • CoffeeScript • jQuery • Backbone.js • Handlebars •

    Jasmine & Capybara • િ୹࢑࢖༻ Require.js
  8. 18.

    瀏覽器支援 • ࢧԉ֤छओྲྀᖣ᧸ث • Microsoft Internet Explorer 8/9/10 • Google

    Chrome • Firefox • Mobile Safari • Virtual Box • ਖ਼൛త Microsoft Windows 7ʢࢧ࣋ਖ਼൛ʣ • ૑ۀᅶୂՄߟྀ੒ҝ Microsoft BizSpark ။һ
  9. 20.

    前端技術 & 產品發展 ·•與用戶互動的第一線 ·•用戶可立即察覺改變 ·•UI 直接影響用戶體驗 ·•可以追蹤 Server log

    上無法掌握的資訊 ·•滑鼠的移動、停留、點擊 ·•網頁捲軸的捲動 ·•前端工程師還真是重要啊...
  10. 25.

    善用 Google Analytics ·•Real-time Event tracking/Conversion tracking ·•使用率、曝光率即時監測 ·•特定用戶行為分析 ·•應用:

    ·•即時監測商品被放進購物車的行為 ·•即時追蹤新功能、新介面的點擊分布 ·•即時問卷調查
  11. 26.
  12. 32.
  13. 33.
  14. 34.
  15. 35.

    關於 GTM • ద߹࢖༻ GTM తጯ༻ • Google Analytics •

    Google AdWords Conversion Tracking • Google AdWords Remarketing • DoubleClick Floodlight • ಛ৭ • ൛ຊ߇੍ɺᒟݶ߇੍ɺࣗఆڊू • ࢧԉ Custom HTML/image/javascript tag
  16. 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/
  17. 38.
  18. 47.

    關於 Mobile Web ·•HTTP Requests 數量、檔案大小 減少 Ajax 使用、只輸出必要的 HTML

    ·•輸出適合手機版的圖片尺寸 即使是 Responsive design 也應該做到如此 ·•不載入用不到的 CSS、JavaScript. 特別是沒有顯示在頁面上的元素跟效果 ·•後端也可以省掉許多功夫
  19. 50.
  20. 51.

    各種老把戲... ·•很陽春的 JavaScript 運用,it just works. ·•善用 Cookie & localStorage

    ·•記錄訪客拜訪次數、上次造訪時間 ·•記錄訪客是否已看過新功能的介紹 ·•偵測瀏覽器高度、寬度決定廣告位置 ·•HandmadeCookie https://github.com/polydice/handmade-cookie
  21. 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