Imba: JavaScript-kompatible Sprache für die schnelle Arbeit mit DOM

Imba ist eine Open-Source-Programmiersprache, die von Scrimba speziell für die Entwicklung von Webanwendungen entwickelt wurde. Es wird in JavaScript kompiliert und kann innerhalb des vorhandenen JS-Ökosystems arbeiten. Wir sprechen zum Beispiel über Node.js, über npm, über Webpack.

Die Hauptstärke von Imba besteht darin, dass Sie mit dieser Sprache viel schnellere Anwendungen erstellen können als mit Bibliotheken, die auf Virtual DOM-Technologie wie React und Vue basieren. Leistungssteigerungen der Anwendung werden durch die Arbeitsweise von Imba mit DOM-Updates erzielt. Details dazu finden Sie hier .



Der Autor dieses Materials, Mitbegründer des Scrimba-Projekts, sagt, dass er Imba seit mehreren Jahren verwendet. Ihm zufolge ist das Schreiben in dieser Sprache ein echtes Vergnügen, da es im Vergleich zu JavaScript eine sauberere Syntax hat, die die Lesbarkeit des Codes verbessert.

Dieses Material ist eine Anleitung für Imba für Anfänger, deren Entwicklung es Ihnen ermöglicht, einfache Anwendungen zu erstellen. Zunächst werden hier die Grundlagen der Sprache vorgestellt, dann wird die Entwicklung von Benutzeroberflächen mit ihrer Hilfe betrachtet. Es wird sofort das Setup der Entwicklungsumgebung für die Programmierung auf Imba angezeigt.

Über Projekte, die Imba verwenden

Bevor wir auf den Code eingehen, möchte ich Sie darauf aufmerksam machen, dass Imba keine andere seltsame Sprache ist, die in JS kompiliert und ausschließlich in Amateurprojekten verwendet wird. Es wird auch in ernsthaften Anwendungen großer Unternehmen eingesetzt.

Ein Beispiel für seine Anwendung ist die Plattform, die die Fischauktion in Island unterstützt. In diesem Land macht der Fischhandel etwa 1,6% des BIP aus, was ungefähr 390 Mio. USD entspricht.


Isländische Fischauktion

Ein weiteres Beispiel ist die Trainingsplattform Scrimba.com , auf der Imba auf den Client- und Serverteilen des Projekts verwendet wird. Die Bequemlichkeit der Arbeit mit dieser Plattform, die auf einer komplexen Anwendung basiert, hängt stark von Imbas Fähigkeit ab, DOM-Änderungen schnell zu synchronisieren.


Scrimba.com-Plattform

Daher können wir sagen, dass die Sprache, die Sie heute kennenlernen werden, für die Entwicklung von Projekten verschiedener Größenordnungen geeignet ist.

Syntax

Die Imba-Syntax ähnelt stark JavaScript, aber auch andere Sprachen wie Ruby und Python wirken sich aus. Vielleicht werden die Syntaxfunktionen von Imba als Beispiel betrachtet. Im Folgenden finden Sie eine einfache JS-Funktion, die die größte von zwei übergebenen Zahlen oder, wenn diese Zahlen gleich sind, false zurückgibt.

 function findGreatest(num1, num2) { if (num1 > num2) {   return num1 } else if (num2 > num1){   return num2 } else {   return false } } 

Schreiben Sie jetzt dasselbe auf Imba.

 def findGreatest num1, num2   if num1 > num2       num1   elif num2 > num1       num2   else       false 

Wenn Sie diese beiden Beispiele vergleichen, können Sie sofort die Unterschiede zwischen Imba und JavaScript erkennen. Sie sind nämlich wie folgt:

1. function wird zu def . Die Schlüsselwortfunktion function durch das Schlüsselwort def .
2. Fehlende Klammern. Funktionsparameter sind nicht in Klammern angegeben. In Imba werden Klammern selten benötigt, obwohl Sie sie verwenden können, wenn Sie möchten.
3. Einrückung. Einrückung spielt in Imba eine sehr wichtige Rolle. Dies bedeutet, dass hier keine geschweiften Klammern benötigt werden.
4. Fehlendes return . In Imba wird die Rückgabe von Werten aus Funktionen implizit ausgeführt, dh das Schlüsselwort return ist nicht erforderlich. Imba gibt automatisch den letzten Funktionsausdruck zurück.

