valuecloud-website-logo-60x60-min

Leistungen

Let’s make a Frontend-Editor talk KSQL

Integration einer neuen Programmiersprache im Ace Editor mittels ANTLR

Streaming-basiertes ETL gewinnt an Verbreitung. Wir bringen einem Ace Editor KSQL Syntax dabei, damit Queries effizient erstellt werden können.

Je nach Anwendungsfall kann es vorkommen, dass ein simples Textfeld nicht ausreichend ist. Beispiele hierfür wären eine Artikelbeschreibung, die mit Fotos oder Tabellen ausgeschmückt oder eingegebener Text, der bereits während der Eingabe auf Fehler untersucht werden soll. Hier kommen passende Editoren zum Einsatz. Dabei gibt es bereits frei verfügbare Editoren, die etliche Funktionen bieten und nahezu alle (Programmier-) Sprachen unterstützen. Aber was ist zu tun, wenn man ausgerechnet das braucht, was (noch) keiner kann?

Mithilfe eines Web-Editors sollte dem Benutzer die Möglichkeit gegeben werden, KSQL-Queries auszuführen, ohne sich dazu auf Kommandozeilenebene begeben zu müssen. Dabei war es besonders wichtig, dass Fehler in der Syntax direkt sichtbar werden und das UI entsprechend darauf reagiert, z.B. indem der Button für das Abschicken des Queries im Fehlerfall gesperrt wird. Außerdem wollten wir die eingegebenen Queries auf festgelegte Keywords scannen, die ein auf den Editor folgendes Dropdown-Menü füllen und damit dem Benutzer Auswahlmöglichkeiten für bestimmte Parameter geben.

Über die Autorin

Viktoria Friedrich

Software Entwicklerin, ValueCloud GmbH

Ace Editor als Basis…

Bei einer Recherche wurde schnell klar, dass keiner der gängigen Editoren KSQL unterstützt und eine eigene Lösung entwickelt werden musste. Glücklicherweise sind wir auf den Ace Editor gestoßen.

Ace ist ein in JavaScript geschriebener Code-Editor, der leicht auf jeglichen Webseiten eingebettet werden kann und der von seinen Funktionen sowie Performanz an native Editoren erinnert. Dabei hat der Benutzer die Macht über beinahe alles: Theming, Shortcuts und Keybindings, Texthighlighting, usw. Obwohl Ace bereits Syntaxhighlighting für über 110 Sprachen unterstützt, kann der Benutzer problemlos weitere Sprachen hinzufügen. Dazu muss sie lediglich in ein Format gebracht werden, das Ace auch versteht. Dafür hat KSQL genau die richtigen Voraussetzungen.

… trifft auf KSQL…

Confluent KSQL ist die Streaming-SQL-Engine, die Echtzeit-Datenverarbeitung gegen Apache Kafka ermöglicht. Es bietet eine benutzerfreundliche und dennoch leistungsstarke interaktive SQL-Schnittstelle für die Stream-Verarbeitung auf Kafka, ohne dass Code in einer Programmiersprache wie Java oder Python geschrieben werden muss. Die Beschreibung dieser Sprachstruktur wurde in dem Format festgehalten, das von ANTLR verstanden werden kann. Sie wird regelmäßig gepflegt und ist im GitHub Repository von Confluent zu finden.

… und ANTLR

ANTLR ist ein Parser Generator, der zum Lesen, Verarbeiten, Ausführen oder Übersetzen strukturierter Texte oder Binärdateien verwendet werden kann. Aus einer formalen Sprachbeschreibung (Grammatik) generiert ANTLR einen Parser für diese Sprache, der automatisch Parse-Bäume erstellen kann. Dabei handelt es sich um Datenstrukturen, die darstellen, inwiefern eine Grammatik mit einer Eingabe übereinstimmt. ANTLR generiert auch automatisch Tree Walker, mit denen die Knoten dieser Bäume betrachtet werden können, um anwendungsspezifischen Code auszuführen.

