使用 Backbone.js 建立一個應用骨架

類別: IT

預備知識

你需要有紮實的 JavaScript 知識,並且熟悉 Backbone Ruby HAMLSASS 以及 CoffeeScript才會發掘此文的真正價值。

同時,我是在 Mac 上進行開發的,並未在其它平臺測試。儘管如此,我還沒有發現任何導致程式碼無法起效的原因。





1.哲學

Rails的成功可以部分歸結於它的公約以及預先定義的目錄樹。雖然對於一個新手而言使用Rails會有很大的壓力並且可能有點煩惱,但是你會很快從那種感覺中解放出來。有了"一切都擺放在正確的位置"的經歷,你很快就能感覺到自己喜歡上了那種每一段細小的程式碼都有它們特定位置的感覺。

Backbone,沒有規定任何特定的程式碼或者目錄結構的一個靈活的JS框架。直到我閱讀了足夠多的材料並且將其以特定的佈局安放之,我感到十分困惑和迷茫。

這個骨架應用(Backbone-skeleton)是從一個成熟的應用程提取出來並擁有足夠多的註釋--用來幫助使用者進行特定的決定與選擇。

2.背景故事

當我一開始使用Backbone的時候,我已經深深地陷入了Ruby On Rails的世界裡。所有我很自然的認為,MVC,我知道那是什麼玩意兒。但是那與我想要了解的事實相差甚遠。

宣告:我很少開發純客戶端的軟體,儘管我廣泛地使用JavaScript來讓應用更快、更容易響應。

事實是,伺服器端的MVC和客戶端的MVC差別很大。每次當你重新載入一個頁面的時候,總要做些事情來保持整個狀態的整潔。不論國籍。

另一方面,客戶端會保留一些狀態,因此,客戶端會將所有你的一些糟糕的操作留在記憶體中直到這些操作慢慢開始變慢並最終停止工作。

我曾經做過一個很大的客戶端專案,建立 Dubjoy 編輯器為線上的視訊配音。

學習在客戶端運用MVC和使用Backbone最大的困難是瞭解龐大的圖示,能夠明白每個小零件在哪一塊,並能夠理解他們是怎麼在一塊大張旗鼓的工作。

所以大多數情況下,我使用Backbone的經歷由以下2方面構成:1.發現最好的對檔案和程式碼組織的實踐。2.安裝環境或者目錄結構。

將Backbone.js作為庫使用是非常容易的,(不是真的,這不是這篇文章想要說的)。

我犯的最大錯誤之一就是在專案開始之初,都想用Backbone來架構。

Backbone本來是想保持簡單,因為它的目的僅僅是作為你自己的javascript的補充,所以,大膽的建立你自己的程式類,並用你程式真的需要的東西和初始化來填充這些類。

3.工具

一個優秀的工作流程需要一個優秀的工具。在這裡我會描述幾個在我開發Backbone時發現的不可缺少的工具。

CoffeeScript, HAML 和 SASS

因為我十分討厭過度的冗餘,所以我是抽象化語言的超級粉絲。

只要有機會,我會傾向於選擇HAML, SASSCoffeeScript

對我而言,最重要的是它們帶來的簡潔性。

HAML Coffee

在Backbone中,你經常會需要一個模板引擎。模板提供了適用於檢視的標記。事實上,有很多解決的方法,但是因為我喜歡保持與原來的習慣一致,最好的選擇就是HAML。

幸運的是,有一個解決這個問題的庫:haml-coffee,它可以讓你交叉著使用HAML和CoffeeScript片段。

Guard

為了無縫的使用這些語言,你需要一些必要的編譯器。有一個叫做Guard的Ruby工具恰好可以做到這一點。

Guard非常的靈活。它可以注意到檔案系統的變化然後對產生變化的檔案進行一些操作。

Jammit

Jammit 是個好的封裝庫. 它串聯和壓縮css和javascript檔案,並且它非常容易使用, 但是它需要 configuration file, 配置檔案決定哪個檔案被安裝.

