Wie man ein Midler wird: 5 Gewohnheiten, die deinen Code verbessern

Wenn Sie Code nicht nur für eine Aufgabe schreiben, sondern mit Blick auf Skalierbarkeit, Lesbarkeit und Teamarbeit, nähern Sie sich bereits dem mittleren Niveau. In diesem Artikel werden wir die 5 wichtigsten Prinzipien analysieren, die den Code eines Anfängers von einem ausgereiften Projektansatz unterscheiden.

🛠 1. Projektstruktur: nach Bedeutung aufteilen

Schlechtes Projekt - das ist, wenn alles in einem Ordner ist: Komponenten, Dienstprogramme, Stile, Tests.

Mittelansatz - ist eine durchdachte Architektur:

• src/components — wiederverwendbare Komponenten

• src/pages — Seiten

• src/utils — Helpers

• src/styles — globale Stile

• src/services — API-Arbeit

💬 2. Dokumentation direkt im Code

Guter Code erklärt sich von selbst, aber das bedeutet nicht, dass Kommentare nicht benötigt werden. Sie werden benötigt — aber nicht offensichtlich, und erklärend:

❌ // Wir erhöhen den Zähler
✅ // Wir aktualisieren den Zähler, um die neue Benutzeraktion in der Benutzeroberfläche widerzuspiegeln

Es lohnt sich auch zu beschreiben:

• Verhalten von Sonderlösungen

• Eingangs-/Ausgangsparameter von Funktionen

• Typen, besonders wenn Sie JS ohne TS verwenden

📚 Midles machen oft README.md zumindest als Basis: wie man es startet, wie man es zusammenbaut, wo die Konfigurationen sind.

🧪 3. Fügen Sie Tests hinzu (auch einfache)

Code ohne Tests zu schreiben ist wie Fahrradfahren ohne Bremsen. Es ist nicht notwendig, mit TDD zu beginnen, aber das unterscheidet Middle:

• Unit-Tests für Geschäftslogik

• Testen von Randfällen

• bewusster Ansatz zur Testbarkeit

// utils/calc.js
export function sum(a, b) {
  return a + b;
}

// utils/calc.test.js
import { sum } from './calc';
test('Adds two numbers', () => {
  expect(sum(2, 3)).toBe(5);
});

🧼 4. Sauberer Code und einheitlicher Stil

Middle kümmert sich nicht nur darum, was funktioniert, aber auch über wie es aussieht.

📎 Verwenden Sie:

• Linter (ESLint, Flake8, Pylint)

• Formatierer (Prettier, Black)

• git pre-commit-Hooks

• Namenskonventionen

💡 Halte dich an KISS und DRY. Wenn du einen Code 3 Mal wiederholst, ist es Zeit, ihn zu entfernen.

🔁 5. Trennung der Geschäftslogik von der Benutzeroberfläche

Middle versteht, wo die Logik und wo die Darstellung ist. Ein einfaches Beispiel:

// useTodoList.js
export const useTodoList = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    fetchTodos().then(setTodos);
  }, []);
  return todos;
};

// TodoList.jsx
const TodoList = ({ todos }) => (
  <ul>{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>
);

🚀 All dies sind keine „Regeln“, sondern Gewohnheiten eines guten Entwicklers

Wenn Sie solche Gewohnheiten in der Praxis trainieren möchten, schauen Sie in unsere App Kodik. Hier findest du echte Projekte, Aufgaben mit automatischer Überprüfung, Module in JavaScript, Python, TypeScript und sogar Architekturpraxis. All dies - mit Schritt-für-Schritt-Erklärungen und Community-Support im Telegram.

Wenden Sie diese Prinzipien in Ihren Projekten an? Oder vielleicht möchtest du einen separaten Artikel über Front-Architektur oder Ordnerstruktur?

Schreiben Sie in die Kommentare — wir werden es gemeinsam analysieren 💬