Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
愛料理,網站前端開發經驗談
Search
Yi-Ru Lin
May 17, 2013
Programming
74
8.3k
愛料理,網站前端開發經驗談
那些年,我們開發「愛料理」食譜網站前端學到的 10 件事情。
Yi-Ru Lin
May 17, 2013
Tweet
Share
More Decks by Yi-Ru Lin
See All by Yi-Ru Lin
愛料理網站建置經驗談
linyiru
60
8.2k
Other Decks in Programming
See All in Programming
TypeScript Graph でコードレビューの心理的障壁を乗り越える
ysk8hori
3
1.2k
Vapor Revolution
kazupon
1
130
見せてあげますよ、「本物のLaravel批判」ってやつを。
77web
7
7.8k
Micro Frontends Unmasked Opportunities, Challenges, Alternatives
manfredsteyer
PRO
0
110
Arm移行タイムアタック
qnighy
0
340
距離関数を極める! / SESSIONS 2024
gam0022
0
290
イベント駆動で成長して委員会
happymana
1
340
WebフロントエンドにおけるGraphQL(あるいはバックエンドのAPI)との向き合い方 / #241106_plk_frontend
izumin5210
4
1.4k
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
OnlineTestConf: Test Automation Friend or Foe
maaretp
0
120
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
120
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
655
59k
Docker and Python
trallard
40
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
A better future with KSS
kneath
238
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making Projects Easy
brettharned
115
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
720
Transcript
愛料理 網站前端開發經驗談 ྛٓठ
[email protected]
關於我 ·•林宜儒 Lawrence facebook.com/yiru.lin ·•寶利拾股份有限公司,共同創辦人 ·•愛料理 iCook.tw ·•Mr. Plurk ·•硬塞的股份有限公司,創辦人
·•Inside 網路趨勢觀察 www.inside.com.tw ·•求才看板、Inside 網摘 ·•目前負責愛料理網站開發與營運
None
產品概況 ·•網站 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.
None
分享跌跌撞撞學到的經驗
從錯誤中累積經驗 ·•沒有絕對的對錯 找出當下最適合的方案是唯一正解 ·•沒有真正的完美 Done is better than perfect. ·•永遠不能滿足,持續改進
Never stop improving, keep improving. ·•產品、技術、營運、行銷等各方面皆然
百廢待舉 ·•速度不夠快 ·•複雜度越來越高 ·•產品變複雜 ·•程式碼也變複雜 ·•架構也變複雜 ·•維護性不夠好
與我們打造更好的服務、持續改善服務
1. 前端開發工具組合
None
使用 Bootstrap 的優點 ·•立即可用的各種元件 ·•完整的文件,設計師、工程師溝通良伴 ·•豐沛的第三方資源 ·•現成模版、配色產生器、UI 元件 ·•堪用的 Responsive
Design
None
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 ·•使用率、曝光率即時監測 ·•特定用戶行為分析 ·•應用:
·•即時監測商品被放進購物車的行為 ·•即時追蹤新功能、新介面的點擊分布 ·•即時問卷調查
None
新的 UI 元件開發
推出新功能 ·•References ·•http://usablica.github.io/intro.js/ ·•http://clu3.github.io/bootstro.js/
前端工程師的能耐 ·•拼湊、組合各種現成的 API ·•產出新介面、新功能 ·•實現較複雜的前端互動 ·•掌握用戶在前端的行為
我發現照這樣講下去 時間可能會不太夠...所以我要開始加速了!
3. 廣告業務很煩怎麼辦?
None
None
None
關於 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 Ember http://sporto.github.io/blog/2013/04/12/comparison-angular-backbone-can-ember/
None
各種實作細節 ·•透過 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. 新瓶裝舊酒如何?
None
各種老把戲... ·•很陽春的 JavaScript 運用,it just works. ·•善用 Cookie & localStorage
·•記錄訪客拜訪次數、上次造訪時間 ·•記錄訪客是否已看過新功能的介紹 ·•偵測瀏覽器高度、寬度決定廣告位置 ·•HandmadeCookie https://github.com/polydice/handmade-cookie
8. JSON API 之必要
JSON API 之必要 ·•後端工程師專注於 API 的: ·•完整性 ·•可用性 ·•品質 ·•效能
·•讓前端工程師幾乎可以獨立作業
9. 如果只能講一件事
KISS keep it simple and stupid.
10. 工程師的浪漫
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
િៃ༗ਓզɼҝॄኄ၏Ұݸ৯ේɼ ཁ༻౸Ṝኄෳᯑతٕज़䏆ʁ
զଞɿ㟬ᡒඪ४ҊɼؐੋਅመҊʁ
ࡏٕज़্༗ӽදݱɼੋఔࢣత࿘ອ
ࡏઃܭ্༗ӽදݱɼੋઃܭࢣత࿘ອ
ࡏ㗞্༗ӽදݱɼੋا֢ᢛ PM త࿘ອ
ࡏ㚎༰্༗ӽදݱɼੋฤा၇త࿘ອ
ࡉઅबӽ ᢛ֤Ґڞษ೭
分享幸福時刻
[email protected]