---
title: 開源之旅：HackMD 的發展與挑戰
lang: zh-tw
disqus: hackmd
slideOptions:
width: 1200
---

# <i class="fa fa-file-text"></i> HackMD

## 用開放寫作凝聚社群能量

---

<img src="https://i.imgur.com/PTbB46S.jpg" style="width:300px;height:300px;border-radius:50%"/>

## 吳承翰 Max Wu

#### CTO of HackMD

喜歡自己製造、創作軟體的開發者
闖過 COSCUP、MOPCON、SITCON 等研討會
最近致力於打造開發者社群

---


<small>

https://www.ptt.cc/bbs/Soft_Job/M.1566115714.A.A2A.html

</small>

:sweat: :ok:

----


:sweat_smile: :relaxed:

---

# <i class="fa fa-file-text"></i> HackMD
- 靈感來自 Hackpad
- 更注重速度與靈活度
- 跨平台的筆記服務

----

# <i class="fa fa-file-text"></i> HackMD
- 靈感來自 Hackpad :arrow_right: 已被收購、收攤
- 更注重速度與靈活度 :arrow_right: 不用工具列也能輕鬆寫
- 跨平台的筆記服務 :arrow_right: 不同裝置也可以協作

---

# Hack + MD

----

# Hack

## 用聰明的方法來完成事情<!-- .element: class="fragment" data-fragment-index="1" -->

----

# Markdown

## 輕量的視覺化標記語言<!-- .element: class="fragment" data-fragment-index="1" -->

## 文字就可以排版的語法<!-- .element: class="fragment" data-fragment-index="2" -->

---

## 一個人怎麼實踐理想？

# 「組合肉」<!-- .element: class="fragment" data-fragment-index="1" -->

----

# 起源
## 2014 年 資訊安全 期末專案
<!-- .element: class="fragment" data-fragment-index="1" -->

### 好奇即時協作的原理與其中的安全問題<!-- .element: class="fragment" data-fragment-index="2" -->
### 因為我很懶所以愛上優雅的 Markdown<!-- .element: class="fragment" data-fragment-index="3" -->

----

# 做法：
1. 上網搜尋 Collaborate Editor
2. 找最容易看得懂的範例開始改起
3. 找可以用的 Open Source 套件加料
4. 研究原始碼填補接縫
5. 測試功能正常，美化外皮

----

## 結論：兩天完成的夜市牛排
- 可以多使用者同時協作文字
- 實作對稱式加解密 (AES)
- 其實就是實踐 MVP (最小可行產品) 的過程

----

# 劇終
- 這個專案拿到 99 分
- 做完就去放寒假了 XD

----


---

## Re: 從零開始的協作筆記
- 既然用了 Markdown 就要渲染成 HTML 啊！
- 先來場大亂鬥看看會發生甚麼事情？！
- 有沒有要開源？

---

## 選擇 Markdown renderer

:arrow_down: <!-- .element: class="fragment" data-fragment-index="1" -->

## 要先選擇 Markdown 標準 <!-- .element: class="fragment" data-fragment-index="2" -->

----

## Markdown

2004 年 3 月 19 日
由 John Gruber 提出 (與 Aaron Swartz 協作)
是易讀易寫、容易轉換成 HTML 的標記語法

### 自由格式 <!-- .element: class="fragment" data-fragment-index="1" -->

### 語法相當鬆散 <!-- .element: class="fragment" data-fragment-index="2" -->

----

### 因此有著各式各樣的變體


<small>

https://www.iana.org/assignments/markdown-variants/markdown-variants.xhtml

</small>

持續增加中... :1234:

----

## 採用 CommonMark

最新版本為 0.29 (2019-04-06)


----

## 選擇 Markdown renderer

----

# markedjs / marked

<i class="fa fa-star"></i> 20482 <i class="fa fa-exclamation-circle"></i> 74

- 輕量、效能最好
- 遵循原始 Markdown 標準
- 自訂語法較困難
- MIT 授權

----

## markdown-it / markdown-it

<i class="fa fa-star"></i> 8061 <i class="fa fa-exclamation-circle"></i> 4

- 效能佳
- 遵循 CommonMark 標準
- 容易自訂語法
- 外掛多
- MIT 授權

~~jonschlinkert / remarkable~~
已棄用，markdown-it 的前身
<!-- .element: class="fragment" data-fragment-index="1" -->

----

# remarkjs / remark

<i class="fa fa-star"></i> 2476 <i class="fa fa-exclamation-circle"></i> 9

- 效能好
- 遵循 CommonMark 標準
- 外掛多
- MIT 授權

----

實際用過後

## 選擇 markdown-it

:white_check_mark:

----

# 你怎麼選擇開源套件的？

----

- 符合需求？
- 星星多？
- Issue 少？
- 最近還有維護？
- 社群人多？
- 文件完整？
- 程式碼乾淨好讀？
- 容易擴充？
- 授權相容？
- `...`

