Traductions de la page "v2/guide/mixins.html" et "v2/guide/single-file-components.md" #10

yann-yinn · 2017-01-08T11:22:23Z

Bonjour, voici une petite contribution pour les pages v2/guide/mixins.html & v2/guide/single-file-components.md

…ning concernant la traduction française en cours

…au début suite à erreur copier-coller

yann-yinn · 2017-01-09T12:37:02Z

Je profite de ma pause pour refaire une passe sur les mixins de 20 minutes, j'ai vu plusieurs coquilles

yann-yinn · 2017-01-09T12:57:08Z

Ok j'ai fini de repasser sur mixins.md

yann-yinn · 2017-01-09T16:26:16Z

J'ai 20 minutes de dispo, je fais une relecture de single-file-components

…euxieme relecture

yann-yinn · 2017-01-09T17:04:47Z

Fin de ma deuxieme relecture, à vous 👍

sylvainpolletvillard

1ère relecture

sylvainpolletvillard · 2017-01-09T21:45:25Z

src/v2/guide/mixins.md


-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p>Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
+<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p>


Si la traduction est finie, on peut retirer ce paragraphe

sylvainpolletvillard · 2017-01-09T21:46:43Z

src/v2/guide/mixins.md


-Example:
+Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant.


pour les composants Vue.

sylvainpolletvillard · 2017-01-09T21:51:46Z

src/v2/guide/mixins.md

@@ -53,7 +55,7 @@ new Vue({
 // -> "component hook called"
 ```

-Options that expect object values, for example `methods`, `components` and `directives`, will be merged into the same object. The component's options will take priority when there are conflicting keys in these objects:
+Les options qui attendent un objet, par exemple `methods`, `components` et `directives`, seront fusionnées dans le même objet. Les options du composant auront la priorité en cas de confit sur les clef d'un de ces objets.


conflit (mais le confit m'a donné faim)

sur une ou plusieurs clefs de ces objets.

(ou clés, car petite anecdote: selon BUBEN (théorie de 1935), le pluriel « clefs » serait devenu « clés », car l’addition d’un « f » et d’un « s » gênait à l’écrit (fin du XVIIIe, début du XIXe siècle). Par la suite, du pluriel « clés » serait né le singulier « clé ».)

sylvainpolletvillard · 2017-01-09T21:52:10Z

src/v2/guide/mixins.md

@@ -84,14 +86,14 @@ vm.bar() // -> "bar"
 vm.conflicting() // -> "from self"
 ```

-Note that the same merge strategies are used in `Vue.extend()`.
+Notez que les mêmes stratégies de fusion sont utilisée par `Vue.extend()`.


sylvainpolletvillard · 2017-01-09T21:53:58Z

src/v2/guide/mixins.md


-You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect **every** Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options:
+Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec prudence ! Une fois que vous appliquez un mixin globalement, il modifiera **toutes** les instances de vues créees ensuite. Bien utilisé, cela peut être exploité pour injecter de la logique pour des options custom :


À utiliser

créées par la suite.

injecter une logique de traitement pour des options personnalisées

sylvainpolletvillard · 2017-01-09T22:15:40Z

src/v2/guide/single-file-components.md


-### For Users New to Module Build Systems in JavaScript
+Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications Javascript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà :


sylvainpolletvillard · 2017-01-09T22:16:26Z

src/v2/guide/single-file-components.md


- **Node Package Manager (NPM)**: Read the [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_.
+- **Modern JavaScript with ES2015/16**: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir.


JavaScript moderne avec ES2015/16

sylvainpolletvillard · 2017-01-09T22:16:53Z

src/v2/guide/single-file-components.md


- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don't have to memorize every feature right now, but keep this page as a reference you can come back to.
+Une fois que vous aurez pris une journée pour vous plonger dans ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading !


rechargement à chaud

sylvainpolletvillard · 2017-01-09T22:18:30Z

src/v2/guide/single-file-components.md


-The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications).
+Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le paquet, et Vue offre le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) a déjà tout configuré pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation de vue-loader](https://vue-loader.vuejs.org).


monofichiers

sylvainpolletvillard · 2017-01-09T22:18:49Z

src/v2/guide/single-file-components.md


-### For Advanced Users
+Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), de choisir un template qui vous convient et de suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli).


recommandons

yann-yinn · 2017-01-09T22:58:13Z

corrections suggérées par @sylvainpolletvillard pushées.

