為工程師文件而生的協作平台:HackMD 開發故事

這是一篇回應批踢踢八卦板的文章

批踢踢八卦板上有人說,他修了資工系的課,發現有一個可以寫心得筆記、放照片超方便,又可共筆的軟體叫 HackMD;但好像只有資工系的人知道,有沒有 HackMD 的八卦呢?
 
有喔,八卦在這。
 
那天應該只是個普通的日子,一位特別的人出現在三創育成的 Star Rocket Café,向當時埋首工作的我遞出一張名片。他指指桌上的黑色的螢幕畫面說:「這個…是我做的。」
 
我頓了一下,低頭看名片,黑色素面設計的名片上寫著:

HackMD CTO 吳承翰

完全的工程師產品

如果你是人生不厭其煩尋找最佳寫作軟體的人,也許有耳聞過這款用 Markdown 寫作的軟體。而如果你為本身開發者,那麼就像批踢踢八卦版上說的,應該對 HackMD 不陌生,因為它是個因工程師協作而生的服務。
 
HackMD 主打即時文件協作(real-time collaboration),2014 年底由當時還在台北科技大學資工系唸碩士的吳承翰開發,最初是學校資安課的期末作業。一直到 2017 年 3 月正式登記為公司前,都只是吳承翰個人獨立開發與維護的 side-project。現在團隊有 6 人,執行長楊宗鎧是吳承翰大學實習時所認識的前輩,具財務背景;他自己則擔任技術長。團隊在 2018 年 9 月參展 TechCrunch Disrupt,12 月 完成法國巴黎 Techstars 加速器的育成計畫,現在正在募種子輪。
 
那天在咖啡吧碰到吳承翰時,他正要去參加 TechCrunch Disrupt 行前說明會。TechCrunch Disrupt 是全球科技業最廣為人知的新創盛會,每年有上百組新創團隊爭相參與,為的就是在那找到自己的創投伯樂。
 
HackMD 雖然主推多人協作服務,但編輯器的本身用途就廣,可以作為簡單的筆記軟體來寫日記、寫稿、寫文件,並用標籤(tag)進行分類與管理。由於也支援其他程式碼跟語法,例如 YAML、MathJax、Uml diagrams、abc 記譜法,同時也提供「簡報模式」跟「書籍模式」,使用者因此有更的發揮創意創作的空間。例如活躍於零時政府(以下簡稱 g0v)的網友 ET Blue,就在 HackMD 上作曲填詞、自由軟體開發者 Jserv 將其作為教程的平台,編撰各式技術教材、g0v 則將 HackMD 作為該社群所有共筆文件的「官方入口」。
近期 HackMD 則推出範本(template)功能,使用者可依使用習慣建立常用或特殊範本,節省編輯時間之餘,也方便內容管理的一致性。

與市面上常見的即時協作軟體 Google Docs、Quip、Dropbox Paper 等不同,HackMD 的介面提供三種畫面選擇:編輯、檢視、雙欄。編輯欄黑壓壓一片,上方有工具列,最左側用幾近透明的灰色,顯示著阿拉伯數字。雖然是主打寫文件的編輯器,表現卻宛如寫程式般,為筆耕者也計算多少行「文字碼」。從此設計可看出,HackMD 是不折不扣的工程師產品。

「檢視」是編輯欄內容被即時渲染(render)¹ 過後的預覽結果。作者可設定檢視與編輯的權限,唯有「公開」的文件發佈出後才可被 Google 搜尋到。雙欄,則顧名思義就是編輯欄位與檢視欄位並呈。
 
營運至今,HackMD 足跡遍佈全球,台灣流量穩居首位(約 50%),第二高為日本,佔總流量的 15–20%,其餘則均勻分布歐美國家。台灣使用者雖為最大宗,早年用戶卻多來自日本,透過當地技術部落客的口耳相傳,在日本社群開花結果;巔峰時期曾佔總流量一半,直到 Jserv 全面採用 HackMD 作為教程平台,台灣的流量才開始追上。
 
現在的 HackMD 每日尖峰時期(台灣上班時段)在線人數兩千多,累積文件量達 83 萬筆。

產品定位遇到困難

用開放協作建立社群。 Community with open collaboration.

