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/

＊已經證明實用，抗戰的東西，不要再去想創回⼀一個⼀一樣的東西＊浪費時間和資源＊直接用已經被証實的用具，不要浪費時間解決已經被解決的問題

jQueryhttp://jquery.com/

DOM Manipulation

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

Questions? 問我問我

grey@attictv.com@conancat

fb.com/conancat

謝謝你Thank you for your time!