Sinatra with Isolate

Backbone 應用是靜態的檔案,你能脫離硬碟驅動器直接執行它們。但是如果你想要確定合適的路徑甚至使用一些應用程式介面,那我們就需要一個伺服器。

Sinatra, 是一個迷你Ruby web框架,並且構成了伺服器的基礎。它不僅能夠作為伺服器存在還能夠作為永久的應用程式介面。

為了使這一部分儘可能的容易使用, 我使用 Isolate 封裝了這個伺服器, Isolatea 是一個小的作為沙箱使用的Ruby庫,它看起來特別像迷你的Bundler.當第一次執行這個伺服器的時候,它將會檢查並自動安裝它的附屬檔案,並開始工作。

4. 使用框架

使用我的框架開發一個新的應用是繁瑣的,它的一些關鍵的地方使用了Ruby,所以,為了你有一個可使用的Ruby安裝環境,最好使用1.9版本。

所有的檔案,目錄和它們的含義在框架的 README 檔案中都有更加詳細的介紹。

這個應用的 working example 線上也是可用的. 你能夠通過這種方式來檢查是否和本地的輸出結果相同。

一開始先複製 backbone-skeleton repo.

$ git clone https://github.com/mihar/backbone-skeleton.git my-new-backbone-app 

然後使用bundle 命令,它將會用Ruby Bundler 為guard 安裝必須的附屬檔案, Guard將會編譯我們的HTML,SASS和CoffeeScript為本地相應的檔案。

$ cd my-new-backbone-app $ bundle

一旦Bundler完成安裝,我們能嘗試開始Guard,能夠立即開始監控所有檔案的改變。

$ bundle exec guard

在guard工作的同時,可以開始另一個終端,我們能夠啟動一個簡單的,被繫結的Ruby web伺服器,我們可以使用這個伺服器進行開發。這個伺服器將自動安裝所有他的子檔案。

$ rake server[1/1] Isolating sinatra (>= 0).Fetching: rack-1.4.1.gem (100%) Fetching: rack-protection-1.2.0.gem (100%) Fetching: tilt-1.3.3.gem (100%) Fetching: sinatra-1.3.3.gem (100%) [2012-12-05 18:17:05] INFO  WEBrick 1.3.1 [2012-12-05 18:17:05] INFO  ruby 1.9.3 (2012-02-16) [x86_64-darwin11.3.0][2012-12-05 18:17:05] INFO  WEBrick::HTTPServer#start: pid=39675 port=9292 

現在我們的伺服器本地域名為 http://localhost:9292, 點進去,將會開啟以下頁面,如果你看到“Skeleton closet”,那麼所有都OK了!

想要獲得更多的資訊可以檢視js控制檯


5. 資源

遺失的 CDN

它們擁有所有的庫,其中包括Backbone和nuderscore。

Backbone Peepcode 教程

在我開發Ruby和Rails的那段日子,Peepcode曾是我的朋友,它們錄製了關於各種主題並且高質量的螢幕錄影。

他們有一系列的3部關於Backbone的視訊教程,內容函括簡單的基礎到相當高階的東西。

這些視訊準備每個售價$12。

Derick Bailey的 backbone博文 

我曾今在Derick的部落格中學習了很多關於做事情的正確方法,他是一位經驗豐富的Backbone程式設計師,解決了許多問題並把這些問題的解決進度寫下來。這是一份資源寶藏!

Derick Bailey的第四部分視訊教程

你肯定還沒有看過這個,通過他的部落格我判定,這個可能會非常的貴,通常可能在$12.

Backbone模型

文件中的模型是從許多Backbone應用中抽取出來的

將 Backbone 應用模組化

文章中探索了關於程式碼目錄結構和組織相似的問題

Backbone Boilerplate

和我有一樣目標的更大的專案

初學Backbone 

使用 Backbone.js 建立一個應用骨架原文請看這裡