2018 年底參加 TechCrunchDisrupt 時,HackMD 的攤位寫著上面這段 slogan,結果沒有人看得懂。事實上,沒人看懂他們在做什麼,這個狀況並不令人訝異。2018 年初在準備加速器的申請資料時,他們的團隊就多次面臨挑戰。當時他們不只申請 Techstars,還有矽谷最知名新創孵化器 Y Combinator,而其執行長 Michael Seibel 就曾犀利地問:

你們的產品蠻有趣的。但是,你們真的有在解決問題嗎?

不只是 Y Combinator,就連最後錄取 HackMD 的 Techstars,其育成計畫總監 Julien Quintard 也毫不留情面地說:「 我知道你們在幹嘛,但看起來你們還沒搞清楚狀況。」他指的是 HackMD 曖昧模糊的產品定位與市場定位。
 
在去 Techstars 之前,吳承翰與團隊把 HackMD 設定為「知識庫」,當時的企業方案即是朝該方向進行 — — 可以寫文章,享給特定人,有後台進行管理,收費每人每月 5 塊美金。他們帶著這個定位去參加 TechCrunch Disrupt,收到的卻是冷淡的反應。

事實上,知識庫的定位也無法呼應他們自己設定的 slogan。協作的本質是知識雙向的交流,而待在知識庫裡的文件多數是封閉、屬於組織內部使用的資源,不易被搜尋。

最後他們決定回歸開發 HackMD 的原點:文件、協作,以及人們因文件聚首而生的「社群」。吳承翰認為,開發者社群的知識累積,需要更多討論,也要能被搜尋、被發現。

如果我們要做良好的溝通,我們必須把東西寫下來,我們要促進討論,最後才能有生態圈、有社群。
(來源:HackMD 官網)

此外,吳承翰與團隊也察覺到開發者維護文件的困擾。
 
文件對開發者而言是種微妙的存在。程式碼是主體,它是附屬,人們給予的關注較少,不如程式碼一樣擁有自動檢查的工具來提升維護與修正的便利度與效率,導致文件常常缺乏維護、不齊全,甚至四散各地。然而,文件卻又是日常開發的重要一環。如果缺乏友善的維護及討論空間,自然降低投入文件的動力。
 
「我們要怎麼讓這件事情 (指處理好文件) 進入工程師的工作循環」,這是 HackMD 團隊在試圖解決的問題。好的文件維護,需要有地方集中儲存、管理,同時要能像活水般定期有人來共同協作、參與討論。
 
然而,市面上並不缺文件協作的軟體,舉凡 Google Docs、Quip 跟 Dropbox Paper 都是選擇;相較於 HackMD 散發濃厚的技術氣息,前面幾款對「普羅大眾」而言更平易近人。那麼,HackMD 所主張的即時協作,究竟能在文件的積累及知識傳遞上帶來什麼差異? — — 這是他們至今仍在摸索的。
 
採訪中聊到 Michael Seibel 與 Julien Quintard 一針見血的評語時,我問「如果現在再問你們一次呢?你能夠回答嗎?」,吳承翰坦承「比較清楚,但沒有肯定」。
 
當然,知識的討論與傳播也不限開發者社群,吳承翰舉了 g0v 為例。「開放協作或開放討論,本來就是可以帶起很多議題」,而 g0v 正需要 HackMD 這類的場域來讓文件的討論發酵,並有系統性地管理。更重要的是要讓文件討論「被發現」 — — 這點,或許就是 HackMD 與上述其他文件協作軟體最大的差異。

g0v、Hackpad、協作:突破時域與場域的限制

大家記得 2018 年底自己在做什麼嗎?那年年底台灣最大的事大概就是縣市長選舉跟公投了。公共討論白熱化,網路上出現像是〈普悠瑪號列車脫軌事故災情整合平台〉、〈美國國會「美中經濟與安全審查委員會」2018年度報告〉等共筆文件。這些文件多數出自 g0v 之手,而背後所使用的協作平台就是 HackMD。
 
利用協作文件參與公民運動並非頭一遭。2014 年底被 Dropbox 收購的共筆文件軟體 Hackpad,就曾是台灣公民運動與科技交會的推手。過去許多大型技術研討會也都使用它來即時彙整議程跟現場的討論。
 
