Managing Open-source JavaScript Library

It's about how to start and manage your own open-source JavaScript library

Transcript

1. Managing Open-source JavaScript Library JakartaJS x Microsoft
2. Antony Budianto • ❤ Web technology • Active doing open-source on GitHub • Creating tech videos on YouTube • Writing tech articles on Medium • Read manga, learn new stuffs Sr. Software Engineer - Web Platform Tokopedia
3. Create JS Library The origin...
4. Create JS Library 101 • mkdir my-lib • cd ./my-lib • npm init -y • touch index.js • npm link • npm link my-lib • npm publish • ❇ ✅ Done! module.exports = { hello: () => 'world' }
5. Create JS Library 101 • Learn Semantic versioning (example: v1.2.3) • Learn dependencies, devDependencies, peerDependencies ◦ dependencies ▪ The ones your library depends directly ◦ devDependencies ▪ Only installed by library developer, not on host ▪ Usually dev/chore/testing stuffs like jest, webpack, etc. ◦ peerDependencies ▪ Not installed by library developer, installed on host ▪ Usually core framework like react, react-dom, etc. • Please don’t include polyfills in your library bundle!
6. Managing JS Library What’s next?
7. Challenges • Development ◦ Manually “npm-link”-ing many packages • Release ◦ Manually updates “version” field on each package and its dependants (a.k.a version bumping) ◦ Manually git-tagging • Maintenance ◦ Checking Pull-requests manually ◦ Update dependencies
8. My OSS Stack
9. Microbundle Zero-config bundler based on Rollup. Made by Jason Miller, Web DevRel at Google Key features: - Zero config! - Just add some fields on package.json and it works - Suitable for tiny modules https://github.com/developit/microbundle
10. np A better `npm publish`. Made by Sindre Key features: - All-in-one package publishing CLI https://github.com/sindresorhus/np
11. Lerna A tool for managing multiple packages Key features: - Helps symlinking all the packages - Automatically updates the version, commit, git-tagging, and publish to npm - Helps executing scripts on all packages https://github.com/lerna/lerna
12. Continuous Integration
13. TravisCI Continuous Integration Service Key features: - Free for OSS - Just add .travis.yml - Multiple Node.js version - Environment var Essentials: - Install, Test, Build https://travis-ci.org/ language: node_js node_js: - "10" - "8" - "6.11.5" before_script: - yarn bootstrap script: - npm test - yarn build
14. Greenkeeper Dependency management service Key features: - Free for OSS - Automatically creates PR to update your dependencies https://greenkeeper.io/
15. Don’t forget the documentation!
16. Docusaurus Maintain OS documentation Key features: - Keeps versioning - Supports i18n - Easy to use Alternatives: - Docz https://docusaurus.io/
17. Unit test!
18. Jest JS Testing Framework from Facebook Key features: - Zero config! - Include basic testing API (mock, spy), coverage report, snapshot testing https://jestjs.io/
19. React Testing Library Library for testing React application. Made by Kent C. Dodds Key features: - Easy to use https://testing-library.com/docs/react-testing-library/
20. My OSS Journey
21. First PR
23. Entering JS stack
25. CRA Universal
26. OSS Challenges • Bug reports • New feature requests ◦ “Please add SSR support!”, “It’ll be great if this lib has React Hooks” • 3rd party support requests ◦ “Does it work with React Router or Reach Router?” • Debugging requests (outside your library usage) • Dev got disappointed for your response
27. OSS Benefits • Learn from so many devs, from their reviews/issues/solutions • Train your patience and communication • Got many PR (even with unit test!) • Appreciations • Job offers ⭐ • Patreon ❤ • Making impact on the whole community
28. OSS Tips • Start solving your own problems! • Make things simpler or even zero at all • Always be nice to people • Learn from other repositories • Help outside GitHub/any OSS hub • Promote your work on relevant GitHub issues • Join Hacktoberfest! • Not only code ◦ Documentation, Translation, Help on issue/PR review
29. Thanks! ⭐ Twitter, GitHub, YouTube, IG, Medium, Linkedin: @antonybudianto