# <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> --- # 謝謝大家！