Imba: langage compatible JavaScript pour un travail rapide avec DOM

Imba est un langage de programmation open source créé par Scrimba spécifiquement pour développer des applications web. Il se compile en JavaScript et est capable de fonctionner au sein de l'écosystème JS existant. Nous parlons, par exemple, de Node.js, de npm, de Webpack.

La principale force d'Imba est que ce langage vous permettra de créer des applications beaucoup plus rapides que celles basées sur des bibliothèques utilisant la technologie Virtual DOM, comme React et Vue. Les gains de performances des applications sont obtenus grâce à la façon dont Imba fonctionne avec les mises à jour DOM. Des détails à ce sujet peuvent être trouvés ici .



L'auteur de ce document, co-fondateur du projet Scrimba, dit qu'il utilise Imba depuis plusieurs années. Selon lui, écrire dans ce langage est un vrai plaisir, car il a, par rapport à JavaScript, une syntaxe plus propre, ce qui améliore la lisibilité du code.

Ce matériel est un guide pour Imba pour les débutants, dont le développement vous permettra de commencer à créer des applications simples. Tout d'abord, les bases du langage seront révélées ici, puis le développement d'interfaces utilisateur avec son aide sera considéré. Il montrera immédiatement la configuration de l'environnement de développement pour la programmation sur Imba.

À propos des projets utilisant Imba

Avant d'entrer dans le code, je voudrais attirer votre attention sur le fait que Imba n'est pas quelque chose comme un autre langage étrange compilé en JS et utilisé exclusivement dans des projets amateurs. Il est également utilisé dans les applications sérieuses des grandes entreprises.

Un exemple de son application est la plate-forme qui soutient la criée aux poissons en Islande. Dans ce pays, le commerce du poisson représente environ 1,6% du PIB, soit environ 390 millions de dollars.


Ventes de poissons islandais

Un autre exemple est la plateforme de formation Scrimba.com , où Imba est utilisé sur les parties client et serveur du projet. La convivialité de cette plate-forme, basée sur une application complexe, dépend fortement de la capacité d'Imba à synchroniser rapidement les changements DOM.


Plateforme Scrimba.com

En conséquence, nous pouvons dire que la langue que vous rencontrerez aujourd'hui est appropriée pour développer des projets de différentes échelles.

Syntaxe

La syntaxe Imba ressemble beaucoup à JavaScript, mais d'autres langages comme Ruby et Python ont également un effet. Peut-être que les caractéristiques de syntaxe d'Imba seront commodément considérées comme un exemple. Ci-dessous se trouve une simple fonction JS qui renvoie le plus grand des deux nombres qui lui sont passés, ou, si ces nombres sont égaux, false .

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

Maintenant écrivez la même chose sur Imba.

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

En comparant probablement ces deux exemples, vous pouvez immédiatement voir les différences entre Imba et JavaScript. À savoir, ils sont les suivants:

1. function transforme en def . La function mot-clé function remplacée par le mot-clé def .
2. Manque de supports. Les paramètres de fonction ne sont pas placés entre parenthèses. En Imba, en fait, les parenthèses sont rarement nécessaires, bien que vous puissiez les utiliser si vous le souhaitez.
3. Indentation. L'indentation joue un rôle très important dans Imba. Cela signifie que les accolades ne sont pas nécessaires ici.
4. Mot clé de return manquant. Dans Imba, le retour de valeurs à partir de fonctions est effectué implicitement, c'est-à-dire qu'il n'y a pas besoin du mot-clé return . Imba renvoie automatiquement la dernière expression de fonction.

Cela ne veut pas dire que les fonctionnalités de syntaxe décrites ci-dessus sont l'aspect le plus important d'Imba, mais elles rendent le code plus concis qu'un code similaire écrit en JavaScript. Cet avantage deviendra plus visible à mesure que nous progressons dans le matériau.

Conception de l'interface utilisateur

Parlons de la création d'interfaces utilisateur à l'aide d'Imba. En fait, ce langage a été créé juste pour cela. En particulier, cela signifie que les nœuds DOM sont intégrés dans le langage sous la forme de soi-disant «objets de première classe».

Si vous avez de l'expérience avec le développement de React, vous pouvez considérer cette fonctionnalité d'Imba comme si Imba avait sa propre version de JSX intégrée dans le langage.

Considérez le code suivant, dans lequel la bibliothèque React est utilisée pour rendre un bouton et afficher un message à la console lorsque vous cliquez sur ce bouton.

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

Si vous réécrivez ceci sur Imba, vous obtenez ce qui suit.

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

Comparons ces deux extraits de code. À savoir, nous prêtons attention aux trois caractéristiques suivantes:

1. Balises en ligne. Notez que la construction de la class App extends React.Component été convertie en une forme beaucoup plus simple - la tag App . Le tag clé tag est intégré dans la langue. Les balises DOM sont également intégrées.
2. Manque de balises de fermeture. Étant donné que l'alignement des lignes détermine la structure du programme, vous n'avez pas besoin de fermer les balises (par exemple, en utilisant la </button> ). Cela accélère la saisie du texte du programme et réduit sa taille.
3. Syntaxe de classe simple. Imba simplifie le travail avec les classes HTML. A savoir, au lieu de la construction encombrante de className="container" il suffit d'ajouter .container à la balise elle-même.