MachinisteWeb

Merci pour ce travail ! Quelques petits changement à mon sens. Tout est discutable bien entendu ;)

MachinisteWeb · 2017-01-10T09:28:52Z

src/v2/guide/mixins.md


-Example:
+Exemple:

 ``` js
 // define a mixin object


« // define a mixin object » À traduire

Ceci n'a toujours pas été traduit ? Je ne vois pas la modification.

MachinisteWeb · 2017-01-10T09:31:00Z

src/v2/guide/mixins.md


-When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called **before** the component's own hooks:
+Quand un mixin et un composant définissent les mêmes options, elles seront fusionnées en utilisant la stratégie appropriée. Par exemple, les fonctions de hook avec le même nom seront fusionnées dans un tableau afin qu'elles soient toutes appelées. De plus, les hooks des mixins seront appelés **avant** les hooks du composant:


« hook » est traduit par « point d'ancrage » dans #7

Je pense approprié de traduire « hook functions » par « fonctions d'ancrage »

soit

« Par exemple, les fonctions d'ancrage avec le même nom »
« De plus, les points d'ancrage des mixins seront appelés avant les points d'ancrage du composant: »

J'ai appris hier que "hook" s'était francisé : https://fr.wikipedia.org/wiki/Hook_(informatique)

On garde Hook

MachinisteWeb · 2017-01-10T09:35:28Z

src/v2/guide/single-file-components.md

 type: guide
 order: 19
 ---

 ## Introduction

-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p>In many Vue projects, global components will be defined using `Vue.component`, followed by `new Vue({ el: '#container' })` to target a container element in the body of every page.
+Dans beaucoup de projets Vue, des composants globaux seront définis en utilisant `Vue.component`, suivi de `new Vue({ el: '#conteneur' })` pour cibler un élément conteneur dans le corps de chaque page.


conserver « #container » comme tu l'avais fait la première fois mais bien utilisé « conteneur » :)

MachinisteWeb · 2017-01-10T09:37:10Z

src/v2/guide/single-file-components.md


-Here's a simple example of a file we'll call `Hello.vue`:
+Tous ces désavantages sont résolus par les composants monofichiers avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify.


mettre « composants monofichiers » en gras

MachinisteWeb · 2017-01-10T09:38:28Z

src/v2/guide/single-file-components.md


-As promised, we can also use preprocessors such as Jade, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
+Et comme promis, nous pouvons aussi utiliser des préprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités.


Je pense que l'on peut se permettre de dire « tel que Pug » à la place de Jade. On peut également notifier sur la doc EN la coquille.

J'ai notifié la version EN : vuejs#695

MachinisteWeb · 2017-01-10T09:47:23Z

src/v2/guide/single-file-components.md


-### What About Separation of Concerns?
+Une chose importante à souligner est que **la séparation des préoccupations n'est pas identique à la séparation des fichiers**. Dans le développement des interfaces utilisateur modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes inter-dépendantes, il était plus intuitif de le diviser en petits composants faiblement couplés, et de les combiner. Au sein d'un composant, son template, sa logique et ses styles sont intrinsèquement couplés, et les réunir rend en réalité le composant plus cohérent et facile à maintenir.


Ce que je comprends ici c'est que la séparation des éléments par rôle ou techno n'est pas identique à la séparation en fichier.

C-à-d qu'au lieu de faire un fichier, HTML, CSS et JS il était plus intéressant de tout regrouper dans un fichier et de faire différent fichier en terme de composant indépendant.

Je pense qu'une traduction possible est donc

« Qu'en est de la séparation des rôles ? »

« la séparation des rôles n'est pas identique à la séparation des fichiers »

"séparation des préoccupations" est la traduction la plus répandue de "Separation of Concerns". Mais comme évoqué en première relecture, seule l'expression anglaise est vraiment connue et comprise, c'est pourquoi les ressources françaises ne traduisent pas tout le temps.

Sincèrement "séparation des préoccupations" c'est vraiment zarb mais @sylvainpolletvillard a raison : il tombe souvent dans les traductions FR en informatique effectivement donc gardons "séparation des préoccupations".

je trouve aussi la traduction un peu chelou mais avec le rappel des "separations of concerns" on est pas perdu c'est l'essentiel

MachinisteWeb · 2017-01-10T09:53:25Z

src/v2/guide/single-file-components.md


-With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already:
+- **Node Package Manager (NPM)**: Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_.


Puisque nous ne traduisons pas « Getting Started guide » car c'est à priori le titre du guide, il faut l'introduire « en plus » dans la traduction je pense, soit :

Lisez le guide NPM Getting Started guide à la section 10: Uninstalling global packages.

yann-yinn · 2017-01-10T15:38:12Z

@haeresis @sylvainpolletvillard sauf erreur de ma part, j'ai intégré toutes vos modifs

MachinisteWeb

e pense que « anciennement » plutôt que « précédemment » est plus approprié car « précédemment » n'inclut pas la notion que c'était la même chose, juste que quelque chose précédait. Hors Pug est bien exactement la même chose, seul le nom à changé.

Pour le reste c'est bon pour moi

MachinisteWeb · 2017-01-11T07:46:46Z

src/v2/guide/single-file-components.md

+- **Les définitions globales** forcent à avoir un nom unique pour chaque composant
+- **Les templates sous forme de chaînes de caractères** ne bénéficient pas de la coloration syntaxique et requièrent l'usage de slashes disgracieux pour le HTML multiligne.
+- **L'absence de support pour le CSS** signifie que le CSS ne peut pas être modularisé comme HTML et JavaScript
+- **L'absence d'étape de build** nous restreint au HTML et à JavaScript ES5, sans pouvoir utiliser des préprocesseurs tels que Babel ou Pug (précédemment Jade).


Je pense que « anciennement » plutôt que « précédemment » est plus approprié car « précédemment » n'inclut pas la notion que c'était la même chose, juste que quelque chose précédait. Hors Pug est bien exactement la même chose, seul le nom à changé.

Pour le reste c'est bon pour moi

corrigé 👯‍♂️

MachinisteWeb · 2017-01-14T08:49:55Z

src/v2/guide/mixins.md


-Example:
+Exemple:

 ``` js
 // define a mixin object


