Porovnání kódu pro programátory: Git diff vs. Online nástroje

Porovnávání kódu je základní součástí každodenní práce programátora. Ať už děláte code review, debugujete bug, nebo řešíte merge konflikt, potřebujete rychle a přesně vidět, co se v kódu změnilo. V tomto článku probereme všechny dostupné nástroje a naučíme vás, kdy který použít.

Proč je porovnání kódu tak důležité?

1. Code Review a kvalita kódu

Code review je proces, při kterém jiný vývojář kontroluje vaše změny před jejich začleněním do hlavní větve (main/master). Dobré code review:

• Odhalí bugy dříve, než se dostanou do produkce
• Zlepšuje čitelnost kódu díky feedbacku kolegů
• Sdílí znalosti v rámci týmu
• Zajišťuje konzistenci coding standardů
• Mentoruje junior vývojáře

Podle studie SmartBear zjišťuje code review 60% bugů ještě před testováním. To je obrovská úspora času a peněz.

2. Debugging a troubleshooting

Když něco přestane fungovat, první otázka je: "Co se změnilo?" Porovnání funkční vs. nefunkční verze kódu vám pomůže:

• Identifikovat přesný commit, který způsobil problém
• Izolovat konkrétní změny, které vedly k bugu
• Rychle revertovat problematické změny
• Pochopit souvislosti mezi změnami

3. Merge konflikty

Při paralelním vývoji na více větvích nevyhnutelně dojde ke konfliktům. Nástroje pro diff vám pomáhají:

• Vizualizovat konfliktní změny
• Rozhodnout, kterou verzi zachovat
• Kombinovat změny z obou větví
• Testovat výsledek před merge

Git diff: Základní nástroj každého programátora

Git má zabudovaný mocný diff engine, který je dostupný přímo z příkazové řádky.

Základní git diff příkazy

# Porovná working directory s posledním commitem
git diff

# Porovná staged změny s posledním commitem
git diff --staged
# nebo
git diff --cached

# Porovná dvě větve
git diff main feature-branch

# Porovná dva commity
git diff abc123 def456

# Porovná konkrétní soubor
git diff path/to/file.js

# Porovná změny za posledních 7 dní
git diff HEAD~7 HEAD

Pokročilé git diff techniky

1. Word diff - pro textové soubory

git diff --word-diff

Místo zobrazení celých řádků ukazuje změny po slovech. Ideální pro markdown, dokumentaci, nebo prose.

2. Ignorování whitespace

git diff -w
# nebo
git diff --ignore-all-space

Užitečné, když někdo změnil indentaci nebo reformátoval kód.

3. Statistika změn

git diff --stat

Zobrazí přehled, kolik souborů a řádků bylo změněno:

src/components/Header.tsx    | 15 +++++++--------
src/lib/diff.ts              | 42 ++++++++++++++++++++++++++++++++++
tests/diff.test.ts           | 28 +++++++++++++++++++++++
3 files changed, 77 insertions(+), 8 deletions(-)

4. Porovnání s ignorováním řádků

git diff -I "^import"

Ignoruje řádky začínající na "import" - užitečné pro fokus na logické změny.

Konfigurace git diff

Vylepšete výstup git diff pomocí konfigurace:

# Barevný výstup (většinou výchozí)
git config --global color.ui auto

# Lepší algoritmus pro detekci přejmenování
git config --global diff.renames true

# Zobrazit funkce/třídy v diff headeru
git config --global diff.algorithm histogram

# Použít externí diff nástroj (např. meld)
git config --global diff.tool meld
git config --global difftool.prompt false

IDE nástroje pro diff

Moderní IDE mají výkonné zabudované diff nástroje.

Visual Studio Code

VS Code má jeden z nejlepších diff viewerů:

Jak otevřít diff v VS Code:

1. File Explorer - klikněte pravým na soubor → "Compare with..."
2. Source Control - změněné soubory zobrazují diff automaticky
3. Command Palette - File: Compare Active File With...

Keyboard shortcuts:

• Ctrl+Shift+G - otevře Source Control panel
• F7 - přejde na další změnu
• Shift+F7 - přejde na předchozí změnu

Pro Tips:

• Inline diff view pro malé změny
• Side-by-side pro velké refaktoringy
• 3-way merge tool pro konflikty

JetBrains IDE (IntelliJ, WebStorm, PHPStorm)

JetBrains IDE mají pokročilé diff funkce:

• Smart diff - rozpozná přesunutí kódu (ne delete+add)
• Structural diff - ignoruje whitespace a formátování
• Local History - porovná s jakoukoliv verzí z minulosti
• Shelf - dočasně uloží změny pro pozdější porovnání

Online diff nástroje: Kdy je použít?

Online diff checkery jako PorovnejText.cz mají své místo i v programátorově toolboxu.

Kdy použít online nástroj místo git diff?

1. Bez přístupu ke git repository

Když dostanete kód přes email, Slack, nebo code snippet:

// Starý kód z emailu
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Nový kód z emailu
function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

Prostě copy-paste do online diffu a okamžitě vidíte změnu.

2. Rychlé porovnání konfigurací

Když potřebujete porovnat dva config soubory z různých zdrojů:

• .env soubory z produkce vs. staging
• package.json z různých projektů
• tsconfig.json nastavení

3. Code review bez IDE

Když děláte code review na:

• Mobilním zařízení (tablet, telefon)
• Cizím počítači bez vašeho setupu
• Webovém rozhraní (GitHub, GitLab)

4. Demonstrace pro non-technical stakeholders

Online diff nástroje mají čistší UI než git terminál:

• Product manager vidí změny v API dokumentaci
• Designer kontroluje změny v CSS
• Business analyst verifikuje změny v business logice

