Skip to content

Traduction de avoiding-memory-leaks.md #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Sep 11, 2018

Conversation

maxirozay
Copy link

No description provided.

@MachinisteWeb
Copy link
Member

Merci @maxirozay ! J'étais en vacances, désolé pour l'attente. Je vois que tout le fichier est traduit. Je demande des relectures.

Copy link
Member

@MachinisteWeb MachinisteWeb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merci pour la traduction. Je me demande après relectures des premiers paragraphes si tu as eu le temps de relire ta PR avant soumission puisque effectivement tu n'avais indiqué aucun reviewer. Je te laisse nous informer quand tu auras relu ton travail si cela n'est pas le cas. Je poursuivrais ensuite ma relecture et ré-affecterait des reviewers !

Merci à toi !

@@ -1,20 +1,20 @@
---
title: Avoiding Memory Leaks (EN)
title: Eviter Les Fuites De Mémoire (FR)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tu peux retirer le (FR)
Pas de majuscule sur les titres FR

Éviter les fuites de mémoire

type: cookbook
order: 10
---

## Introduction

<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>If you are developing applications with Vue, then you need to watch out for memory leaks. This issue is especially important in Single Page Applications (SPAs) because by design, users should not have to refresh their browser when using an SPA, so it is up to the JavaScript application to clean up components and make sure that garbage collection takes place as expected.</p>
<p>Si vous développer des applications avec Vue, vous devez être attentif aux fuites de mémoire. Ce problème est spécialement important dans les Single Page Applications (SPAs) car par design, les utilisateurs ne devrait pas avoir à rafraîchir leur navigateur quand ils utilisent une SPA. L'application JavaScript est responsable pour le nettoyage des composants et doit s'assurer que le garbage collector fonctionne correctement.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tu peux retirer les <p>...</p> (pas le contenu)

type: cookbook
order: 10
---

## Introduction

<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>If you are developing applications with Vue, then you need to watch out for memory leaks. This issue is especially important in Single Page Applications (SPAs) because by design, users should not have to refresh their browser when using an SPA, so it is up to the JavaScript application to clean up components and make sure that garbage collection takes place as expected.</p>
<p>Si vous développer des applications avec Vue, vous devez être attentif aux fuites de mémoire. Ce problème est spécialement important dans les Single Page Applications (SPAs) car par design, les utilisateurs ne devrait pas avoir à rafraîchir leur navigateur quand ils utilisent une SPA. L'application JavaScript est responsable pour le nettoyage des composants et doit s'assurer que le garbage collector fonctionne correctement.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

développer => développez

Single Page Applications => applications monopages (« SPAs »)

car par design => je proposerais « car de par leur conception »

devrait => devraient

est responsable pour le nettoyage => est responsable du nettoyage

garbage collector => ramasse-miettes


Memory leaks in Vue applications do not typically come from Vue itself, rather they can happen when incorporating other libraries into an application.
Les fuites de mémoire dans les applications Vue ne viennent pas de Vue, elles peuvent arriver quand on ajoute d'autre librairies dans une application.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

d'autre librairies => d'autres bibliothèques (library = bibliothèque)


## Simple Example
## Simple Exemple
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simple exemple

Ou

Exemple simple

(Pas de majuscule)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je mettrais juste Exemple. J'éviterais d'utiliser le mot simple de par l'idée de facilité qu'il véhicule. Ce n'est pas forcément simple pour des débutants.

Des avis à ce propos?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Donc on ne laisse pas les majuscules comme dans la version anglaise?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jamais sur les titres français (enfin si il y a des cas possibles, mais pas dans nos traductions).


