instance.md - Diagramme Responsive FR #25

MachinisteWeb · 2017-02-03T15:26:10Z

Si vous pensez que d'autres mots seraient plus adaptés.

Pour tester :

Rendez-vous à https://fr.vuejs.org/v2/guide/instance.html#Diagramme-de-cycle-de-vie ,
ouvrez votre navigateur préféré
Go console (F12) et remplacez

<p><img src="/images/lifecycle.png" alt="Lifecycle"></p>

par

<div class="lifecycle">
	<style scoped>
		.lifecycle {
		    position: relative;
		    font-size: 2vw;
		    font-weight: bold;
		    color: #fff;
		    text-align: center;
		}
		@media (min-width: 760px) {
			.lifecycle {
		    	font-size: 16px;
			}
		}
		.lifecycle--observe-data,
		.lifecycle--init-event,
		.lifecycle--has-el,
		.lifecycle--has-template,
		.lifecycle--when-mount,
		.lifecycle--if-el-yes,
		.lifecycle--if-el-no,
		.lifecycle--if-template-yes,
		.lifecycle--if-template-no,
		.lifecycle--compile-function,
		.lifecycle--compile-template,
		.lifecycle--create-el,
		.lifecycle--virtual-dom,
		.lifecycle--when-data-change,
		.lifecycle--when-destroy,
		.lifecycle--teardown,
		.lifecycle--mounted,
		.lifecycle--destroyed {
			z-index: 2;
		    position: absolute; 
		    transform: translate(-50%, -50%);
		    background-color: #3ab882;
		    border-radius: 10px;
		}
		.lifecycle--observe-data,
		.lifecycle--init-event,
		.lifecycle--compile-function,
		.lifecycle--compile-template,
		.lifecycle--create-el,
		.lifecycle--virtual-dom,
		.lifecycle--teardown {
		    background-color: #3ab882;
		    border-radius: 10px;
		}
		.lifecycle--has-el,
		.lifecycle--has-template {
		    background-color: #fcb738;
		    border-radius: 50%;
		}
		.lifecycle--mounted,
		.lifecycle--destroyed {
		    background-color: #da5961;
		    border-radius: 50%;
		}
		.lifecycle--when-mount,
		.lifecycle--if-el-yes,
		.lifecycle--if-el-no,
		.lifecycle--if-template-yes,
		.lifecycle--if-template-no,
		.lifecycle--when-data-change,
		.lifecycle--when-destroy {
			color: #8699A3;
		    background-color: #fff;
		}
		.lifecycle--observe-data {
		    top: 9.7%;
		    left: 49%;
		    width: 24.5%;
		    height: 3.3%;
		}
		.lifecycle--init-event {
		    top: 15.3%;
		    left: 49%;
		    width: 24.5%;
		    height: 2.9%;
		}
		.lifecycle--has-el {
		    top: 23.2%;
		    left: 49%;
		    width: 16%;
		    height: 4%;
		}
		.lifecycle--has-template {
			top: 31.6%;
			left: 49%;
			width: 16%;
			height: 4%;
		}
		.lifecycle--when-mount {
			top: 27%;
		    left: 77.5%;
		    width: 18%;
			height: 4%;
		}
		.lifecycle--if-el-yes {
	        left: 45%;
		    top: 27.4%;
		    width: 6%;
		    height: 1%;
		}
		.lifecycle--if-el-no {
		    top: 22.2%;
		    left: 70.5%;
		    width: 6%;
		    height: 1%;
		}
		.lifecycle--if-template-yes {
	        top: 37.7%;
		    left: 22.5%;
		    width: 6%;
		    height: 1%;
		}
		.lifecycle--if-template-no {
		    top: 37.7%;
		    left: 75.5%;
		    width: 6%;
		    height: 1%;
		}
		.lifecycle--compile-function {
			top: 41.7%;
		    left: 27%;
		    width: 24.5%;
		    height: 5%;
		}
		.lifecycle--compile-template {
			top: 41.7%;
		    left: 70.5%;
		    width: 24.5%;
		    height: 5%;
		}
		.lifecycle--create-el {
			top: 55%;
		    left: 49%;
		    width: 24.5%;
		    height: 5%;
		}
		.lifecycle--virtual-dom {
    		top: 68.5%;
	        left: 79%;
    		width: 17%;
		    height: 5%;
		}
		.lifecycle--when-data-change {
		    top: 63%;
    		left: 66%;
    		width: 13%;
			height: 4%;
		}
		.lifecycle--when-destroy {
			top: 75.2%;
		    left: 49%;
		    width: 17%;
			height: 4%;
		}
		.lifecycle--teardown {
	        top: 85%;
		    left: 49%;
    		width: 28%;
		    height: 5%;
		}
		.lifecycle--mounted {
    		top: 68.3%;
		    left: 49%;
	        width: 12%;
		    height: 5%;
		}
		.lifecycle--destroyed {
		    top: 94%;
		    left: 49%;
	        width: 12%;
		    height: 5%;
		}
		.lifecycle--observe-data span,
		.lifecycle--init-event span,
		.lifecycle--has-el span,
		.lifecycle--has-template span,
		.lifecycle--when-mount span,
		.lifecycle--if-el-yes span,
		.lifecycle--if-el-no span,
		.lifecycle--if-template-yes span,
		.lifecycle--if-template-no span,
		.lifecycle--compile-function span,
		.lifecycle--compile-template span,
		.lifecycle--create-el span,
		.lifecycle--virtual-dom span,
		.lifecycle--when-data-change span,
		.lifecycle--when-destroy span,
		.lifecycle--teardown span,
		.lifecycle--mounted span,
		.lifecycle--destroyed span {
		    position: absolute;
		    top: 50%;
		    left: 50%;
			transform: translate(-50%, -50%);
			width: 100%;
		}
	</style>
	<div class="lifecycle--observe-data"><span>Observe les données</span></div>
	<div class="lifecycle--init-event"><span>Initialise les événements</span></div>
	<div class="lifecycle--has-el"><span>A l'option “el”</span></div>
	<div class="lifecycle--has-template"><span>A l'option “template”</span></div>
	<div class="lifecycle--when-mount"><span>quand vm.$mount(el) est appelé</span></div>
	<div class="lifecycle--if-el-yes"><span>OUI</span></div>
	<div class="lifecycle--if-el-no"><span>NON</span></div>
	<div class="lifecycle--if-template-yes"><span>OUI</span></div>
	<div class="lifecycle--if-template-no"><span>NON</span></div>
	<div class="lifecycle--compile-function"><span>Compiler le template en une fonction de rendu</span></div>
	<div class="lifecycle--compile-template"><span>Compiler le contenu HTML de el en tant que template</span></div>
	<div class="lifecycle--create-el"><span>Créer vm.$el et remplacer el avec</span></div>
	<div class="lifecycle--virtual-dom"><span>Nouveau rendu du DOM Virtuel</span></div>
	<div class="lifecycle--when-data-change"><span>quand les données changent</span></div>
	<div class="lifecycle--when-destroy"><span>quand vm.$destroy() est appelé</span></div>
	<div class="lifecycle--teardown"><span>Démontage des observateurs, composants enfants et écouteurs d'événement</span></div>
	<div class="lifecycle--mounted"><span>Monté</span></div>
	<div class="lifecycle--destroyed"><span>Détruit</span></div>
	<p><img src="/images/lifecycle.png" alt="Lifecycle"></p>