被收購的隔年,Dropbox 推出了具同樣功能的服務 Dropbox Paper;2017 年 ,Hackpad 帶著曾經被 318 運動暴衝流量弄到掛的記憶,正式步入歷史。服務終止後,像 g0v 等大型社群開始尋找替代方案,經過一番尋覓,HackMD 因功能相符,成為這類共筆寫作的最佳選擇。

吳承翰自己是 Hackpad 的忠實用戶,他不諱言 HackMD 很大程度受到前者的啟發。不用在實體空間就能把人們聚集於虛擬的共同工作空間裡,這樣的遠端協作概念很吸引他。
 
事實上,吳承翰在 2014 年底就已開發出 HackMD,只是當時並沒有取代 Hackpad 的念頭,純粹自己用得兇,對協作場域很感興趣,於是一股腦投入研究背後的技術。Hackpad 被收購時他就跟所有人一樣,覺得詫異,但也沒感傷太久,他回憶:「因為在我心中自己的小孩是最棒的。」

2016 年台灣 PyCon 成為第一個採用 HackMD 的大型研討會。當時還是一人獨力開發的吳承翰,首次接到百人共筆的「訂單」,伺服器差點撐不住。

g0v 在 HackMD 的「官方入口」。

資安作業

HackMD 雖然有著濃濃的 Hackpad 味道,但它最初原型其實是資安課的期末作業。
 
最初的點子並非協作,當時為了課程需求只想做個能測試資訊安全的載體而已。但就像許多工程師都有的執念,有需求能自己開發最好,也當練技術,加上 Hackpad 適逢被收購,前景不明朗,提供了開發 HackMD 的契機。
 
吳承翰花了一個週末的時間就完成 HackMD 的最初版,只有打字跟同步的功能,沒有渲染,強調協作安全,使用端對端的加密。當時課堂談的資安多半是密碼學,實際應用在軟體服務上的案例較少。最後,這份期中作業拿到不錯的成績。

渲染、協作的技術

雖然說只花週末兩天就生出 HackMD,但那時還只是陽春的打字軟體。期末報告結束後隨即迎來農曆新年,吳承翰利用假期逐一加入不同功能,像是 Markdown、預覽結果、跨平台支援、修訂紀錄。這些功能都是技術上的挑戰。我像傻瓜一樣問:

「渲染這個技術很難嗎? 」
「可以簡單,也可以難。你只顯示出結果很簡單,但後面要考慮的事情很多。有幾個層面,一是語法,要怎麼把這些東西辨認成特定的語法、顯示成什麼樣子,例如表格。語法要分析成語法樹,然後要渲染成特定元素。
再來就是它安不安全。安全指的不是端對端的加密,而是渲染出來的結果,它會不會被別人插入不安全的程式碼。
另外,當檔案變大時,會不會變得很慢?先不要說協作,當我們打字達很多行、幾萬字,在網頁上效能就很不好了。」

渲染之外,在畫面上零時差顯示多人寫作結果的協作,也是門學問,因為網路的延遲都會造成同步錯亂。HackMD 採用的是 Google Docs 背後的協作技術 OT(Operational Transformation),用以解決多人協作時內容互相覆蓋的情況。
 
吳承翰坦承,一開始開發時沒想過覆蓋的問題,當時只是學校作業,沒有大量協作的實際經驗,直到 2015 年把專案分享在 Facebook 技術社團、Hacker News 跟 Reddit 上,短短一週內湧進大量使用者,最高紀錄同時 500 人在線,覆蓋的問題瞬間襲來。
 
技術門外漢的我,在聊到其他文字編輯器時,對於為何選擇開發網頁版,而非桌面版或行動版的 app 感到好奇。他解釋,即時協作所需的演算法及系統需求都較高,加上不同的使用者可能使用不同的裝置,要能夠流暢支援跨平台協作,網頁版是技術上相對可行的選擇。

當開發者遇上使用者

「為了推廣 Markdown。」

吳承翰 2016 年在 COSCUP 上介紹 HackMD 的簡報中,這一段文字引起我的注意。
 
