🔂 🛋️ 👍🏿 Premiers pas avec Moon.js 🧑🏽‍🤝‍🧑🏻 🎷 🧗🏽

Aujourd'hui, nous allons parler de la prochaine bibliothèque JavaScript pour développer des interfaces. On a le sentiment que de telles bibliothèques apparaissent de plus en plus souvent. Dans cet article, nous allons examiner la bibliothèque Moon.js et révéler ses fonctionnalités que vous devez connaître pour commencer à travailler avec elle. En particulier, nous parlerons de la création de nouveaux projets Moon.js, de la création d'éléments d'interface, de la gestion des événements. Avec ce tutoriel, vous pouvez utiliser Moon.js pour développer vos propres applications.

Bibliothèque Moon.js

Moon.js est une bibliothèque JavaScript minimaliste pour développer des interfaces rapides et fonctionnelles. Il a une taille relativement petite, ce qui permet de créer des applications assez compactes sur sa base. La bibliothèque a de très hautes performances

Moon.js adopte une approche basée sur les composants pour la conception d'interfaces. Les modèles sont utilisés pour créer des composants. Cette bibliothèque est assez similaire à Vue.js.

Les atouts de Moon.js

Moon.js est de taille compacte (il est réduit et compressé d'environ 2 Ko). C'est plus petit que la taille des autres bibliothèques et frameworks comme React et Angular.
Cette bibliothèque se distingue par sa grande vitesse d'interface de rendu.
Moon.js est une bibliothèque basée sur des techniques de développement fonctionnel. Lorsque vous travaillez avec lui, une approche de la conception d'interface est utilisée, basée sur les soi-disant «pilotes».

Début des travaux

La bibliothèque Moon.js peut être incluse dans un projet de deux manières. La première consiste à l'installer à partir de NPM. La seconde consiste à le connecter directement à la page sur laquelle il est prévu d'être utilisé.

Si vous décidez d'utiliser la version NPM de la bibliothèque, vous devez d'abord installer le package moon-cli, l'outil de ligne de commande:

$ npm i moon-cli -g

Dans cet exemple, cet outil est installé globalement, vous pouvez l'appeler depuis n'importe quel répertoire.

Pour créer un projet basé sur Moon.js, vous pouvez exécuter la commande suivante:

$ moon create moon-prj

Cette commande crée un nouveau projet dans un dossier moon-prj. Une fois la création du projet terminée, vous aurez à votre disposition les fondations de la future application.

La deuxième option pour utiliser Moon.js consiste à le connecter à la page sur laquelle vous prévoyez de l'utiliser. La bibliothèque dispose d'un module moon-browserqui vous permet d'utiliser ses capacités directement sur la page à laquelle elle est connectée.

Donc, pour connecter la bibliothèque à la page, nous devons inclure les deux balises suivantes dans la page:

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

Comme vous pouvez le voir, les scripts correspondants sont chargés à partir du CDN unpkg. La première balise importe la bibliothèque principale. Le second est la bibliothèque moon-browser. Elle est chargée de compiler les modèles Moon.js, de les convertir en une forme adaptée à l'affichage par le navigateur.

Maintenant, pour utiliser la syntaxe Moon.js sur la page, vous devrez les inclure dans la balise <script>, sans oublier de définir son attribut typecomme text/moon.

<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>

Connexion de l'application Moon.js à la page

Moon.js, comme d'autres bibliothèques et frameworks utilisés pour créer des applications d'une seule page, se connecte à un élément de page spécifique. Habituellement, un élément joue le rôle de conteneur pour une application Moon.js <div>:

<div id="root"></div>

Un élément similaire, qui est l'élément racine de l'application Moon.js, est placé dans le code du fichier index.htmlqui est le point d'entrée du projet.

Un pilote est utilisé pour connecter une application Moon.js à cet élément view(ci-dessous nous parlerons des pilotes plus en détail):

Moon.use({
    view: Moon.view.driver("#root")
})

Cette construction indique à la bibliothèque qu'elle doit connecter l'application à l'élément avec l'identificateur root. Si nécessaire, vous pouvez spécifier un élément similaire à la bibliothèque à l'aide de l'API du navigateur conçue pour travailler avec le DOM:

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

Parlons maintenant de l'organisation de la manipulation des données dans Moon.js et de la création d'éléments d'interface à l'aide de cette bibliothèque.

Syntaxe pour décrire les éléments d'interface

Pour décrire les interfaces Moon.js, le langage de programmation Moon View Language (MVL) est utilisé, qui a été développé spécifiquement pour résoudre ce problème. Cela ressemble à JSX. Ce langage est utilisé pour décrire les éléments et personnaliser leurs relations. Voici un exemple:

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

Il est facile de voir que ce morceau de Moon.js, qui est responsable du rendu de l'élément <div>, utilise des structures de syntaxe qui ressemblent à du HTML. Mais ces structures sont utilisées dans le code JavaScript. Le navigateur ne sera pas en mesure d'exécuter un tel code JavaScript, mais ce n'est pas nécessaire, car Moon.js compile ces constructions en JavaScript ordinaire.

Travailler avec des données

Moon.js utilise le concept de pilotes pour contrôler la présentation visuelle des éléments et travailler avec des données. Ici, nous allons examiner le pilote qui nous permet de travailler avec des données, et dans la section suivante, nous parlerons du pilote pour travailler avec des éléments d'interface.

Un pilote de données est chargé de stocker les données d'application et de permettre aux données d'être utilisées là où elles sont nécessaires. En d'autres termes, ce pilote stocke l'état global de l'application.

Vous pouvez définir les données initiales de l'application Moon.js à l'aide de l'API Moon.use:

Moon.use({
    data: Moon.data.driver
})

Vous pouvez écrire de nouvelles données dans les états en les renvoyant à partir des fonctions correspondantes:

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

L'API Moon.runest responsable du lancement de l'application. Le rappel passé à cette API reçoit une référence aux données globales en tant qu'argument data. Étant donné qu'au moment de l'appel de cette fonction, il datan'y a encore rien dedans, la commande console.logde cet exemple sera sortie undefined.

Nous renvoyons du rappel un objet qui a une propriété dataavec une valeur Nnamdi. Cet objet représentera un nouvel état de l'application, dont les données peuvent être utilisées par toutes les autres fonctions qui appellent data.

Nous avons examiné le mécanisme de travail avec les données dans Moon.js. Parlons maintenant plus en détail de l'utilisation des éléments d'interface.

Travailler avec des éléments d'interface

Moon.js a un pilote viewpour créer des éléments et les monter dans le DOM.

Nous avons déjà examiné l'extrait de code répété ci-dessous, dans lequel l'élément de <div>base Moon.js est connecté à l'élément:

Moon.use({
    view: Moon.view.driver("#root")
})

C'est là que l'élément est monté. Les fonctions peuvent désormais renvoyer des éléments capables de remplacer d'anciens éléments. Ils peuvent être représentés sous la forme d'objets contenant une propriété viewdans laquelle les données correspondantes sont écrites. La bibliothèque prend la valeur viewde propriété de l'objet retourné par la fonction et l'écrit dans l'élément connecté à l'élément avec l'identifiant root.

Moon.js utilise le concept de DOM virtuel et un algorithme puissant pour comparer les anciennes et les nouvelles versions d'interface. Cela permet à la bibliothèque de décider du moment où mettre à jour le DOM et quelles parties du DOM doivent être mises à jour.

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

Ici, le callback transmis Moon.runsort le bouton vers le DOM. Cela est dû au fait que la fonction renvoie un objet avec une propriété view. La valeur attribuée à cette propriété va dans le DOM.

Le bouton a un gestionnaire d'événements click, représenté par une fonction handleClick. Cette fonction renvoie un objet vide, l'appeler ne change pas le DOM.

Créer des éléments

Moon.js fournit au développeur un grand ensemble de fonctions d'aide pour créer des éléments d'interface. En conséquence, il s'avère que les éléments peuvent être créés en utilisant non pas le langage de description d'interface Moon.js, mais les fonctions correspondantes:

const { div, text, node, p } = Moon.view.m

Moon.js exporte les fonctions dont les noms correspondent aux noms des éléments qu'ils créent. Ainsi, la fonction divvous permet de créer des éléments <div>. La fonction textcrée des nœuds de texte. La fonction nodevous permet de créer des éléments personnalisés. La fonction pcrée des éléments <p>. Comme vous pouvez le voir, les noms de ces fonctions indiquent clairement leur objectif.

Créons un élément <div>:

const Div = div({});

Vous pouvez attribuer des attributs aux éléments en passant un objet avec des propriétés à la fonction correspondante:

const Div = div({
    class: "DivClass"
});

Ici, nous avons décrit l'élément <div>, dans l'attribut classdont la valeur doit être écrite DivClass.

Voici comment créer un élément de texte:

const Text = text({ data: "A text node" });

La propriété de l' dataobjet passé à la fonction textcontient le texte de l'élément.

Créons un élément personnalisé:

const CustomEl = node("custom-el");

Pour attribuer un attribut à cet élément, vous pouvez effectuer les opérations suivantes:

CustomEl({ "attr": "attr-value"})

Développements

Vous pouvez attacher des gestionnaires d'événements aux éléments à l'aide d'une construction qui utilise un symbole @:

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

En conséquence, un bouton avec du texte sera affiché sur la page Click Me, en cliquant sur lequel la fonction sera appelée handleClick.

Composants

Dans Moon.js, les fonctions sont des composants. Cela signifie que les fonctions peuvent être mentionnées dans la description des éléments d'interface. Ce que la fonction renvoie sera inclus dans l'élément.

Supposons que nous ayons une fonction comme celle-ci:

function aView({ data }) {
    return <div>A View</div>
}

Cette fonction ,, aViewrenvoie un élément qui peut être rendu:

Moon.run(() => {
    view: <div><aView /></div>
})

Le nom de la fonction est utilisé dans cet exemple comme nom d'élément. À la suite de l'exécution de ce code, il s'avère que ce que la fonction retourne sera placé dans la balise <div>. Lorsque tout cela est dans le DOM, il y aura un balisage comme celui-ci:

<div>
    <div>A View</div>
</div>

Développement d'applications basées sur Moon.js

Afin de rassembler tout ce dont nous venons de parler, créons une simple application TODO dans Moon.js. Ici, nous utiliserons l' exemple correspondant , qui a été préparé par les développeurs de Moon.js.

Je tiens à vous rappeler qu'il est recommandé, tout en maîtrisant de nouvelles bibliothèques et frameworks, de créer de petites applications avec leur aide. Cela vous permet d'accélérer l'apprentissage et vous aide à comprendre les fonctionnalités des outils étudiés. Au début, nous parlons de leurs fondements, mais avec le temps, une compréhension de mécanismes plus complexes vient.

Voici à quoi ressemble la page de cette application.

Page d' application La page a un titre, un champ, un bouton et une liste de tâches, qui peuvent être reconstitués en entrant leurs descriptions dans le champ et en cliquant sur le bouton.

Commençons par créer un fichierindex.html. Ici, nous connectons Moon.js directement à la page:

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

La fonction viewTodosaffiche les éléments nécessaires pour saisir des informations sur les nouveaux cas et les afficher dans une liste. Ses arguments sont dataet view.

La fonction createTodocrée un nouveau cas et le renvoie dans la propriété de l' dataobjet qu'elle renvoie.

La fonction updateTodoécrit un nouveau cas dans l'état de l'application.

Faites attention aux gestionnaires d'événements @clicket @inputqui sont dans la fonction viewTodos. L'événement @inputest déclenché lorsque vous saisissez un texte décrivant le cas dans le champ approprié. Lorsque cet événement est traité, une fonction est appelée updateTodo. Argumentviewdans cette fonction représente l'événement qui s'est produit. En l'utilisant, nous accédons au DOM et récupérons les données saisies dans le champ. Ces données entrent alors dans l'état en tant que propriété todo.

L'événement @clickest appelé après avoir cliqué sur le bouton. Il enregistre une nouvelle liste de tâches. La fonction est utilisée pour résoudre ce problème createTodo. Cette fonction accède à la propriété state todoet écrit de nouvelles données dans la propriété todos, après quoi, dans la propriété de l' viewobjet qui lui est renvoyé, elle retourne l'élément <viewTodos>représenté par la fonction correspondante, dans l'attribut datadont la valeur est écrite dataNew.

Cela rendra viewTodoset mettra à jour le DOM. Une nouvelle tâche sera ajoutée à la liste des tâches affichée sur la page.

Exécutez cette application dans votre navigateur et testez-la.

Résultat

Nous avons couvert les bases de Moon.js. À savoir, nous avons parlé du fait que vous pouvez utiliser la bibliothèque en l'installant à partir de NPM et en la connectant directement aux pages. Ensuite, nous avons discuté des mécanismes internes de la bibliothèque: travailler avec les données, gérer les événements, développer des composants.

Moon.js semble être une belle bibliothèque. Et, même si je ne parle pas de ses autres avantages, je l'aime à cause de sa taille compacte.

Avez-vous utilisé Moon.js?

Premiers pas avec Moon.js