Dies bedeutet nicht, dass die oben beschriebenen Syntaxfunktionen der wichtigste Aspekt von Imba sind, aber sie machen den Code prägnanter als ähnlicher Code, der in JavaScript geschrieben ist. Dieser Vorteil wird sich im Verlauf des Materials deutlicher bemerkbar machen.

Design der Benutzeroberfläche

Lassen Sie uns über das Erstellen von Benutzeroberflächen mit Imba sprechen. Tatsächlich wurde diese Sprache nur dafür geschaffen. Dies bedeutet insbesondere, dass DOM-Knoten in Form von sogenannten „erstklassigen Objekten“ in die Sprache eingebettet sind.

Wenn Sie Erfahrung mit der React-Entwicklung haben, können Sie diese Funktion von Imba so betrachten, als ob Imba eine eigene Version von JSX in die Sprache integriert hat.

Betrachten Sie den folgenden Code, in dem die React-Bibliothek zum Rendern einer Schaltfläche und zum Anzeigen einer Nachricht an die Konsole verwendet wird, wenn Sie auf diese Schaltfläche klicken.

 class App extends React.Component { logOut() {   console.log('button clicked!') } render() {   return (     <div className="container">       <button onClick={this.logOut}>click me!</button>     </div>   ) } } 

Wenn Sie dies auf Imba umschreiben, erhalten Sie Folgendes.

 tag App   def logOut e       log 'button clicked!'   def render       <self.container>           <button :tap.logOut> 'Click me!' Imba.mount <App> 

Vergleichen wir diese beiden Codefragmente. Wir achten nämlich auf die folgenden drei Merkmale:

1. Inline-Tags. Beachten Sie, dass die Konstruktion der class App extends React.Component und in eine viel einfachere Form konvertiert wurde - die tag App . Das tag Schlüsselwort ist in die Sprache integriert. DOM-Tags sind ebenfalls integriert.
2. Fehlende schließende Tags. Da die Linienausrichtung die Struktur des Programms bestimmt, müssen Sie keine Tags schließen (z. B. mit dem </button> ). Dies beschleunigt die Eingabe von Programmtext und reduziert dessen Größe.
3. Einfache Klassensyntax. Imba vereinfacht die Arbeit mit HTML-Klassen. Anstelle der umständlichen Konstruktion von className="container" reicht es .container , dem Tag selbst .container hinzuzufügen.

Möglicherweise haben Sie auch Funktionen von Ereignishandlern in Imba bemerkt. Wir verbinden nämlich den entsprechenden Handler mit der Schaltfläche über das Konstrukt :tap.logOut , das anstelle von onClick={this.logOut} . Dies ist nur eine von mehreren Möglichkeiten, um vom Benutzer kommende Ereignisse zu behandeln. Details dazu finden Sie hier .

Mit Daten arbeiten

Lassen Sie uns nun über die Arbeit mit Daten in Imba sprechen. Das folgende Beispiel zeigt eine React-Anwendung, in deren Status sich die App Komponente befindet, deren Zählvariable gleich 0 ist. Der Wert dieser Variablen wird durch Klicken auf die entsprechenden Schaltflächen verringert oder erhöht.

 class App extends React.Component { state = {   count: 0 } increase = () => {   this.setState({     count: this.state.count + 1   }) } decrease = () => {   this.setState({     count: this.state.count - 1   }) } render() {   return (     <div className="container">       <button onClick={this.increase}>Increase!</button>       <button onClick={this.decrease}>Decrease!</button>       <p>{this.state.count}</p>     </div>   ) } } 

So wird das gleiche auf Imba aussehen.

 tag App   prop count default: 0   def increase       count += 1   def decrease       count -= 1   def render       <self.container>           <button :tap.increase> 'Increase!'           <button :tap.decrease> 'Decrease!'           <p> count Imba.mount <App> 

Das erste, was beim Vergleich dieser beiden Beispiele auffällt, ist der Unterschied in der Codemenge.

Das Imba-Beispiel ist ungefähr zweimal kürzer - sowohl in Bezug auf die Anzahl der Zeilen als auch auf die Menge des Codes.

Obwohl der Vergleich der Anzahl der Codezeilen beim Vergleich von Programmiersprachen nicht so wichtig ist, beeinträchtigt er dennoch die Lesbarkeit des Codes, der auf der Skala einer bestimmten Codebasis bereits eine Rolle spielt. Weniger Code auf Imba bedeutet eine bessere Lesbarkeit im Vergleich zu React.

Impliziter Selbstzugriff

