Por que você deve escolher Angular ou Vue em vez de React para seu novo aplicativo da Web

Como alguém que navegou pelas complexidades do React, Angular e Vue ao longo da minha carreira, passei a apreciar as diferenças sutis entre essas estruturas de front-end populares. Neste artigo, descreverei por que optar por Angular ou Vue pode oferecer uma abordagem mais estruturada e escalonável em comparação com React para seu próximo projeto de aplicação web.

1. Modelos

Os modelos em Angular e Vue oferecem uma separação clara de preocupações entre lógica e apresentação, o que promove um código mais limpo e uma manutenção mais fácil. Ao contrário do JSX do React, onde a lógica JavaScript pode ser interligada com marcação, os modelos Angular e Vue impõem uma separação estrita. Vamos ilustrar isso com exemplos:

Reagir JSX:

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

Modelo Angular:

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

Modelo Vue:

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

2. Controles de formulário de vinculação:

Angular e Vue fornecem maneiras simples de vincular controles de formulário, facilitando o gerenciamento de dados de formulário com vários campos. Vamos criar um objeto de formulário com quatro campos: entrada de texto, botão de opção, caixa de seleção e menu suspenso de seleção.

Angular:

 @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: '', }; }

Ver:

 <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>

Reagir:

 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> ); };

No React, sem usar bibliotecas como Formik ou React Hook Form, o gerenciamento do estado do formulário requer a configuração de variáveis de estado com useState e a gravação de uma função manipuladora para atualizar o estado sempre que os campos do formulário mudam. Isso pode adicionar código padrão e aumentar a complexidade, especialmente para formulários com vários campos. Embora as bibliotecas de formulários ofereçam recursos avançados de manipulação de formulários, integrá-las a um projeto requer configuração e aprendizado adicionais.

Na minha opinião, os desenvolvedores podem não querer perder tempo escolhendo e aprendendo documentação adicional para bibliotecas de formulários, especialmente quando o manuseio de formulários é uma tarefa típica do dia a dia para desenvolvedores front-end. Os recursos integrados de manipulação de formulários do Angular e do Vue oferecem uma abordagem mais simples e integrada, permitindo que os desenvolvedores se concentrem na construção de seus aplicativos sem a necessidade de dependências adicionais.

3. Acessando componentes filhos:

ViewChild do Angular, refs do Vue e useImperativeHandle do React são mecanismos para interagir com componentes filhos. Embora todos os três forneçam maneiras de conseguir isso, Angular e Vue oferecem abordagens mais limpas e intuitivas em comparação com useImperativeHandle do React, que é menos recomendado pela documentação do React. Aqui estão alguns exemplos:

Angular:

 @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(); } }

Ver:

 <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>

Reagir:

 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> ); };

No React, embora o paradigma do componente funcional não forneça inerentemente "métodos" como componentes da classe Angular ou componentes Vue com propriedade "métodos", é desejada uma abordagem mais simples para acessar métodos filhos sem o gancho useImperativeHandle . useImperativeHandle pode ser menos claro e requer agrupar o componente filho na função forwardRef . Ao contrário do Angular e do Vue, onde você pode acessar métodos filhos sem alterar o próprio componente filho, o React requer essa configuração adicional para obter funcionalidade semelhante.

Também quero observar sobre o Vue. A API Composition é uma tecnologia relativamente nova no Vue e o acesso aos componentes filhos é um pouco diferente do que descrevi acima. Mas presumo que nem todas as equipes ainda implementaram a API Composition em seus projetos e usam a abordagem que descrevi.

Descrevi três razões pelas quais, na minha opinião, você deveria escolher Angular ou Vue em vez de React.