X
Thierry Thaureaux / jeudi 16 novembre 2017 / Thèmes: Développement, Dossier

Mavo, nouveau langage simple pour le Web

La plate-forme open source Mavo, basée sur HTML, est capable de fournir des fonctionnalités de gestion de données sans nécessiter un serveur en back-end. Sa créatrice, Lea Verou, dirige une équipe au MIT (Massachusetts Institute of Technology).

Le langage Mavo a été conçu au MIT par une équipe dirigée par Lea Verou.

Mavo, quésako ?

Mavo est un outil permettant de transformer directement des scripts HTML statiques en applications Web « réactives », sans nécessiter de programmation ou de serveur en arrière-plan. Mavo peut notamment s’avérer très utile pour les designers non-développeurs souhaitant mettre en ligne rapidement et aisément des services web. Conçu au MIT par l’équipe de l’informaticienne Lea Verou, la plate-forme Mavo étend la syntaxe HTML afin d’écrire des applications web pouvant gérer des données stockées n’importe où, localement ou dans le Cloud.

Des plug-in peuvent être utilisés pour modifier son comportement. Leur nombre est encore faible, mais il devrait rapidement augmenter, suivant le succès effectif du langage.

Mavo est assez similaire à Angular JS, la version alternative du framework JavaScript de Google. Les deux reposent sur une syntaxe basée sur le HTML et des expressions de support. La différence entre les deux tient en ce que Angular n’a pas été conçu pour tout générer, au final, en HTML, au contraire de Mavo. « Angular JS traite le HTML comme un raccourci permettant de relier les données aux pages statiques, mais tout le reste doit être écrit en JavaScript », dixit cette chère Lea Verou. Mavo ne génère, lui, que du HTML avec des feuilles de style CSS. Les sites dynamiques construits en l’utilisant sont de fait plus faciles à maintenir puisqu’ils ne nécessitent pas l’emploi et donc la connaissance du langage Javascript.

Mavo est pourtant, en soi, une espèce de ressource Javascript dont le but est de permettre à tous les intégrateurs de développer un site dynamique et éditable sans connaître le fonctionnement de Javascript, PHP, MySQL ou d’une autre base de données. Il reste néanmoins cantonné à la création de sites web simples. Pas question de réaliser avec lui des portails complexes en termes de fonctionnalités, mais pour cela les outils ne manquent pas, le langage Java restant sans doute le plus adapté pour ce type de besoin.

Le site de Mavo, exemplaire de point de vue open source, déborde de ressources diverses sur ce nouveau langage.

Mavo vous séduira notamment si vous voulez :

• créer un site web destiné à être maintenu par un public non technique, ce directement via le navigateur ;

• créer un site web qui présente une collection d’items éditable, comme un portfolio ;

• télécharger des images vers un site web que vous avez créé, directement à partir du navigateur ;

• créer une application pour suivre et/ou partager un aspect de votre vie, à la mode Facebook, tel qu’un blog perso ;

• créer un site web qui permet à des personnes tierces de faire des suggestions d’éditions de vos données ;

• créer une application qui calcule quelque chose et présente les résultats de manière personnalisée, un peu en mode tableur.

Créer un site avec Mavo

Le fonctionnement de Mavo est extrêmement simple. Commencez par télécharger et/ou relier les fichiers JS et CSS (un de chaque) fournis par Mavo depuis https://mavo.io. Incluez-les ensuite avec les pages de votre site. Pour ce faire, les lignes suivantes doivent être ajoutées :

<head>
.....
<link rel=’styesheet* href="https://get.mavo.io/mavo.css"/><br/>
<script src=’https://get.mavo.io/mavo.js’></script><br/>
.....
<\head>

Déclarez votre application grâce à quelques arguments HTML très simples et paramétrez la en lui définissant un nom et une méthode de stockage pour les informations éditables. Votre application est déjà faite, il ne reste plus qu’à en créer les premiers éléments. Ils seront en HTML « pur ». Ajoutez leur simplement l’attribut HTML « property ».

Vous trouverez la liste de tous les attributs et classes Mavo à l'adresse https://mavo.io/docs.

Définir une app Mavo : l’attribut mv-app

