Ma­vo : un nou­veau lan­gage simple pour le Web

Un nou­veau lan­gage simple pour le Web

L'Informaticien - - SOMMAIRE - THIER­RY THAU­REAUX

Ma­vo, qué­sa­ko ?

Ma­vo est un ou­til per­met­tant de trans­for­mer di­rec­te­ment des scripts HTML sta­tiques en ap­pli­ca­tions Web « ré­ac­tives » , sans né­ces­si­ter de pro­gram­ma­tion ou de ser­veur en ar­riè­re­plan. Ma­vo peut no­tam­ment s’avé­rer très utile pour les de­si­gners non- dé­ve­lop­peurs sou­hai­tant mettre en ligne ra­pi­de­ment et ai­sé­ment des ser­vices web. Conçu au MIT par l’équipe de l’in­for­ma­ti­cienne Lea Ve­rou, la plate- forme Ma­vo étend la syn­taxe HTML afin d’écrire des ap­pli­ca­tions web pou­vant gé­rer des don­nées sto­ckées n’im­porte où, lo­ca­le­ment ou dans le Cloud. Des plug- in peuvent être uti­li­sés pour mo­di­fier son com­por­te­ment. Leur nombre est en­core faible, mais il de­vrait ra­pi­de­ment aug­men­ter, sui­vant le suc­cès ef­fec­tif du lan­gage. Ma­vo est as­sez si­mi­laire à An­gu­lar JS, la ver­sion al­ter­na­tive du fra­me­work Ja­vaS­cript de Google. Les deux re­posent sur une syn­taxe ba­sée sur le HTML et des ex­pres­sions de sup­port. La dif­fé­rence entre les deux tient en ce que An­gu­lar n’a pas été conçu pour tout gé­né­rer, au fi­nal, en HTML, au contraire de Ma­vo. « An­gu­lar JS traite le HTML comme un rac­cour­ci per­met­tant de re­lier les don­nées aux pages sta­tiques, mais tout le reste doit être écrit en Ja­vaS­cript » , dixit cette chère Lea Ve­rou. Ma­vo ne gé­nère, lui, que du HTML avec des feuilles de style CSS. Les sites dy­na­miques construits en l’uti­li­sant sont de fait plus fa­ciles à main­te­nir puis­qu’ils ne né­ces­sitent pas l’em­ploi et donc la connais­sance du lan­gage Ja­vas­cript. Ma­vo est pour­tant, en soi, une es­pèce de res­source Ja­vas­cript dont le but est de per­mettre à tous les in­té­gra­teurs de

dé­ve­lop­per un site dynamique et édi­table sans connaître le fonc­tion­ne­ment de Ja­vas­cript, PHP, MySQL ou d’une autre base de don­nées. Il reste néan­moins can­ton­né à la créa­tion de sites web simples. Pas ques­tion de réa­li­ser avec lui des por­tails com­plexes en termes de fonc­tion­na­li­tés, mais pour ce­la les ou­tils ne manquent pas, le lan­gage Ja­va res­tant sans doute le plus adap­té pour ce type de be­soin. Ma­vo vous sé­dui­ra no­tam­ment si vous vou­lez : • créer un site web des­ti­né à être main­te­nu par un pu­blic non tech­nique, ce di­rec­te­ment via le na­vi­ga­teur ; • créer un site web qui pré­sente une col­lec­tion d’items édi­table, comme un port­fo­lio ; • té­lé­char­ger des images vers un site web que vous avez créé, di­rec­te­ment à par­tir du na­vi­ga­teur ; • créer une ap­pli­ca­tion pour suivre et/ ou par­ta­ger un as­pect de votre vie, à la mode Fa­ce­book, tel qu’un blog per­so ; • créer un site web qui per­met à des per­sonnes tierces de faire des sug­ges­tions d’édi­tions de vos don­nées ; • créer une ap­pli­ca­tion qui cal­cule quelque chose et pré­sente les ré­sul­tats de ma­nière per­son­na­li­sée, un peu en mode ta­bleur.

Créer un site avec Ma­vo

Le fonc­tion­ne­ment de Ma­vo est ext rê­me­ment simple. Com­men­cez par té­lé­char­ger et/ ou re­lier les fi­chiers JS et CSS ( un de chaque) four­nis par Ma­vo de­puis https:// ma­vo. io. In­cluez- les en­suite avec les pages de votre site. Pour ce faire, les lignes sui­vantes doivent être ajou­tées : < head> ..... < link rel=’ stye­sheet* href=" https:// get. ma­vo. io/ ma­vo. css"/> < script src=’ https:// get. ma­vo. io/ ma­vo. js’></ script> ..... <\ head > Dé­cla­rez votre ap­pli­ca­tion grâce à quelques ar­gu­ments HTML très simples et pa­ra­mé­trez la en lui dé­fi­nis­sant un nom et une mé­thode de sto­ckage pour les in­for­ma­tions édi­tables. Votre ap­pli­ca­tion est dé­jà faite, il ne reste plus qu’à en créer les pre­miers élé­ments. Ils se­ront en HTML « pur » . Ajou­tez leur sim­ple­ment l’at­tri­but HTML « pro­per­ty » .

