AtticTV and NodeJS

3,199 views
3,053 views

Published on

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!

Published in: Technology, Business
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
3,199
On SlideShare
0
From Embeds
0
Number of Embeds
1,343
Actions
Shares
0
Downloads
24
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

AtticTV and NodeJS

  1. 1. AtticTV背後的故事大家好!今天我們來談NodeJS和AtticTV如何運用NodeJS來做我們的網站
  2. 2. Grey是誰
  3. 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. 4. ⋯⋯AtticTV是啥?*大家聽歌看MV上什麼網?*過程曲折嗎?麻煩嗎?聽歌需要很多個步驟
  5. 5. *先要知道自己想要聽什麼歌*輸入網站內搜索
  6. 6. *按進去,開始看*看完了又要再找過*不能重復聽,沒有自動跳下⼀一首歌,很多工
  7. 7. 麻煩嗎?*你們覺得呢?
  8. 8. *電視電台,直接開直接看,(曾經)24小時播放音樂*看電視的話,完全沒有控制權,不能控制要看什麼*現在都是綜藝節目,很閒,真正音樂少
  9. 9. AtticTV呢?
  10. 10. *直接打開www.attictv.com,MV和音樂就直接播放*可以選擇自己喜歡的電台,聽愛聽的歌*⼀一首歌聽完了,直接播下⼀一首歌,不用找,不用等
  11. 11. *可以建立自己的Music Video Library,隨時回來聽和看自己最喜歡的MV
  12. 12. *你也可以製造Mixtapes,為⼀一個個你自己私人的‘卡帶’,整合喜歡的歌,然後和別人分享
  13. 13. AtticTV還有誰?
  14. 14. Johnson Goh Project Management (吳漢瑞) Business Development Marketing Design Superman
  15. 15. ManChoy Kau Backend Development (邱文軒) Server management System administrator Data scrapping master Ninja
  16. 16. Our Development Philosophy 我們的開發哲學
  17. 17. 1. Start simple, start small 從小開始
  18. 18. Image by @giveawayboy at Flickr http://www.flickr.com/photos/giveawayboy/3464199669/*不要⼀一開始就想什麼都做,什麼都要用*其實很多時候⼀一開始你並不需要那些多餘的東西*Product features & development都⼀一樣道理,簡單開始,不需要的東西儘量少管少用。*先找到方向過後,才⼀一步⼀一步加以改善。
  19. 19. Server-side FrameworkExpressJShttp://expressjs.comhttps://github.com/visionmedia/express
  20. 20. 2. Less Is More 少即是多
  21. 21. Image by @airguy1988 at Flickr http://www.flickr.com/photos/airguy1988/6833483309/*儘量以最少功夫達到最大的功效*寫越少,做得更快*開發時間越短,推出市場時間越快越好*選擇可以讓你省時間的用具最好
  22. 22. Javascript CompilerCoffeeScripthttp://coffeescript.org/https://github.com/jashkenas/coffee-script
  23. 23. HTML Template EngineJadehttp://jade-lang.com/https://github.com/visionmedia/jade
  24. 24. CSS GeneratorStylushttp://learnboost.github.com/stylus/https://github.com/learnboost/stylus
  25. 25. 3. Always Be Ready 隨時準備好
  26. 26. Image by @jeffjosejeff at Flickr http://www.flickr.com/photos/jeffjosejeff/4198937652/*新近的網頁都講求快速,快訊,Real-time*隨時和主機保持聯繫,有甚麼事情直接通訊,不會慢,不用等*⼀一開始可能覺得不需要,但⼀一開始就以Real-time作為開發原則,以後產品比較能夠有創意點子*如push notifications, chat等是很多時候不能缺少的Feature,都需要瀏覽器和主機隨時保持連線
  27. 27. Data TransportSocket.iohttp://socket.io/https://github.com/learnboost/socket.io
  28. 28. 4. Be Flexible 隨機應變
  29. 29. Image by @poramapon at Flickr http://www.flickr.com/photos/poramapon/6650021701/*開發應該可以隨意隨機應變,不要把自己綁死*要換的時候簡單可以換,因為開發和startup的原則就是持續尋找⼀一個有規模的生意模式。(startupsare companies in search of a viable business model)*做好心理準備,下星期可能你做的東西就不用了,換不同的,所以自己寫的code最好能夠短時間內變
  30. 30. MongoDB DriverMongooseJShttp://mongoosejs.com/https://github.com/learnboost/mongoose
  31. 31. 5.Don’t waste time (reinventing the wheel) 別浪費時間
  32. 32. Image by @cobalt at Flickr http://www.flickr.com/photos/cobalt/6891338947/*已經證明實用,抗戰的東西,不要再去想創回⼀一個⼀一樣的東西*浪費時間和資源*直接用已經被証實的用具,不要浪費時間解決已經被解決的問題
  33. 33. DOM ManipulationjQueryhttp://jquery.com/
  34. 34. Date & Time ParsingMomentJShttp://momentjs.com/https://github.com/timrwood/moment
  35. 35. OAuth libraryEveryauthhttp://everyauth.com/https://github.com/bnoguchi/everyauth
  36. 36. 6.Keep things organized 保持整齊架構
  37. 37. Image by @jenniwaterloo at Flickr http://www.flickr.com/photos/jenniwaterloo/3424642826/*雖然說東西可能會丟,可能不用,但是也要時刻保持基本架構,才可以好好發展*找不到code,很難開發,很難plugin都是浪費時間和資源的問題*儘量減少結構的問題,用可以幫助你保持整齊的架構,比較容易maintain和開發
  38. 38. Frontend Organization FrameworkBackboneJShttp://documentcloud.github.com/backbone/https://github.com/documentcloud/backbone
  39. 39. Flow-control LibraryAsynchttps://github.com/caolan/async
  40. 40. 7.Make Mistakes (then fix them) 製造錯誤
  41. 41. Image by @f2point8 at Flickr http://www.flickr.com/photos/f2point8/5361206376/*如果開發就決定⼀一定要犯錯,就在開發的時候儘量把所有的錯都先犯,然後修理他們*之後再犯錯,確保那個錯不會再出現。寫好test cases來測試自己的code很重要(我們也還在學習中)*Test driven development, Behavior driven development
  42. 42. TDD/BDD TestingMochahttp://visionmedia.github.com/mocha/https://github.com/visionmedia/mocha
  43. 43. 8.Keep track of what you do 記錄每⼀一步
  44. 44. Image by @roeyahram at Flickr http://www.flickr.com/photos/roeyahram/4413828732/*Debug的時候記錄logging很重要,就可以在同⼀一個地方找到可以幫助你debug的資訊*logging可以很亂,可以太多資訊,所以得好好處理和整理
  45. 45. Logging frameworkWinstonhttps://github.com/flatiron/winston
  46. 46. Questions?問我問我 grey@attictv.com @conancat fb.com/conancat
  47. 47. 謝謝你Thank you for your time!

×