Ease your contribution process with automation

Vincent Voyer

Software engineer

TechLunch #10

@vvoyer

vvo

What this talk IS NOT about

Ease your contribution process with automation

Vincent Voyer

> Making travis fast

> Making jenkins fast

> Making webpack fast

> Making your test suite fast

> Making your machine fast

> Making your car fast

​

Ease your contribution process with automation

Vincent Voyer

What this talk IS about

Ease your contribution process with automation

Vincent Voyer

> Finding ways to ease the contribution process on your projects

> Automating human behaviours

> Getting the most out of all your contributors

​

A bit of context

Ease your contribution process with automation

Vincent Voyer

InstantSearch

Ease your contribution process with automation

Vincent Voyer

> Set of UI libraries to build instant-search experiences on $YOUR_PLATFORM (using Algolia)

> Released: JavaScript (Vanilla JS, React), Android

> Future: iOS, Vue.js, Angular

InstantSearch

Ease your contribution process with automation

Vincent Voyer

InstantSearch.js

Ease your contribution process with automation

Vincent Voyer

> Open-source, on GitHub

> ~2400 commits

> ~50 contributors

> ~1000 issues

> ~1100 Pull Requests

> 1500+ live websites using it

Contribution process

Ease your contribution process with automation

Vincent Voyer

Our contribution process lifecycle

Ease your contribution process with automation

Vincent Voyer

> Discovering the project

> Opening an issue

> Hacking and prototyping

> Testing

​

​

​

​

> Linting and formatting

> Documenting

> Opening a pull request

> Releasing

​

​

​

Discovering the project

Ease your contribution process with automation

Vincent Voyer

> Contributor: What's this project? This is my 20th browser tab and I am in the middle of my sandwich.

> Answer: README.md, a good document with essential information:

• tl;dr; project description
• Where is the documentation?
• How do I contribute?

​

> We use:

• CONTRIBUTING.md
• doctoc (generate table of contents for markdown files)

​

​

Opening an issue

Ease your contribution process with automation

Vincent Voyer

> Contributor: Something is not working! Here's a screenshot of my code in a PDF.

> Answer: Issue templates and ready to hack live examples (jsFiddle)

Opening an issue: Issue templates

Ease your contribution process with automation

Vincent Voyer

> Contributor: Something is not working! Here's a screenshot of my code

> Answer: Issue templates and ready to hack live examples (jsFiddle)

> Make it clear and easy for me to provide you feedback

> Reduce back and forth, we want to avoid this

Opening an issue: Issue templates

Ease your contribution process with automation

Vincent Voyer

> Content:

• Provide the user a guided way to give us feedback
• Put questions that need to be answered (bug? Feature? Version used?)
• Put links to editable live examples (jsFiddle) to ease creation of test cases

> Reduce back and forth communications

​

Hacking and prototyping

Ease your contribution process with automation

Vincent Voyer

> Contributor: How do I start hacking? I am gonna fix your code.

> Answer: Single command to launch the documentation and live examples: npm start

> Must have fast livereload (~one second)

> We use:

• npm scripts
• Metalsmith
• Browsersync

​

Testing

Ease your contribution process with automation

Vincent Voyer

> Contributor: I hate writing unit or functional tests, it's slow and repetitive.

> Answer: Modern tooling, smart testing, good local and continuous integration tools

> We use:

• Jest (and Snapshot testing)
• WebdriverIO, advanced JavaScript API for functional tests
• Sauce Labs, launch browsers in the cloud (selenium)
• docker-selenium, 10 minutes local selenium setup

​

Linting and formatting

Ease your contribution process with automation

Vincent Voyer

> Contributor: I am done with my code. I used global variables and switched to tabs for indentation.

> Answer: Linting and automatic formatting

> We use:

• ESLint, linting of JavaScript code, runs on Travis
• Prettier, automatic code formatting before commit

Documenting

Ease your contribution process with automation

Vincent Voyer

> Contributor: My code is done, I'll let you update the documentation

> Answer: Automatic API documentation generation

> We use:

• JSDoc
• Custom code
• First-citizen documentation that is close to the code
• [EDIT THIS PAGE] links

Opening a pull request

Ease your contribution process with automation

Vincent Voyer

> Contributor: I am done, merge this ASAP. Trust me I have many followers on twitter.

> Answer: Continuous integration and pull requests previews

> We use:

• Travis
• Netlify

Opening a pull request: live previews

Ease your contribution process with automation

Vincent Voyer

Releasing

Ease your contribution process with automation

Vincent Voyer

> Contributor: I don't know how to release, can you do it for me?

> Answer: Single interactive command line: npm run release.

> We use:

• Shell scripting
• Semver, easy to follow versioning rules
• Conventional-changelog, guidelines and tooling for automatic changelogs
• Yarn, deep JavaScript dependencies version locking

Releasing: example

Ease your contribution process with automation

Vincent Voyer

Distributing

Ease your contribution process with automation

Vincent Voyer

> Contributor: How do I make this library available to everyone?

> Answer: Package managers and CDNs (Content delivery networks).

> We use:

• npm, JavaScript package manager to publish your package
• jsDelivr, distribute your package to <script> users

Conclusion

Ease your contribution process with automation

Vincent Voyer

Conclusion

Ease your contribution process with automation

Vincent Voyer

> Automation is not only about shell scripts and Travis

> Many parts of a contribution process can be optimized

> Ensure your contribution process is safe for all kinds of contributors: from beginners to advanced and from casual to regular

> It's never too late to automate but the sooner the better

​

Vincent Voyer

Software engineer

@vvoyer

vvo

Thank you

for watching