</div>

yann-yinn · 2017-02-03T16:11:37Z

"Nouveau rendu du DOM Virtuel" => l'original dit "Virtual DOM re-render and patch"
Je suppose que l'original veut dire "Nouveau rendu du DOM Virtuel puis PATCH du DOM réel" et qu'ils ont manqué de place ... C'est pas clair mais dans ton cas il manque la notion de "patch du DOM réel" du coup

yann-yinn · 2017-02-03T16:13:59Z

Par ailleurs je ne comprends pas tout à fait ce schema en anglais "Compiler le contenu HTML de el en tant que template" pour moi devrait être "Compiler le contenu HTML de el en tant que template puis le template en tant que fonction de rendu", ou alors je n'ai pas compris le fonctionnement de Vue.

Pour moi la logique est que Vuejs transforme du html en une succession de "createElement()" en javascript; qui eux générent un "Dom Virtuel", qui lui est ensuite utilisé pour patcher le DOM réel. Soit j'ai mal compris soit le schéma anglais est mal exprimé faute de place dans les cadres et induit plus en erreur qu'autre chose.

MachinisteWeb · 2017-02-03T16:43:22Z

Voici ce que je comprends :

Quand tu utilises l'option "template", ce que tu fais c'est donner une chaine de caractère à Vue. Vue ça, il le transforme en une suite d'élément DOM avec des createElement (c'est la partie de gauche). Grace à cette transformation, il peut utiliser render. Pour faire cela il a obligatoirement besoin d'un parseur de chaîne de caractère en DOM d'ou la version « standalone ».

