Spine.js簡介
Spine給你提供MVC框架,讓你放心做自己事,讓你集中精力在有意思的事情上,從而構建出令人驚嘆的Web套用。
Spine堅持自己在構建和設計Web套用架構上的意見。Spine架構是解耦模組和CommonJS組件的有力補助,對提高代碼質量和可維護性有極大的幫助。
Spine用CoffeeScript寫成,但開發套用時不必要用CoffeeScript。你可以使用CoffeeScript或是JavaScript,選擇你最熟悉的就好。
Spine非常精簡,只用了大概500行CoffeeScript代碼。輕量級和簡潔是Spine的基礎。
核心價值
MVC——MVC模式(Model-View-Controller),是Spine套用的核心。她通過一致的架構確保你的套用模組化,良好的命名空間(name-spaced)並避免你視圖和模型邏輯混為一團。她給JavaScript開發帶來了所需要的結構,這對團隊來說是巨大的幫助。
異步結構——太多太多JavaScript套用和框架沒能充分利用客戶端渲染的作用。最終用戶不關心後台請求伺服器是否還在等待,更不想去看“正在載入”的訊息和提示。用戶渴望流暢的界面,流暢的互動。為了實現這個,Spine在瀏覽器端存儲和渲染所有事物,並異步和伺服器通信。
簡介——Spine is a minimum possible viable product.她不限制你的視圖、HTML或是CSS.他不是包換20中不同空間的大框架。讓你走自己的路、不斷前進、將手中的事做到最好,做出令人驚嘆的Web套用。
為什麼用Spine
JavaScript框架實在是數不勝數,每天都有新框架出現。那為什麼Spine這么特殊?
在真實環境中構建?
輕量級控制器實現(基於Backbone的API)
完整的模型層和ORM
內置Ajax與HTML5 Local Storage適配器
異步伺服器通信
適應所有主流瀏覽器(Chrome, Safari, Firefox, IE >= 7 )
Spine Mobile擴展
簡單並輕量級
完善的文檔
但是不要相信我的一面之詞。看看樣例套用的原始碼,自己決定。
CoffeeScript
Spine用CoffeeScript寫成——一遍可編譯為JavaScript的輕巧語言。你不必使用CoffeeScript寫Spine套用,純JavaScript就能很好的工作。但是,使用CoffeeScript是荊棘最少的路徑,也是我個人倡導的辦法。
不是每個人都喜歡喝咖啡(CoffeeScript),我也絲毫不懷疑這會讓一些人離開這個框架。但是,假如你疑懼這個語言,我強烈建議你至少給他個機會試試她,這樣你就會理解你錯過了什麼。我個人認為CoffeeScript是Web開發的全面進化。
可以從The Little Book on CoffeeScript,看到這門語言的簡介。
Spine為JavaScript和CoffeeScript開發者都提供了文檔、原始碼和例子。可以用銀色的箭頭在這兩種語言間切換。
另外,你也可以利用文檔右上角的語言選擇器,在全站層次切換語言。
學習Spine
Spine本身相當簡單的,她的庫很小,API很極小。但是在剛開始時,JavaScript Web套用背後的概念會難以把握。將狀態放到客戶端,在客戶端渲染,使用MVC和CommonJS模組組織你的JavaScript代碼都會有相當陡峭的學習曲線。
為了闡述Spine解決方案帶來的概念和背景,Spine的文檔讀起來更像指南而不是原始的API文檔。當你熟悉了這個庫之後,純API文檔也有提供。
假如你是Spine新手,你應該先看過下面4個主要指南:
類
模型
控制器
視圖
然後可視嘗試下入門指南,學習生成Spine套用和如何使用Hem。
最後,我強烈推薦看看樣例程式的原始碼,不如Todos和Contacts套用。
Companion Guide
Spine的構建離不開一本書——《JavaScript Web Applications》,O’Reilly出版社。這本書是介紹MVC、依賴管理、模板、測試等你最終所用的框架相關的所有有用概念的絕佳讀物。
Spine.js 入門指南
上手學習任何新庫或框架都可能是令人望而卻步,但我會盡我最大努力確保你入門Spine儘可能簡單明了。三種方法
使用Spine有三種主要的方法:
純靜態JavaScript,為了那些暫不準備學習CoffeeScript的人所準備。只需要下載JavaScript檔案,並把它包含在你的HTML檔案中,這就準備好了!假如你準備走這條路,請參考JavaScript入門指南;
使用spine-rails gem繼承進Rails中。Spine與Rails可以無縫集成並可以很好的工作。查看screencast並閱讀Rails指南;
使用Node,CoffeeScript和Hem.Hem是一個針對Spine套用而寫的一個JavaScript依賴管理工具,它利用npm管理所有的東西。最後一個辦法是我一直提倡的,也是學習阻力最小的方法。Spine.app會幫你生成生成套用的目錄結構,而Hem會幫你展現給用戶(and Hem will serve it up to your users)。
這個指南會涵蓋最後一個方法——使用Spine和Hem。但是,假如你不使用CoffeeScript或你使用Rails,你可能會看看前邊提到的其他兩種方法。
Spine.app 和 Hem
為了讓生活更美好(make life easier),我們先安裝Spine.app 和 Hem. Spine.app是一個Spine套用生成工具。儘管她不是使用Spine所必須,但確實非常有用。Hem有點像JavaScript套用的Bunlder,可以查看各自的指南來獲取更多信息。
若你電腦還沒有Node和npm,需要先安裝它們。這些項目的網站都有極好的安裝指南。然後我們安裝我們需要的兩個npm模組,spine.app 和 hem
npm install -g spine.app hem
這樣我們得到了名為spine的可執行程式,我們可以用它生成新的套用
spine app my-app
cd my-app
你可以通過查看Spine.app相關文章來獲得它用法的更多信息。現在來安裝列在新建套用的package.json中的默認依賴。
最後,我們可以使用hem來潤應一個Hem伺服器,它會在開發時臨時存放我們的Spine套用。
擴展我們的套用
嘗試探索下我們剛生成的Spine.app檔案。假如打開一http://localhost:9294你會看到一個空白頁面。我們改一下默認的控制器,這樣它就能做些什麼。
mate ./app/index.coffee
我們加上一個@log()語句,如下:
class App extends Spine.Controller
constructor: ->
super
@log(“Initialized”)
module.exports = App
乾的好。現在假如你重新載入這個套用,你會在控制台里看到log語句。
下一步
現在,我們僅僅在這裡拼湊了一個表皮,JavaScript Web套用開發是一個不斷演進的廣闊天地。為了進一步使用Spine,閱讀入門指引,主要的類文檔,以及一些樣例套用的原始碼。
或許你對O’Reilly出版社的JavaScript Web Application也感興趣,這本書會給這些主題一個完整的介紹。