AtticTV背後的故事 大家好!今天我們來談NodeJS和AtticTV如何運用NodeJS來做我們的網站
Jan 25, 2015
AtticTV背後的故事
大家好!今天我們來談NodeJS和AtticTV如何運用NodeJS來做我們的網站
Grey是誰
2009 BA (Hons) Graphic Design(平面設計)
2009-2010 Web Designer(網頁設計)
2010-2011 Front-end Developer(前段開發)
2011-Now Javascript Developer(包山包海包跳海)
*讀平面設計系出身,第⼀一份工作做網頁設計*發覺想要做自己要做的東西,就要自己學怎樣去做,HTML, CSS, Javascript/Jquery⼀一步⼀一步來學*第二分工就全職作前端*Web Design Agency的工作好累。遇到好夥伴,決定出來為自己拼⼀一拼
⋯⋯AtticTV是啥?
*大家聽歌看MV上什麼網?*過程曲折嗎?麻煩嗎?聽歌需要很多個步驟
*先要知道自己想要聽什麼歌*輸入網站內搜索
*按進去,開始看*看完了又要再找過*不能重復聽,沒有自動跳下⼀一首歌,很多工
麻煩嗎?
*你們覺得呢?
*電視電台,直接開直接看,(曾經)24小時播放音樂*看電視的話,完全沒有控制權,不能控制要看什麼*現在都是綜藝節目,很閒,真正音樂少
AtticTV呢?
*直接打開www.attictv.com,MV和音樂就直接播放*可以選擇自己喜歡的電台,聽愛聽的歌*⼀一首歌聽完了,直接播下⼀一首歌,不用找,不用等
*可以建立自己的Music Video Library,隨時回來聽和看自己最喜歡的MV
*你也可以製造Mixtapes,為⼀一個個你自己私人的‘卡帶’,整合喜歡的歌,然後和別人分享
AtticTV還有誰?
Johnson Goh(吳漢瑞)Project ManagementBusiness DevelopmentMarketingDesignSuperman
ManChoy Kau(邱文軒)Backend DevelopmentServer managementSystem administratorData scrapping masterNinja
Our Development Philosophy我們的開發哲學
1.Start simple, start small從小開始
Image by @giveawayboy at Flickrhttp://www.flickr.com/photos/giveawayboy/3464199669/
*不要⼀一開始就想什麼都做,什麼都要用*其實很多時候⼀一開始你並不需要那些多餘的東西*Product features & development都⼀一樣道理,簡單開始,不需要的東西儘量少管少用。*先找到方向過後,才⼀一步⼀一步加以改善。*⼀一開始建太多就是浪費時間
ExpressJShttp://expressjs.comhttps://github.com/visionmedia/express
Server-side Framework
2.Less Is More少即是多
Image by @airguy1988 at Flickrhttp://www.flickr.com/photos/airguy1988/6833483309/
*儘量以最少功夫達到最大的功效*寫越少,做得更快*開發時間越短,推出市場時間越快越好*選擇可以讓你省時間的用具最好
CoffeeScripthttp://coffeescript.org/https://github.com/jashkenas/coffee-script
Javascript Compiler
Jadehttp://jade-lang.com/https://github.com/visionmedia/jade
HTML Template Engine
Stylushttp://learnboost.github.com/stylus/https://github.com/learnboost/stylus
CSS Generator
3.Always Be Ready隨時準備好
Image by @jeffjosejeff at Flickrhttp://www.flickr.com/photos/jeffjosejeff/4198937652/
*新近的網頁都講求快速,快訊,Real-time*隨時和主機保持聯繫,有甚麼事情直接通訊,不會慢,不用等*⼀一開始可能覺得不需要,但⼀一開始就以Real-time作為開發原則,以後產品比較能夠有創意點子*如push notifications, chat等是很多時候不能缺少的Feature,都需要瀏覽器和主機隨時保持連線
Socket.iohttp://socket.io/https://github.com/learnboost/socket.io
Data Transport
4.Be Flexible隨機應變
Image by @poramapon at Flickrhttp://www.flickr.com/photos/poramapon/6650021701/
*開發應該可以隨意隨機應變,不要把自己綁死*要換的時候簡單可以換,因為開發和startup的原則就是持續尋找⼀一個有規模的生意模式。(startups are companies in search of a viable business model)*做好心理準備,下星期可能你做的東西就不用了,換不同的,所以自己寫的code最好能夠短時間內變通,改善
MongooseJShttp://mongoosejs.com/https://github.com/learnboost/mongoose
MongoDB Driver
5.Don’t waste time (reinventing the wheel)
別浪費時間
Image by @cobalt at Flickrhttp://www.flickr.com/photos/cobalt/6891338947/
*已經證明實用,抗戰的東西,不要再去想創回⼀一個⼀一樣的東西*浪費時間和資源*直接用已經被証實的用具,不要浪費時間解決已經被解決的問題
MomentJShttp://momentjs.com/https://github.com/timrwood/moment
Date & Time Parsing
Everyauthhttp://everyauth.com/https://github.com/bnoguchi/everyauth
OAuth library
6.Keep things organized保持整齊架構
Image by @jenniwaterloo at Flickrhttp://www.flickr.com/photos/jenniwaterloo/3424642826/
*雖然說東西可能會丟,可能不用,但是也要時刻保持基本架構,才可以好好發展*找不到code,很難開發,很難plugin都是浪費時間和資源的問題*儘量減少結構的問題,用可以幫助你保持整齊的架構,比較容易maintain和開發
BackboneJShttp://documentcloud.github.com/backbone/https://github.com/documentcloud/backbone
Frontend Organization Framework
Asynchttps://github.com/caolan/async
Flow-control Library
7.Make Mistakes (then fix them)
製造錯誤
Image by @f2point8 at Flickrhttp://www.flickr.com/photos/f2point8/5361206376/
*如果開發就決定⼀一定要犯錯,就在開發的時候儘量把所有的錯都先犯,然後修理他們*之後再犯錯,確保那個錯不會再出現。寫好test cases來測試自己的code很重要(我們也還在學習中)*Test driven development, Behavior driven development
Mochahttp://visionmedia.github.com/mocha/https://github.com/visionmedia/mocha
TDD/BDD Testing
8.Keep track of what you do記錄每⼀一步
Image by @roeyahram at Flickrhttp://www.flickr.com/photos/roeyahram/4413828732/
*Debug的時候記錄logging很重要,就可以在同⼀一個地方找到可以幫助你debug的資訊*logging可以很亂,可以太多資訊,所以得好好處理和整理
Winstonhttps://github.com/flatiron/winston
Logging framework
謝謝你Thank you for your time!