Möglicherweise haben Sie bemerkt, dass wir im obigen Beispiel direkt auf die Instanzvariable des Objekts zugreifen und nur dessen Namensanzahl erwähnen. In React wird dasselbe mit dem Konstrukt this.state.count .

In unserem Beispiel für Imba könnte man auch ein Konstrukt der Form self.count . Auf self wird hier jedoch implizit zugegriffen, sodass self optional ist. Wenn Imba sich auf count bezieht, findet es heraus, ob eine solche Variable entweder im Gültigkeitsbereich oder in der Instanz der App selbst vorhanden ist.

Veränderlichkeit

Ein weiterer wesentlicher Unterschied zwischen den beiden vorherigen Beispielen besteht darin, wie sie die Zustandsänderung implementieren. In einem in Imba geschriebenen Beispiel ist der Status veränderbar, sodass Sie den Wert der Zählvariablen direkt ändern können.

React verfolgt einen anderen Ansatz, bei dem der Wert von this.state als unveränderlich angesehen wird. Daher besteht die einzige Möglichkeit, ihn zu ändern, darin, this.setState zu verwenden.

Wenn Sie lieber mit unveränderlichem Status arbeiten möchten, können Sie die entsprechende Bibliothek mit Imba verwenden. Die Imba-Sprache in diesem Sinne ist nicht an eine bestimmte Lösung gebunden. Wir im Scrimba-Projekt verwenden einen veränderlichen Zustand, da wir der Ansicht sind, dass wir nicht die übermäßigen Kosten für Systemressourcen benötigen, die zur Gewährleistung der Immunität erforderlich sind.

Einrichten einer Entwicklungsumgebung

Nachdem Sie sich mit den Grundlagen von Imba vertraut gemacht haben, ist es Zeit zu experimentieren. Dazu müssen Sie die Entwicklungsumgebung konfigurieren. Führen Sie dazu einfach die folgenden Befehle aus.

 git clone https://github.com/somebee/hello-world-imba.git cd hello-world-imba npm install npm run dev 

Gehen Sie danach zum Browser unter http://localhost:8080/ und Sie sehen die Hauptseite des Projekts. Um die Anwendung zu ändern, bearbeiten Sie die Datei, die Sie unter src/client.imba .

Wenn die lokale Installation von Imba nicht zu Ihnen passt, können Sie die interaktive Online-Sandbox des Scrimba-Projekts verwenden.

Imba Leistung

Lassen Sie uns über die Leistung von in Imba geschriebenen Anwendungen sprechen. Der Grund, warum Sie mit Imba extrem schnelle Webanwendungen erstellen können, liegt darin, dass diese Sprache nicht das Virtual DOM-Konzept verwendet, das bei React sehr beliebt geworden ist. Imba verwendet die Memoized DOM-Technologie. Es ist einfacher als Virtual DOM und verwendet weniger Zwischenmechanismen für die Arbeit mit dem DOM.

In diesem Benchmark, den Sie zu Hause ausführen können, indem Sie einfach auf die Schaltfläche RUN BENCHMARK auf der Seite klicken, vergleichen wir die Anzahl der Vorgänge mit dem DOM, das während der Änderung der TODO-Liste mit Imba, React und Vue in einer Sekunde ausgeführt werden kann.

In dem Test, dessen Ergebnisse unten gezeigt werden, stellte sich heraus, dass Imba 20 bis 30 Mal schneller ist als React and Vue. Auf verschiedenen Computern variieren die Testergebnisse.


Imba-, React- und Vue-Leistungsmessungen

Wie Sie sehen können, bedeutet die Verwendung von Imba die Fähigkeit, extrem schnell mit dem DOM zu arbeiten.

Zusammenfassung

In diesem Artikel haben wir nur die Grundlagen von Imba behandelt. Wenn Sie an dieser Sprache interessiert sind, schauen Sie sich deren Dokumentation an . Insbesondere wird es nützlich sein, sein Konzept der Verwendung von Gettern und Setzern sowie den Mechanismus impliziter Aufrufe zu beherrschen. Hier ist eine Liste nützlicher Ressourcen im Zusammenhang mit Imba. Es sollte beachtet werden, dass diese Sprache zunächst schwierig erscheinen mag, es einige Zeit dauern wird, sie zu beherrschen, aber wie jeder weiß, kann man einen Fisch nicht einfach aus einem Teich holen.

Liebe Leser! Planen Sie, die Imba-Sprache in Ihren Projekten zu verwenden?