一開始採用 Markdown 時他沒想太多²,畢竟這個語言在開發者圈非常通用,Markdown 輕巧的語法可以輕易融入工程師的日常寫作中。當時還是一人獨立開發的吳承翰,使用需求自然以個人為重。然而開發 HackMD 過程中,他卻發現 Markdwon 並非想像中普及,不少人對其感到恐懼。 g0v 向他提出「工具列」的需求,因為並非人人都能做到在鍵盤上輕鬆切換文字與語法,工具列因此會是重要的輔助。
 
最初版的 HackMD 沒有工具列,因為在吳承翰自己的經驗裡,工具列是對寫作心流的干擾。能透過鍵盤完成的動作,就不需要手指滑到介面上方的工具列,進行額外編輯操作。他坦承,當時為了滿足他人需求去開發自己覺得多餘的功能,心中確實有抗拒。但最終,他還是寫了工具列,同時增加「隱藏」的選擇,讓產品盡可能滿足多元的需求(他自己的介面上就是把它關起來。)

雖然他不認為順應使用者是種妥協,但心境上仍做了番調適:

「我後來覺得是這樣,我有自己的習慣,但既然要普及,每個人都想要它好用,有不同的想法跟流程,那把它做的彈性很重要。」

初衷:讓科技普及化

如何讓某些科技應用(包含如 Markdown 書寫或數位工具的使用)普及化,是 HackMD 開發產品背後一直嘗試尋找的答案。吳承翰回憶,從學生時前玩科展、做專案,玩遍科技創新,最常感到困惑的是,「有時我們會在電視上看到某些高科技、很神奇的東西,但過了幾年就不見了。」他舉了多年前由 Tactus Technology 研發的立體鍵盤技術。那個「會突起來的鍵盤」曾受媒體爭相報導。
 
坦白說,我沒有預期會從這次的採訪中聽到「普及化」三個字。
 
幫產品找到 PMF(市場預產品契合度;Product/Market Fit)或尋求規模化,是創業者所追求的。但「普及化」似乎是個更崇高的願景與野心。不論是知識的普及、技術的普及,皆是跨時跨域的龐大工程。即便是現代人日常必備的網路與智慧型手機,也絕非一蹴可就。或許有那麼點像協作的本質,它是集眾人之力的「長期戰爭」。
 
吳承翰說,工程師是他們現在的主力用戶,也是現階段產品對準的目標群眾。假設可以「攻克」開發者群體,下一波要瞄準的便是產品經理人(PM)。但要讓完全不懂技術的人進來,他坦言那是更大的挑戰。HackMD 是不是真的要朝非技術的大眾走去,在產品定位仍處摸索階段的狀態下,現在也說不準。
 
現在的 HackMD 已具備工程師寫作的基本配備 — — Markdown 語法、與 GitHub 跟 GitLab 無縫整合、匯出/匯入 Gist、簡報模式等,同時主張透過推動協作文件管理,來促進技術社群彼此間的交流與發展,接下來也會考慮使用者呼聲高的「部落格」,讓文件有更多揮灑創意的空間。
 
然而,要推動 Markdown 書寫的普及?協作文化的普及?對一個如此工程師導向的產品而言,眼前有多少門檻要跨越?從現在的位置走到兒時的理想中的「科技普及」,究竟有多遠?

拿到名片後分享到 Twitter 上。(來源:作者提供)

那天拿到名片時,我禮貌性問吳承翰怎麼出現在這,內心其實波濤洶湧,沒預期會在普通的日子及普通的場合裡碰到手上使用的產品的開發者。拿到名片後,我立刻上傳到 Twitter 上炫耀,結果引來一位推友的注意,透過那則推文順利推坑了一位新用戶。
 
作為一位沒有技術背景的純文字筆耕者,HackMD 是我第一個接觸的寫作編輯器,我在那第一次認識 Markdown,它亦是我最一開始練習該語法的場域。現在回首,或許暫且不用把「普及化」想得太崇高,因為多數的改變總在細微的地方發生。


  1. 渲染一詞英文原為 render,其中文翻譯在台灣多有爭議,其他常見的翻譯為「彩現」或「算繪」。根據維基百科的解釋,render 指的是在電腦繪圖中,以軟體由模型生成圖像的過程。HackMD 中把編輯欄位所輸入的 Markdown 文字右欄可即是預覽的畫面,即是 render。
  2. 吳承翰有在 Facebook 上成立「Markdown 台灣」社團,用以推廣該語法。