今年稍早,我們在 Sketch 中推出了即時協作功能,所有現有的 Sketch 訂閱者皆可免費使用。在開發此功能時,我們知道必須要有一個單一資料來源,才能讓大家有效地協作。這就是為什麼它會成為您的工作區的一部分,而工作區已包含在訂閱中。
如果您已經試用過這個功能,您可能會好奇它背後的技術是如何運作的,以及我們如何將即時協作整合到原生 Mac app 中。
「即時」的挑戰
我們都使用過 Google 文件等產品,螢幕上有多個游標和頭像在快速移動。最終,這也是我們的目標。但要實現這個目標,最大的挑戰絕對是技術上的。作為一個原生 Mac app,Sketch 最初的設計是在本機儲存空間處理文件,因此假設只有您(使用者)會開啟和編輯文件。
因此,我們必須重新審視許多程式碼。但我們也堅持不希望失去原生 Mac app 的獨特之處,例如離線工作的能力。同時,為了讓多個人能有效地一起工作,更新必須幾乎是即時地顯示給所有人。

即時協作透過您的工作區進行,工作區是一個集中儲存所有文件並邀請其他人與您一起工作的地方。
讓即時成為現實
為了克服這些挑戰,我們現在會在您進行任何變更時,立即將「修補程式」串流到您的工作區,無論是移動物件、變更其填色,還是其他任何操作。
Sketch 的內部模型一直以來都是以物件樹狀結構來呈現。根目錄是一個文件,然後是頁面、群組、圖層、樣式等等。因此,當您進行變更時,這個樹狀結構中的一個物件會變更一個屬性。為了產生一個修補程式,我們會比較文件的舊狀態和新狀態,而修補程式會描述在樹狀結構中到達物件及其更新後屬性的路徑。
由於這些修補程式非常小且具有針對性,因此衝突非常罕見。兩個人可以在同一個形狀上工作,一個人可以變更其筆畫,而另一個人可以變更其填色,這不會造成任何衝突。如果變更真的發生衝突怎麼辦?則會以最後到達伺服器的修補程式為主。
由於這些修補程式非常小且具有針對性,因此衝突非常罕見。兩個人可以在同一個形狀上工作,一個人可以變更其筆畫,而另一個人可以變更其填色,這不會造成任何衝突。
魔鬼藏在細節裡
雖然來回傳送修補程式聽起來相當簡單,但讓這個功能真正完善的是細節。我們無法在這篇文章中一一詳述,但以下是一些我們想要強調的重點。
要復原還是不要復原?
在新環境下,是什麼讓「復原」功能變得棘手?關鍵在於,您只想復原自己的修改——即使其他人也在處理同一份文件。舉例來說,假設您在文件中移動了一個方塊,然後其他人將它改成藍色。當您按下「復原」時,我們希望最終呈現的是位於原始位置的藍色方塊。
這意味著「復原」不再只是「倒退一步」——現在的「復原」是「倒退一步,然後重播其他用戶的編輯,並發送我剛才復原操作的補丁」。實際上,早在推出實時協作功能的幾個月前,我們就發布了這個針對「復原」系統的小更新。希望您沒有注意到!
打造原生 Mac App 的要素
到目前為止,我們討論的都是理想情況——每個人都在線上,而且連線穩定。但作為 Mac App 的一些獨特優勢,也為實時協作帶來了額外的複雜性。
作為 Mac App 的一些獨特優勢,也為實時協作帶來了額外的複雜性。
例如,如果您離線工作一段時間——例如長途飛行——您需要在重新連線時能夠再次分享您的工作。因此,我們讓我們的補丁系統足夠靈活來應對這種情況。當然,您的文件也擁有完整的版本歷史記錄,因此如果您的編輯覆蓋了其他團隊成員的內容,您可以隨時回到舊版本。
將控制權交給您
同樣地,我們讓用戶可以自由選擇更新 Sketch 版本的時機。無論您堅持使用舊版本的原因是什麼,這都是您的 Mac,您應該掌控在上面運行哪些軟體。對我們來說,這是一個額外的複雜因素——我們不能假設每個人都運行相同的版本,而且某些版本之間可能不相容。
無論您堅持使用舊版 Sketch 的原因是什麼,這都是您的 Mac,您應該掌控在上面運行哪些軟體。
為了克服這個問題,我們現在允許用戶在不同版本之間進行協作,只要文件表示方式沒有根本性的變化即可。如果某個版本包含重大更改(例如新的 OpenType 功能),則可能會發生這種情況——因為如果兩個版本以不同的方式構建文字圖層,可能會導致問題。
幸好,這些變更很少發生,因此我們可以支援很久以前的協作工作階段。所以即使您的團隊堅持使用舊版本,您將來仍然可以進行協作。
神奇的「線上狀態」功能
到目前為止,我們討論的是如何使用補丁來保持文件同步。但在實時協作中,我們也想加入「線上狀態」功能——這樣您就可以看到其他人的游標和選取範圍,並跟隨您的協作者一起工作。
在我們的首個內部版本中,沒有用於協作的使用者介面。來自協作者的更改就像變魔術一樣出現。畢竟,我們知道讓所有人的文件狀態保持一致是最大的技術挑戰——如果我們做不到這一點,其他一切都不重要。
老實說?這感覺真的很奇怪。從一開始,我們就知道需要「線上狀態」資訊,但在沒有它的情況下看到功能運作,更堅定了我們的想法。我們開始著手進行——而且它很快就給了我們一個意想不到的驚喜。
「線上狀態」功能可以幫助您在與協作者姓名一起顯示的環境中查看正在發生的更改。
擴展伺服器(以及自我 DDoS 攻擊)
我們知道,隨著越來越多的人開始使用實時協作,會有大量的「線上狀態」資料和補丁在我們的伺服器之間來回傳輸。雖然不是每個人都會在第一天就開始協作,但我們必須擁有一個可擴展的系統。
因此,我們開始使用大量的指標來測試系統,以便在更細緻的層面上了解伺服器的效能。在第一次 Beta 測試後,這些指標顯示我們的線上狀態系統根本無法擴展。事實證明,人們經常移動游標——誰知道呢?
因此,在第二次 Beta 測試中,我們重寫了線上狀態系統,使其適應網路負載。當伺服器負載較高時,我們會減少線上狀態更新的頻率,並平滑更新之間的移動,以避免在畫布上出現令人分心的抖動。
它運作得非常好,而且這個自適應線上狀態系統啟發了我們,將經驗應用到其他與伺服器頻繁通訊的領域。我們在這方面的工作還沒有結束,您可以期待未來更多協作方面的改進。
即時協作可能是我們構建過最大、最具挑戰性的功能。但我們非常自豪它現在掌握在您的手中——我們真的覺得在 Sketch 中進行即時協作的感覺很棒。我們希望您和我們一樣喜歡它。