Wie geht man mit der eingeschränkten Unterstützung von Foundation für moderne JavaScript-Frameworks wie React oder Vue um?

Melden

Zurb Foundation stammt aus einer Ära, in der jQuery und direkte DOM-Manipulation der Standard waren. Moderne Frameworks wie React oder Vue arbeiten jedoch deklarativ und nutzen einen Virtual DOM (oder ähnliche Mechanismen), was zu Konflikten führt, wenn Foundation versucht, das DOM „hinter dem Rücken“ des Frameworks zu verändern.

Hier sind die besten Strategien, um mit dieser eingeschränkten Unterstützung umzugehen:

1. Der „CSS-Only“ Ansatz (Empfohlen)

Die sauberste Methode ist, Foundation nur für das Styling (CSS/SCSS) zu nutzen und die Logik (JS) komplett dem Framework (React/Vue) zu überlassen.

  • Vorgehen: Importiere nur die Foundation-Styles (Grid, Buttons, Forms, Typography).
  • Vorteil: Keine Konflikte mit dem Virtual DOM, kleinere Bundle-Size, volle Kontrolle über den State.
  • Beispiel: Anstatt das Foundation-Tabs-JS zu nutzen, baust du eine einfache Tab-Komponente in React/Vue, die lediglich die Foundation-CSS-Klassen (tabs, tabs-title, is-active) umschaltet.

2. Manuelle Initialisierung über Lifecycle-Hooks

Wenn du unbedingt die JavaScript-Komponenten von Foundation (wie Reveal, Orbit oder Drilldown) nutzen möchtest, musst du sie manuell in den Lifecycle-Hooks des Frameworks initialisieren und wieder zerstören.

In React (mit Hooks):

import React, { useEffect, useRef } from 'react';
import $ from 'jquery';
import { Foundation } from 'foundation-sites';

const Modal = () => {
  const modalRef = useRef(null);
  let foundationElement;

  useEffect(() => {
    // Initialisierung
    const $el = $(modalRef.current);
    foundationElement = new Foundation.Reveal($el);

    return () => {
      // Cleanup: Wichtig, um Memory Leaks zu vermeiden!
      if (foundationElement) {
        foundationElement.destroy();
      }
    };
  }, []);

  return (
    <div className="reveal" ref={modalRef} data-reveal>
      <h1>Ein Foundation Modal</h1>
    </div>
  );
};

In Vue:

export default {
  mounted() {
    $(this.$refs.reveal).foundation();
  },
  beforeUnmount() {
    const element = $(this.$refs.reveal);
    if (element.data('zfPlugin')) {
      element.foundation('destroy');
    }
  }
}

3. Wrapper-Bibliotheken nutzen (mit Vorsicht)

Es gibt Projekte, die Foundation-Komponenten für React oder Vue gekapselt haben.

  • React: react-foundation
  • Vue: vue-foundation-wrapper (oder ähnliche)

Aber Achtung: Viele dieser Bibliotheken werden nicht mehr aktiv gepflegt oder unterstützen nicht die neuesten Versionen der Frameworks. Prüfe die GitHub-Aktivität, bevor du dich darauf verlässt.

4. Foundation global einbinden (Die "Dirty" Methode)

Für Prototypen oder Legacy-Projekte kann man Foundation global auf dem document initialisieren, sobald das Framework die erste Seite gerendert hat.

$(document).foundation();

Problem hierbei: Wenn React/Vue Teile des DOMs austauschen (z.B. durch Routing), „vergisst“ Foundation die neuen Elemente. Du müsstest $(document).foundation() nach jedem Routenwechsel oder Re-Render erneut aufrufen, was zu Performance-Problemen und Fehlern führt.

5. Strategische Entscheidung: Migration

Wenn du am Anfang eines Projekts stehst, solltest du kritisch hinterfragen, ob Foundation die richtige Wahl ist.

  • Alternative Utility-First: Tailwind CSS lässt sich perfekt mit React/Vue kombinieren, da es kein eigenes JS mitbringt.
  • Alternative Framework-Native: Nutze Bibliotheken, die für das Framework gebaut wurden (z.B. Mantine oder Chakra UI für React, Vuetify oder PrimeVue für Vue).
  • Alternative Bootstrap 5: Bootstrap hat sich (im Gegensatz zu Foundation) von jQuery verabschiedet, was die Integration in moderne Frameworks erheblich erleichtert.

Fazit: Was solltest du tun?

Wenn du Foundation bereits einsetzt: Nutze das CSS von Foundation, aber schreibe das JavaScript in der Logik deines Frameworks selbst.

Die meisten UI-Interaktionen (Modals, Tabs, Dropdowns) sind in React oder Vue mit wenigen Zeilen Code (State-Handling für isOpen oder activeIndex) umgesetzt. Damit umgehst du die Abhängigkeit von jQuery und die instabilen DOM-Manipulationen von Foundation komplett.

0