Moon.js est une bibliothèque JavaScript minimaliste permettant de créer une interface utilisateur rapide et fonctionnelle. Encore un autre framework JavaScript sur le bloc. Il semble que ces cadres soient produits à un rythme toujours plus rapide.

Nous allons apprendre à échafauder un projet Moon.js, configurer un projet de base, des vues, des données, des événements d’entrée et de sortie dans Moon.js, essentiellement tout ce dont vous aurez besoin pour commencer avec le nouveau cadre.

Moon.js a une taille de fichier relativement petite, ce qui donne aux applications un faible encombrement et des performances incroyablement rapides. Moon.js incarne l’approche de conception axée sur les composants et utilise des modèles pour créer des composants. Il est assez similaire à Vue.

Avantages de l’utilisation de Moon.js

• Moon.js a une petite taille de fichier (2 Ko minifiés + gzip) de plus que les grands React, Angular, etc.
• Moon.js offre des performances de rendu de vue incroyablement rapides.
• Moon.js est purement fonctionnel et a une conception basée sur le pilote.

Astuce: partagez vos composants réutilisables entre projets à l’aide de Bit (Github). Bit simplifie le partage, la documentation et l’organisation des composants indépendants de n’importe quel projet.

Utilisez-le pour optimiser la réutilisation du code, collaborer sur des composants indépendants et créer des applications évolutives. Bit prend en charge Node, TypeScript, React, Vue, Angular, etc.

Installation

Moon peut être utilisé directement depuis le navigateur ou via NPM.

• Via NPM

Pour utiliser Moon via NPM, nous installerons son outil CLI: moon-cli.



moon-cli est installé globalement dans notre système et peut être utilisé à partir de n’importe quel répertoire. Pour créer un projet Moon, nous exécutons la commande ci-dessous:



Cela créera un projet Moon dans le dossier moon-prj. Avec cela, vous êtes prêt à créer votre prochaine application d’un milliard d’utilisateurs avec Moon.js.

• Depuis le navigateur

Nous pouvons également intégrer Moon dans notre navigateur dans la balise script. Moon dispose d’un module de navigateur Moon qui nous permet d’utiliser la langue de Moon View depuis le navigateur.

Pour activer l’utilisation du navigateur Moon, nous devons ajouter deux balises de script dans notre HTML.



Les scripts proviennent du CDN de unpkg. La première balise de script importe la bibliothèque principale Moon et le second script importe la bibliothèque Moon Browser, c’est le compilateur de syntaxe de la vue Moon pour le navigateur, c’est ce qui nous permet d’écrire les vues Moon dans le navigateur.

Maintenant, lors de l’écriture du langage Moon View dans le navigateur, nous devons utiliser la balise script à coup sûr et ajouter le type de script comme « text/moon »

Montage

Tout comme les autres SPA, une application Moon est montée sur un seul élément. Nous utilisons généralement l’élément div.

L’application Moon entière sera placée / montée dans l’élément racine div #. Cet élément div # est placé dans un index.html qui sera la page HTML par défaut / index de l’application.

Pour monter une application Moon sur la racine div #, nous utilisons le pilote de vue.

Cela indique à Moon de monter notre application sur le nœud racine div #. Nous pouvons utiliser les API DOM pour référencer le nœud racine.

Rendez-nous visite régulièrement pour le reste des explications sur moon.js et d’autres sujets.