Vous avez peut-être également remarqué des fonctionnalités des gestionnaires d'événements dans Imba. À savoir, nous connectons le gestionnaire correspondant au bouton en utilisant la construction :tap.logOut , utilisée à la place de onClick={this.logOut} . Ce n'est là qu'une des nombreuses façons de gérer les événements provenant de l'utilisateur. Des détails à ce sujet peuvent être trouvés ici .

Travailler avec des données

Parlons maintenant de l'utilisation des données dans Imba. L'exemple suivant montre une application React, dans l'état du composant App dont il existe une variable de count égale à 0. La valeur de cette variable diminue ou augmente en cliquant sur les boutons correspondants.

 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>   ) } } 

Voici à quoi cela ressemblera sur Imba.

 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> 

La première chose qui attire votre attention lorsque vous comparez ces deux exemples est la différence de quantité de code.

L'exemple Imba est environ deux fois plus court - à la fois en termes de nombre de lignes et de quantité de code.

Bien que la comparaison du nombre de lignes de code lors de la comparaison des langages de programmation ne soit pas si importante, elle affecte néanmoins la lisibilité du code qui, à l'échelle d'une certaine base de code, joue déjà un rôle. Moins de code sur Imba signifie une meilleure lisibilité par rapport à React.

Accès auto implicite

Vous avez peut-être remarqué que dans l'exemple ci-dessus, nous accédons directement à la variable d'instance de l'objet, en ne mentionnant que son count noms. Dans React, la même chose se fait en utilisant la construction this.state.count .

Dans notre exemple sur Imba, on pourrait également utiliser une construction de la forme self.count , cependant, self est accessible ici implicitement, donc self facultatif. Imba, lorsqu'il fait référence au count , découvre si une telle variable existe soit dans la portée, soit dans l'instance de l'application elle-même.

Mutabilité

Une autre différence majeure entre les deux exemples précédents est la façon dont ils implémentent le changement d'état. Dans un exemple écrit en Imba, l'état est modifiable, ce qui vous permet de modifier directement la valeur de la variable de count .

React adopte une approche différente, où la valeur de this.state considérée comme immuable, par conséquent la seule façon de le changer est d'utiliser this.setState .

Si vous préférez travailler avec un état immuable, vous pouvez utiliser la bibliothèque appropriée avec Imba. La langue Imba en ce sens n'est liée à aucune solution particulière. Nous, dans le projet Scrimba, utilisons un état mutable, car nous pensons que nous n'avons pas besoin des coûts excessifs des ressources système nécessaires pour garantir l'immunité.

Mise en place d'un environnement de développement

Maintenant que vous vous êtes familiarisé avec les bases d'Imba, il est temps d'expérimenter. Pour ce faire, vous devrez configurer l'environnement de développement. Pour ce faire, exécutez simplement les commandes suivantes.

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

Après cela, allez dans le navigateur à http://localhost:8080/ et vous verrez la page principale du projet. Pour modifier l'application - éditez le fichier, qui se trouve sur src/client.imba .

Si l'installation locale d'Imba ne vous convient pas, vous pouvez utiliser le sandbox interactif en ligne du projet Scrimba.

Imba Performance

Parlons des performances des applications écrites en Imba. La raison pour laquelle Imba vous permet de créer des applications Web extrêmement rapides est que ce langage n'utilise pas le concept Virtual DOM, qui est devenu très populaire avec React. Imba utilise la technologie DOM mémorisée. Il est plus simple que le DOM virtuel et utilise moins de mécanismes intermédiaires pour travailler avec le DOM.

Dans ce benchmark, que vous pouvez exécuter chez vous en cliquant simplement sur le bouton RUN BENCHMARK sur sa page, nous comparons le nombre d'opérations avec le DOM qui peuvent être effectuées en une seconde lors de la modification de la liste TODO en utilisant Imba, React et Vue.

Dans le test, dont les résultats sont présentés ci-dessous, il s'est avéré que Imba est 20 à 30 fois plus rapide que React et Vue. Sur différents ordinateurs, les résultats des tests varieront.


Mesures de performances Imba, React et Vue

Comme vous pouvez le voir, l'utilisation d'Imba signifie la possibilité de travailler extrêmement rapidement avec le DOM.

Résumé

Dans cet article, nous avons couvert uniquement les bases d'Imba. Si cette langue vous intéresse, consultez sa documentation . En particulier, il sera utile de maîtriser son concept d'utilisation des getters et setters et du mécanisme des appels implicites. Voici une liste de ressources utiles liées à Imba. Il convient de noter qu'au début, cette langue peut sembler difficile, il faudra un certain temps pour la maîtriser, mais, comme tout le monde le sait, vous ne pouvez pas facilement sortir un poisson d'un étang.

Chers lecteurs! Envisagez-vous d'utiliser la langue Imba dans vos projets?