Egal ob du einfache Seiten aufbauen, interaktive Anwendungen entwickeln oder komplexe Systeme konstruierst – ofa.js meistert jede Aufgabe mit Leichtigkeit.
Unabhängig vom Anwendungsszenario eignet sich ofa.js für alle.
Ich habe keine Energie mehr zum Lernen, möchte eure Dokumentation nicht lesen. Kann ich es trotzdem nutzen? 
Ich möchte in einem alten Projekt schnell eine Funktion hinzufügen. 
Ich bin ein Entwicklungsanfänger und wurde von Node.js und npm abgeschreckt. 
Ich entwickle ein riesiges Einkaufswarenkorbsystem. Haltet ihr das aus? 
Ich bin Backend-Entwickler und möchte nur mit Backend-Template-Engines entwickeln. Ist ofa.js geeignet? Ich habe keine Energie mehr zum Lernen, möchte eure Dokumentation nicht lesen. Kann ich es trotzdem nutzen? Du musst ofa.js nicht zuerst lernen, um darauf basierende Komponenten direkt wiederverwenden zu können.
Nachdem der Open-Source-Komponentenautor den Code geschrieben hat, müssen andere nur ein paar Zeilen nach dem Beispiel kopieren, um die Funktion sofort in ihr eigenes Projekt zu integrieren.
Ich möchte in einem alten Projekt schnell eine Funktion hinzufügen. Füge ofa.js einfach über ein Script-Tag in dein bestehendes Projekt ein, und du kannst es sofort nutzen.
Nach dem Einfügen stehen dir alle möglichen Komponenten zur Verfügung.
Ich bin ein Entwicklungsanfänger und wurde von Node.js und npm abgeschreckt. ofa.js ist sehr anfängerfreundlich und erfordert kein Lernen von Node.js, npm oder ähnlichen Tools.
Du brauchst nur einen Browser und einen beliebigen statischen Server, um mit der Entwicklung zu beginnen.
Wenn du Chrome verwendest, öffne OFA Studio dieses Online-Tool, dann benötigst du keinen statischen Server mehr und kannst direkt loslegen.
Tutorial: Erstelle deine erste App Ich entwickle ein riesiges Einkaufswarenkorbsystem. Haltet ihr das aus? ofa.js ist ideal für große Projekte, da es eine Mikro-Frontend-Architektur verwendet.
Du kannst das Warenkorbsystem in ausreichend kleine Anforderungen aufteilen, Komponenten einzeln entwickeln, in separate Ordner legen und über einen statischen Server direkt die Vorschau der Komponenteneffekte anzeigen.
Zum Schluss setzt du sie alle zu einem riesigen System zusammen. Das Mikro-Frontend-Muster von ofa.js ist genau das richtige Mittel gegen monolithische Anwendungen.
Siehe das Beispiel NoneOS, das mit ofa.js entwickelte Betriebssystem, das sehr umfangreich ist.
Ich bin Backend-Entwickler und möchte nur mit Backend-Template-Engines entwickeln. Ist ofa.js geeignet? Das SSR von ofa.js ist nicht an Node.js gebunden. Solange du die SCSR-Regeln befolgst, kannst du jede beliebige Backend-Sprache für die Template-Engine-Entwicklung verwenden.
Weitere Details findest du unter ofa.js SSR
Kein Kompilierungsprozess, lassen Sie den Code direkt laufen.
Bei der Verwendung von auf ofa.js basierenden Komponenten müssen keine Abhängigkeiten oder Konfigurationen berücksichtigt werden
Keine Überstunden mehr
Gib mir Feierabend
Später Feierabend
Wochenende Überstunden
Früher musste man erst eine Reihe von Lernschritten wie Node.js ➡️ npm ➡️ Webpack durchlaufen, um den ersten Schritt zur Kapselung der Komponente zu erreichen.
Jetzt benötigst du nur eine Datei
Du kannst ofa.js auf jeder Plattform nutzen, die Web Components unterstützt
Alle Komponenten dieser Website sind unabhängig verwendbar, einzeln anzeigbar und eigenständig referenzierbar, ohne Abhängigkeit von einer spezifischen Umgebung – sofort einsatzbereit.
Logo-Komponente mit Impact-Animation; beim Klick wird eine Zerstäubungsanimation abgespielt
Chat-Blasen-Komponente zur Anzeige von Chat-Nachrichten mit anpassbarem Avatar und Inhalt
Hallo, das ist ein Beispiel für eine Chat-Blase Anker-Dialog-Komponente; öffnet beim Klick auf ein bestimmtes Element einen Dialog mit benutzerdefiniertem Inhalt
Dies ist eine einfache Demonstration eines Anker-Dialogs
Flussdiagramm-Komponente zur Darstellung von Prozessknoten und Verbindungen
Komponente, die Markdown mit nur einer Codezeile rendert und anzeigt; die aktuelle Funktion zum Ansehen der Dokumentation basiert ebenfalls darauf.
Interaktive Live-Preview-Komponente mit Unterstützung für mehrere Dateien und Echtzeitvorschau
Hello o-playground
Dies ist ein interaktiver Code-Editor
h3 { color: #42b983; }
Unterstützt sowohl die Vorlagensyntax als auch die direkte Knotenmanipulation, flexibel und effizient zugleich.
Das API-Design ähnelt dem von jQuery, ist aber intuitiver.
// jQuery Code
$("#target").html("some html code"); // HTML setzen
$("#target").text("set text"); // Text setzen
var ele_text = $("#target").text(); // Text abrufen
var parents = $("#target").parents(); // Array aller übergeordneten Elemente abrufen
var child = $("#target").children()[0]; // Erstes untergeordnetes Element abrufen
// ofa.js Code
$("#target").html = "some html code"; // HTML setzen
$("#target").text = "set text"; // Text setzen
var ele_text = $("#target").text; // Text abrufen
var parents = $("#target").parents; // Array aller übergeordneten Elemente abrufen
var child = $("#target")[0]; // Erstes untergeordnetes Element abrufen