Une fonctionnalité Mavo est rendue disponible dans une structure HTML grâce à l’attribut mv-app. Sa valeur est un nom pour votre application et celui-ci est utilisé par Mavo à plusieurs endroits. Le nom doit être unique sur la page, comme une id. L’élément associé à cet attribut est appelé la racine (root) Mavo. En voici un exemple :

<div mv-app="mavoTest">
Ma premiere app Mavo !
</div>
Clear
Ma premiere app Mavo !

Notez que la mv-app ne fait pas grand-chose en soi. Vous devez concrètement avoir recours aux attributs Mavo. L’attribut mv-app peut être utilisé avec ou sans valeur. Si l’élément a déjà un id, il n’est pas nécessaire de le répéter dans l’attribut mv-app :


<div mv-app id="mavoTest">
Ma premiere app Mavo !
</div>

Si vous utilisez mv-app sans valeur et qu’il n’y a ni id ni attribut de nom dans la racine Mavo, des noms tels que mavo1, mavo2, et ainsi de suite, seront générés automatiquement. Comme les noms générés dépendent de l’ordre des apps Mavo citées dans la page, si vous changez cet ordre, ces noms changeront également, ce qui pourrait conduire à des pertes de données. Il est, par conséquent, plus que recommandé de nommer spécifiquement vos apps Mavo pour éviter ce genre de déboires.

L’attribut mv-storage

L’attribut mv-storage indique à Mavo où stocker les données de votre site. Sa valeur est une URL valide ou un mot-clef tel que "local", comme ci-dessous :

<div mv-app="stockageTest"
mv-storage="local">
Ma premiere app Mavo !
</div>


Quelles données seront stockées ? Les éléments avec un attribut property. Nous allons voir ci-dessous de quoi il s’agit.

L’attribut property

