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