Ceci n'a toujours pas été traduit ? Je ne vois pas la modification.

MachinisteWeb · 2017-01-14T08:54:49Z

src/v2/guide/single-file-components.md


-This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:
+Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certains vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent :


pour améliorer certaines vues

MachinisteWeb · 2017-01-14T09:01:15Z

src/v2/guide/single-file-components.md

-These specific languages are just examples. You could just as easily use Bublé, TypeScript, SCSS, PostCSS - or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules.
+Ces langages spécifiques ne sont que des exemples; vous pourriez tout aussi aisément utiliser Bublé, Typescript, SCSS, PostCSS - ou tout autre préprocesseur qui vous aide à être productif. Si vous utilisez Webpack avec `vue-loader`, vous aurez aussi un outil de premier choix pour les modules CSS.
+
+### Qu'en est-il de la séparation des préoccupations (Separation of concerns) ?


Le problème pour moi n'est pas tant de comprendre que « séparation des préoccupations » est la traduction de « Separation of concerns » car c'est très clair. Le problème pour moi est que « séparation des préoccupations » (même si le terme à déjà été traduit comme ceci) donne l'impression qu'on a des soucis, qu'on s'inquiète à propos de quelque chose. Hors ici, les préoccupations font bien référence à la séparation du HTML/CSS/JavaScript soit la séparation des languages, ou rôle en terme factuel et non émotionnel.

Bref tout ça pour dire que soit on met

Qu'en est-il de la séparation des rôles (Separation of concerns)

ou

Qu'en est-il de la séparation des langages (Separation of concerns)

mais que si on garde la traduction répandu (et surtout mot à mot) comme nous l'avons décidé, garder le terme entre parenthèse n'a pas d'utilité.

Soit seulement

Qu'en est-il de la séparation des préoccupations

exemple pour :

Les composants monofichiers

nous n'avons pas mis entre parenthèse la traduction car c'est la plus répandu.