Cependant dans le cas de "el", il obtient déjà des élément créer et un DOM réel. Il est déjà dans un état près à l'utilisation pour render (pas besoin de faire de createElement puisque c'est déjà avec des éléments qu'il bosse). d'ou la version « runtime-only ».

J'imagine bien que c'est pas si simple que cela mais le schéma pour le coup ne m'a pas perturbé.

Par contre si je comprends bien « patcher le DOM » signifie, « créer un DOM réel à partir du DOM Virtuel à jour » ? Si c'est bien le cas que penses tu de :

« Nouveau rendu du DOM Virtuel puis du DOM » ?

La problématique va être qu'il ne va pas y avoir assez de place si je souhaite conserver le cadre initialement fourni par l'image original. Je peux éventuellement baisser la taille de la police mais bof.

Pour moi finalement c'est « sous-entendu » qu'une fois que le DOM Virtuel à fait sa tambouille il « reverse » le résultat final au DOM et donc p-e que ça peut-être omis ?

On peut également mettre « Re-rendu du DOM Virtuel puis du DOM », j'ai testé ça passe tout juste ! (dans toutes les tailles, merci vw).

MachinisteWeb · 2017-02-03T16:50:16Z

Merde, je viens de m'apercevoir que j'ai merger T-T. quel con...

yann-yinn · 2017-02-03T16:53:46Z

Pour moi il faisait la même chose dans les deux cas : récupérer le html (sous forme de string dans le clef template ou directement puisé dans le html) => créer ensuite un DOM Virtuel (que le html existe déjà ou pas) => Mettre à jour le DOM Réel à l'identique du DOM Virtuel lors du rendu (création total, partielle ou mise à jour selon les cas)

J'essaierai de me renseigner, je bute sur mes limites et le schema d'origine me laisse un doute

MachinisteWeb · 2017-02-03T17:02:05Z

Ok. Pour moi ça donne ça donc pas d'embuiguité. Mais on comprendra mieux en ayant tout traduit :D

récupérer le html (sous forme de string dans le clef template [besoin de construire un DOM] ou sous forme de DOM directement puisé dans le DOM JavaScript) => créer ensuite un DOM Virtuel (que le html existe déjà ou pas) => Mettre à jour le DOM Réel à l'identique du DOM Virtuel lors du rendu.

Diagramme Responsive FR

11bf7fa

MachinisteWeb merged commit 2abeff7 into vuejs-fr:master Feb 3, 2017

MachinisteWeb mentioned this pull request Mar 6, 2017

Pages en cours de traduction #3

Open

MachinisteWeb self-assigned this Mar 6, 2017

MachinisteWeb requested a review from yann-yinn March 6, 2017 17:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

instance.md - Diagramme Responsive FR #25

instance.md - Diagramme Responsive FR #25

MachinisteWeb commented Feb 3, 2017 •

edited

Loading

yann-yinn commented Feb 3, 2017

yann-yinn commented Feb 3, 2017 •

edited

Loading

MachinisteWeb commented Feb 3, 2017 •

edited

Loading

MachinisteWeb commented Feb 3, 2017

yann-yinn commented Feb 3, 2017 •

edited

Loading

MachinisteWeb commented Feb 3, 2017

instance.md - Diagramme Responsive FR #25

instance.md - Diagramme Responsive FR #25

Conversation

MachinisteWeb commented Feb 3, 2017 • edited Loading

yann-yinn commented Feb 3, 2017

yann-yinn commented Feb 3, 2017 • edited Loading

MachinisteWeb commented Feb 3, 2017 • edited Loading

MachinisteWeb commented Feb 3, 2017

yann-yinn commented Feb 3, 2017 • edited Loading

MachinisteWeb commented Feb 3, 2017

MachinisteWeb commented Feb 3, 2017 •

edited

Loading

yann-yinn commented Feb 3, 2017 •

edited

Loading

MachinisteWeb commented Feb 3, 2017 •

edited

Loading

yann-yinn commented Feb 3, 2017 •

edited

Loading