;

Nicolas Carlo

@nicoespeon

Drawing Git Graphs
in the Browser

This is the story of a problem I had

😍

Source: nvie.com

But it's painful to maintain

"I wish we would a JS library to draw git graphs in the browser!" — Nicolas 🏖

"Hold my beer!" — Fabien 🍺

You can hack your own problems!

When you have a crazy idea in mind, do it

Gitgraph.js v1

JS lib to draw git graphs in the browser

v1 was awesome 🌈

  • solved our problem
  • we had fun 🎷

🤔

  • How do you deal with issues? With PRs?
  • Some features were hard to implement
  • No test. How to test a rendering lib?

Hack your way out of your problem

An OK execution is better than a perfect idea

Time for v2

👷 New architecture

              +----------------+
         +----| @gitgraph/core |-----+
         |    +----------------+     |
         v                           v
+-----------------+           +--------------+
| @gitgraph/react |           | @gitgraph/js |
+-----------------+           +--------------+

🇨🇦 <-> 🇩🇪

Weekly remote pair-programming!

🏗 We built v2 over 1 year

What I learnt in the process

💬 Pair-programming eases communication

Our weekly session

  • 15min of "how are you doing dude?!"
  • 5min of "here's the next challenge to solve"
  • 40min of achieving the challenge

Our recipe (TDD)

  1. Write a failing test
  2. Write the simplest code to make the test pass
  3. Refactor the code

✅ Types are super-helpful

🤖 Automate the non-important stuff

Formatting is for Prettier. Stop wasting time.

Simplifies packages management

Monorepo ≠ Monolith

lerna bootstrap | publish | …

🛣 git worktree

  • Checkout more than one branch at a time
  • Synced to the same git repository
dev/
|__ gitgraph.js/      => working on v2
|__ gitgraph.js-v1/   => the `v1` branch

git commit --allow-empty

👌 simulate commits without bothering with changes

Useful to trigger the CI

 

E2E tests of rendering libs in Storybook

Visual regression test with Chromatic QA

Don't wait, hack your own problems!

You will learn a lot in the process

v2 is out!

💁‍ What's in there

  • 2 SVG rendering libs: @gitgraph/js & @gitgraph/react
  • Give you a git-like API
  • Types, tests & stories
  • Experimental import() function

// import { Gitgraph, … } from "@gitgraph/react";

<Gitgraph>
  {gitgraph => {
  }}
</Gitgraph>

You have an idea in mind?

Just do it. It doesn't have to be perfect.