Dé­fi­nir une app Ma­vo : l’at­tri­but mv- app

Une fonc­tion­na­li­té Ma­vo est ren­due dis­po­nible dans une struc­ture HTML grâce à l’at­tri­but mv- app. Sa valeur est un nom pour votre ap­pli­ca­tion et ce­lui- ci est uti­li­sé par Ma­vo à plu­sieurs en­droits. Le nom doit être unique sur la page, comme une id. L’élé­ment as­so­cié à cet at­tri­but est ap­pe­lé la ra­cine ( root) Ma­vo. En voi­ci un exemple : < div mv- app=" ma­voTest"> Ma pre­miere app Ma­vo ! </ div> Clear Ma pre­miere app Ma­vo !

No­tez que la mv- app ne fait pas grand- chose en soi. Vous de­vez concrè­te­ment avoir re­cours aux at­tri­buts Ma­vo. L’at­tri­but mv- app peut être uti­li­sé avec ou sans valeur. Si l’élé­ment a dé­jà un id, il n’est pas né­ces­saire de le ré­pé­ter dans l’at­tri­but mv- app : < div mv- app id=" ma­voTest"> Ma pre­miere app Ma­vo ! </ div> Si vous uti­li­sez mv- app sans valeur et qu’il n’y a ni id ni at­tri­but de nom dans la ra­cine Ma­vo, des noms tels que ma­vo1, ma­vo2, et ain­si de suite, se­ront gé­né­rés au­to­ma­ti­que­ment. Comme les noms gé­né­rés dé­pendent de l’ordre des apps Ma­vo ci­tées dans la page, si vous chan­gez cet ordre, ces noms chan­ge­ront éga­le­ment, ce qui pour­rait conduire à des pertes de don­nées. Il est, par consé­quent, plus que re­com­man­dé de nom­mer spé­ci­fi­que­ment vos apps Ma­vo pour évi­ter ce genre de dé­boires.

L’at­tri­but mv- sto­rage

L’at­tri­but mv- sto­rage in­dique à Ma­vo où sto­cker les don­nées de votre site. Sa valeur est une URL va­lide ou un mot- clef tel que "lo­cal", comme ci- des­sous : < div mv- app=" sto­cka­geTest" mv- sto­rage=" lo­cal"> Ma pre­miere app Ma­vo ! </ div> Quelles don­nées se­ront sto­ckées ? Les élé­ments avec un at­tri­but pro­per­ty. Nous al­lons voir ci- des­sous de quoi il s’agit.

L’at­tri­but pro­per­ty