Výhody online nástrojů

✅ Žádná instalace - funguje okamžitě v každém prohlížeči ✅ Jednoduché UI - čistý, intuitivní interface ✅ Copy-paste friendly - není třeba soubory ukládat ✅ Offline po načtení - PorovnejText.cz funguje i bez internetu ✅ Sdílitelné - snadno ukážete výsledek kolegům

Kdy online nástroj NENÍ vhodný?

❌ Porovnání celých adresářů ❌ Binární soubory (obrázky, fonty) ❌ Velmi velké soubory (>100 MB) ❌ Potřeba 3-way merge ❌ Integrace s version control

Praktické use cases a workflow

Use Case 1: Code Review Pull Requestu

Scenario: Kolega vytvořil PR s 15 změněnými soubory.

Workflow:

# 1. Stáhni změny
git fetch origin
git checkout feature-branch

# 2. Porovnej s main
git diff main..feature-branch

# 3. Zkontroluj statistiku
git diff main..feature-branch --stat

# 4. Fokus na kritické soubory
git diff main..feature-branch src/auth/login.ts

# 5. Otevři v IDE pro detailní review
code .

Tips:

• Začni s --stat pro přehled
• Kontroluj testy jako první
• Hledej edge cases a error handling

Use Case 2: Debugging produkčního bugu

Scenario: Bug se objevil v produkci, fungoval před týdnem.

Workflow:

# 1. Najdi commity za poslední týden
git log --since="1 week ago" --oneline

# 2. Binární vyhledávání problematického commitu
git bisect start
git bisect bad HEAD
git bisect good abc123

# Git automaticky checkoutuje prostřední commit
# Otestuj, zda bug existuje
git bisect bad   # nebo git bisect good

# 3. Když git najde problematický commit
git show <problematic-commit>

# 4. Detailní diff
git diff <commit-before>...<problematic-commit>

Use Case 3: Refaktoring velké komponenty

Scenario: Refaktorujete velkou React komponentu na menší.

Workflow:

# 1. Vytvoř feature branch
git checkout -b refactor/split-header-component

# 2. Průběžně kontroluj změny
git diff HEAD

# 3. Před commitem zkontroluj
git diff --staged

# 4. Po refaktoringu porovnej funkčnost
git diff main -- src/components/__tests__/Header.test.tsx

Best Practices:

• Dělej malé, atomické commity
• Každý commit by měl projít testy
• Dokumentuj WHY, ne WHAT v commit messages

Use Case 4: Merge konflikt resolution

Scenario: Git merge selhal kvůli konfliktům.

Workflow v VS Code:

1. Otevři konfliktní soubor

2. VS Code zobrazí konfliktní sekce:

   • <<<<<<< HEAD - vaše změny
   • ======= - separator
   • >>>>>>> feature-branch - incoming změny

3. Možnosti:

   • Accept Current Change
   • Accept Incoming Change
   • Accept Both Changes
   • Compare Changes (otevře diff view)

4. Po vyřešení:

   git add <resolved-file>
   git commit
   

Best Practices pro porovnání kódu

1. Používejte semantic diff

Místo řádek po řádku:

- function oldName() {
+ function newName() {
    // ... 100 řádků
  }

Hledejte strukturální změny:

• Přejmenování funkcí
• Přesunutí kódu
• Změny API

2. Ignorujte noise

# Ignoruj whitespace
git diff -w

# Ignoruj blank lines
git diff --ignore-blank-lines

# Custom .gitattributes
*.min.js diff=minified

3. Reviewujte v kontextu

Nedívejte se jen na diff, ale:

• Čtěte celý soubor
• Spusťte testy
• Zkontrolujte související soubory
• Otestujte v prohlížeči/aplikaci

4. Dokumentujte důvody

V commit message vysvětlete:

Fix: Prevent race condition in user login

The previous implementation didn't handle concurrent login requests,
causing session conflicts. Now using mutex lock to serialize requests.

Fixes #1234

Pokročilé techniky

Custom diff algoritmy

Git podporuje různé algoritmy:

# Myers (default) - rychlý, ale může mást přesuny
git diff --diff-algorithm=myers

# Histogram - lepší pro velké refaktoringy
git diff --diff-algorithm=histogram

# Patience - nejlepší pro kód s opakujícími se řádky
git diff --diff-algorithm=patience

Diff pro specifické jazyky

JavaScript/TypeScript:

# Zobraz funkce v diff headers
git config diff.javascript.xfuncname "^[[:space:]]*((function|class|interface).*)"

Python:

git config diff.python.xfuncname "^[[:space:]]*((class|def)[[:space:]].*)$"

Diff hooks

Automatizuj analýzu změn:

#!/bin/bash
# Varuj, pokud diff obsahuje console.log
if git diff --cached | grep "console.log"; then
  echo "Warning: console.log detected in staged changes"
  exit 1
fi

Závěr

Porovnání kódu je umění i věda. Zatímco git diff je mocný nástroj pro každodenní práci s version control, online nástroje jako PorovnejText.cz mají své místo pro rychlé, ad-hoc porovnání bez složitého setupu.

Klíčové takeaways:

✅ Používejte git diff pro version control workflow ✅ Používejte IDE diff pro velké refaktoringy ✅ Používejte online diff pro rychlé copy-paste porovnání ✅ Vždy reviewujte kód v kontextu, ne jen diff ✅ Ignorujte noise (whitespace, formatting) ✅ Dokumentujte proč, ne jen co se změnilo

Kombinací těchto nástrojů a technik se stanete efektivnějším programátorem s lepší code review skillsem.

Happy coding and diffing! 🚀

---

Máte tipy na další diff techniky? Sdílejte je s námi na info@sikulovi.cz