Putting things together

Die Grundlagen

um KSQL in Ace verfügbar zu machen, werden lediglich zwei Dinge benötigt:

  • ein Mode, der die Syntaxhighlighting-, Einrück-, sowie Codefolding-Regeln beinhaltet,
  • ein Worker, der die eigentliche Syntaxprüfung übernimmt und in unserem Fall die ANTLR Integration beinhaltet.

Mithilfe des von ANTLR bereitgestellten JavaScript-Targets können Dateien generiert werden, die von diesem Worker benutzt werden. Dazu wird folgender Befehl ausgeführt:

				
					antlr4 -Dlanguage=JavaScript -visitor MyGrammar.g4
				
			

Die resultierenden Dateien können genau so, wie ANTLR sie produziert hat, verwendet und im Projekt an beliebiger Stelle abgelegt werden. Außerdem muss das antlr4-Package im Projekt installiert werden, damit die Runtime im Worker verwendet werden kann.

Erzeugung des Workers

Als nächstes benötigen wir den Worker, der vom Mode gestartet wird und der die Eingabevalidierung durchführt. Um das Anlegen neuer Worker zu vereinfachen, liefert Ace bereits einen Basis-Worker („worker-base.js“) mit, den es nur noch zu erweitern gilt. Hier kommt das antlr4-Package zum Einsatz.

				
					var validate = function (input) {
    var stream = new antlr4.InputStream(input);
    var lexer = new SqlBaseLexer(stream);
    var tokens = new antlr4.CommonTokenStream(lexer);
    var parser = new SqlBaseParser(tokens);
    var annotations = [];
    var listener = new AnnotatingErrorListener(annotations);
    parser.removeErrorListeners();
    parser.addErrorListener(listener);
    parser.statements();
    return annotations;
};

				
			

validate wird immer dann aufgerufen, wenn sich die Eingabe ändert und das Ergebnis der Funktion an den Ace-Editor weitergegeben.

Zuletzt wird ein neuer Mode angelegt, in dem die genauen Regeln zur Sprache definiert werden. Dazu wird der Inhalt der ANTLR-Grammatik in ein für Ace verständliches Format gebracht, der Mode an Ace selbst registriert und anschließend eine Instanz des zuvor erstellten Workers gestartet.

Verknüpfung mit der Ace Instanz

Zuletzt muss nur noch der neue Mode an der konkreten Ace-Instanz gesetzt werden – this.aceEditor.getSession().setMode(‚ace/mode/ksql‘);  – und schon ist der Benutzer in der Lage, KSQL zu schreiben und direktes Feedback dazu zu bekommen!

				
					(function() {
    this.$id = "ace/mode/ksql";

    var WorkerClient = require("ace/worker/worker_client").WorkerClient;
    this.createWorker = function (session) {
        this.$worker = new WorkerClient(["ace"], "ace/worker/worker-ksql", "KsqlWorker");
        this.$worker.attachToDocument(session.getDocument());

        this.$worker.on("errors", function(e) {
            session.setAnnotations(e.data);
        });

        this.$worker.on("annotate", function(e) {
            session.setAnnotations(e.data);
        });

        this.$worker.on("terminate", function() {
            session.clearAnnotations();
        });

        return this.$worker;
    };
}).call(KsqlMode.prototype);

				
			

Um die  zusätzliche Anforderung des Herausfilterns von bestimmten Keywords zu erfüllen, war noch ein Web Worker notwendig, der im Hintergrund gestartet wird und bei jeder Eingabeänderung getriggert wird. Der Code des Web Workers deckt sich fast gänzlich mit dem der validate-Funktion, mit dem Zusatz, dass ein Visitor-Objekt erstellt wird, das  je nach besuchtem Node passende Methoden aufruft. Der von ANTLR generierte Visitor  dient hier als Basis für den neuen Visitor, wobei nur die Methoden ausimplementiert werden, die tatsächlich interessieren. Die gesammelten Werte werden auf ein Observable gegeben, das das zuvor erwähnte Dropdown befüllt und UI aktualisiert.

