This is how we build www.attictv.com with NodeJS, and the development philosophies we adopted as a startup. AtticTV is a music video website that is going to the the MTV of the Internet. Just get on www.attictv.com and music video starts playing, no searching, no waiting. The slide notes are in Chinese because I presented the slide at NodeJS Party Taiwan at Taipei. If you have any questions, feel free to buzz me at @conancat on Twitter!

1. AtticTV背後的故事
大家好！今天我們來談NodeJS和AtticTV如何運用NodeJS來做我們的網站

2. Grey是誰

3. 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的工作好累。遇到好夥伴，決定出來為自己拼⼀一拼

4. ⋯⋯AtticTV是啥？
＊大家聽歌看MV上什麼網？
＊過程曲折嗎？麻煩嗎？聽歌需要很多個步驟

5. ＊先要知道自己想要聽什麼歌
＊輸入網站內搜索

6. ＊按進去，開始看
＊看完了又要再找過
＊不能重復聽，沒有自動跳下⼀一首歌，很多工

7. 麻煩嗎？
＊你們覺得呢？

8. ＊電視電台，直接開直接看，（曾經）24小時播放音樂
＊看電視的話，完全沒有控制權，不能控制要看什麼
＊現在都是綜藝節目，很閒，真正音樂少

9. AtticTV呢？

10. ＊直接打開www.attictv.com，MV和音樂就直接播放
＊可以選擇自己喜歡的電台，聽愛聽的歌
＊⼀一首歌聽完了，直接播下⼀一首歌，不用找，不用等

11. ＊可以建立自己的Music Video Library，隨時回來聽和看自己最喜歡的MV

12. ＊你也可以製造Mixtapes，為⼀一個個你自己私人的‘卡帶’，整合喜歡的歌，然後和別人分享

13. AtticTV還有誰？

14. Johnson Goh
Project Management
（吳漢瑞）
Business Development
Marketing
Design
Superman

15. ManChoy Kau
Backend Development
（邱文軒）
Server management
System administrator
Data scrapping master
Ninja

16. Our Development Philosophy
我們的開發哲學

17. 1. Start simple,
start small
從小開始

18. Image by @giveawayboy at Flickr
http://www.flickr.com/photos/giveawayboy/3464199669/
＊不要⼀一開始就想什麼都做，什麼都要用
＊其實很多時候⼀一開始你並不需要那些多餘的東西
＊Product features & development都⼀一樣道理，簡單開始，不需要的東西儘量少管少用。
＊先找到方向過後，才⼀一步⼀一步加以改善。

19. Server-side Framework
ExpressJS
http://expressjs.com
https://github.com/visionmedia/express

20. 2. Less Is More
少即是多

21. Image by @airguy1988 at Flickr
http://www.flickr.com/photos/airguy1988/6833483309/
＊儘量以最少功夫達到最大的功效
＊寫越少，做得更快
＊開發時間越短，推出市場時間越快越好
＊選擇可以讓你省時間的用具最好

22. Javascript Compiler
CoffeeScript
http://coffeescript.org/
https://github.com/jashkenas/coffee-script

23. HTML Template Engine
Jade
http://jade-lang.com/
https://github.com/visionmedia/jade

24. CSS Generator
Stylus
http://learnboost.github.com/stylus/
https://github.com/learnboost/stylus

25. 3. Always Be
Ready
隨時準備好

26. Image by @jeffjosejeff at Flickr
http://www.flickr.com/photos/jeffjosejeff/4198937652/
＊新近的網頁都講求快速，快訊，Real-time
＊隨時和主機保持聯繫，有甚麼事情直接通訊，不會慢，不用等
＊⼀一開始可能覺得不需要，但⼀一開始就以Real-time作為開發原則，以後產品比較能夠有創意點子
＊如push notifications, chat等是很多時候不能缺少的Feature，都需要瀏覽器和主機隨時保持連線

27. Data Transport
Socket.io
http://socket.io/
https://github.com/learnboost/socket.io

28. 4. Be Flexible
隨機應變

29. Image by @poramapon at Flickr
http://www.flickr.com/photos/poramapon/6650021701/
＊開發應該可以隨意隨機應變，不要把自己綁死
＊要換的時候簡單可以換，因為開發和startup的原則就是持續尋找⼀一個有規模的生意模式。(startups
are companies in search of a viable business model)
＊做好心理準備，下星期可能你做的東西就不用了，換不同的，所以自己寫的code最好能夠短時間內變

30. MongoDB Driver
MongooseJS
http://mongoosejs.com/
https://github.com/learnboost/mongoose

31. 5.Don’t waste time
(reinventing the wheel)
別浪費時間

32. Image by @cobalt at Flickr
http://www.flickr.com/photos/cobalt/6891338947/
＊已經證明實用，抗戰的東西，不要再去想創回⼀一個⼀一樣的東西
＊浪費時間和資源
＊直接用已經被証實的用具，不要浪費時間解決已經被解決的問題

33. DOM Manipulation
jQuery
http://jquery.com/

34. Date & Time Parsing
MomentJS
http://momentjs.com/
https://github.com/timrwood/moment

35. OAuth library
Everyauth
http://everyauth.com/
https://github.com/bnoguchi/everyauth

36. 6.Keep things
organized
保持整齊架構

37. Image by @jenniwaterloo at Flickr
http://www.flickr.com/photos/jenniwaterloo/3424642826/
＊雖然說東西可能會丟，可能不用，但是也要時刻保持基本架構，才可以好好發展
＊找不到code，很難開發，很難plugin都是浪費時間和資源的問題
＊儘量減少結構的問題，用可以幫助你保持整齊的架構，比較容易maintain和開發

38. Frontend Organization Framework
BackboneJS
http://documentcloud.github.com/backbone/
https://github.com/documentcloud/backbone

39. Flow-control Library
Async
https://github.com/caolan/async

40. 7.Make Mistakes
(then fix them)
製造錯誤

41. Image by @f2point8 at Flickr
http://www.flickr.com/photos/f2point8/5361206376/
＊如果開發就決定⼀一定要犯錯，就在開發的時候儘量把所有的錯都先犯，然後修理他們
＊之後再犯錯，確保那個錯不會再出現。寫好test cases來測試自己的code很重要（我們也還在學習
中）
＊Test driven development, Behavior driven development

42. TDD/BDD Testing
Mocha
http://visionmedia.github.com/mocha/
https://github.com/visionmedia/mocha

43. 8.Keep track of
what you do
記錄每⼀一步

44. Image by @roeyahram at Flickr
http://www.flickr.com/photos/roeyahram/4413828732/
＊Debug的時候記錄logging很重要，就可以在同⼀一個地方找到可以幫助你debug的資訊
＊logging可以很亂，可以太多資訊，所以得好好處理和整理

45. Logging framework
Winston
https://github.com/flatiron/winston

46. Questions?
問我問我
grey@attictv.com
@conancat
fb.com/conancat

47. 謝謝你
Thank you for your time!