The following example shows a memory leak caused by using the [Choices.js](https://github.com/jshjohnson/Choices) library in a Vue component and not properly cleaning it up. Later, we will show how to remove the Choices.js footprint and avoid the memory leak.
L'exemple suivant montre une fuite de mémoire causée par l'utilisation de la librairie [Choices.js](https://github.com/jshjohnson/Choices) dans un composant Vue et pas proprement nettoyée. Plus tard on va vous montrer comment enlever l'empreinte de Choices.js et éviter les fuites de mémoire.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

bibliothèque

dans un composant Vue qui n'est pas proprement nettoyé.

Plus tard on va vous montrer comment => Plus tard nous verrons comment

@MachinisteWeb MachinisteWeb requested review from MachinisteWeb and removed request for forresst, sylvainpolletvillard, Kocal and rspt September 3, 2018 09:51
@@ -1,20 +1,20 @@
---
title: Avoiding Memory Leaks (EN)
title: Eviter Les Fuites De Mémoire (FR)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je mettrais: Éviter les fuites de mémoire

type: cookbook
order: 10
---

## Introduction

<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>If you are developing applications with Vue, then you need to watch out for memory leaks. This issue is especially important in Single Page Applications (SPAs) because by design, users should not have to refresh their browser when using an SPA, so it is up to the JavaScript application to clean up components and make sure that garbage collection takes place as expected.</p>
<p>Si vous développer des applications avec Vue, vous devez être attentif aux fuites de mémoire. Ce problème est spécialement important dans les Single Page Applications (SPAs) car par design, les utilisateurs ne devrait pas avoir à rafraîchir leur navigateur quand ils utilisent une SPA. L'application JavaScript est responsable pour le nettoyage des composants et doit s'assurer que le garbage collector fonctionne correctement.</p>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • développez
  • ne devraient
  • rafraichir (graphie rectifiée)


Memory leaks in Vue applications do not typically come from Vue itself, rather they can happen when incorporating other libraries into an application.
Les fuites de mémoire dans les applications Vue ne viennent pas de Vue, elles peuvent arriver quand on ajoute d'autre librairies dans une application.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • d'autres


In the example below, we load up a select with a lot of options and then we use a show/hide button with a [v-if](/v2/guide/conditional.html) directive to add it and remove it from the virtual DOM. The problem with this example is that the `v-if` directive removes the parent element from the DOM, but we did not clean up the additional DOM pieces created by Choices.js, causing a memory leak.
Dans l'exemple ci-dessous, on ajoute énormément d'options dans un select et ensuite on utilise un montrer/cacher bouton avec une directive [v-if](/v2/guide/conditional.html) pour l'ajouter et l'enlever de la DOM virtuel. Le problème avec cet exemple est que la directive `v-if` enlève l'élément parent de la DOM, mais on ne nettoie pas les pièces additionnel de la DOM crées par Choices.js, ce qui crée une fuite de mémoire.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • additionnelles
  • créées

@@ -76,15 +76,15 @@ new Vue({
})
```

To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed.
Pour voir cette fuite de mémoire en action, ouvrer [l'exemple CodePen](https://codepen.io/freeman-g/pen/qobpxo) avec Chrome et ensuite ouvrer le gestionnaire de tâches de Chrome. Pour ouvrir le gestionnaire de tâches sur Mac, cliquer sur Fenêtre > Gestionnaire de Tâches ou sur Windows, utiliser le raccourcis Shift+Esc. Maintenant, cliquer sur le montrer/cacher bouton à peu prêt 50 fois. Vous deviez voir l'utilisation de la mémoire qui dans le gestionnaire de tâches de Chrome qui augmente sans jamais être nettoyer.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • ouvrez (2x)
  • raccourci
  • à peu près


We have discussed managing memory when removing elements, but what if you intentionally want to preserve state and keep elements in memory? In this case, you can use the built-in component [keep-alive](/v2/api/#keep-alive).
Nous avons discuté de la gestion de mémoire quand on enlève des éléments, mais qu'arrive-il quand on veut intentionnellement garder l'état et les éléments dans la mémoire? Dans ce cas, on peut utiliser le composant [keep-alive](/v2/api/#keep-alive).
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • qu'arrive-t-il


When you wrap a component with `keep-alive`, its state will be preserved and therefore kept in memory.
Quand on enveloppe un composant avec `keep-alive`, son état est préservé et donc garder en mémoire.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • gardé

Vue permet de facilement développer de magnifiques, réactives applications JavaScript, mais vous devez toujours faire attention aux fuites de mémoire. Ces fuites vont souvent survenir quand on utilise des libraires additionnel qui manipule la DOM en dehors de Vue. Soyez sure de tester votre application pour les fuites de mémoire et faites attention de bien nettoyer vos composants si nécessaire.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • des librairies additionnelles qui manipulent


## Simple Example
## Simple Exemple
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Exemple

J'éviterais d'utiliser le mot simple de par l'idée de facilité qu'il véhicule. Ce n'est pas forcément simple pour des débutants.


```js
beforeDestroy: function () {
this.choicesSelect.destroy()
}
```

## Alternative Patterns
## Modèle Altérnatif
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Modèles alternatifs

@MachinisteWeb
Copy link
Member

MachinisteWeb commented Sep 3, 2018 via email

@maxirozay
Copy link
Author

Désolé je n'avais effectivement pas relu. Je viens de faire un relecture en prenant en compte vos commentaires.

Copy link

@rspt rspt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Certaines corrections non-relevées/non-corrigées

@@ -76,15 +76,15 @@ new Vue({
})
```

To see this memory leak in action, open this [CodePen example](https://codepen.io/freeman-g/pen/qobpxo) using Chrome and then open the Chrome Task Manager. To open the Chrome Task Manager on Mac, choose Chrome Top Navigation > Window > Task Manager or on Windows, use the Shift+Esc shortcut. Now, click the show/hide button 50 or so times. You should see the memory usage in the Chrome Task Manager increase and never be reclaimed.
Pour voir cette fuite de mémoire en action, ouvrez [l'exemple CodePen](https://codepen.io/freeman-g/pen/qobpxo) avec Chrome et ensuite ouvrez le gestionnaire de tâches de Chrome. Pour ouvrir le gestionnaire de tâches sur Mac, cliquer sur Fenêtre > Gestionnaire de Tâches ou sur Windows, utiliser le raccourci Shift+Esc. Maintenant, cliquer sur le bouton montrer/cacher à peu près 50 fois. Vous devriez voir l'utilisation de la mémoire dans le gestionnaire de tâches de Chrome qui augmente sans jamais être nettoyer.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • nettoyée


Memory management and performance testing can easily be neglected in the excitement of shipping quickly, however, keeping a small memory footprint is still important to your overall user experience.
La gestion de la mémoire et les testes de performance peuvent facilement être négligés dans l'envie de livrer rapidement, néanmoins, utiliser peu de mémoire est toujours important pour l'expérience utilisateur.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • tests


```js
beforeDestroy: function () {
this.choicesSelect.destroy()
}
```

## Alternative Patterns
## Modèle altérnatifs
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Modèles alternatifs (sans accent et les deux mots au pluriel)


Once you use keep-alive, then you have access to two more lifecycle hooks: `activated` and `deactivated`. If you do want to clean up or change data when a keep-alive component is removed, you can do so in the `deactivated` hook.
Quand on utilise kee-alive, on a accès à deux lifecycle hooks de plus: `activated` et `deactivated`. Si on veut nettoyer ou changer les données quand un keep-alive composant est enlevé, on peut le faire dans le hook `deactivated`.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • keep-alive (manque un p)

Vue permet de facilement développer de magnifiques, réactives applications JavaScript, mais vous devez toujours faire attention aux fuites de mémoire. Ces fuites vont souvent survenir quand on utilise des bibliothèques additionnel qui manipulent la DOM en dehors de Vue. Soyez sure de tester votre application pour les fuites de mémoire et faites attention de bien nettoyer vos composants si nécessaire.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • additionnelles

Copy link

@forresst forresst left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 petites remarques et c'est du beau boulot. Bravo !


The following example shows a memory leak caused by using the [Choices.js](https://github.com/jshjohnson/Choices) library in a Vue component and not properly cleaning it up. Later, we will show how to remove the Choices.js footprint and avoid the memory leak.
L'exemple suivant montre une fuite de mémoire causée par l'utilisation de la bibliothèque [Choices.js](https://github.com/jshjohnson/Choices) dans un composant Vue et pas proprement nettoyée. Plus tard nous verrons comment enlever l'empreinte de Choices.js et éviter les fuites de mémoire.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

je remplacerais "dans un composant Vue et pas proprement nettoyée." par "dans un composant Vue où le nettoyage n'est pas fait proprement."

Je trouve cela plus français


Consider the types of devices your users may be using and what their normal flow will be. Could they use memory constrained laptops or mobile devices? Do your users typically do lots of in-application navigation? If either of these are true, then good memory management practices can help you avoid the worst case scenario of crashing a user’s browser. Even if neither of these are true, you can still potentially have degradation of performance over extended usage of your app if you are not careful.
Considérer les types d'appareils que vos utilisateurs peuvent utiliser et quelle utilisation en font-ils. Utilisent-ils des ordinateurs portables avec peu de mémoire ou des appareils mobiles? Est-ce qu'ils font beaucoup de navigation à l'intérieur de votre application? Si c'est le cas, une bonne gestion de la mémoire peut aider à éviter de crasher le navigateur de l'utilisateur. Même si ce n'est pas le cas, vous pouvez toujours avoir une dégradation des performances sur une longue période d'utilisation de votre app si vous ne faites pas attention.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avant chaque point d'interrogation, il faut ajouter un espace.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je veux bien le faire mais pourquoi? La version anglaise et les autres caractères de ponctuation n'a pas d'espace et je n'ai pas l'habitude de mettre des espaces avant un point d'interrogation.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En français, avant un ?, ! ou : il doit y avoir un espace, toutes les traductions faites jusqu'à présent appliquent cette règle. Merci

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quelle est ta langue maternelle @maxirozay ?

Copy link

@rspt rspt Sep 8, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En fait pour info: en Suisse, il est recommandé d'insérer un espace fine insécable (et non pas un espace simple comme en France) devant les signes de ponctuation doubles mais l'omission de ce dernier est la norme (difficile à ajouter sans micro-typo).


Edit:

Il est recommandé d'utiliser un espace fine insécable devant les signes de ponctuation doubles. En suisse la norme est de ne pas mettre d'espace si l'on ne peut pas mettre un espace fine insécable (qu'on ajoute seulement lors de la micro-typo pour une édition p.e.) tandis qu'en France la norme est de mettre un espace insécable à la place.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ce qui m'emmène à la question suivante: est-ce qu'on créerait un petit repo genre "Guidelines" avec les différentes règles de traduction de la communauté, les traductions des mots techniques, etc.?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok pas de problème alors.

@haeresis ma langue maternelle est le français (de Suisse).

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@haeresis @forresst Vous en pensez quoi du coup de créer un un repo avec les guidelines de traduction, un petit lexique etc?

@MachinisteWeb MachinisteWeb changed the title Traduction de avoiding-memory-leaks.md Traduction de avoiding-memory-leaks.md Sep 8, 2018
@MachinisteWeb MachinisteWeb merged commit 2563d9d into vuejs-fr:master Sep 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants