Le Web bientôt doté d’un nouveau langage ?

**xurei** · 12/09/2012, 12h11

Envoyé par LSMetag

La logique est intéressante :

Séparer les balises html de leur comportement.

Peut être intéressant lorsque l'on a des structures de balises récurrentes.
Comme dit plus haut ça permet d'avoir un standard permettant une fragmentation et une factorisation supplémentaire de son code html.

Indéniablement, c'est un gain de productivité pour le développeur. C'est aussi une simplification des pages HTML. Mais ça risque de nuire à la productivité des personnes qui devront ensuite reprendre son code ou le maintenir.

Je ne sais pas si c'est une très bonne idée.

imaginez qu'on fasse : <div id = "test1"><input /> <input/></div><div id = "test2"><input/> <input/></div>
puis
#test1 input
{
type="button";
text="coucou";
value = "keke";
}

#test2 input
{
type="text";
text="coucou";
}

Pas évident de savoir au premier abord quel input correspond à tel composant.

Tu peux faire les mêmes crasses en CSS ou en JS. C'est au développeur de garder son code propre.

Pour moi, déterminer si un nouveau langage est source de mauvaises pratiques est une question sans intérêt, car la réponse est triviale : OUI, quel que soit le langage, et encore plus probablement s'il est jeune, il est possible de mal l'utiliser et de rendre son code encore pire que si on ne l'avait pas utilisé.

Par contre, la rétro-compatibilité me semble plus gênante. Ce qui implique que le langage sera utilisé dans un premier temps côté code source et moins côté code exécuté.

**xurei** · 12/09/2012, 12h33

Suite à mon précédent message concernant la mini-lib, voici une version fonctionnelle avec le parsing effectué.

La démo se trouve ici : http://www.xurei-design.be/casParser/demo.html

Il n'y a pas de gestion de mise à jour du contenu, mais je pense pas que ça soit bien difficile à intégrer. On pourra voir si ça a un réel intérêt comme ça !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="http://sources.disruptive-innovations.com/jscssp/trunk/cssParser.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/cas">
			/* Code CAS simple : les div ont la classe working, qui colore le texte en rouge */
			div
			{
				class: working;
			}
		</script>
		<style>
                        .working
                        {
                                color: red;
                        }
                </style>
	</head>
	<body>
		<div>Hello World !</div>
 
 
		<script type="text/javascript" >                
                        $(document).ready(function()
                        {
                                //parser le code CAS somehow
                                        var sheets = parse_cas();
                                
                                //pour chaque règle css, on ajoute les attributs
                                        for (s in sheets)
                                        {
                                                var rules = sheets[s].cssRules;
 
                                                for (r in rules)
                                                {
                                                        var rule = rules[r];
 
                                                        var rule_selector = rule.mSelectorText;
                                 
                                                        for (d in rule.declarations)
                                                        {
                                                                var rule_attrib = rule.declarations[d].property;
                                                                var rule_value = rule.declarations[d].valueText;
 
                                                                //Cette ligne est la clef ! On utilise le sélecteur de JQuery 
                                                                //pour trouver les éléments et attr() pour changer leurs attributs
                                                                $(rule_selector).attr(rule_attrib, rule_value);
                                                        }
                                                }
                                        }
                                        
                                function parse_cas()
                                {                                       
                                        var parser = new CSSParser();
                                        
                                        sheets = Array();
                                        $('script[type="text/cas"]').each(function()
                                        {
                                                sheets.push(parser.parse($(this).get(0).innerHTML, false, true));
                                        });
                                        return sheets;
                                }
                        });
                </script>
 
	</body>
</html>

**la.lune** · 12/09/2012, 13h11

Envoyé par transgohan

Je sais qu'on est pas encore vendredi mais j'arrive pas à m'en empêcher...

Qui saurait donner un cours des fonctions copier et coller que l'on retrouve sur tous les éditeurs de texte/IDE/OS ?

C'est vrai que je n'ai fais que du copier coller mais je n'ai pas cité que l'avantage sur l'écriture rapide mais j'ai souligner aussi la maîtrise et l'organisation du code et le gain de mémoire et le chargement rapide. Si vous imaginer le gain de mémoire pour plusieurs page concis c'est une très bonne chose. Et surtout l’aspect modulaire qui est plus important.

**transgohan** · 12/09/2012, 14h16

Je t'accorde le point sur le gain modulaire.
Mais pour le reste je ne prêcherai pas.

Chargement rapide : non car deux fichiers distincts à assembler et à interpréter. (seuls les langages compilés gagnent à ce jeu là)
Gain de mémoire : Je ne vois absolument pas. On aura plus de choses (ou au mieux l'équivalent) en mémoire du fait de deux branches à mettre en mémoire et à assembler. Et niveau mémoire disque dur on aura aussi plus de mémoire mangée comparé à un seul fichier en raison de la taille des pages.
Edit: je reviens un peu sur mes propos, j'avais mal interprété cet argument, il est vrai que si on utilise un seul fichier cas pour 1 000 pages, le gain disque est visible.

Quand à l'organisation du code (dans le contexte de modularité), c'est un autre débat qui est tendancieux et du même acabit que "mac c'est mieux que PC". En réponse personnelle j'aurai tendance à dire que je préfère un seul fichier bien présenté et rangé que 100 fichiers pour faire un simple élément. (je parle bien sûr ici avec un exemple aux deux extrêmes pour bien me faire comprendre)

**perenono** · 12/09/2012, 22h48

Envoyé par la.lune

D'abord le facteur important ça permettra de factoriser plusieurs attributs qui sont les même dans plusieurs balise. et ça c'est un +10.

D'autre part toute personne ayant fait du html5 sait très bien que les balises sont trop long parce que les attributs sont nombreux alors du coup on a un gain et modularise nos attributs aussi.

Et pourquoi pas comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a>Mon lien</a>

Si par exemple ta balise a étant le 3e on peut avoir ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
a:nth-child(3){
    href : 'http://google.com';
    class : 'misenforme';
}

N'est ce pas un gain et au cas ce même lie repète dans d'autre balise. En tout cas je dis oui pour ce projet et merci pour la personne ayant réfléchi sur ça +100

J'aime assez votre exemple ou nous avons un lien qui initialement aurait pris 61 caractères directement dans l'html et se transforme en 15 caractères dans l'html + 62 caractères dans le fichier CAS.
Une techno de plus qui ne fera pas du bon code si on ne sait pas l'utiliser. Apprenons d'abord à utiliser CSS et HTML parfaitement avant de chercher un nouveau langage.

**sekaijin** · 13/09/2012, 08h52

je suis moi aussi assez septique.
un des pb du développement web est justement la multiplication des langages

la norme W3C HTML5 à contrairement au versions antérieures normalisé le DOM et non le source

dans XHTML et HTML 4<= le W3C normalisait le source HTML et définissait la façon dont le langage devait être interprété pour donner un DOM

dans HTML5 on a normaliser le DOM et le code source n'est définit que comme une sérialisation possible parmis d'autre.

le but était de permetre l'émergence d'autre forme de sérialisation
on a dans les Groupe de travail beaucoup parlé de chose comme JSON, CSS, XML, ??

ce côté de la norme est resté en l'état car justement trop de langages en ajouter un impliquais un moteur d'interprétation de plus dans les navigateurs.
mais les quelques labo à s'être penché sur le sujet y voyait l'opportunité de proposer un langage unique regroupant structure du document (HTML) Style (CSS) Comportement (Javascript)

cette proposition n'apporte pas grand chose au moulin. elle ne vas pas assez loin et n'apporte pas grand chose.
par exemple avoir dans le même esprit un seul langage qui fait tout à la CSS pour reprendre l'exemple donné plus haut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{DOCTYPE html}
html {
    head {
        style {
            div {
                class working;
            }
            .working {
                color: red;
            }
        }
    }
    body {
        div {Hello World !}
    }
}

cela pourait effectivement en se penchant dessus avoir des vertues. mais embarquer un Nieme langage qui ne traite qu'une infime partie des choses me parait peut souhaitable.
A+JYT

**Pelote2012** · 13/09/2012, 09h58

Alors il aura :
un bout de CSS pour la mise en forme d'objet précis
un bout de CAS pour les objets générique
un aspx pour la visu
une aspx.vb pour le code
une master
....

**djibster** · 13/09/2012, 12h33

Dans le cadre de l'avènement du web of Data (appelé plus communément le web 3.0) cette mutualisation pourra être utile. Pour un affichage web cela ne le sera surement pas autant, mais dans le cadre de l'échange invisible d'un grand nombre de fichiers xml de données, la mutualisation des attributs de balises xml sur des DTD genre Dublin Core ou Mets, ça réduirait énormément le volume de données à envoyer.
Juste dans la logique suite des choses.
Ouvrez un serveur OAI et vous en comprendrez l'indéniable utilité.

**xurei** · 13/09/2012, 14h16

@sekaijin : j'aime bien ce concept de source DOM en pseudo-CSS. Je ne sais pas si ça a une réelle utilité en pratique, mais j'ai toujours été partisan d'un langage "unifié" pour le web, même si cela semble utopique...

Je ne suis pas d'accord pour l'argument de la bande passante : rien n'empêche d'utiliser CAS directement dans le HTML, comme on peut le faire avec CSS.

A contrario, avoir les attributs dans un format générique rend ton code plus concis, et sauve de la bande passante dans certains cas :

quand on a beaucoup de pages HTML avec les mêmes attributs,
quand on recharge souvent une page : le cache-control est ton ami,
quand un page est longue et répétitive (exemple : un tableau avec +1000 lignes),
...

Mon avis personnel : bonne idée, mais pas partout.

**gwinyam** · 13/09/2012, 19h18

On pourra faire du CAS inline dans la balise DOM ?

Comble de l'ironie, non ?

**jchevalay54** · 26/09/2012, 10h20

pour ceux qu'ils veulent un peu ce matérialisé cette possibilité je me suis fais un petit projet en licence libre.

regarder moi je trouve ça intéressant http://www.screenr.com/9oP8

**v1cent** · 26/09/2012, 12h30

Je trouve que ça peut s'avérer très utile, pour faciliter la maintenance en séparant ce qui a un sens de ce qui sers uniquement à définir des comportements (via javascript par exemple) :

Imaginez je code un site de petites annonces. Une page listant les annonces.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul class="annonces">
    <li class="annonce vehicule"> Particulier vends renault clio</li>
    <li class="annonce urgente vehicule"> Particulier vends citroen C3</li>
    <li class="annonce logement">A louer appartement centre ville, contacter agence machin</li>
</ul>

Je veux appliquer un comportement à toutes les annonces, par exemple permettre un drag & drop vers un classeur du visiteur, lui permettant de montre des annonces à sa femme en rentrant chez lui (par exemple).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.annonce {
    draggable:true;
    data-drag-target:'#classeur';
}

Je veux aussi que toutes les annonces urgentes soient animées et rebondissent quand la souris passe à proximité.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.annonce.urgente {
    data-animate:bounce;
}

Il me reste plus qu'à définir dans un javascript ces comportements réutilisables dans d'autres sites. Je peux ainsi maintenir une bibliothèque de script standardisée pour tous mes sites, et avoir un code html propre qui ne comporte que des informations sémantiques.

Quand je veux ajouter un comportement, j'intègre le code à ma bibliothèque et je définit les éléments cibles dans le CAS. Quand un comportement doit être retiré (à tout hasard cet horripilant rebond), je retire une ligne de code de mon CAS.

Pour des gros projets, je pense que le gain en productivité serait assez grand. n peut déjà faire des équivalences (par exemple en utilisant jquery pour déterminer ce genre de choses), mais je trouve ça très propre.

Le Web bientôt doté d’un nouveau langage ?

HTML

Discussions similaires

Partager

Partager