Pourquoi devriez-vous choisir Angular ou Vue plutôt que React pour votre nouvelle application Web

En tant que personne ayant parcouru les subtilités de React, Angular et Vue tout au long de ma carrière, j'en suis venu à apprécier les différences nuancées entre ces frameworks frontend populaires. Dans cet article, je vais expliquer pourquoi opter pour Angular ou Vue pourrait offrir une approche plus structurée et évolutive par rapport à React pour votre prochain projet d'application Web.

1. Modèles

Les modèles dans Angular et Vue offrent une séparation claire des préoccupations entre la logique et la présentation, ce qui favorise un code plus propre et une maintenance plus facile. Contrairement au JSX de React, où la logique JavaScript peut être liée au balisage, les modèles Angular et Vue imposent une séparation stricte. Illustrons cela avec des exemples :

Réagissez à JSX :

 return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> );

Modèle angulaire :

 <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div>

Modèle de vue :

 <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div>

2. Contrôles de formulaire contraignants :

Angular et Vue offrent des moyens simples de lier les contrôles de formulaire, ce qui facilite la gestion des données de formulaire avec plusieurs champs. Créons un objet de formulaire avec quatre champs : saisie de texte, bouton radio, case à cocher et liste déroulante de sélection.

Angulaire:

 @Component({ selector: 'app-form', template: ` <form> <input type="text" [(ngModel)]="formData.text" placeholder="Text Input"> <br> <input type="radio" [(ngModel)]="formData.radio" value="option1"> Option 1 <input type="radio" [(ngModel)]="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" [(ngModel)]="formData.checkbox"> Checkbox <br> <select [(ngModel)]="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> `, }) export class FormComponent { formData = { text: '', radio: '', checkbox: false, select: '', }; }

Vue :

 <template> <form> <input type="text" v-model="formData.text" placeholder="Text Input"> <br> <input type="radio" v-model="formData.radio" value="option1"> Option 1 <input type="radio" v-model="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" v-model="formData.checkbox"> Checkbox <br> <select v-model="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </template> <script> export default { data() { return { formData: { text: '', radio: '', checkbox: false, select: '', }, }; }, }; </script>

Réagir:

 const FormComponent = () => { const [formData, setFormData] = useState({ text: '', radio: '', checkbox: false, select: '', }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value, }); }; return ( <form> <input type="text" name="text" value={formData.text} onChange={handleChange} placeholder="Text Input" /> <br /> <input type="radio" name="radio" value="option1" checked={formData.radio === 'option1'} onChange={handleChange} /> Option 1 <input type="radio" name="radio" value="option2" checked={formData.radio === 'option2'} onChange={handleChange} /> Option 2 <br /> <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} /> Checkbox <br /> <select name="select" value={formData.select} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> ); };

Dans React, sans utiliser de bibliothèques comme Formik ou React Hook Form, la gestion de l'état du formulaire nécessite la configuration de variables d'état avec useState et l'écriture d'une fonction de gestionnaire pour mettre à jour l'état chaque fois que les champs du formulaire changent. Cela peut ajouter du code passe-partout et augmenter la complexité, en particulier pour les formulaires comportant plusieurs champs. Bien que les bibliothèques de formulaires offrent des fonctionnalités avancées de gestion de formulaires, leur intégration dans un projet nécessite une configuration et un apprentissage supplémentaires.

À mon avis, les développeurs ne voudront peut-être pas passer du temps à choisir et à apprendre une documentation supplémentaire pour les bibliothèques de formulaires, en particulier lorsque la gestion des formulaires est une tâche quotidienne typique pour les développeurs frontend. Les capacités intégrées de gestion de formulaires d'Angular et de Vue offrent une approche plus simple et plus intégrée, permettant aux développeurs de se concentrer sur la création de leurs applications sans avoir besoin de dépendances supplémentaires.

3. Accès aux composants enfants :

ViewChild d'Angular, les références de Vue et useImperativeHandle de React sont des mécanismes permettant d'interagir avec les composants enfants. Bien que les trois proposent des moyens d'y parvenir, Angular et Vue proposent des approches plus propres et plus intuitives par rapport à useImperativeHandle de React, qui est moins recommandée par la documentation de React. Voici des exemples :

Angulaire:

 @Component({ selector: 'app-parent', template: ` <app-child #child></app-child> <button (click)="callChildMethod()">Call Child Method</button> `, }) export class ParentComponent { @ViewChild('child') childComponent: ChildComponent; callChildMethod() { this.childComponent.someMethod(); } }

Vue :

 <template> <div> <child ref="child"></child> <button @click="callChildMethod">Call Child Method</button> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { callChildMethod() { this.$refs.child.someMethod(); }, }, }; </script>

Réagir:

 const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ someMethod() { // Method logic }, })); return ( <p>I am a child</p> ); }); const ParentComponent = () => { const childRef = useRef(null); // Access child component's method const callChildMethod = () => { childRef.current?.someMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); };

Dans React, bien que le paradigme des composants fonctionnels ne fournisse pas intrinsèquement de « méthodes » comme les composants de classe Angular ou les composants Vue avec la propriété « méthodes », une approche plus simple pour accéder aux méthodes enfants sans le hook useImperativeHandle est souhaitée. useImperativeHandle peut être moins clair et nécessite d'encapsuler le composant enfant dans la fonction forwardRef . Contrairement à Angular et Vue, où vous pouvez accéder aux méthodes enfants sans modifier le composant enfant lui-même, React nécessite cette configuration supplémentaire pour obtenir des fonctionnalités similaires.

Je veux également parler de Vue. L'API Composition est une technologie relativement nouvelle dans Vue et l'accès aux composants enfants est un peu différent de ce que j'ai décrit ci-dessus. Mais je suppose que toutes les équipes n'ont pas encore implémenté l'API Composition dans leurs projets et n'utilisent pas l'approche que j'ai décrite.

J'ai décrit trois raisons pour lesquelles, à mon avis, vous devriez choisir Angular ou Vue au lieu de React.