Salut ! je suis d'accord que le mot préoccupations est un peu malheureux. Attention, "concern" ne se limite pas au langage, et on peut très bien avoir une "separation of concerns" au sein d'un même langage ( https://en.wikipedia.org/wiki/Separation_of_concerns ) . Toutefois séparation des rôles n'est jamais utilisé, séparations des responsabilités presque jamais (c'était ma proposition) contrairement à séparation des préoccupations; c'était l'unique motif de notre choix; du coup je pensais qu'on restait là dessus.

(pour ma part je trouve que "séparation des responsabilités" est le plus adapté en terme de sens strict et aussi parce qu'on trouve parfois ce mot échangés avec concern, comme ici : https://en.wikipedia.org/wiki/Single_responsibility_principle )

MachinisteWeb · 2017-01-14T09:05:29Z

src/v2/guide/single-file-components.md


-All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify.


Ici il y a un décalage de ligne par rapport au fichier original. Il faut bien veiller à garder les mêmes saut de ligne et nombre de ligne que l'original pour s'y retrouver dans le futur quand les fichiers originaux vont changer. C'est pourquoi le texte expliquant que la version fr est en cours est accolé à la première ligne.

oups pardon tu fais bien de le préciser, je n'avais pas fait attention à ça

MachinisteWeb · 2017-01-14T09:43:43Z

Pour info le terme Jade en Pug a été validé côté documentation officiel, c'est tout bon :)

yann-yinn · 2017-01-14T10:03:29Z

PS : pour le petit débat qui a ressurgi sur la traduction de "separation of concerns", vu que ça n'apparait pas dans la doc que deux fois, je propose qu'on se prenne pas la tête et laisser tel que c'est " séparation des préoccupations (separations of concerns)"; avec la trad entre parenthèses pour cette merge request; avec pour seuls arguments que c'est ce qui est le plus utilisé en français à ce jour et que vu qu'on a la trad entre parenthèses; le lecteur saura a coup sûr de quoi il s'agit; ce qui est le but principal.

Si certains sont chaud pour se débarasser de ce mot "préoccupations" qui est en effet un peu bizarre, on peut ouvrir une issue et faire une pull request ensuite pour que chacun donne son avis sur deux autres trads proposées :

séparation des rôles
séparation des responsabilités

Je ne met pas "séparation des langages" puisque c'est trop restrictif par rapport au sens de "separations of concerns".

Perso j'ai déjà passé trop de temps là dessus, pour deux occurences ça vaut pas le coup. Je suis ok pour tout ce qui sera validé par deux personne du moment qu'on garde (separations of concerns) dans les parenthèses

yann-yinn · 2017-01-14T10:05:36Z

PS : la page linguee pour "separation of concerns" : http://www.linguee.fr/anglais-francais/traduction/separation+of+concerns.html

MachinisteWeb · 2017-01-14T11:52:31Z

Encore des choses pour toi @sylvainpolletvillard ?

sylvainpolletvillard · 2017-01-14T12:00:52Z

Non c'est tout bon 👍

yann-yinn · 2017-01-14T12:21:29Z

MachinisteWeb · 2017-01-14T12:26:46Z

J'avais pas vu mais « séparation des responsabilités » c'est super top ! #18

yann-yinn added 6 commits January 8, 2017 12:13

traduction de la page mixins.md

3450a96

corrections typos

43e8de1

traduction de la page [v2/guide/single-file-components.md]

a487dfb

[v2/guide/single-file-components.md] - fix du titre

6d31263

[v2/guide/single-file-components.md] - suppression de l'encart de war…

4c946aa

…ning concernant la traduction française en cours

[v2/guide/single-file-components.md] - fix typos

15187a0

yann-yinn changed the title ~~Traductions de la page v2/guide/mixins.html~~ Traductions de la page v2/guide/mixins.html et v2/guide/mixins.html et [v2/guide/single-file-components.md] Jan 8, 2017

yann-yinn changed the title ~~Traductions de la page v2/guide/mixins.html et v2/guide/mixins.html et [v2/guide/single-file-components.md]~~ Traductions de la page "v2/guide/mixins.html" et "v2/guide/single-file-components.md" Jan 8, 2017

yann-yinn added 2 commits January 8, 2017 23:07

[v2/guide/single-file-components.md] - rajout d'une phrase manquante …

55b7261

…au début suite à erreur copier-coller

fix typo

017cd6e

MachinisteWeb requested review from sylvainpolletvillard and MachinisteWeb January 9, 2017 08:20

MachinisteWeb assigned MachinisteWeb and yann-yinn and unassigned MachinisteWeb Jan 9, 2017

yann-yinn added 2 commits January 9, 2017 13:33

[mixins.md] traduction plus précise du premier paragraphe

d0e61dd

[mixins.md] réutilisation du mot contenir pour 'contain'

16de468

yann-yinn added 4 commits January 9, 2017 13:38

[mixins.md] traduction plus précise du deuxieme paragraphe

0373669

[mixins.md] traduction plus précise du troisieme paragraphe

6c83c0e

[mixins.md] traduction plus précise du 4eme paragraphe

3712eb9

[mixins.md] traduction plus précises des derniers paragraphes

daffaf5

yann-yinn added 4 commits January 9, 2017 17:39

single-file-components - réecriture plus proche de l'originale

fa5e8d1

single-file-components.md : réecriture plus proche de l'original

72c7f1d

single-file-components.md : fin réecriture plus proche de l'original

27ad788

[v2/guide/single-file-components.md] - fix dernier paragraphe - fin d…

3629ab6

…euxieme relecture

MachinisteWeb mentioned this pull request Jan 9, 2017

Pages en cours de traduction #3

Open

sylvainpolletvillard requested changes Jan 9, 2017

View reviewed changes

yann-yinn added 3 commits January 9, 2017 23:37

[mixins.md] suppression de l'encart concernant la traduction

0dc42e3

[mixins.md] relecture sylvain

9c3c9ec

[single-file-components.md] relecture Sylvain

f115652

MachinisteWeb requested changes Jan 10, 2017

View reviewed changes

single-file-components.md: relecture Haeresis

94f57ed

MachinisteWeb requested changes Jan 11, 2017

View reviewed changes

single-file-components.md - anciennement Jade

fe716c5

MachinisteWeb approved these changes Jan 11, 2017

View reviewed changes

MachinisteWeb requested changes Jan 14, 2017

View reviewed changes

yann-yinn added 2 commits January 14, 2017 10:50

mixins.md : traduction commentaire manquant. single-file-components.md

c5153c2

Merge branch 'master' into master

0a700e1

MachinisteWeb approved these changes Jan 14, 2017

View reviewed changes

sylvainpolletvillard approved these changes Jan 14, 2017

View reviewed changes

MachinisteWeb merged commit 433762c into vuejs-fr:master Jan 14, 2017


		<p class="tip">Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).</p>Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be "mixed" into the component's own options.
		<p class="tip">Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).</p>


		Example:
		Les mixins offrent une manière flexible de créer des fonctionnalités réutilisables par les composants de Vue. Un objet mixin peut contenir toute option valide pour un composant. Quand un composant utilise un mixin, toutes les options du mixin seront "fusionnées" avec les options du composant.


		You can also apply a mixin globally. Use caution! Once you apply a mixin globally, it will affect every Vue instance created afterwards. When used properly, this can be used to inject processing logic for custom options:
		Vous pouvez aussi appliquer un mixin de manière globale. A utiliser avec prudence ! Une fois que vous appliquez un mixin globalement, il modifiera toutes les instances de vues créees ensuite. Bien utilisé, cela peut être exploité pour injecter de la logique pour des options custom :


		### For Users New to Module Build Systems in JavaScript
		Avec les composants `.vue`, nous entrons de plain-pied dans le domaine des applications Javascript avancées. Cela implique d'apprendre à utiliser quelques nouveaux outils si vous ne les connaissez pas déjà :


		- Node Package Manager (NPM): Read the [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) through section _10: Uninstalling global packages_.
		- Modern JavaScript with ES2015/16: Lisez le guide Babel [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). Vous n'avez pas besoin de mémoriser chacune des fonctionnalités maintenant, mais gardez cette page en référence pour pouvoir y revenir.


		- Modern JavaScript with ES2015/16: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don't have to memorize every feature right now, but keep this page as a reference you can come back to.
		Une fois que vous aurez pris une journée pour vous plonger dans ces ressources, nous vous recommandons d'essayer le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple). Suivez les instructions et vous devriez avoir en un clin d'oeil un projet Vue avec des composants `.vue` , ES2015 et du hot-reloading !


		The template uses [Webpack](https://webpack.github.io/), a module bundler that takes a number of "modules" and then bundles them into your final application. To learn more about Webpack itself, [this video](https://www.youtube.com/watch?v=WQue1AN93YU) offers a good intro. Once you get past the basics, you might also want to check out [this advanced Webpack course on Egghead.io](https://egghead.io/courses/using-webpack-for-production-javascript-applications).
		Dans Webpack, chaque module peut être transformé par un "loader" avant d'être inclus dans le paquet, et Vue offre le plugin [vue-loader](https://github.com/vuejs/vue-loader) pour traduire les composants monofichier `.vue`. Le template de projet [webpack-simple](https://github.com/vuejs-templates/webpack-simple) a déjà tout configuré pour vous, mais si vous souhaitez en apprendre plus sur le fonctionnement des composants `.vue` avec Webpack, vous pouvez lire [la documentation de vue-loader](https://vue-loader.vuejs.org).


		### For Advanced Users
		Que vous préfériez Webpack ou Browserify, nous avons des templates documentés à la fois pour les projets simples et les projets plus complexes. Nous vous recommandans d'explorer [github.com/vuejs-templates](https://github.com/vuejs-templates), de choisir un template qui vous convient et de suivre les instructions du README pour générer un nouveau projet avec [vue-cli](https://github.com/vuejs/vue-cli).


		When a mixin and the component itself contain overlapping options, they will be "merged" using appropriate strategies. For example, hook functions with the same name are merged into an array so that all of them will be called. In addition, mixin hooks will be called before the component's own hooks:
		Quand un mixin et un composant définissent les mêmes options, elles seront fusionnées en utilisant la stratégie appropriée. Par exemple, les fonctions de hook avec le même nom seront fusionnées dans un tableau afin qu'elles soient toutes appelées. De plus, les hooks des mixins seront appelés avant les hooks du composant:


		Here's a simple example of a file we'll call `Hello.vue`:
		Tous ces désavantages sont résolus par les composants monofichiers avec une extension `.vue`, rendus possibles par les outils de build tels que Webpack ou Browserify.


		As promised, we can also use preprocessors such as Jade, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components.
		Et comme promis, nous pouvons aussi utiliser des préprocesseurs tels que Jade, Babel (avec les modules ES2015), et Stylus pour obtenir des composants plus lisibles et plus riches en fonctionnalités.


		### What About Separation of Concerns?
		Une chose importante à souligner est que la séparation des préoccupations n'est pas identique à la séparation des fichiers. Dans le développement des interfaces utilisateur modernes, nous avons constaté que plutôt que de diviser tout notre code en trois grosses couches distinctes inter-dépendantes, il était plus intuitif de le diviser en petits composants faiblement couplés, et de les combiner. Au sein d'un composant, son template, sa logique et ses styles sont intrinsèquement couplés, et les réunir rend en réalité le composant plus cohérent et facile à maintenir.


		With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already:
		- Node Package Manager (NPM): Lisez le [Getting Started guide](https://docs.npmjs.com/getting-started/what-is-npm) section _10: Uninstalling global packages_.


		This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent:
		Cela peut très bien fonctionner pour des petits projets ou des projets de taille moyenne, pour lesquels JavaScript est utilisé uniquement pour améliorer certains vues. Cependant, pour des projets plus complexes, ou bien quand votre front-end est entièrement généré par JavaScript, des désavantages se manifestent :


		All of these are solved by single-file components with a `.vue` extension, made possible with build tools such as Webpack or Browserify.

Traductions de la page "v2/guide/mixins.html" et "v2/guide/single-file-components.md" #10

Traductions de la page "v2/guide/mixins.html" et "v2/guide/single-file-components.md" #10

Conversation

yann-yinn commented Jan 8, 2017 • edited Loading

yann-yinn commented Jan 9, 2017

yann-yinn commented Jan 9, 2017

yann-yinn commented Jan 9, 2017

yann-yinn commented Jan 9, 2017

sylvainpolletvillard left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yann-yinn commented Jan 9, 2017

MachinisteWeb left a comment

Choose a reason for hiding this comment

MachinisteWeb Jan 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb Jan 10, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yann-yinn commented Jan 10, 2017

MachinisteWeb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Qu'en est-il de la séparation des rôles (Separation of concerns)

Qu'en est-il de la séparation des langages (Separation of concerns)

Qu'en est-il de la séparation des préoccupations

Les composants monofichiers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MachinisteWeb commented Jan 14, 2017

yann-yinn commented Jan 14, 2017 • edited Loading

yann-yinn commented Jan 14, 2017

MachinisteWeb commented Jan 14, 2017

sylvainpolletvillard commented Jan 14, 2017

yann-yinn commented Jan 14, 2017

MachinisteWeb commented Jan 14, 2017

yann-yinn commented Jan 8, 2017 •

edited

Loading

MachinisteWeb Jan 10, 2017 •

edited

Loading

MachinisteWeb Jan 10, 2017 •

edited

Loading

yann-yinn commented Jan 14, 2017 •

edited

Loading