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