L’attribut property (cf https://mavo.io/docs/primer/#property) indique à Mavo quels sont les éléments qui doivent être enregistrés. Sa valeur doit décrire l’élément, comme un id ou un attribut de classe. Voici un exemple d’utilisation de cet attribut :

<div mv-app="commentform" mv-storage="local" mv-autosave="0">
<label>
Email:
<input type="email" property="email" value="thierry.thaureaux@free.fr" />
</label>
<label>
Message:
<textarea property="message">
Editez le formulaire et notez comment les valeurs perdurent
après rafraichissement
</textarea>
</label>
</div>

Si l’attribut property est utilisé sur des éléments qui ne sont pas contenus dans des formulaires, ils peuvent alors être édités et Mavo génère des contrôles personnalisés permettant de passer du mode édition au mode lecture, comme dans l’exemple suivant :

<div mv-app="nomDemo" mv-storage="local">
Nom :
<span property="prenom">Thierry</span>
<span property="nom">Thaureaux</span>
</div>
EditSaveClear
Nom : Thierry Thaureaux

Liste simple

Hobbies:
<ul>
<li property="hobby" mv-multiple>Manger</li>
</ul>
EditSaveClear
Hobbies:
• Manger


L’attribut mv-multiple porte sur l’élément qui peut être démultiplié, et non sur le container global de la collection. Vous pouvez utiliser les attributs property et mv-multiple afin de créer des listes de structures plus complexes avec des propriétés multiples.

Listes complexes

<article property="famille" mv-multiple>
<h1 property="nom">Tristan </h1>
Né le
<time property="anniversaire" datetime="1995-11-17">17 novembre 1995</time>
</article>
EditSaveClear
Tristan
Né le 17 novembre 1995


Notez que dans l’exemple ci-dessus, ce n’est pas l’attribut property posé sur

qui rend l’ensemble de cet élément éditable. Il sert en fait d’élément de regroupement. Cela se produira systématiquement lorsque vous employez l’attribut property sur des éléments composés d’autres propriétés. Les groupes possèdent de nombreuses caractéristiques intéressantes lorsqu’elles sont combinées avec des expressions. Vous pouvez faire dynamiquement référence à la valeur de chaque propriété (attribut property) que vous avez définie n’importe où dans votre application Mavo simplement en spécifiant son nom entre crochets : [nomPropriété]. En voici un exemple :

 

Déplacez le curseur du slider et vérifiez de quelle manière les deux expressions sont mises à jour :

<p>Valeur du curseur du slider : [intensite]/100</p>
<input type="intervalle" property=" intensite" title="[ intensite]%" />
SaveClear
Valeur du curseur du slider : 50/100


Vous pouvez aussi faire un peu de maths en appliquant des propriétés, comme une division par 100, par exemple : déplacez le curseur du slider et vérifiez de quelle manière les deux expressions ont été mises à jour :

<p> Valeur du curseur du slider : [intensite/100]</p>
<input type="intervalle" property=" intensite" title="[ intensite]%" />
SaveClear
Valeur du curseur du slider : 0.5

Si vous définissez un attribut property sur un élément contenant une expression, vous pouvez aussi utiliser cette propriété dans d’autres expressions, sans vous préoccuper de les placer avant ou après l’élément. Il y a aussi plusieurs fonctions mathématiques (cf https://mavo.io/docs/mavoscript/#math-functions) que vous pouvez utiliser pour des tâches plus complexes, de types fonctions / expressions de tableurs. Les expressions deviennent très puissantes lorsqu’elles sont combinées avec les listes. Vous pouvez par exemple ajouter et supprimer des items dans la liste ci-dessous :

[count(hobby)] hobbies:
<ul>
<li property="hobby" mv-multiple>Manger</li>
</ul>
EditSaveClear
1 hobbies:
• Manger

Il existe déjà quelques fonctions mathématiques disponibles, consultables à l'adresse https://mavo.io/docs/mavoscript/#math-functions.


STOCKAGE

Mavo étant une ressource open source gratuite et non un service, les données de vos sites doivent être hébergées à part, à votre discrétion. Tout d’abord, il est possible d’héberger les données en local storage, c’est même le mode par défaut proposé si vous ne configurez pas l’emplacement de stockage de votre application. Malheureusement, comme vous pouvez vous en douter, cette solution n’est pas du tout applicable pour une solution publique, comme un portfolio ou un site vitrine. Si vous avez envie que les données entrées sur le site soient visibles par tout le monde, il est possible de les héberger gratuitement sur Github ou Dropbox, entre autres, ou sur le dépôt de votre choix. Cela se fait presque automatiquement et ne vous demande pas une grande connaissance du mode de fonctionnement des plates-formes concernées. Vous n’aurez pratiquement aucune action supplémentaire à effectuer, si ce n’est de créer un compte sur la plate-forme choisie. Pour une liste complète des arguments et moyens de stockage à votre disposition, consultez la partie dédiée de la documentation à l’adresse https://mavo.io/docs/storage/.


COLLECTIONS : l’attribut mv-multiple

Prenons comme exemple une liste de hobbies que vous souhaitez rendre éditables. Nous pouvons ajouter des attributs property à chaque item :

Hobbies:
<ul>
<li property="hobby">Manger</li>
<li property="hobby">Dormir</li>
<li property="hobby">Flâner</li>
</ul>
EditSaveClear
Hobbies:
• Manger
• Dormir
• Flâner

Cela fonctionne, certes, mais nous ne pouvons pas ajouter de nouveaux hobbies ni en supprimer parmi ceux existants. Pour ce faire, nous devons utiliser l’attribut mv-multiple.

3087

x
Rechercher dans les dossiers

Actuellement à la Une...
Rejeté, Xerox change de ton face à HP Inc et pose un ultimatum. Si au 25 novembre le constructeur n’a pas accepté une discussion « amicale » ni fourni les informations exigées par Xerox, ce dernier lancera une OPA hostile sur le géant.

La jeune pousse française spécialisée dans les assistants vocaux vient d'être rachetée pour moins de 40 millions de dollars par le géant des enceintes audio Sonos, qui s'empare principalement de la propriété intellectuelle de Snips et de son équipe d'ingénieurs.

Spécialiste des bons de réduction et autres promotions en ligne, Honey tombe dans l'escarcelle de PayPal, qui débourse quelque 4 milliards de dollars dans l'opération. L'outil fournira une couche de services supplémentaires aux utilisateurs de PayPal, aussi bien les consommateurs que les commerçants.

Les frictions entre l’Arcep et Bercy quant au prix d’ouverture des enchères et au nombre de blocs à mettre en vente retardent le processus d’attribution des fréquences 5G, probablement à mars prochain. Par ricochet, c’est l’ensemble du calendrier de déploiement et de lancement des offres commerciales qui se trouvent décalées.

Les utilisateurs ayant téléchargé le portefeuille Monero lundi ont en réalité installé un logiciel malveillant exfiltrant la monnaie virtuelle des comptes des utilisateurs infectés. L’équipe de Monero mène l’enquête quant à la manière dont ce binaire s’est retrouvé sur son site web.

A chaque jour sa nouvelle faille. Facebook rapporte avoir patché une vulnérabilité permettant l’exécution de code à distance par l’envoi, à un utilisateur, d’un fichier MP4 vérolé.

La plate-forme d’intégration acquise par Salesforce continue son évolution vers plus de simplicité d’usage en démocratisant les pré-configurations.

Récemment Decathlon s’est réinstallé aux USA. L’entreprise est revenue avec un œil neuf et de nouvelles idées dans ses magasins de San Francisco et de Montréal pour réinventer le système informatique de l’entreprise. Le maître mot de cette réinvention : API avec l’aide de Mulesoft, la plate-forme d'intégration d’applications de Salesforce.

Rien ne change avec ce rachat. Partenaire de Google depuis juillet dernier, CloudSimple permettait déjà la migration et l'exécution de charges de travail VMware sur GCP. Seule inconnue, la compatibilité avec Azure sera-t-elle conservée ?

Le CEO de l'opérateur américain cédera sa place au printemps prochain. Lui succèdera Mike Sievert, actuel COO mais aussi Président de T-Mobile, alors que le processus de fusion avec Sprint s'est enlisé.

Toutes les News
LIVRES BLANCS
Les entreprises et les organismes publics se focalisent aujourd’hui sur la transformation numérique. En conséquence, les DevOps et l’agilité sont au premier plan des discussions autour des stratégies informatiques. Pour offrir ces deux avantages, les entreprises travaillent de plus en plus avec les fournisseurs de services de cloud public et développent désormais des clouds sur site à partir d’une infrastructure qui répond à trois exigences de base:
1. Agilité sans friction des ressources physiques
2. Systèmes de contrôle optimisant l'utilisation des ressources physiques et offrant un retour sur investissement maximal
3. Intégration des divers composants de l'infrastructure pour un provisionnement et une gestion des ressources automatisés.


Pour fonctionner, votre entreprise doit pouvoir compter sur une solution de sauvegarde efficace, essentielle dans un monde marqué par une croissance exponentielle des données. Vous devez à la fois accélérer vos sauvegardes et pouvoir y accéder plus rapidement pour satisfaire les exigences actuelles de continuité d’activité, disponibilité, protection des données et conformité réglementaire. Dans cette ère de croissance effrénée, les cibles sur bande hors site et autres approches traditionnelles sont simplement dépassées.


L’Intelligence Artificielle promet de révolutionner la perception de la cybersécurité au coeur des entreprises, mais pas uniquement. Ce changement de paradigme engage, en effet, une redéfinition complète des règles du jeu pour les DSI et les RSSI, ainsi que l’ensemble des acteurs de la sécurité.


Lorsque l'on déploie des postes de travail, ils ont généralement tous la même configuration matérielle et logicielle (avec certaines spécificités selon les services). Mais on ne peut pas toujours tout prévoir et il arrive par exemple que de nouveaux programmes doivent être installés ou n’aient pas été prévus. L’accumulation de logiciels « lourds » est susceptible de provoquer des lenteurs significatives sur un PC allant jusqu’à l’extinction nette de l’application. Ce livre blanc explique comment optimiser les performances au travers de 5 conseils rapides à mettre en place.


Ce guide est conçu pour aider les entreprises à évaluer les solutions de sécurité des terminaux. Il peut être utilisé par les membres de l'équipe de réponse aux incidents et des opérations de sécurité travaillant avec des outils de sécurité des points finaux sur une base quotidienne. Il peut également être utilisé par les responsables informatiques, les professionnels de la sécurité, les responsables de la conformité et d’autres personnes pour évaluer leurs performances. les capacités de l’entreprise en matière de cybersécurité, identifier les lacunes dans la sécurité des terminaux et sélectionner les bons produits pour combler ces lacunes.


Tous les Livres Blancs