---

# 上線 & 開源

----

2015 年 3 月 14 日

# <i class="fa fa-file-text"></i> HackMD

## 使用 Heroku 上線服務

----

# 社群推廣大亂鬥
- 分享到 FB 的幾個較大的資訊相關社團
- 自己分享到 Hacker News
- 造成空前的流量，很多人一起測試輸入

----

# 大爆炸 :bomb:
- 有人嘗試輸入 40 萬字，造成 CPU 負載過重
- 有人嘗試輸入 不安全的語法
- 多人一起輸入會搶字

----

當時也還是新手的我
也不知道怎麼解決這些問題

----

但是無論如何

# 取之開源 <!-- .element: class="fragment" data-fragment-index="1" -->
# 回饋開源 <!-- .element: class="fragment" data-fragment-index="2" -->

----

2015 年 5 月 4 日

# <i class="fa fa-file-text"></i> HackMD

## 採用 MIT 授權在 GitHub 開源

~~把債迴向給社群~~

----

其實前一年半幾乎都在自嗨
利用課餘時間刻專案


----

### 因為線上服務，開始有使用者出現
### 形成以下循環

- 使用者回報需求或是問題
- 研究如何實作或是解決
- 修正程式
- 部署上線

----

### 漸漸的有使用者會在 GitHub 活躍

- 大多數是開功能與增強需求
- 經常有 issue 討論我沒想過的事
- 少數會實際貢獻程式碼

~~星星累計超過一千顆之後就很容易自然成長~~

----

## 經常互動的使用者
## 就可能成為夥伴！

----


2016 年末，因為要導入 webpack 的機緣
收到 Yukai 的貢獻，並成為我們的一員！

:+1:

----

## 社群開始發展

- 日本網友主動寫 blog 介紹
- twitter 上有很多日文推文
- FB 也有很多中文的討論 ~~抱怨~~

----

### 看到許多有趣的 fork 或是相關 repo

- 日本網友貢獻支援 docker 部署
- 日本網友貢獻支援 abc.js 樂譜功能

:checkered_flag: 網友創意無限 :checkered_flag:
<!-- .element: class="fragment" data-fragment-index="1" -->

----

### GitHub 開始有更多貢獻

- 貢獻文件更新，避免出現隱藏功能 :stuck_out_tongue_winking_eye:
- 貢獻部署方式，可以到處撒種子 :baby:
- 貢獻登入方式，可以跟更多驗證系統整合 :100:

~~想把 repo 變成自己喜歡的形狀~~
:flushed:
<!-- .element: class="fragment" data-fragment-index="1" -->

----

### 2016 年 服務越來越多人使用

- 會員數量突破 1000 人
- 同時線上人數突破 100 人
- 累計超過 1 萬篇筆記被撰寫
- GitHub repo 星星突破 1000 顆

<!-- .element: class="fragment" data-fragment-index="1" -->

----

## 心中有了更多的問題

- 要畢業了，還能持續維護這個專案嗎？
- 要當兵了，還能持續維護這個服務嗎？
- 出社會後，能夠用這個維生嗎？

<!-- .element: class="fragment" data-fragment-index="1" -->

----

### 如果想要持續下去
### 那就用來創業吧！

:rocket:

---

# 商業化 & 社群

----

# 那，你是誰？

- 為什麼會很多人用？
- 都用在什麼地方？
- 產生什麼價值？

----

# 也就是說

- 要賣什麼？
- 要賣給誰？
- 怎麼賣？價錢與計費方式？
- 能夠給予客戶什麼價值？

----

## 不管了，先開發可以賣的功能

- fork 開源的 repo 成閉源版本<!-- .element: class="fragment" data-fragment-index="1" -->
- 檢查替換不能授權商用的 dependency<!-- .element: class="fragment" data-fragment-index="2" -->
- GPL
- LGPL
- AGPL
- 檢查是否有正確的使用授權<!-- .element: class="fragment" data-fragment-index="3" -->
- Apache 2.0

----

## 2017 年 11 月，推出企業方案
## HackMD Enterprise Edition

- 主打知識庫，適合團隊內部使用
- :boom: 有更多已成熟的解決方案可以使用<!-- .element: class="fragment" data-fragment-index="1" -->
- 有幾位國外客戶聯絡想要客製化
- :boom: 客製化的成本很高，人力不足<!-- .element: class="fragment" data-fragment-index="2" -->
- 試試看去賣台灣的公司
- :boom: 客戶想要更細緻的權限控制<!-- .element: class="fragment" data-fragment-index="3" -->

----

## 同時開源專案更名為
## HackMD Community Edition
- 更改授權為 AGPL<!-- .element: class="fragment" data-fragment-index="1" -->
- 避免有人另開服務來競爭<!-- .element: class="fragment" data-fragment-index="2" -->
- 但也讓我們不能使用開源版的貢獻<!-- .element: class="fragment" data-fragment-index="3" -->