Ergebnis

Das Ergebnis ist ein Frontend, das dem User bereits bei der Eingabe kontinuierliche Rückmeldung zur Validität der KSQL gibt. So werden langwierige und lästige Fehlersuch-Prozesse und eventuelle Produktiv-Probleme vermieden. Das freut die Anwender UND das Management.

zeequee-sample-min(1)

Integration einer neuen Programmiersprache im Ace Editor mittels ANTLR

Stehen Sie vor einer ähnlichen Herausforderung?

Unsere Experten freuen sich auf den Austausch mit Ihnen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Neueste Artikel

Clouster
Christian Gilcher

Warum wir Clouster auf den Markt bringen

Die Zeit ist gekommen, eine Kubernetes-basierte Cloud Plattform für die Entwicklung, Ausbringung und den Betrieb moderner Geschäftsanwendungen in den Markt zu bringen. Optimiert für europäische IaaS-Dienste. Mit Enterprise-Grade Security & Compliance Features.

Weiterlesen »
Conversational AI
Caroline Wagner

Haystack & Rasa als Dreamteam für Chatbots mit Experten-Charakter

Chatbots sind schon lange Teil von Webshops, FAQ Seiten oder Apps. Meistens lassen uns diese Chatbots aber relativ schnell im Stich, insbesondere wenn es um fachliche komplexere Fragen geht. Um einem Endanwender trotzdem das Gefühl zu geben, mit einem Experten zu interagieren, müssen wir „schlauere“ Systeme bauen. Was wir hier brauchen ist „Conversational AI“.

Weiterlesen »
Tech Strategie
Christian Gilcher

Kostenfalle Hyperscaler (und mögliche Auswege)

Viele Unternehmen nutzen Cloud Plattform-Komponenten der großen Hyperscaler, um digitale Innovation möglichst schnell in den Markt zu bringen. Mit steigender Last werden Hyperscaler Angebote jedoch sehr schnell sehr teuer. ValueCloud bietet strategische Alternativen zur Reduzierung der Kostenlast, die zudem auf europäischen IaaS Diensten laufen und Datenschutz-Bedenken ausräumen. In Summe entstehen Kosten-optimierte, „intelligente“ Multi-Cloud Szenarien.

Weiterlesen »
Machine Learning
Matthias Bender

Time-Series Forecasting mit ARIMA / SARIMAX

In vielen Bereichen der Wirtschaft wird täglich der Ruf nach Prognosen lauter. Gerade zum Ende des Geschäftsjahres soll oftmals eine Aussage getroffen werden, wie die erwarteten Kosten in den einzelnen Bereichen sein werden. Werden höhere Ausgaben erwartet, oder kann auch ein Gewinn verzeichnet werden? Hilfreich wäre es also, ein Werkzeug zu besitzen, welches einem mit Hilfe historischer Daten ein mögliches Szenario in der (nahen) Zukunft vorhersagen kann.

Weiterlesen »
Tech Strategie
Christian Gilcher

Was ist eigentlich „Cloud native“ Software (und warum ist das wichtig)?

Ich rede jeden Tag mit Leuten, die über „die Cloud“ sprechen aber gar nicht wissen, was es damit auf sich hat. Ich möchte das gerne ändern. Insbesondere werden Begriffe wie „Cloud“, „Cloud Computing“ und „cloud native Software“ sehr häufig in einen Topf geworfen, obwohl damit unterschiedliche Dinge gemeint sind.

Weiterlesen »

ValueCloud GmbH

Europaallee 10

D-67657 Kaiserslautern

P: +49-631-3435-8150

F: +49-631-3435-8159

E: info@valuecloud.io