{"id":18449982,"url":"https://github.com/alincode/20190805-show-me-the-code","last_synced_at":"2025-04-18T00:21:34.754Z","repository":{"id":81410862,"uuid":"200643884","full_name":"alincode/20190805-show-me-the-code","owner":"alincode","description":null,"archived":false,"fork":false,"pushed_at":"2019-08-16T18:31:12.000Z","size":7,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T23:00:07.218Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alincode.png","metadata":{"files":{"readme":"README.md","changelog":"history.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-08-05T11:37:42.000Z","updated_at":"2019-08-16T18:31:14.000Z","dependencies_parsed_at":null,"dependency_job_id":"6ee4ec86-c99f-4666-b3cd-3e3595494444","html_url":"https://github.com/alincode/20190805-show-me-the-code","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alincode%2F20190805-show-me-the-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alincode%2F20190805-show-me-the-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alincode%2F20190805-show-me-the-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alincode%2F20190805-show-me-the-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alincode","download_url":"https://codeload.github.com/alincode/20190805-show-me-the-code/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249167444,"owners_count":21223505,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-06T07:22:57.582Z","updated_at":"2025-04-15T23:00:11.122Z","avatar_url":"https://github.com/alincode.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 20190802-show-me-the-code\n\n分享的可以是一個簡單概念、一個小技巧，大啟發。\n\n**Agenda**\n\n* 什麼是模組化設計\n* 為什麼我們需要模組化\n* 為什麼學習寫模組化對你有好處？\n* 什麼是好的模組，需要具備什麼？\n* 如何開始建構你的模組？\n* 我的模組\n* 如果你真的想不到有哪些需要你的貢獻？\n\n### 什麼是模組化(modular)\n\n* 藉由使用具有「簡潔、經過妥善測試、文件化的 API 的小型模組來處理複雜性問題。\n* 定義精確的 API 可以解決整合的複雜性，而且小模組的目的是讓程式更容易了解與使用。\n\n### 為什麼我們需要模組化 (模組化設計的優點 / 好在哪裡)\n\n* 是處理複雜性的手段之一\n* 改善可維護性\n\n\u003c!-- * 你能想像沒有 `lodash` 和 `express`，你要花多久時間寫一個網站後端嗎？ --\u003e\n\n### 為什麼學習寫模組化對你有好處？\n\n* 你可以像廣大的世界學習\n    * \u003chttps://github.com/babel/babel/tree/master/packages\u003e\n    * \u003chttps://github.com/webdriverio/webdriverio/tree/master/packages\u003e\n* 你可以跟別人一起合作\n    * \u003chttps://playproject.io/editor-solidity/\u003e\n* 你可以用你的技能幫助別人\n    * \u003chttps://www.npmjs.com/package/koa-gcs\u003e\n* 你可以得到別人的幫助\n\n### 什麼是好的模組，需要具備什麼？\n\n* 一個好的 API 要遵循 CRUST 原則\n    * 一致（Consistent）\n    * 彈性（Resilient）\n    * 明確（Unambiguous）\n    * 簡單（Simple）\n    * 小巧（Tiny）: 單一功能原則\n* 最大限度地遵循所有的介面，向下相容\n* 簡潔的介面\n* 測試\n* 使用說明書 (README)\n    * 描述功能\n    * 必要環境\n    * 安裝說明\n    * 使用說明 / 範例\n    * 許可宣告 (License) \n\n### 我的模組有哪些？\n\n* 人人都可以是 maker，打照你的積木方塊。\n\n* \u003chttps://www.npmjs.com/package/youtube-playlist-cli\u003e\n    * \u003chttps://www.npmjs.com/package/youtube-playlist-markdown\u003e\n    * \u003chttps://www.npmjs.com/package/youtube-playlist-summary\u003e\n* \u003chttps://playproject.io/editor-solidity/\u003e\n    * \u003chttps://www.npmjs.com/package/codemirror-solidity\u003e\n    * \u003chttps://www.npmjs.com/package/solcjs-core\u003e\n    * \u003chttps://www.npmjs.com/package/solc-import\u003e\n* \u003chttps://marketplace.visualstudio.com/items?itemName=alincode.SuperPasteURL\u003e\n    * \u003chttps://github.com/alincode/SuperPasteURL\u003e\n* \u003chttps://www.npmjs.com/package/koa-gcs\u003e\n\n### 貢獻你的技能\n\n**常見的模組型態**\n\n* 組合型模組\n    * \u003chttps://www.npmjs.com/package/koa-gcs\u003e\n* 包覆型模組\n    * \u003chttps://www.npmjs.com/package/solc\u003e\n* 前端元件型模組\n    * \u003chttps://www.npmjs.com/package/twzipcode-vue\u003e\n* plugin\n    * \u003chttps://www.npmjs.com/search?q=plugin\u003e\n* Hook / middleware\n    * \u003chttps://www.npmjs.com/package/koa-jwt\u003e\n\n### 如何開始建構你的模組？\n\n**release 之前最少要提供什麼**\n* 使用說明書\n* 測試\n* 範例\n\n**Tips**\n* 不要急著做抽象化，等真正需求出現再開出 API。\n* 拆分模組：可以先放入 /lib 資料夾中\n\n### 善用工具\n\n* yarn workspaces\n    * \u003chttps://yarnpkg.com/blog/2017/08/02/introducing-workspaces/\u003e\n    * \u003chttps://github.com/jamiebuilds/rfcs-1/blob/workspaces/accepted/0000-workspaces.md\u003e\n    * \u003chttps://github.com/pedronauck/yarn-workspaces-example\u003e\n* lerna\n    * \u003chttps://github.com/lerna/lerna\u003e\n\n### 結語\n\n* 你需要用到的，通常也是別人需要的。\n* 整個世界都是你的練功場","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falincode%2F20190805-show-me-the-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falincode%2F20190805-show-me-the-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falincode%2F20190805-show-me-the-code/lists"}