**AGPL 是把雙刃劍** :fork_and_knife:
<!-- .element: class="fragment" data-fragment-index="4" -->

----

## 開源專案轉換授權

- 分析並找出所有程式的貢獻者<!-- .element: class="fragment" data-fragment-index="1" -->
- 請所有貢獻者簽署同意變更授權<!-- .element: class="fragment" data-fragment-index="2" -->
- 未來的貢獻者都要 Sign-off commits<!-- .element: class="fragment" data-fragment-index="3" -->

**這是一個漫長的過程...** :cry:
<!-- .element: class="fragment" data-fragment-index="4" -->

----

# 然後就被抓去當兵了...

消失到 2018 年 1 月
<!-- .element: class="fragment" data-fragment-index="1" -->

----

### 回來後專注在開發企業版功能
### 並開始找尋資金，申請創業加速器

----

開源社群對於 HackMD CE 這個名字有些誤解
認為是 Open Core 的商業模式

- 例如：GitLab<!-- .element: class="fragment" data-fragment-index="1" -->
- CE 與 EE 採用相同的核心模組並開源<!-- .element: class="fragment" data-fragment-index="2" -->
- 擴充與延伸模組收費，但是不一定開源<!-- .element: class="fragment" data-fragment-index="3" -->

**但是其實我們是 fork**<!-- .element: class="fragment" data-fragment-index="4" -->

----

為了避免更多的誤解，由社群更名為 CodiMD

---

## 2018 年 產品逐漸轉型
經過不斷的訪談與了解使用者需求<!-- .element: class="fragment" data-fragment-index="1" -->

重新定位成開發者文件社群產品
希望透過公開協作，促進社群討論的能量
<!-- .element: class="fragment" data-fragment-index="2" -->

----

## 經過創業加速器的訓練

- 有了初始資金
- 有了全職的夥伴與辦公室
- 有了銷售流程

**開始探索更好的商業模式**<!-- .element: class="fragment" data-fragment-index="1" -->

----

### 但是，開源社群產生了變化

當時主要維護社群的兩位德國貢獻者
認為專案在我們的組織底下，無法自由掌握發展方向
因此提議開設另一個組織，另行維護

----

### 實際上，我們給予社群完全的自由

兩位主要貢獻者擁有 repo 的管理與整合服務權限<!-- .element: class="fragment" data-fragment-index="1" -->

我們提案改採用 Open Core 模式
希望能夠相容社群與商業的需求
<!-- .element: class="fragment" data-fragment-index="2" -->

----

### 還是不夠自由？

他們認為即使是 Open Core 模式<!-- .element: class="fragment" data-fragment-index="1" -->

當 CE 想要開發與 EE 相同的功能時
還是有利益衝突，不符合自由精神
<!-- .element: class="fragment" data-fragment-index="2" -->

----

# 其實...

- 目前開源專案 80% 的核心功能仍是我們貢獻的
- 安全漏洞由我們第一時間修補與貢獻

----

## 有商業意圖的開源專案就不自由了？

---

## 開源專案是誰在維護？
- 原始作者？
- 社群？
- 公司？
- 其實單純使用的人比較多？

----

## 實際上...
- 大多數貢獻都比較小
- 貢獻核心功能需要掌握架構，很容易做到放棄
- 主要貢獻者如果想法一致，可以養成核心維護團隊
- 貢獻功能後誰來審核與合併？
- 如何 release？民主制度還是專制？
- 怎麼決定 roadmap？誰來決定？

---

## 開源專案怎麼永續？
- 找 sponsor 贊助
- 收 donation
- 找商業模式
- 一起做公益、做功德？

<small>

https://en.wikipedia.org/wiki/Business_models_for_open-source_software

</small>

---

## 開源專案怎麼推廣？
- 貼社群網路
- 買廣告
- 跑研討會、聚會
- 有人使用就是做好的推廣！
- 誰在後面給予協助推廣？

---

## 或許未來我們會這樣開源

- 說明我們就是商業化的專案
- 告知社群未來的 roadmap
- 請所有貢獻者簽署 CLA
- 貢獻後我們可以修改與使用在商業上 :gift:
- 提供開源與商業版本的比較

----

### 其實也有相當多其他專案遇到類似問題

- Open Distro for Elasticsearch
- npm ban terminal ads
- standard.js
- core.js
- handsometable drop MIT license
- Docker vs Mobi
- RedHat vs Linux

----

## 勇者們，選擇你的授權吧！

https://choosealicense.com
https://opensource.org/licenses
https://en.wikipedia.org/wiki/Comparison_of_free_and_open-source_software_licenses

---

<div class="big-table">

|Markdown 台灣|VSCode 台灣|
|:--:|:--:|
||
|https://bit.ly/2MNfisR|https://bit.ly/2MO833E

</div>

<style>
.reveal section .big-table img {
max-width: unset;
max-height: unset;
}

</style>

---

# 謝謝大家！