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

    ·•Inside 網路趨勢觀察 www.inside.com.tw ·•求才看板、Inside 網摘 ·•目前負責愛料理網站開發與營運
  2. 產品概況 ·•網站 http://icook.tw/,其中行動版網頁流量約 40% ·•100% 使用 Amazon AWS 東京機房 ·•Mobile

    apps(流量是網站的兩倍以上) ·•Windows Phone App ·•Android App ·•iPhone App ·•iPad App ·•Mobile 很重要 ·•尤其是 Windows Phone,微軟是 JSDC 贊助商,我就第一 個列出來了
  3. JavaScript • CoffeeScript • jQuery • Backbone.js • Handlebars •

    Jasmine & Capybara • િ୹࢑࢖༻ Require.js
  4. 瀏覽器支援 • ࢧԉ֤छओྲྀᖣ᧸ث • Microsoft Internet Explorer 8/9/10 • Google

    Chrome • Firefox • Mobile Safari • Virtual Box • ਖ਼൛త Microsoft Windows 7ʢࢧ࣋ਖ਼൛ʣ • ૑ۀᅶୂՄߟྀ੒ҝ Microsoft BizSpark ။һ
  5. 前端技術 & 產品發展 ·•與用戶互動的第一線 ·•用戶可立即察覺改變 ·•UI 直接影響用戶體驗 ·•可以追蹤 Server log

    上無法掌握的資訊 ·•滑鼠的移動、停留、點擊 ·•網頁捲軸的捲動 ·•前端工程師還真是重要啊...
  6. 善用 Google Analytics ·•Real-time Event tracking/Conversion tracking ·•使用率、曝光率即時監測 ·•特定用戶行為分析 ·•應用:

    ·•即時監測商品被放進購物車的行為 ·•即時追蹤新功能、新介面的點擊分布 ·•即時問卷調查
  7. 關於 GTM • ద߹࢖༻ GTM తጯ༻ • Google Analytics •

    Google AdWords Conversion Tracking • Google AdWords Remarketing • DoubleClick Floodlight • ಛ৭ • ൛ຊ߇੍ɺᒟݶ߇੍ɺࣗఆڊू • ࢧԉ Custom HTML/image/javascript tag
  8. 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/
  9. 關於 Mobile Web ·•HTTP Requests 數量、檔案大小 減少 Ajax 使用、只輸出必要的 HTML

    ·•輸出適合手機版的圖片尺寸 即使是 Responsive design 也應該做到如此 ·•不載入用不到的 CSS、JavaScript. 特別是沒有顯示在頁面上的元素跟效果 ·•後端也可以省掉許多功夫
  10. 各種老把戲... ·•很陽春的 JavaScript 運用,it just works. ·•善用 Cookie & localStorage

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