L’at­tri­but pro­per­ty ( cf https:// ma­vo. io/ docs/ pri­mer/# pro­per­ty) in­dique à Ma­vo quels sont les élé­ments qui doivent être en­re­gis­trés. Sa valeur doit dé­crire l’élé­ment, comme un id ou un at­tri­but de classe. Voi­ci un exemple d’uti­li­sa­tion de cet at­tri­but : < div mv- app=" com­ment­form" mv- sto­rage=" lo­cal" mv- au­to­save=" 0">

< la­bel> Email: < in­put type=" email" pro­per­ty=" email" va­lue=" thier­ry. thau­reaux@ free. fr" /> </ la­bel> < la­bel> Mes­sage: < tex­ta­rea pro­per­ty=" mes­sage"> Édi­tez le for­mu­laire et no­tez com­ment les va­leurs per­durent après ra­fraî­chis­se­ment </ tex­ta­rea> </ la­bel> </ div> Si l’at­tri­but pro­per­ty est uti­li­sé sur des élé­ments qui ne sont pas conte­nus dans des for­mu­laires, ils peuvent alors être édi­tés et Ma­vo gé­nère des contrôles per­son­na­li­sés per­met­tant de pas­ser du mode édi­tion au mode lec­ture, comme dans l’exemple sui­vant : < div mv- app=" nomDe­mo" mv- sto­rage=" lo­cal"> Nom : < span pro­per­ty=" pre­nom"> Thier­ry</ span>

< span pro­per­ty=" nom"> Thau­reaux</ span> </ div> EditSa­veC­lear Nom : Thier­ry Thau­reaux

Liste simple

Hob­bies: < ul>

< li pro­per­ty=" hob­by" mv- mul­tiple> Man­ger</ li> </ ul> EditSa­veC­lear Hob­bies: • Man­ger L’at­tri­but mv- mul­tiple porte sur l’élé­ment qui peut être dé­mul­ti­plié, et non sur le contai­ner glo­bal de la col­lec­tion. Vous pouvez uti­li­ser les at­tri­buts pro­per­ty et mv- mul­tiple afin

de créer des listes de struc­tures plus com­plexes avec des pro­prié­tés mul­tiples.

Listes com­plexes

< ar­ticle pro­per­ty=" fa­mille" mv- mul­tiple> < h1 pro­per­ty=" nom"> Tristan </ h1> Né le < time pro­per­ty=" an­ni­ver­saire" da­te­time=" 1995- 11- 17"> 17 no­vembre 1995</ time> </ ar­ticle> EditSa­veC­lear Tristan Né le 17 no­vembre 1995 No­tez que dans l’exemple ci- des­sus, ce n’est pas l’at­tri­but pro­per­ty po­sé sur < ar­ticle> qui rend l’en­semble de cet élé­ment édi­table. Il sert en fait d’élé­ment de re­grou­pe­ment. Ce­la se pro­dui­ra sys­té­ma­ti­que­ment lorsque vous em­ployez l’at­tri­but pro­per­ty sur des élé­ments com­po­sés d’autres pro­prié­tés. Les groupes pos­sèdent de nom­breuses ca­rac­té­ris­tiques in­té­res­santes lors­qu’elles sont com­bi­nées avec des ex­pres­sions. Vous pouvez faire dy­na­mi­que­ment ré­fé­rence à la valeur de chaque pro­prié­té ( at­tri­but pro­per­ty) que vous avez dé­fi­nie n’im­porte où dans votre ap­pli­ca­tion Ma­vo sim­ple­ment en spé­ci­fiant son nom entre cro­chets : [ nomP­ro­prié­té]. En voi­ci un exemple : Dé­pla­cez le cur­seur du sli­der et vé­ri­fiez de quelle ma­nière les deux ex­pres­sions sont mises à jour : < p> Valeur du cur­seur du sli­der : [ in­ten­site]/ 100</ p> < in­put type=" in­ter­valle" pro­per­ty=" in­ten­site" title="[ in­ten­site]%" /> Sa­veC­lear Valeur du cur­seur du sli­der : 50/ 100 Vous pouvez aus­si faire un peu de maths en ap­pli­quant des pro­prié­tés, comme une di­vi­sion par 100, par exemple : dé­pla­cez le cur­seur du sli­der et vé­ri­fiez de quelle ma­nière les deux ex­pres­sions ont été mises à jour : < p> Valeur du cur­seur du sli­der : [ in­ten­site/ 100]</ p> < in­put type=" in­ter­valle" pro­per­ty=" in­ten­site" title="[ in­ten­site]%" /> Sa­veC­lear Valeur du cur­seur du sli­der : 0.5 Si vous dé­fi­nis­sez un at­tri­but pro­per­ty sur un élé­ment conte­nant une ex­pres­sion, vous pouvez aus­si uti­li­ser cette pro­prié­té dans d’autres ex­pres­sions, sans vous pré­oc­cu­per de les pla­cer avant ou après l’élé­ment. Il y a aus­si plu­sieurs fonc­tions ma­thé­ma­tiques ( cf https:// ma­vo. io/ docs/ ma­vos­cript/#math- func­tions) que vous pouvez uti­li­ser pour des tâches plus com­plexes, de types fonc­tions / ex­pres­sions de ta­bleurs. Les ex­pres­sions de­viennent très puis­santes lors­qu’elles sont com­bi­nées avec les listes. Vous pouvez par exemple ajou­ter et sup­pri­mer des items dans la liste ci- des­sous : [ count( hob­by)] hob­bies: < ul>

< li pro­per­ty=" hob­by" mv- mul­tiple> Man­ger</ li> </ ul> EditSa­veC­lear 1 hob­bies: • Man­ger

Le site de Ma­vo, exem­plaire du point de vue open source, dé­borde de res­sources di­verses sur ce nou­veau lan­gage.

Vous trou­ve­rez la liste de tous les at­tri­buts et classes Ma­vo à l’adresse https:// ma­vo. io/ docs.

Le lan­gage Ma­vo a été conçu au MIT par une équipe di­ri­gée par Lea Ve­rou.

Il existe dé­jà quelques fonc­tions ma­thé­ma­tiques dis­po­nibles, consul­tables à l’adresse https:// ma­vo. io/ docs/ ma­vos­cript/# math- func­tions.

Newspapers in French

Newspapers from France

© PressReader. All rights reserved.